Для начала объясню свою задачу — мне нужна уникальная страничка с возможностью подключать CSS, JavaScript, HTML и все что в голову может прийти.
Поехали!
Корректируем файл 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, нас интересует шаблоны связанные с одиночной записью — 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. Не паникуте нужно просто перейти в настройки постоянных ссылок и нажать сохранить изменения (или обновить) и все заработает.
and then Add to Home Screen.