Як створити кнопки соціальних мереж у GeneratePress?

У цьому підручнику ми розглянемо Як створити кнопки соціального обміну в GeneratePress?

Це, безсумнівно, допоможе вам покращити міжканальне просування публікації в блозі. Це, у свою чергу, збільшить вашу присутність в Інтернеті.

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

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

Цей урок вимагає від вас GeneratePress premium, оскільки ми збираємося використовувати модуль Elements.

Створіть кнопки соціального обміну в GeneratePress без плагіна

Щоб створити кнопки спільного доступу в соціальних мережах у темі GeneratePress без плагінів, потрібно знати про піктограми SVG.

SVG — це масштабована векторна графіка. Це відкриті стандартні візуальні елементи (в основному використовуються як піктограми), розроблені W3C (World Wide Web Consortium) (World Wide Web Consortium).

Переваги використання SVG

• Вони мають невеликий розмір файлу, який ніколи не впливає на швидкість сайту.
• Ви можете легко додати гіперпосилання до значків SVG.
• Вони легко змінюються за допомогою будь-якого програмного забезпечення для векторної графіки.
• Значки SVG не залежать від роздільної здатності, що робить їх чудовими для перегляду на комп’ютері, планшеті та мобільному пристрої.
• Зображення SVG більш сприятливі для SEO порівняно зі звичайними зображеннями.

Ми будемо використовувати SVG з Iconmonstr. Це означає не лише піктограму, а й піктограму з її XML-кодом.

Крок 1: додайте код кнопок соціального обміну для створення гачка елементів Press

Для цього вам спочатку потрібно буде створити новий елемент у GeneratePress. Перейдіть на інформаційну панель WordPress, у розділі «Зовнішній вигляд» натисніть «Елементи». Відкриється сторінка «Елементи», натисніть «Додати новий елемент».

Як тільки ви натиснули «Додати новий елемент», GeneratePress відобразить діалогове вікно. Натисніть на Гачок. Це точно, для цієї дії вам потрібен спеціальний хук GeneratePress.

Дайте назву новому елементу та додайте код.

Виберіть хук як заголовок generate after, виконайте PHP і встановіть правила відображення на Posts – All Posts.

Оскільки нам потрібно, щоб піктограми соціальних мереж плавали на нашому екрані. Найкраще вибрати «Створити хук після заголовка».

Причина, чому ми вибрали налаштування відображення як Усі публікації, полягає в тому, що ви хочете, щоб ваші користувачі ділилися вашим вмістом на своїх соціальних сайтах.

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

Скопіюйте наведений нижче код, щоб застосувати його на своєму веб-сайті.

Крок 2. Виконайте CSS-стилі для значків соціальних мереж

Для цього перейдіть на інформаційну панель WordPress, у розділі «Зовнішній вигляд» натисніть «Налаштувати».

Це відкриє настроювач теми GeneratePress. Тут опустіться до кінця та клацніть Додатковий CSS.

Вставте наведений нижче код CSS для порівнянного стилю. Ви можете налаштувати CSS відповідно до своїх вимог.

Крок 3: Остаточний результат кнопок соціального обміну в GeneratePress

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

Переваги кнопок соціального обміну в GeneratePress (Без плагіна) (Без плагіна)

Використання SVG від Iconmonstr робить ваші піктограми дуже легкими
Немає жодного коду JavaScript.

Використовуючи цю стратегію, ви не встановлюєте сторонній плагін
Він чуйний.

Усі кнопки працюватимуть неймовірно швидко для спільного використання.

Висновок: Як створити кнопки соціального обміну в GeneratePress?

Тепер ви дізналися, як створити кнопки соціального обміну в GeneratePress за допомогою коду та плагінів.

Використовуйте той варіант, який вам зручний і відповідає вашим вимогам. Будь ласка, не соромтеся редагувати код PHP і/або CSS зі статті.