Файл: Основные теоретические сведения Что такое cms.docx

2. Создание темы WordPress

2.1 Что такое тема WordPress

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 – Описание ошибки работы темы сайта

Для дальнейшей работы над проектом нам потребуется открыть папку проекта в любом редакторе кода, например, VS Code. (В уже открытой программе выбрать пункт меню 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» (может отличаться в зависимости от используемой клавиатуры). Сделанный скриншот будет находиться в буфере обмена операционной системы.

На следующем шаге, Вам необходимо открыть графический редактор (например, MSPaint), и создать в нем новый документ с размерами 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 в сети интернет).

Таким образом, изменив путь подключения файла default.css на /assets/css/default.css мы подключим этот файл с использованием относительных путей расположения файла, при помощи стандартной функции WordPress. Но к сожалению, в темах WordPress, так не делается. Все подключения файлов и описание функциональных возможностей шаблона WordPress происходит в отдельном файле темы с именем «functions.php». Создайте такой файл в корне проекта и откройте его для редактирования, а подключение файлов «default.css», «layout.css» и «media-queries.css» из файла «header.php» удалите совсем.

В данном файле мы должны добавить новый «экшн», привязанный к стандартному событию WordPress «wp_enqueue_scripts» и добавить во время его выполнения выполнение собственной функции, которую также описываем в файле «functions.php» (Рисунок 2.11).

---