Файл: Практическая работа 2 Создание темы WordPress Цели работы Научиться создавать минимальную структуру темы для cms wordPress.docx

Научиться создавать минимальную структуру темы для CMS WordPress;
Научиться подключать файлы к проекту с использованием абсолютных и относительных путей;
Получить представление о понятиях: событие, экшн и хук используемых в WordPress;
Научиться регистрировать файлы стилей и скриптов для темы через файл funcions.php.

Оборудование и материалы:

Персональный компьютер с установленной операционной системой семейства Windows;
Локальный web-сервер OpenServer;
Редактор кода SubLime Text 3;
Сверстанный макет сайта;
Графический редактор Adobe Photoshop.

Указания к выполнению

2.1 Понимание того, что такое тема

CMS WordPress как и любая другая организована таким образом, что все данные сайта хранится в базе данных (данные о пользователях, записи, комментарии и прочее). При посещении сайта построенного на основе CMS WordPress пользователь видит все эти данные через призму темы сайта, т.е. в зависимости от выбранной темы, пользователь увидит данные в том или ином оформлении. Для примера, перейдите в подраздел «Темы» раздела «Внешний вид» консоли администратора и измените тему установленную в данный момент как «активная», а затем обновите сам сайт. Общий внешний вид, как и отображение отдельных элементов сайта должно измениться, в тоже время содержимое базы данных сайта осталось неизменным. Таким образом, тема является визуальным представлением содержимого сайта. Причем, в зависимости от настроек, примененных к теме, часть данных может присутствовать или отсутствовать в зависимости от выбранной темы.

2.2 Откуда взять дополнительные темы?

Темы WordPress доступны для установки как из магазина тем WordPress, их возможно скачать со сторонних источников и устанавливать в WordPress. Устанавливаемые темы могут быть как платными, так и бесплатными. Как особый вариант стоит рассмотреть создание собственной темы. Все установленные в WordPress темы расположены в подпапке «themes» папки «wp-content» сайта (соответственно каждая из тем в своей собственной отдельной папке). Так, на рисунке 2.1 приведено содержимое вышеуказанной папки после свежей установки WordPress. Как видно из данного содержимого, по умолчанию в WordPress установлено три темы:

twentynineteen;
twentyseventeen;
twentysixteen.

Эти же темы Вы увидите, если посмотрите содержимое подраздела «Темы» раздела «Внешний вид» консоли администратора (Рисунок 2.2).

Рисунок 2.1 – Содержимое папки themes после первоначальной установки WordPress

Рисунок 2.2 – Состав тем CMS WordPress после первоначальной установки

2.3 Создание собственной темы

Так как макет рассматриваемой в проекте верстки носит имя «Keep It Simple», это же имя мы будем использовать для именования создаваемого шаблона.

Перейдите в папку «themes» Вашей установки WordPress и создайте папку с именем «keepitsimple», после чего обновите содержимое подраздела «Темы» раздела «Внешний вид». Перед Вами должно появиться сообщение о ошибке в работе темы (рисунок 2.3). В нашем случае это нормально, а сама ошибка говорит о том, что в теме отсутствует файл таблицы стилей.

Рисунок 2.3 – Описание ошибки работы темы сайта

Для дальнейшей работы над проектом, нам потребуется открыть папку проекта в любом редакторе кода, например, SublimeText. (В уже открытой программе выбрать пункт меню File-OpenFolder, в открывшемся окне проводника выбрать расположение папки проекта).

Для исправления ошибки работы темы, в корне проекта (папке «keepitsimple»), необходимо создать новый файл (сочетание клавиш Ctrl+N) и сохранить его с именем «style.css». После этого в очередной раз обновите содержимое подраздела «Темы» раздела «Внешний вид». Ошибка, имеющаяся в работе создаваемой темы измениться и примет вид, изображенный на рисунке 2.4.

Рисунок 2.4 – Описание ошибки работы темы сайта после добавления файла style.css

Всё дело в том, что помимо созданного нами файла «style.css», в теме должен также присутствовать файл «index.php». Создайте его по аналогии с файлом «style.css», а затем обновите содержимое подраздела «Темы» раздела «Внешний вид». Вы должны увидеть новую тему в перечне отображаемых тем раздела (рисунок 2.5).

Рисунок 2.5 – Перечень тем после проведённых действий по созданию темы

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

1. Внести описание темы в файл «style.css»;

2. Сделать скриншот макета;

3. Обрезать скриншот до необходимых размеров (1200х900 пикселей);

4. Сохранить скриншот в папку проекта с именем «screenshot.png».

В файл «style.css» внесите следующее содержимое приведенное на рисунке 2.6.

Рисунок 2.6 – Содержимое файла style.css, необходимое для описания темы

