Jak utworzyć przyciski udostępniania społecznościowego w GeneratePress?

W tym samouczku przyjrzymy się temu Jak utworzyć przyciski udostępniania społecznościowego w GeneratePress?

To niewątpliwie pomogłoby Ci w ulepszeniu promocji Twojego wpisu na blogu w wielu kanałach. To z kolei zwiększy Twoją obecność w Internecie.

Pokażę Ci, jak skonstruować przylepne przyciski udostępniania społecznościowego, które unoszą się na początku wpisów na blogu. Oznacza to, że zawsze będą widoczne dla odbiorców.

Możemy to osiągnąć za pomocą wtyczki, ale najlepszą częścią jest zbudowanie ich ręcznie. Dzięki temu wiesz, że unikasz dodawania kodu JavaScript (zabijającego wydajność witryny) w swojej witrynie.

Ta lekcja wymaga posiadania premium GeneratePress, ponieważ będziemy korzystać z modułu Elementy.

Utwórz przyciski udostępniania społecznościowego w GeneratePress bez wtyczki

Tworzenie przycisków udostępniania społecznościowego w motywie GeneratePress bez wtyczek wymaga znajomości ikon SVG.

Pliki SVG to skalowalna grafika wektorowa. Są to elementy wizualne o otwartym standardzie (używane głównie jako ikony) opracowane przez W3C (Konsorcjum World Wide Web) (Konsorcjum World Wide Web).

Korzyści z używania plików SVG

• Mają niewielki rozmiar pliku, który nigdy nie wpływa na szybkość witryny.
• Możesz łatwo dodać hiperłącza do ikon SVG.
• Można je łatwo modyfikować za pomocą dowolnego oprogramowania do grafiki wektorowej.
• Ikony SVG są niezależne od rozdzielczości, dzięki czemu doskonale nadają się do wyświetlania na komputerach stacjonarnych, tabletach i urządzeniach mobilnych.
• Obrazy SVG są bardziej przyjazne dla SEO w porównaniu do obrazów konwencjonalnych.

Będziemy używać SVG z Iconmonstr. Oznacza to nie tylko ikonę, ale także ikonę z jej kodem XML.

Krok 1: Dodaj kod przycisków udostępniania społecznościowego, aby wygenerować hak elementówPress

Aby to osiągnąć, musisz najpierw utworzyć nowy element w GeneratePress. Przejdź do panelu WordPress, w sekcji Wygląd kliknij Elementy. Spowoduje to otwarcie strony Elementy, kliknij Dodaj nowy element.

Gdy tylko klikniesz Dodaj nowy element, GeneratePress wyświetli okno dialogowe. Kliknij Hak. Zgadza się, do tej akcji potrzebujesz niestandardowego haka GeneratePress.

Nadaj nazwę nowemu elementowi i dodaj kod.

Wybierz hak jako generujący po nagłówku, uruchom PHP i ustaw reguły wyświetlania na Posty – Wszystkie posty.

Ponieważ potrzebujemy ikon udostępniania społecznościowego, aby unosiły się w naszym oknie roboczym. Najlepiej jest wybrać opcję Generuj po zaczepie nagłówka.

Powodem, dla którego wybraliśmy ustawienia wyświetlania Wszystkie posty, jest to, że chcesz, aby Twoi użytkownicy udostępniali Twoje treści w swoich witrynach społecznościowych.

Nie zapomnij nacisnąć przycisku Publikuj.

Skopiuj poniższy kod, aby zaimplementować go w swojej witrynie.

Krok 2: Wykonaj stylizację CSS dla ikon udostępniania społecznościowego

Aby to zrobić, przejdź do panelu WordPress, w sekcji Wygląd kliknij Dostosuj.

Spowoduje to otwarcie dostosowywania motywu GeneratePress. Zejdź na sam dół i kliknij Dodatkowy CSS.

Wklej następujący kod CSS, aby uzyskać porównywalną stylizację. Możesz dostosować CSS zgodnie ze swoimi wymaganiami.

Krok 3: Końcowy wynik działania przycisków udostępniania społecznościowego w GeneratePress

Na koniec, oto jak Podziel się z innymi ikony powinny wyglądać tak, jak na Twojej stronie internetowej. Pamiętaj, że sprawiliśmy, że unosiły się od góry na 70% widocznego obszaru ekranu.

Korzyści z przycisków udostępniania społecznościowego w GeneratePress (bez wtyczki) (bez wtyczki)

Użycie plików SVG firmy Iconmonstr sprawia, że ​​Twoje ikony są bardzo lekkie
Nie ma tu żadnego kodu JavaScript.

Korzystając z tej strategii, nie instalujesz żadnej wtyczki strony trzeciej
Jest responsywny.

Wszystkie przyciski będą działać niezwykle szybko w celu udostępniania.

Wnioski: Jak utworzyć przyciski udostępniania społecznościowego w GeneratePress?

Teraz odkryłeś, jak konstruować przyciski udostępniania społecznościowego w GeneratePress przy użyciu kodu i wtyczek.

Skorzystaj z opcji, która jest dla Ciebie łatwa i która spełnia Twoje wymagania. Zachęcamy do edycji kodu PHP i/lub CSS z artykułu.