Начав вести свой блог, спустя месяц я столкнулся с проблемой. Так как я довольно часто пишу уроки для 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. JAH

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

  2. Max

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

  3. JAH

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

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

  4. Max

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

  5. JAH

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

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

  6. RaZik

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

  7. JAH
    'supports' => array( 'title', 'editor', 'author', 'thumbnail', 'excerpt', 'trackbacks', 'custom-fields', 'comments', 'revisions', 'post-formats' )
  8. JAH
  9. JAH

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

  10. JAH

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

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

  11. RaZik

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

  12. RaZik

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

  13. Veaceslav

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

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

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

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

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

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

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

  14. Veaceslav

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

  15. Veaceslav

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

  16. макс

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

  17. verty

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

  18. JAH

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

  19. JAH

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

  20. verty

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

  21. JAH

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

  22. УтБ

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

  23. Тигран

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

  24. JAH

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

  25. Тигран

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

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

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

  27. fluer

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