Как да създадете бутони за социално споделяне в 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: Добавяне на код за бутони за социално споделяне към GeneratePress Elements Hook

За да постигнете това, първо ще трябва да създадете нов елемент в GeneratePress. Отидете на таблото за управление на WordPress, под Външен вид, щракнете върху Елементи. Това ще отвори страницата с елементи, щракнете върху Добавяне на нов елемент.

Веднага след като щракнете върху Добавяне на нов елемент, Генериране Press ще покаже диалогов прозорец. Кликнете върху Кука. Това е точно, имате нужда от персонализирана кука GeneratePress за това действие.

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

Изберете куката като генериране след заглавка, изпълнете PHP и задайте правилата за показване на Публикации – Всички публикации.

Тъй като се нуждаем от иконите за социално споделяне, за да плават в прозореца за изглед на екрана. Най-добре е да изберете Generate After Header Hook.

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

Не забравяйте да натиснете бутона Публикувай.

Копирайте следния код, за да приложите същия на вашия уебсайт.

Стъпка 2: Извършете CSS стилизиране на икони за социално споделяне

За да направите това, отидете на таблото за управление на WordPress, под Външен вид щракнете върху Персонализиране.

Това ще отвори инструмента за персонализиране на теми GeneratePress. Тук отидете докрай и щракнете върху Допълнителен CSS.

Поставете следния CSS код за сравним стил. Имате право да коригирате CSS според вашите изисквания.

Стъпка 3: Краен резултат от бутоните за социално споделяне в GeneratePress

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

Предимства на бутоните за социално споделяне в GeneratePress (без плъгин) (без плъгин)

Използването на SVG от Iconmonstr прави вашите икони много леки
Не е включен никакъв вид JavaScript код.

Използвайки тази стратегия, вие не инсталирате плъгин на трета страна
Той е отзивчив.

Всички бутони ще работят невероятно бързо за споделяне.

Заключение: Как да създадете бутони за социално споделяне в GeneratePress?

Сега открихте как да конструирате бутони за социално споделяне в GeneratePress, като използвате код и добавки.

Използвайте опцията, която е лесна за вас и която отговаря на вашите изисквания. Моля, не се колебайте да редактирате PHP и/или CSS кода от статията.