Домашняя » WordPress » Оптимизация скорости WordPress с помощью пользовательских иконок социальных сетей
Оптимизация скорости WordPress с помощью пользовательских иконок социальных сетей
Это может показаться простой задачей, но добавление хорошо работающих кнопок социальных сетей на сайт WordPress может стать проблемой. Когда я говорю «хорошо себя ведущий», я имею в виду простой, легкий, дружественный к ресурсам, быстрый - большинство плагинов для обмена в социальных сетях не такие. Они имеют тенденцию поглощать ресурсы, как сумасшедшие, и зачем кому-то хотеть увеличить время загрузки плагина на 25-35% только для отображения некоторых иконок на их сайте?
Хорошей новостью является то, что вам не обязательно нужен плагин для выполнения этой задачи. В этом уроке я покажу вам, как вы можете легко добавить пользовательские кнопки социальных сетей до конца сообщений на вашем сайте WordPress с всего несколько строк кода.
Шаг 1. Создайте кнопки социальных сетей
Мы будем использовать генератор простых кнопок общего доступа, удобный и простой в использовании веб-инструмент для создания значков общего доступа. Основным преимуществом этого приложения является то, что кнопки, которые оно генерирует, работают на интерфейсе, поэтому они не будут обременять ваш сервер и вы также можете сохранить конфиденциальность действий своих пользователей.
Для создания пользовательских кнопок перейдите сюда и нажмите Начать. Выберите 1 из 6 различных стилей кнопок. Нажмите следующий и отметьте социальные сети Вы хотите добавить на свой сайт. Когда вы закончите, вам нужно будет заполнить информацию о вашем сайте.
На этом экране (ниже) вы найдете два варианта: «Нет JavaScript» а также 'JavaScript'. Поставить галочку JavaScript, так как это позволит браузеру динамически определять URL, поэтому ваши посетители смогут обмениваться каждым постом индивидуально, а не только URL домашней страницы.
Наконец, посмотрите на предварительный просмотр в реальном времени, загрузите выбранный набор значков и возьмите сгенерированный вами код..
Шаг 2: Создайте детскую тему
Теперь вам нужно будет добавить сгенерированные иконки и код на ваш сайт. Прежде всего вам нужно будет создать дочернюю тему.
Вы можете легко создать дочернюю тему WP с помощью нашего учебника или выполнить действия, описанные в этой статье WP Codex. Если у вас уже есть, вы можете перейти к шагу 3.
Детская тема относится к теме, которую вы используете в настоящее время - в некоторой степени аналогично тому, как ребенок относится к своим родителям. Это наследует все (стиль и функциональность) от родительской темы но вы можете добавить дополнительную функциональность к этому.
В нашем случае дополнительным функционалом станут настраиваемые кнопки социальных сетей..
Шаг 3. Создайте пользовательскую функцию, которая отображает значки
Мы добавим пользовательскую функцию в файл functions.php дочерней темы.
С помощью этой функции вы сможете добавлять социальные значки в любое удобное для вас место на своем сайте, используя специальный хук действий. Если у вашей дочерней темы еще нет файла functions.php, создайте пустой текстовый файл в корневой папке вашей дочерней темы с именами функций и измените его расширение на .php.
Вставьте следующую строку кода в этот пустой файл:
Когда ваш functions.php Для настройки файла добавьте в него следующий фрагмент кода:
/ * * Добавляет пользовательские значки социальных сетей * / function add_social_sharing () ?>
Поделиться этой записью
в заключение удалить строку HTML-комментария из фрагмента кода выше и замените его HTML-кодом вы сгенерировали на шаге 1 с помощью генератора кнопок социальных сетей.
Шаг 4. Скопируйте соответствующий файл шаблона в папку дочерней темы.
По умолчанию отдельные сообщения управляются файлом шаблона с именем single.php. Иногда - особенно в более современных темах - структура single.php является более сложным, так как он также загружает дополнительные файлы шаблонов. На этом этапе нам нужно найти соответствующий файл шаблона, куда мы можем добавить значки позже.
Чтобы найти правильное место для социальных кнопок, нам нужно найти файл шаблона, который содержит функцию, которая загружает содержимое отдельных сообщений.
Давайте откроем редактор тем в админ панели WordPress под Внешний вид> Редактор. В верхнем правом углу вы найдете раскрывающийся список, в котором вы можете выбрать родительскую тему. Ниже раскрывающегося списка вы можете увидеть все файлы шаблонов, которые содержит ваша родительская тема. Прокрутите вниз, пока не найдете Шаблон одного сообщения (называется single.php) и откройте его.
Если родительская тема использует get_template_part () Функция WP в single.php файл, который означает, что он использует дополнительный файл шаблона для загрузки содержимого одного сообщения.
Сначала вы должны выяснить, кто это. Имя файла дополнительного шаблона является первым параметром get_template_part () функция.
Первый параметр «Содержание» что означает, что мы ищем файл шаблона с именем content.php. Вам необходимо скопировать этот файл из корневой папки родительской темы в корневую папку дочерней темы, чтобы изменить его.
Шаг 5: добавьте хук действий в нужный файл шаблона
Мы создали функцию под названием add_social_sharing () в шаге 3, и мы прикрепили его к хуку настраиваемого действия под названием custom_social_share. Теперь нам нужно добавить этот хук к тому месту, где мы хотим, чтобы функция выполнялась.
Вот фрагмент кода, который вам нужно будет вставить в нужное место:
Далее давайте найдем правильное место.
Откройте файл шаблона, который вы добавили в свою дочернюю тему на шаге 4, в редакторе кода или в редакторе тем панели администратора WordPress и найдите содержимое() функция.
Проверьте, есть ли wp_link_pages () функционировать сразу после содержимое() функция. Если есть, то фрагмент кода выше идет после этого; в противном случае следует содержимое() функция.
Шаг 6: добавьте код CSS в дочернюю тему
Открой style.css файл вашей дочерней темы либо в редакторе кода, либо в редакторе тем панели администратора WordPress, скопируйте код CSS, созданный на шаге 1, вставьте его в конец файла и сохраните его.
Мы добавим две дополнительные строки в файл CSS, чтобы значки социальных сетей правильно отображались в каждой теме. Скопируйте и вставьте следующий фрагмент кода в конец style.css файл:
ul.share-button li a border: 0; ul.share-buttons li img display: inline;
Шаг 7. Загрузите набор значков социальных сетей на сервер.
Загрузите выбранный набор значков социальных сетей, загруженный на шаге 1, в папку своей дочерней темы. Подключите ваш сервер через FTP, создайте новую папку с именем изображений внутри корневого каталога вашей дочерней темы (/ wp-content / themes / your-child-theme / images) и загрузите установленный здесь значок.
Назовем папку изображений потому что это имя по умолчанию для папки с изображениями, которую использует генератор простых кнопок общего доступа.
Шаг 8: Проверьте путь к файлам иконок
После загрузки значков социальных сетей на сервер на шаге 7 важно проверить путь к файлам значков, чтобы убедиться, что они будут загружены.
Путь к файлу изображения дает подсказку браузеру о его расположении на сервере. Давайте проверим пути изображения внутри functions.php файл детской темы. Откройте файл в редакторе кода и перейдите к add_social_sharing () функция, где вам нужно проверить HTML-код, который вы сгенерировали с помощью генератора простых кнопок общего доступа.
В HTML-коде вы найдете пометить с ЦСИ атрибут для каждой иконки. Проверьте, если каждый ЦСИ Атрибуты указывает на точное местоположение, куда ваш набор иконок был загружен в Шаге 7.
Генератор кнопок простого обмена добавляет относительные пути к файлы. Иногда браузеры не могут отображать изображения, если вы используете относительный путь, так что это хорошая идея используйте вместо этого абсолютные пути. Таким образом, каждый браузер, потенциально используемый вашими посетителями, может быть абсолютно уверен в местонахождении необходимых файлов значков..
Относительный путь изображения, добавленный генератором, выглядит примерно так:
Давайте изменим ЦСИ атрибут каждого значка к абсолютному пути, что означает, что он будет включать в себя полный URL-адрес файла.
Путь URL выше будет выглядеть так:
Шаг 9: Загрузите измененные файлы и активируйте дочернюю тему
Подключите ваш сервер через FTP и загрузите все файлы, которые мы создали в этом руководстве, которые вы еще не загрузили: functions.php, style.css, и соответствующий файл шаблона (в этом уроке либо single.php или content.php).
Наконец, активируйте дочернюю тему в панели администратора WP под Внешний вид> Темы меню.
Теперь вы готовы к использованию своих сверхлегких, экономящих ресурсы, настроенных значков социальных сетей. Вы можете зайти в онлайн и проверить это в прямом эфире на вашем сайте.
Заключение
В этом уроке я показал вам, как добавить настраиваемые кнопки социальных сетей в конец отдельных сообщений. Вы можете добавить значки общего доступа в любое другое место на вашем веб-сайте с помощью созданного нами хука действий..
Просто добавьте код, который мы использовали в шаге 5, к месту, где вы хотите, чтобы кнопки отображались:
Вам также нужно будет найти нужный файл шаблона, если вы хотите разместить значки в другом месте. Отдельные страницы управляются файлом шаблона с именем page.php, в то время как медиа-вложения, такие как изображения, загружаются attachment.php.
Если вы хотите, чтобы кнопки социальных сетей отображались в другом месте на вашем веб-сайте, вы можете использовать иерархию шаблонов WordPress, чтобы найти их..
