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

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

Для начала объясню свою задачу — мне нужна уникальная страничка с возможностью подключать CSS, JavaScript, HTML и все что в голову может прийти.

Поехали!

Корректируем файл functions.php

Для того, чтобы начать работу с пользовательскими типами записей, нужно прочитать и понять много информации, но Вы можете пропустить этот этап и просто добавить в конец файла functions.php следующий код

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

Создаем страницу демонстрации

Опять возвращаемся к иерархии WordPress, нас интересует шаблоны связанные с одиночной записью — single.php. Если Вы изучали кодекс WordPress, то должны знать, что для вывода пользовательских записей можно использовать шаблон одиночной записи и для наших демонстраций шаблон будет называться single-demo.php.

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

Открываем наш любимый Notepad++ и вставим следующий код:

Поясню, что тут написано.

Объявляем Doctype — используем HTML5 все-таки 21 век.

Запускаем главный цикл WordPress Loop и в нем основной прикол! По умолчанию функция the_content() генерирует код, который автоматом обрамляет в тег <p>, что наносит ущерб нашему коду с демонстрацией, поэтому перед ее вызовом мы должны использовать волшебный хук remove_filter(‘the_content’, ‘wpautop’), который удалит все ненужные абзацы и наша демонстрация будет отображаться великолепно!

Закрываем тег html.

Всё, наши страницы с демонстрацией готовы!

То есть вставляем код демонстрации публикуем и запомним ссылку на демонстрацию урока, она нам понадобится для вставки в сам урок на кнопочку «Демо».

Создаем исходники

Собираем весь исходный код в одну папку, архивируем в формат zip. Потом стандартным методом как добавлять изображения, закачиваем получившийся архив в статью с уроком:

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

Создадим кнопки с помощью HTML и CSS

Эти кнопочки «Демо» и «Исходники» нам понадобятся для вывода на станице с уроком.

Для начала создадим блок с ссылками на страницу с демонстрации урока и на скачивание исходного код урока, обе ссылки нам уже известны:

Нам остается только вставить ссылки на страницу демонстрации и архив исходников.

Теперь займемся стилями нашего блока, открываем файл style.ccs Вашей темы и вносим в него следующий код:

Возможно понадобится объявлять стили используя связку #content .prevu { } вместо .prevu { }

И кнопки работают и показывают нам наш урок.

Заключение

В этом уроке я Вам продемонстрировал самый простой способ сделать страницу с демонстрацией Ваших уроков для посетителей. Постараюсь в ближайшее время создать демонстрации на все свои опубликованные уроки, спасибо за внимание, не стесняясь задавайте вопросы в комментариях!

* Дополнение

Иногда получается что при добавлении новой демонстрации при ее просмотре Вы видете ошибку 404. Не паникуте нужно просто перейти в настройки постоянных ссылок и нажать сохранить изменения (или обновить) и все заработает.

Про Александр

Здравствуйте, меня зовут Александр Мороз. Профессионально занимаюсь созданием сайтов . Выражаюсь на диалектах PHP, SQL, JavaScript, HTML, CSS, XML, jQuery. Иногда и матом в особо сложных случаях :)

Проверьте также

Как с помощью CSS прижать footer к низу окна браузера

Задача прижать footer к низу окна браузера – это одна из самых часто встречаемых задач …

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *