Как сделать демонстрацию урока в WordPress

Начав вести свой блог, спустя месяц я столкнулся с проблемой. Так как я довольно часто пишу уроки для WordPress мне понадобились кнопки «Демо» для просмотра урока и «Исходники» чтобы пользователь мог скачать исходный код урока. Да ничего такого сложного и для разработчика тем и уроков WordPress нужно всего лишь чуточку фантазии и все будет готово.

Наверняка на зарубежных сайтах, да и на наших родных Вы видели такие кнопочки

Как сделать кнопки Демо и Исходники для урока в WordPress. HowToMake - Дизайн и разработка сайтов

Созданием этих кнопок для 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');

Такой вот простой код добавит в основное меню Вашей панели управления сайтом:

Как сделать демонстрацию урока в WordPress. HowToMake - Дизайн и разработка сайтов

Сори, скриншот с версии 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. Потом стандартным методом как добавлять изображения, закачиваем получившийся архив в статью с уроком:

Как сделать кнопки Демо и Исходники для урока в WordPress. HowToMake - Дизайн и разработка сайтов

При загрузке архива нам понадобится всего лишь скопировать ссылку на архив и нажать кнопку «Сохранить все изменения».

Создадим кнопки с помощью 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. Не паникуте нужно просто перейти в настройки постоянных ссылок и нажать сохранить изменения (или обновить) и все заработает.

Добавить комментарий:

Комментарии
  1. Спасибо за урок! Точно этого не хватало, потому, что сама теперь часто пополняю блог новыми уроками. Рада, что случайно наткнулась в сети на этот очень полезный блог. Теперь буду читать)

  2. JAH:

    Тигран, попробуйте таким методом создать произвольные поля:

    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')
        )
      );
    }
    

    должно помочь

  3. Он выдает ошибку! Или просто его нет сразу после добавления первого кода в functions.php
    Fatal error: Call to undefined function add_action()

  4. JAH:

    Тигран, уточните пожалуйста на каком этапе не появляется пункт «Демонстрация». По сути то он появляется после добавления первого куска кода этой статьи в файл functions.php

  5. Тигран:

    Не получается добавить пункт меню «Демонстрации» WordPress 3.4.2.

  6. Спасибо, интересно. надо будет попробовать 😉
    з.ы. интересный блог 😉

  7. JAH:

    Verty, Напиши свой mail, потому что ответилтебе на почту, но письмо вернулось (некрректный адрес)

  8. а вы можете знять видео урок Как сделать демонстрацию урока в WordPress у меня не получається сделает это

  9. JAH:

    Verty, у меня для вывода кода стоит плагин WP-Syntax, только я его модифицировал под свои нужды), можешь погуглить решений много

  10. JAH:

    Макс, да работает отлично)

  11. как изложить например код какой-то на страницу как у вас этот код
    // Пользовательский тип записей//

  12. версии WordPress 3.4.1
    будет работать

  13. Veaceslav:

    Заранее спасибо!

  14. Veaceslav:

    Автор пишите на емаил. Если что можно будет поговорить по аське

  15. Veaceslav:

    Не получается у меня! Помогите пожалуйста…

    Определимся, что в тело записи вместо статьи мы будем публиковать исходный HTML код с демонстрацией урока, естественно в тегах нам нужно будет подключать JavaScript и CSS. Исходя из наших потребностей начнем создавать наш шаблон.

    В какое тело записи? в новую демонстрацию или новую запись?

    Чтобы вставить шорткод, нужно перейти в корневой каталог -> wp-includes -> js -> открыть для редактирования файл quicktags.js.

    Найти код первой кнопки b
    1

    edButtons[edButtons.length]=new edButton(«ed_strong»,»b»,»»,»»,»b»);

    Не могу найти я эту строку. А если ставлю в другое место, то не отображается

  16. А шорт-код для кнопок можно сделать с помощью Shortcodes Pro. Лучше, потому что, можно задавать базовые атрибуты и их базовое значение.))

  17. В принципе можно загружать файлы в папку с постом и включать их в демо — страницу. Но как быть с ссылками в самых демо — файлах? Например в css или js.

  18. JAH:

    Урок обновил, спасибо Максу)
    тепрь все элементы в админ панели для пользовательского типа записей рабочие

    протестировал на версии WordPress 3.3

  19. JAH:

    вот это если добавить то все фурычит)))

  20. JAH:
    'supports' => array( 'title', 'editor', 'author', 'thumbnail', 'excerpt', 'trackbacks', 'custom-fields', 'comments', 'revisions', 'post-formats' )
  21. RaZik:

    Запарился уже искать)) Не могу пока ничего придумать. Буду вручную загружать демки в каталог demo. Пока своего не много, буду жить так)))

  22. JAH:

    в том то и дело что не знает и никто не пишет, я думал голову сломаю пока придумал что делать с этим демо)

    ну тебе как вариант можно попробовать сделать через «формат» записи, но там минус что нельзя свой js и css и тег head разный ставить, как сделать можно посмотреть в файле showcase.php темы twentyEleven

  23. Max:

    Ок. Спасибо! Очень интересная тема. Но почему то google решения не знает))))

  24. JAH:

    О, Макс, да я сам тока заметил что не работает меню и вложения не добавляются, пока работы много но разберемся)

    я тебе на почту напишу когда что-то придумаю

  25. Max:

    Добрый день!
    Статья то что нужно! Но при переходе на демо страницу выдавало ошибку 404. Исправил в файле функции добавляемого блока строчку rewrite на ‘rewrite’ => array(‘slug’ => ‘demo’).
    Но подскажите, как сделать что бы включаемые файлы в демо страницу располагались в том же каталоге, что и демо страница.
    Например: сайт/demo/название_демо/название_включаемого_файла
    Спасибо!

  26. JAH:

    Забыл уточнить, метод тестировался на WordPress 3.2.1