Оптимизация скорости WordPress с помощью пользовательских значков социальных сетей

Это может показаться простой задачей, но добавление кнопок обмена социальными сетями на сайт WordPress может стать проблемой. Когда я говорю «хорошо себя ведущий», я имею в виду простой, легкий, дружественный к ресурсам, быстрый – большинство плагинов для обмена в социальных сетях не такие. Они, как правило, поглощают ресурсы как сумасшедшие, и зачем кому-то хотеть увеличить время загрузки плагинов на 25-35%, просто чтобы отображать иконки на своем сайте?

Хорошей новостью является то, что вам не обязательно нужен плагин для выполнения этой задачи. В этом уроке я покажу вам, как вы можете легко добавить пользовательские кнопки социальных сетей в конец постов на вашем сайте WordPress с помощью всего лишь нескольких строк кода.
Шаг 1. Создайте кнопки социальных сетей
Мы будем использовать Генератор кнопок простого обменаудобный и простой в использовании веб-инструмент для создания иконок для обмена. Основным преимуществом этого приложения является то, что кнопки, которые оно генерирует, работают на веб-интерфейсе, поэтому они не будут обременять ваш сервер, и вы также сможете сохранять конфиденциальность действий своих пользователей.
Чтобы создать ваши пользовательские кнопки, иди сюда и нажмите Начать. Выберите 1 из 6 различных стилей кнопок. Нажмите «Далее» и отметьте социальные сети, которые вы хотите добавить на свой сайт. Когда вы закончите, вам нужно будет заполнить информацию на вашем сайте.

На этом экране (ниже) вы найдете две опции: «Нет JavaScript» и «JavaScript». Установите флажок JavaScript, поскольку он позволит браузеру динамически определять URL-адрес, поэтому ваши посетители смогут публиковать каждое сообщение отдельно, а не только URL-адрес домашней страницы.
Наконец, посмотрите на предварительный просмотр в реальном времени, загрузите выбранный набор значков и возьмите сгенерированный вами код.
Шаг 2: Создайте детскую тему
Теперь вам нужно будет добавить сгенерированные иконки и код на ваш сайт. Прежде всего вам нужно будет создать дочернюю тему.

Вы можете легко создать дочернюю тему WP с помощью нашего урока, или вы можете выполнить шаги этого Статья WP Codex, Если у вас уже есть, вы можете перейти к шагу 3.

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

В нашем случае дополнительным функционалом станут настраиваемые кнопки социальных сетей.
Шаг 3: Создайте пользовательскую функцию, которая отображает значки
Мы добавим пользовательскую функцию в файл functions.php дочерней темы.

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

Вставьте следующую строку кода в этот пустой файл:

Поделиться этой записью

<? PHP

add_action (‘custom_social_share’, ‘add_social_sharing’);

Наконец, удалите строку комментария HTML из фрагмента кода выше и замените ее HTML-кодом, сгенерированным на шаге 1, с помощью генератора кнопок социальных сетей.
Шаг 4. Скопируйте соответствующий файл шаблона в папку дочерней темы.
По умолчанию отдельные сообщения управляются файл шаблона называется single.php. Иногда – особенно в более современных темах – структура single.php более сложная, так как она также загружает дополнительные файлы шаблонов. На этом этапе нам нужно найти соответствующий файл шаблона, куда мы можем добавить значки позже.

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

Давайте откроем редактор тем в панели администратора WordPress под Внешний вид> Редактор. В верхнем правом углу вы найдете раскрывающийся список, в котором вы можете выбрать родительскую тему. Ниже раскрывающегося списка вы можете увидеть все файлы шаблонов, которые содержит ваша родительская тема. Прокрутите вниз, пока не найдете шаблон Single Post (называемый single.php) и откройте его.

Если родительская тема использует функцию WP get_template_part () в файле single.php, это означает, что она использует дополнительный файл шаблона для загрузки содержимого одного сообщения.

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

В Двадцать пятнадцать это выглядит так:
get_template_part (‘content’, get_post_format ());
Первый параметр – «content», что означает, что мы ищем файл шаблона с именем content.php. Вам необходимо скопировать этот файл из корневой папки родительской темы в корневую папку дочерней темы, чтобы изменить его.
Шаг 5: Добавьте хук действий в нужный файл шаблона
На шаге 3 мы создали функцию add_social_sharing () и прикрепили ее к хуку пользовательских действий под названием custom_social_share. Теперь нам нужно добавить этот хук к тому месту, где мы хотим, чтобы функция была выполнена.

Вот фрагмент кода, который вам нужно будет вставить в нужное место:

Далее, давайте найдем правильное место.

Откройте файл шаблона, который вы добавили в свою дочернюю тему на шаге 4, в редакторе кода или в редакторе тем панели администратора WordPress и найдите функцию the_content ().

Проверьте, есть ли функция wp_link_pages () сразу после функции the_content (). Если есть, то фрагмент кода выше идет после этого; в противном случае он следует функции the_content ().
Шаг 6: добавьте код CSS в дочернюю тему
Откройте файл style.css вашей дочерней темы либо в редакторе кода, либо в редакторе тем панели администратора WordPress, скопируйте код CSS, созданный на шаге 1, вставьте его в конец файла и сохраните.
Мы добавим две дополнительные строки в файл CSS, чтобы иконки социальных сетей правильно отображались в каждой теме. Скопируйте и вставьте следующий фрагмент кода в конец файла style.css:

ul.share-button li a {
    граница: 0;
}
ul.share-buttons li img {
    дисплей: встроенный;
}

Шаг 7. Загрузите набор значков социальных сетей на сервер.
Загрузите выбранный набор значков социальных сетей, загруженный на шаге 1, в папку своей дочерней темы. Подключите ваш сервер через FTP, создайте новую папку с названием images в корневом каталоге вашей дочерней темы (/ wp-content / themes / your-child-theme / images) и загрузите установленный здесь значок.

Мы называем папку images, потому что это имя по умолчанию для папки с изображениями, которую использует генератор Simple Sharing Buttons.
Шаг 8: Проверьте путь к файлам иконок
После загрузки значков социальных сетей на сервер в шаге 7 важно проверить путь к файлам значков, чтобы убедиться, что они будут загружены.

Путь к файлу изображения дает подсказку браузеру о его расположении на сервере. Давайте проверим пути к изображениям внутри файла functions.php дочерней темы. Откройте файл в редакторе кода и перейдите к функции add_social_sharing (), где вам нужно проверить HTML-код, созданный вами с помощью генератора простых кнопок общего доступа.

В HTML-коде вы найдете тег с атрибутом src для каждого значка. Проверьте, указывает ли каждый атрибут src точное местоположение, куда был загружен ваш набор значков на шаге 7.

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

Относительный путь изображения, добавленный генератором, выглядит примерно так:

Давайте изменим атрибут src каждого значка на абсолютный путь, что означает, что он будет включать полный URL-адрес файла.

Путь URL выше будет выглядеть так:

Шаг 9: Загрузите измененные файлы и активируйте дочернюю тему
Подключите свой сервер через FTP и загрузите все файлы, которые мы создали в этом руководстве, которые вы еще не загрузили: functions.php, style.css и соответствующий файл шаблона (в этом руководстве либо single.php, либо содержимое). PHP).

Наконец, активируйте дочернюю тему в панели управления WP в меню «Внешний вид»> «Темы».

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

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

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

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

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)