Внесенное содержимое будет отображаться только в консоли администратора и никаким образом не повлияет на работу стилевого содержимого, так как оно закомментировано.

Для того, чтобы получить скриншот макета, откройте файл «index.html» предоставленного Вам макета в браузере и нажмите на клавиатуре кнопку «Print Screen» (может отличаться в зависимости от используемой клавиатуры). Сделанный скриншот будет находиться в буфере обмена операционной системы.

На следующем шаге, Вам необходимо открыть графический редактор (например, AdobePhotoshop), и создать в нем новый документ с размерами 1200 на 900 пикселей. Вставьте в созданный документ имеющийся в буфере обмена снимок экрана и при помощи инструментов графического редактора приведите его в соответствии с рисунком 2.7.

Рисунок 2.7 – Необходимая часть снимка экрана для скриншота темы WordPress

После проведенных работ по обрезке и позиционировании снимка экрана, сохраните файл в папку проекта с именем «screenshot» и расширением «png». Очередной раз обновите содержимое подраздела «Темы» раздела «Внешний вид». вы должны увидеть скриншот темы, а нажав на неё, в отдельном всплывающем окне увидеть ранее созданное описание шаблона.

Активируйте созданную тему и обновите сайт. Так как кроме описания темы и её скриншота в создаваемой теме, ничего нет Вы должны увидеть в браузере «Пустое содержимое». Для того, чтобы на сайте отобразилось хоть что-то нам необходимо это что-то добавить в файл «index.php», например, добавьте в содержимое этого файла свою фамилию и обновите страницу сайта. В моем случае, в браузере отобразилась информация, представленная на рисунке 2.8, в Вашем же случае Вы должны увидеть отображение Вашей фамилии.

Рисунок 2.8 – Отображение сайта после внесения данных в файл «index.php»

Кроме того, если мы просмотрим сайт в режиме отладчика, то увидим автоматически сформированную структуру html-документа (открывающий и закрывающий тэги html, секции head и body) и сам текст (фамилию).

За формирование стандартных для WordPress шапки сайта и подвала отвечают функции «get_header» и «get_footer» в которых в свою очередь и происходит подключение внешних стилей и скриптов.

Создайте в корне проекта файл header.php, в который добавьте содержимое файла «index.html» макета - от начала файла и до закрывающего тега «header» («вырежьте» содержимое из файла). Создайте в корне проекта файл footer.php, в который добавьте содержимое файла «index.html» макета – от открывающего тега footer и до конца документа («вырежьте» содержимое из файла). В файле «index.php» вызов двух функций WordPress «get_header» и «get_footer», так как это показано на рисунке 2.9.

Рисунок 2.9 – Вызов функций «get_header» и «get_footer» в файле «index.php»

Обратите внимание на то, что каждая часть кода языка php заключается следующей конструкцией: часть кода на языке php ?>, это уже относится к синтаксису языка php.

Между вызовами функций «get_header» и «get_footer» в файле «index.php» вставьте оставшееся содержимое файла index.html.

После обновления страницы сайта на нем должно отобразиться все содержимое, но это содержимое не будет иметь стилевого оформления. Так получилось по нескольким причинам:

отсутствуют внешние файлы, подключаемые в проекте;
подключение файлов стилей и скриптов в WordPress, отличается о подключения таких файлов в html.

Все подключаемые к проекту темы WordPres файлы, должны располагаться в папке «assets», создайте такую папку в корне проекта и перенесите в неё папки css, images и js верстки предоставленной Вам для реализации проекта. Но даже после переноса файлов стилей и скриптов, отображение страницы не измениться, так как пути подключения файлов не соответствуют их расположению. Чтобы пути подключения файлов соответствовали их расположению, мы должны их изменить.

Давайте рассмотрим это на примере подключения файла default.css (в файле header.php 21 строка кода). На данный момент подключение файла происходит из папки css проекта, но в нашем случае расположение папки не соответствует. Мы должны изменить путь к файлу default.css следующим образом:

http://wordpress/wp-content/themes/keepitsimple/assets/css/default.css

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

В WordPress, для относительного указания расположения файлов темы существует отдельная функция: get_template_directory_uri. Для эксперимента давайте временно добавим код представленный на рисунке 2.10 в файл header.php сразу после открытия тега body.

Рисунок 2.10 – Пример вывода пути к корню текущей темы WordPress при помощи функции get_template_directory_uri

После сохранения файла и обновления странички сайта в браузере, в самом начале страницы выведется путь к корню текущей темы WordPress. Стоит также обратить внимание на то, что оператор «echo», является оператором языка «php», суть его работы заключается в печати одной или нескольких строк текста (более подробно можно почитать в справке по PHP в сети интернет).