Начав вести свой блог, спустя месяц я столкнулся с проблемой. Так как я довольно часто пишу уроки для WordPress мне понадобились кнопки «Демо» для просмотра урока и «Исходники» чтобы пользователь мог скачать исходный код урока. Да ничего такого сложного и для разработчика тем и уроков WordPress нужно всего лишь чуточку фантазии и все будет готово.
Наверняка на зарубежных сайтах, да и на наших родных Вы видели такие кнопочки
Созданием этих кнопок для WordPress мы сегодня и займемся.
Вступление.
Для начала объясню свою задачу — мне нужна уникальная страничка с возможностью подключать CSS, JavaScript, HTML
и все что в голову может прийти.
Первым делом, я воспользовался советом специалиста в этой области, использовать attachment
— все бы не плохо но создается всего лишь страничка вписанная в дизайн существующей темы на которой можно что-то скачать или посмотреть видео, изображение или прослушать аудио. Для меня это не подходило, одним словом и attachment
отпали.
Так как с attachment'ами
не срослось, то я решил пользоваться шаблоном страницы page-ID
. Сделал шаблон, вставил демонстрацию урока, и все заработало! Удача повернулась ко мне лицом, НО есть существенное НО. Через 50 уроков файлов темы будет реально много и очень явно, что такое решение тоже не подходит, это расстроило.
Пораскинув мозгами еще один день я понял, что решение ЕСТЬ и называется оно «пользовательские типы записей» — это очень круто и логично, как я до этого раньше не дошел.
Поехали!
Корректируем файл functions.php
Для того, чтобы начать работу с пользовательскими типами записей, нужно прочитать и понять много информации, но Вы можете пропустить этот этап и просто добавить в конец файла functions.php
следующий код
// Пользовательский тип записей function demo_custom_init() { $labels = array( 'name' => _x('Демонстрации', 'имя типа записей'), 'singular_name' => _x('Демонстрация', 'имя типа записей'), 'add_new' => _x('Добавить новую демонстрацию', 'project'), 'add_new_item' => __('Добавить новую демонстрацию'), 'edit_item' => __('Редактировать демонстрацию'), 'new_item' => __('Новая демонстрацию'), 'view_item' => __('Просмотр демонстрации'), 'search_items' => __('Поиск демонстрации'), 'not_found' => __('Демонстрация не найден'), 'not_found_in_trash' => __('Демонстрация не найден в корзине'), 'parent_item_colon' => '', 'menu_name' => 'Демонстрация' ); $args = array( 'labels' => $labels, 'public' => true, 'publicly_queryable' => true, 'show_ui' => true, 'show_in_menu' => true, 'query_var' => true, 'rewrite' => true, 'capability_type' => 'post', 'has_archive' => true, 'hierarchical' => false, 'menu_position' => null, 'supports' => array('title', 'editor', 'author', 'thumbnail', 'excerpt', 'trackbacks', 'custom-fields', 'comments', 'revisions', 'post-formats') ); // Регистрируем пользовательский тип записей. register_post_type('demo',$args); } // Создаем пользовательский тип записей add_action('init', 'demo_custom_init');
Такой вот простой код добавит в основное меню Вашей панели управления сайтом:
Сори, скриншот с версии 3.0 — лень было переставлять 🙂
Создаем страницу демонстрации
Опять возвращаемся к иерархии WordPress, нас интересует шаблоны связанные с одиночной записью — single.php
. Если Вы изучали кодекс WordPress, то должны знать, что для вывода пользовательских записей можно использовать шаблон одиночной записи и для наших демонстраций шаблон будет называться single-demo.php
.
Определимся, что в тело записи вместо статьи мы будем публиковать исходный HTML код с демонстрацией урока, естественно в тегах <head></head>
нам нужно будет подключать JavaScript
и CSS
. Исходя из наших потребностей начнем создавать наш шаблон.
Открываем наш любимый Notepad++ и вставим следующий код:
<!Doctype html> <html> <?php while ( have_posts() ) : the_post(); ?> <?php remove_filter ('the_content', 'wpautop'); the_content(); ?> <?php endwhile; ?> </html>
Поясню, что тут написано.
Объявляем Doctype
— используем HTML5
все-таки 21 век.
Запускаем главный цикл WordPress Loop и в нем основной прикол! По умолчанию функция the_content()
генерирует код, который автоматом обрамляет в тег <p>
, что наносит ущерб нашему коду с демонстрацией, поэтому перед ее вызовом мы должны использовать волшебный хук remove_filter('the_content', 'wpautop')
, который удалит все ненужные абзацы и наша демонстрация будет отображаться великолепно!
Закрываем тег html
.
Всё, наши страницы с демонстрацией готовы!
То есть вставляем код демонстрации публикуем и запомним ссылку на демонстрацию урока, она нам понадобится для вставки в сам урок на кнопочку «Демо».
Создаем исходники
Собираем весь исходный код в одну папку, архивируем в формат zip
. Потом стандартным методом как добавлять изображения, закачиваем получившийся архив в статью с уроком:
При загрузке архива нам понадобится всего лишь скопировать ссылку на архив и нажать кнопку «Сохранить все изменения».
Создадим кнопки с помощью HTML и CSS
Эти кнопочки «Демо» и «Исходники» нам понадобятся для вывода на станице с уроком.
Для начала создадим блок с ссылками на страницу с демонстрации урока и на скачивание исходного код урока, обе ссылки нам уже известны:
<div class="prevu"> <a href="#">Демо</a> <a href="#">Исходники</a> </div>
Нам остается только вставить ссылки на страницу демонстрации и архив исходников.
Теперь займемся стилями нашего блока, открываем файл style.ccs
Вашей темы и вносим в него следующий код:
.prevu { text-align: center; width: 500px; margin: 20px auto; } .prevu a { font: 18px Tahoma; color: #265504; text-decoration: none; text-transform: uppercase; text-shadow: #fff 1px 1px 1px; padding: 7px 15px; margin-right: 20px; background: #73c231; border: 2px solid #003400; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; } .prevu a:hover { color: #003400; }
Возможно понадобится объявлять стили используя связку #content .prevu { }
вместо .prevu { }
И кнопки работают и показывают нам наш урок.
Заключение
В этом уроке я Вам продемонстрировал самый простой способ сделать страницу с демонстрацией Ваших уроков для посетителей. Постараюсь в ближайшее время создать демонстрации на все свои опубликованные уроки, спасибо за внимание, не стесняясь задавайте вопросы в комментариях!
* Дополнение
Иногда получается что при добавлении новой демонстрации при ее просмотре Вы видете ошибку 404. Не паникуте нужно просто перейти в настройки постоянных ссылок и нажать сохранить изменения (или обновить) и все заработает.
Спасибо за урок! Точно этого не хватало, потому, что сама теперь часто пополняю блог новыми уроками. Рада, что случайно наткнулась в сети на этот очень полезный блог. Теперь буду читать)
Тигран, попробуйте таким методом создать произвольные поля:
должно помочь
Он выдает ошибку! Или просто его нет сразу после добавления первого кода в functions.php
Fatal error: Call to undefined function add_action()
Тигран, уточните пожалуйста на каком этапе не появляется пункт «Демонстрация». По сути то он появляется после добавления первого куска кода этой статьи в файл functions.php
Не получается добавить пункт меню «Демонстрации» WordPress 3.4.2.
Спасибо, интересно. надо будет попробовать 😉
з.ы. интересный блог 😉
Verty, Напиши свой mail, потому что ответилтебе на почту, но письмо вернулось (некрректный адрес)
а вы можете знять видео урок Как сделать демонстрацию урока в WordPress у меня не получається сделает это
Verty, у меня для вывода кода стоит плагин WP-Syntax, только я его модифицировал под свои нужды), можешь погуглить решений много
Макс, да работает отлично)
как изложить например код какой-то на страницу как у вас этот код
// Пользовательский тип записей//
версии WordPress 3.4.1
будет работать
Заранее спасибо!
Автор пишите на емаил. Если что можно будет поговорить по аське
Не получается у меня! Помогите пожалуйста…
Определимся, что в тело записи вместо статьи мы будем публиковать исходный HTML код с демонстрацией урока, естественно в тегах нам нужно будет подключать JavaScript и CSS. Исходя из наших потребностей начнем создавать наш шаблон.
В какое тело записи? в новую демонстрацию или новую запись?
Чтобы вставить шорткод, нужно перейти в корневой каталог -> wp-includes -> js -> открыть для редактирования файл quicktags.js.
Найти код первой кнопки b
1
edButtons[edButtons.length]=new edButton(«ed_strong»,»b»,»»,»»,»b»);
Не могу найти я эту строку. А если ставлю в другое место, то не отображается
А шорт-код для кнопок можно сделать с помощью Shortcodes Pro. Лучше, потому что, можно задавать базовые атрибуты и их базовое значение.))
В принципе можно загружать файлы в папку с постом и включать их в демо — страницу. Но как быть с ссылками в самых демо — файлах? Например в css или js.
Урок обновил, спасибо Максу)
тепрь все элементы в админ панели для пользовательского типа записей рабочие
протестировал на версии WordPress 3.3
вот это если добавить то все фурычит)))
и еще полезная ссылка
http://core.trac.wordpress.org/browser/tags/3.3/wp-includes/post.php
Запарился уже искать)) Не могу пока ничего придумать. Буду вручную загружать демки в каталог demo. Пока своего не много, буду жить так)))
в том то и дело что не знает и никто не пишет, я думал голову сломаю пока придумал что делать с этим демо)
ну тебе как вариант можно попробовать сделать через «формат» записи, но там минус что нельзя свой js и css и тег head разный ставить, как сделать можно посмотреть в файле showcase.php темы twentyEleven
Ок. Спасибо! Очень интересная тема. Но почему то google решения не знает))))
О, Макс, да я сам тока заметил что не работает меню и вложения не добавляются, пока работы много но разберемся)
я тебе на почту напишу когда что-то придумаю
Добрый день!
Статья то что нужно! Но при переходе на демо страницу выдавало ошибку 404. Исправил в файле функции добавляемого блока строчку rewrite на ‘rewrite’ => array(‘slug’ => ‘demo’).
Но подскажите, как сделать что бы включаемые файлы в демо страницу располагались в том же каталоге, что и демо страница.
Например: сайт/demo/название_демо/название_включаемого_файла
Спасибо!
Забыл уточнить, метод тестировался на WordPress 3.2.1