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

Рисунок 2.11 – Добавление «экшена» и выполнение собственной функции при выполнении стандартного события WordPress

Помимо этого, созданное нами подключение к выполнению стандартного события WordPress должно знать, после чего ему необходимо выполниться. В нашем случае событие «wp_enqueue_scripts» должно выполниться в момент срабатывания хука «wp_head» (хук – специальная функция Вордпресс, позволяющая «зацепиться» за тот или иной блок контента и кастомизировать его) , и выполнение этого хука мы должны добавить в файл «header.php» перед закрытие тега «head» (Рисунок 2.12).

Рисунок 2.12 – Выполнение хука «wp_head» в файле «header.php»

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

Рисунок 2.13 – Итоговый код подключения внешних файлов стилей к проекту темы для CMS WordPress в файле «functions.php»

Подобным образом подключаются и внешние файлы скриптов для разрабатываемой темы. Отличия заключаются в том, что они будут выполняться в момент выполнения хука «wp_footer», который мы должны разместить в файле «footer.php» перед закрытием тега «body» (Рисунок 2.14).

Рисунок 2.14 – Вызов хука «wp_footer» в файле «footer.php»

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

---

Рисунок 2.15 – Итоговый файл «functions.php» с функциями подключения необходимых файлов стилей и скриптов, выполняющихся при событиях «wp_head» и «wp_footer»

Особое внимание необходимо уделить факту отключения встроенной в WordPress версии jquery и подключения версии, идущей вместе со сверстанным макетом. На рисунке 2.15 это произведено в 14-16 строках кода. А вот файл библиотеки jquery-migrate наоборот подключен из состава библиотек, включенных в состав WordPress (строка 17 кода, изображённого на рисунке 2.15).

Также обратите внимание на то, что файл «modernizr.js» подключен первым в списке скриптов. В свою очередь в верстке он был подключен в секции «head». Это подключение было сохранено переносе в файл «header.php» и от него необходимо избавиться, удалив соответствующие строки кода в файле «header.php».

В заключении работы посмотрите код сайта во встроенном отладчике браузера и проверьте отсутствие ошибок подключения файлов стилей и скриптов.

Используя ресурсы сети интернет подберите макет верстки используемый в дальнейшем для самостоятельной работы. При осуществлении поиска обратите особое внимание соответствия макета следующим критериям:

- Макет не должен быть одостраничником (LandindPage)

- Макет должен иметь как минимум два меню (основное и дополнительное) и меню кнопок социальных сетей;

- Макет должен содержать боковую колонку (сайдбар);

- Макет должен содержать примеры страницы и записи с комментариями и формой комментирования;

- В макете должна присутствовать страница обратной связи, содержащая форму для ввода данных.

Произведите установку CMS WordPress для выполнения самостоятельных работ и для этой установки произведите создание темы на основе макета выбранного для реализации проекта.

---

При проведении работ произведите разбивку индексного файла макета верстки на составные части (файлы index.php, header.php, footer.php). При разбиении помните, что чаще всего содержимое файлов header.php и footer.php будет повторяться на каждой странице сайта, а содержимое файла index.php будет уникальным для главной страницы будущего сайта.

Произведите правильное подключение файлов стилей и скриптов к проекту (в файле functions.php) не забыв в конце работ проверить функциональную работоспособность сайта и отсутствие ошибок в консоли браузера.

---

3. Автоматизация вывода информации о сайте

В разрабатываемой в проекте теме все META-теги имеют статическое содержимое, кроме того, название и описание сайта также выведено на страницы сайта статически. Для решения задач автоматизации вывода требуемой информации из консоли администратора в WordPress существует специальная функция bloginfo()¹. Так при помощи использования только этой одной функции модно получить на сайте следующую информацию о сайте:

• 
  Название сайта;
  
• 
  Описание сайта;
  
• 
  Используемая кодировка;
  
• 
  Тип контента страницы;
  
• 
  Текущий язык сайта;
  
• 
  и прочее.
  

3.1 Информация о сайте в секции «Head»

Откройте в браузере главную страницу сайта и посмотрите его код во встроенном отладчике браузера (Рисунок 3.1).

Рисунок 3.1 – Код главной страницы сайта во встроенном отладчике браузера Google Chrome

В развернутой секции head теги заголовка сайта и META-теги, указывающие на кодировку сайта, описание и автора сайта отображаются так, как они были прописаны автором верстки. Нашей задачей является организация вывода этой информации в соответствии с настройками нашего сайта из консоли администратора с использованием функции WordPress – bloginfo().

Откройте в редакторе кода (VS Code) файл «header.php» и перейдите к первому META-тегу, указывающему кодировку сайта () и модифицируйте его следующим образом: ">. Произведите обновление информации в браузере и проверьте корректность отображения требуемой информации. На первый взгляд, никаких кардинальных изменений нет, но теперь информация о кодировке сайта берется из настроек WordPress.

В открывающем теге HTML нашего сайта имеется атрибут «lang» со значением «en», эта информация также не корректна и выведена статическим путём. Замените значение атрибута «lang» на следующее: (обратите внимание на то, что тег «html» прописан в комментариях и для устаревших браузеров Internet Explorer, не забудьте изменить это значение и для них).

---

Значение заголовка сайта в теге «title» замените на: .

Значение атрибута «content» для META-тега со значением атрибута «name» «description» заполните следующим образом: , а META-тег со значением атрибута «name» «author» нам не нужен, удалите строку добавляющую его.

На этом правка вывода информации о сайте в секции завершена

3.2 Информация о сайте теге в «Header» секции «Body»

В том же файле «header.php» в качестве текста заголовка первого уровня с идентификатором «logo-text» статически прописано название макета верстки, замените его на следующий код: (в случае если Ваш сайт называется правильно, отображение информации не изменится, но как и в случае с META-тегами она будет выведена из настроек WordPress).

Кроме того, значение данного заголовка является еще и ссылкой для перехода к статичному файлу «index.html», для того чтобы при клике на название сайта, пользователь был правильно перенаправлен на главную страницу сайта измените для тега ссылки – «а» значение атрибута «href» с «index.html» на следующий код: . Таким образом, в этом коде работают по сути две функции: функция «php» - «echo», которая печатает значение функции WordPress «home_url()».

Содержимое идущего следующим параграфа с идентификатором «intro» также замените на: (так как описание сайта мы не изменяли, оно отобразится не так как в вёрстке. По желанию вы можете либо оставить значение по умолчанию, либо поправить значение описания сайта в соответствии с макетом).

Добавьте самостоятельно ссылку на главную страницу в файле «footer.php» как показано на рисунке 3.2, используя материалы данной работы.

Рисунок 3.2 – Ссылка на главную страницу сайта в «подвале» сайта

Произведите действия по автоматизации вывода информации о сайте из консоли администратора CMS WordPress для собственной темы используя функции, описанные в данной практической работе.

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

---