Начало работы с WordPress: настройка функциональности сайта посредством редактирования functions.php

2020-10-20 0 ∞

Содержание цикла статей "Начало работы с WordPress":

Начало работы с WordPress: выбор между WordPress.com и WordPress.org
Начало работы с WordPress: подготовка к настройке WordPress на отдельном хостинге
Начало работы с WordPress: ручная установка WordPress
Начало работы с WordPress: первые шаги по совершенствованию вашего нового сайта
Начало работы с WordPress: подготовка к созданию вашей собственной темы на основе дочерней
Начало работы с WordPress: изменение внешнего вида вашего сайта с помощью CSS
Начало работы с WordPress: изменение структуры вашего сайта
Начало работы с WordPress: настройка функциональности сайта посредством редактирования functions.php

Привязка трекинг-кода Google Analytics к нашему сайту для учета статистики
Заключение

Итак, настало время восьмой и заключительной части из цикла статей, посвященных пошаговому созданию своего сайта на WordPress. Я надеюсь, что после прочтения предыдущих статей вы уже достаточно уверенно чувствуете себя в вопросах создания и настройки собственного сайта. Я заметил одну интересную вещь: как только вы начинаете понимать основные взаимосвязи между компонентами WordPress, то для вас открывается широчайшее поле для экспериментов.

В сегодняшней статье мы рассмотрим последний мистический файл, который входит в нашу тему и с которым вам часто придется иметь дело. Это один из тех файлов, вносить изменения в который можно не боясь в глобальных масштабах нарушить работу темы. Сегодня мы будем разбираться с данным файлом – шаблоном функций (functions.php).

Если вкратце, то этот файл отвечает за переопределение стандартного функционала нашего сайта. Помимо этого, мы также можем добавлять новые функции. Это очень мощный инструмент! И сегодня мы рассмотрим несколько способов, используя которые можно расширить возможности нашего тестового сайта.

Перед тем как мы начнем, нам понадобится:

FTP-доступ к нашему сайту;
текстовый редактор;
иконка сайта размером 32 на 32 пикселя, сохраненная в формате .ico с именем favicon.ico.

Чем мы будем заниматься:

привязывать к нашему сайту код отслеживания Google Analytics для учета статистики;
добавлять иконку на наш сайт.

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

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

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

Что ж, давайте приступим!

Привязка трекинг-кода Google Analytics к нашему сайту для учета статистики

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

Суть дела заключается в том, что большинство плагинов, которые предоставляют данные возможности, будут (в основном) не сильно отличаться в установке и настройке. Они просто будут хранить код, реализующий функции, в отдельных файлах в своих папках. Тот способ, который описан ниже, очень практичен, не слишком сложен и нагляден для целей данной статьи. Итак, давайте подробнее.

Создание собственного файла функций

Шаг 1. Откройте ваш FTP-клиент и перейдите в директорию дочерней темы.

Шаг 2. В списке файлов на удаленном сервере нажмите правой кнопкой мыши и выберите «Создать новый файл» (Create new file).

Шаг 3. Введите имя вашего будущего файла функций - functions.php – и нажмите OK.

Шаг 4. Откройте созданный файл functions.php в текстовом редакторе.

Шаг 5. На этом шаге вам нужно настроить только что созданный файл так, чтобы сервер распознавал его, как содержащий код PHP. Для этого, добавьте открывающий тег <?php в начало файла.

<?php
 
// Вставка кода Google Analytics в футер
add_action( 'wp_footer', 'mytheme_add_google_analytics' );
function mytheme_add_google_analytics() {
    ?>
    <!-- Сюда мы вставим код, который получим на сайте Google Analytics... -->
    <?php
}
 
?>

OK, давайте разберемся с этим кодом.

// Вставка кода Google Analytics в футер

Строка 1 у нас начинается с двух символов //. Это означает начало комментария, который не несет в себе функциональности, но дает информацию о назначении той или иной части кода для человека, который его читает. Использования двух идущих подряд символов слэша (//) это быстрый способ создать однострочный комментарий в коде PHP. Если мы хотим создать блок комментариев, расположенных более чем на одной строке, то следует использовать конструкцию - /* здесь комментарий */ - аналогично комментариям в CSS. Очень полезно добавлять комментарии и заметки, чтобы потом самому разобраться в своем коде, что особенно актуально для больших проектов.

add_action( 'wp_footer', 'mytheme_add_googleanalytics' );

Строка 4, начинающаяся с функции add_action, выглядит на первый взгляд непонятно.

add_action это функция PHP, которая исполняет нужные нам действия в заданных местах кода. Это называется «ловушка» или «крючок» (hook). В интернете можно найти множество примеров функций, которые позволяют добавлять или удалять функционал с использованием механизма ловушек. В данном случае, мы используем функцию add_action чтобы «подцепить» код функции mytheme_add_google_analytics к функции wp_footer.

function mytheme_add_googleanalytics() {

Строка 5 определяет и открывает тело функции mytheme_add_google_analytics.

<!-- Сюда мы вставим код, который получим на сайте Google Analytics... -->

и в строке 7 следует место, оставленное под вставку кода с сайта сервиса Google Analytics. Пока это лишь HTML-комментарий, но скоро мы это исправим.

В строке 9 мы закрываем функцию с помощью фигурной скобки.

Заметьте, что мы опять открываем тег после фигурной скобки { в строке 5, а затем, вставив отрывок кода, полученный от сервиса Google Analytics (мы сделаем это далее), открыть его вновь в строке 8, чтобы продолжить писать PHP-код.

<?php
}
 
?>

Шаг 7. Теперь пришло время войти в наш аккаунт Google Analytics и скопировать код для вставки. Зарегистрируйте аккаунт в Google и войдите в сервис Google Analytics.

Шаг 8. Теперь, вставьте в строку 7 скопированный код вместо HTML-комментария.

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

Добавление иконки к вашему сайту

Вы ведь знаете что такое favicon, верно? Если хотите освежить память или узнать, то воспользуйтесь поиском по запросу «Что такое favicon». Вкратце, это маленькая иконка, которую вы часто можете увидеть справа от названия сайта в открытых закладках вашего браузера, либо в списке сохраненных закладок.

Шаг 1. Создайте свою иконку favicon.ico, используя специальную программу (например, IcoFX), либо скачайте готовый вариант в интернете.

Шаг 2. Загрузите значок в директорию с вашей дочерней темой через FTP-клиент.

Шаг 3. Вставьте следующий код в ваш файл functions.php:

// Добавление favicon на ваш сайт

add_action( 'wp_head', 'mytheme_add_favicon' );
 
function mytheme_add_favicon() {
 
    echo '<link rel="Shortcut Icon" type="image/x-icon" href="' . get_stylesheet_directory_uri() . '/favicon.ico" />';
 
}

Шаг 4. Сохраните файл на удаленный сервер и обновите ваш сайт в браузере, чтобы увидеть изменения.

В строке 1 записана уже известная вам функция add_action (смотрите выше), но мы её определяем по-другому. В данном случае, крючок мы вешаем на функцию wp_head (в противовес предыдущей функции add_action, которая была привязана к футеру, здесь мы привязываемся к шапке нашего сайта), а привязываемой функцией является mytheme_add_favicon.

Обратите внимание на принцип записи имен функций:

Вы можете заметить, что в обоих случаях, я начинал название функции по первой части имени нашей дочерней темы mytheme_ и оканчивал писанием того, что делает данная функция, то есть add_favicon. Это делается по нескольким причинам:

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

В любом случае, если у вас в директории с дочерней темой имеется файл favicon.ico, то код, приведенный выше, должен отлично работать. Немного пояснений:

В строке 8 мы говорим нашей теме вставить HTML-строку в шапку нашего сайта. Эта строка также сообщает, где искать файл favicon.ico.
Маленький кусочек кода на PHP в этой строке - функция get_stylesheet_directory_uri() - получает путь к нашему файлу значка, который находится в папке с дочерней темой.

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

Обратите внимание на принцип записи имен функций:

Можно заметить, что в этом примере нам не нужно было повторно открывать и закрывать теги , как мы делали это на шаге 7 и 8 первого примера. Это потому, что во втором примере, все было написано на коде PHP от начала и до конца. И даже несмотря на то, что туда включались кусочки на HTML, это была лишь PHP-строка. Если вам это пока непонятно, то, как только вы освоитесь с функциями, подобными приведенным выше, а также научитесь писать их самостоятельно, вы поймете разницу, о которой я говорю. Главное надо понимать, что код, приведенный выше, корректен и в подобных случаях вы можете использовать аналогичные приёмы.

Заключение

Теперь вы начинаете осознавать потенциал файла functions.php, и вскоре вас невозможно будет остановить даже самой сложной задачей! С ростом опыта и знаний, вы сможете реализовать на своем сайте практически любой функционал, который захотите, и, в конце концов, возьмете весь свой ресурс под полный контроль!

Помните! Перед внесением изменений в файлы на сервере, обязательно сохраняйте их копии на рабочий стол. Неверный код в файле functions.php может вызвать возникновение проблем, которые нарушат нормальную работу сайта, а если вы будете сохранять копии файлов ДО внесения в них изменений, то всегда сможете сделать «откат» до предыдущей версии и начать сначала.