Начав вести свой блог, спустя месяц я столкнулся с проблемой. Так как я довольно часто пишу уроки для 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. Не паникуте нужно просто перейти в настройки постоянных ссылок и нажать сохранить изменения (или обновить) и все заработает.
Спасибо за урок! Точно этого не хватало, потому, что сама теперь часто пополняю блог новыми уроками. Рада, что случайно наткнулась в сети на этот очень полезный блог. Теперь буду читать)
Тигран, попробуйте таким методом создать произвольные поля:
add_action( 'init', 'create_post_type' ); function create_post_type() { register_post_type( 'demonstration', array( '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' => 'Демонстрация' ), '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') ) ); }должно помочь
Он выдает ошибку! Или просто его нет сразу после добавления первого кода в 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