Как создать кнопки социальных сетей в GeneratePress?

В этом уроке мы рассмотрим Как создать кнопки социальных сетей в GeneratePress?

Это, несомненно, поможет вам улучшить межканальное продвижение вашего блога. Это, в свою очередь, увеличит ваше присутствие в сети.

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

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

Для этого урока вам потребуется премиум-версия GeneratePress, поскольку мы собираемся использовать модуль Elements.

Создайте кнопки обмена в социальных сетях в GeneratePress без плагина

Создание кнопок социальных сетей в теме GeneratePress без плагинов требует от вас знаний об значках SVG.

SVG — это масштабируемая векторная графика. Это открытые стандартные визуальные эффекты (в основном используемые в виде значков), разработанные W3C (Консорциумом Всемирной паутины) (Консорциумом Всемирной паутины).

Преимущества использования SVG

• У них крошечный размер файла, который никогда не влияет на скорость сайта.
• Вы можете легко добавлять гиперссылки к значкам SVG.
• Их легко модифицировать с помощью любого программного обеспечения для векторной графики.
• Значки SVG не зависят от разрешения, что делает их идеальными для просмотра на настольных компьютерах, планшетах и ​​мобильных устройствах.
• Изображения SVG более оптимизированы для SEO по сравнению с обычными изображениями.

Мы будем использовать SVG от Iconmonstr. То есть не только значок, но и значок с его XML-кодом.

Шаг 1. Добавьте код кнопок социальных сетей в хук GeneratePress Elements

Для этого вам сначала нужно создать новый элемент в GeneratePress. Перейдите на панель управления WordPress, в разделе «Внешний вид» нажмите «Элементы». Откроется страница «Элементы», нажмите «Добавить новый элемент».

Как только вы нажмете «Добавить новый элемент», GeneratePress покажет диалоговое окно. Нажмите на Крюк. Это точно, для этого действия вам понадобится специальный хук GeneratePress.

Дайте имя новому элементу и добавьте код.

Выберите хук для генерации после заголовка, выполните PHP и установите правила отображения «Сообщения» — «Все сообщения».

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

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

Не забудьте нажать кнопку «Опубликовать».

Скопируйте следующий код, чтобы реализовать то же самое на своем веб-сайте.

Шаг 2. Примените стили CSS к значкам социальных сетей

Для этого перейдите на панель управления WordPress, в разделе «Внешний вид» нажмите «Настроить».

Откроется настройщик темы GeneratePress. Здесь пройдите до конца и нажмите «Дополнительный CSS».

Вставьте следующий код CSS для сопоставимого стиля. Вы можете настроить CSS в соответствии с вашими требованиями.

Шаг 3: Окончательный результат создания кнопок социальных сетей в GeneratePress

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

Преимущества кнопок социальных сетей в GeneratePress (без плагина) (без плагина)

Использование SVG от Iconmonstr делает ваши значки очень легкими.
Никакого кода JavaScript здесь не задействовано.

Используя эту стратегию, вы не устанавливаете сторонние плагины.
Это отзывчиво.

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

Заключение: Как создать кнопки социальных сетей в GeneratePress?

Теперь вы узнали, как создавать кнопки социальных сетей в GeneratePress с использованием кода и плагинов.

Используйте тот вариант, который вам удобен и который соответствует вашим требованиям. Пожалуйста, не стесняйтесь редактировать код PHP и/или CSS из статьи.