Główna » WordPress » Optymalizacja prędkości WordPress z niestandardowymi ikonami udostępniania społecznościowego
Optymalizacja prędkości WordPress z niestandardowymi ikonami udostępniania społecznościowego
Może się wydawać, że to łatwe zadanie, ale dodanie dobrze zachowujących się przycisków społecznościowych do witryny WordPress może być kłopotliwe. Kiedy mówię, że dobrze się zachowuję, mam na myśli prosty, lekki, przyjazny dla zasobów, szybki - większość wtyczek do udostępniania społecznościowego tam nie ma. Mają tendencję do zjadania zasobów, takich jak szalone, i dlaczego ktoś chciałby zwiększyć czas ładowania wtyczki o 25-35%, aby wyświetlić niektóre ikony na ich stronie?
Dobrą wiadomością jest to, że niekoniecznie potrzebujesz wtyczki do wykonania tego zadania. W tym samouczku pokażę ci, jak możesz łatwo dodaj niestandardowe przyciski udostępniania społecznościowego do końca postów w witrynie WordPress tylko kilka linii kodu.
Wykorzystamy Generator prostych przycisków udostępniania, poręczne i łatwe w użyciu narzędzie internetowe do generowania ikon udostępniania. Główną zaletą tej aplikacji jest to, że generowane przez nią przyciski działają na interfejsie nie obciążą twojego serwera możesz także zachować prywatność swoich użytkowników.
Aby wygenerować własne przyciski, przejdź tutaj i naciśnij Zaczynać. Wybierz 1 z 6 różnych stylów przycisków. Kliknij Kolejny i zaznacz portale społecznościowe chcesz dodać do swojej witryny. Kiedy skończysz, będziesz musiał wypełnić informacje o swojej stronie.
Na tym ekranie (poniżej) znajdziesz dwie opcje: „Bez JavaScript” i „JavaScript”. Kleszcz JavaScript, ponieważ umożliwi to przeglądarce dynamiczne wykrywanie adresu URL, dzięki czemu odwiedzający będą mogli udostępniać każdy post indywidualnie, a nie tylko adres URL strony głównej.
Wreszcie spójrz na podgląd na żywo, pobierz wybrany zestaw ikon i pobierz wygenerowany kod.
Krok 2: Utwórz motyw dziecka
Teraz musisz dodać wygenerowane ikony i kod do swojej witryny. Przede wszystkim musisz stworzyć motyw potomny.
Możesz łatwo utworzyć motyw potomny WP za pomocą naszego samouczka lub możesz śledzić kroki tego artykułu WP Codex. Jeśli już go masz, możesz przejść do kroku 3.
Motyw dziecka odnosi się do aktualnie używanego tematu - w nieco podobny sposób, jak dziecko odnosi się do rodziców. To dziedziczy wszystko (styl i funkcjonalność) z tematu nadrzędnego ale ty możesz dodaj dodatkową funkcjonalność do tego.
W naszym przypadku dodatkową funkcjonalnością będą niestandardowe przyciski udostępniania społecznościowego.
Krok 3: Utwórz niestandardową funkcję, która wyświetla ikony
Dodamy niestandardową funkcję do pliku functions.php kompozycji potomnej.
Dzięki tej funkcji będziesz mógł dodawać ikony społeczności w dowolnym miejscu na swojej stronie, korzystając z niestandardowego haka akcji. Jeśli motyw potomny nie ma jeszcze pliku functions.php, utwórz pusty plik tekstowy w folderze głównym motywu dziecka z funkcjami nazwy i zmień jego rozszerzenie na .php.
Wstaw następujący wiersz kodu do tego pustego pliku:
Kiedy twój functions.php plik jest skonfigurowany dodaj następujący fragment kodu:
Wreszcie usuń wiersz komentarza HTML od fragmentu kodu powyżej i zastąp go kodem HTML wygenerowałeś w kroku 1 za pomocą generatora przycisków udostępniania społecznościowego.
Krok 4: Skopiuj odpowiedni plik szablonu do folderu motywu dziecka
Domyślnie pojedyncze posty są rządzone przez plik szablonu o nazwie single.php. Czasami - zwłaszcza w bardziej nowoczesnych tematach - struktura single.php jest bardziej skomplikowany, ponieważ ładuje dodatkowe pliki szablonów. W tym kroku musimy znaleźć odpowiedni plik szablonu, w którym możemy dodać ikony później.
Aby znaleźć odpowiednie miejsce na przyciski społecznościowe, musimy znaleźć plik szablonu, który zawiera funkcję, która ładuje zawartość pojedynczych postów.
Otwórzmy edytor motywów w panelu administracyjnym WordPress pod Wygląd> Edytor. W prawym górnym rogu znajduje się lista rozwijana, na której możesz wybrać motyw macierzysty. Poniżej listy rozwijanej można zobaczyć wszystkie pliki szablonów, które zawiera motyw macierzysty. Przewiń w dół, aż znajdziesz Szablon pojedynczego postu (zwany single.php) i otwórz go.
Jeśli motyw nadrzędny używa get_template_part () Funkcja WP w single.php plik, który oznacza, że używa dodatkowego pliku szablonu, aby załadować zawartość pojedynczego postu.
Najpierw musisz dowiedzieć się, który to jest. Nazwa dodatkowego pliku szablonu jest pierwszym parametrem pliku get_template_part () funkcjonować.
Pierwszy parametr to 'zawartość' co oznacza, że szukamy pliku szablonu o nazwie content.php. Musisz skopiować ten plik z głównego folderu motywu nadrzędnego do folderu głównego motywu potomnego, aby go zmodyfikować.
Krok 5: Dodaj hak akcji do właściwego pliku szablonu
Stworzyliśmy funkcję o nazwie add_social_sharing () w kroku 3, i dołączamy go do niestandardowego haka akcji o nazwie custom_social_share. Teraz musimy dodać ten hak do miejsca, w którym chcemy, aby funkcja została wykonana.
Oto fragment kodu, który musisz wstawić w odpowiednie miejsce:
Następnie znajdźmy właściwe miejsce.
Otwórz plik szablonu dodany do motywu potomnego w kroku 4 w edytorze kodu lub w edytorze motywów panelu administracyjnego WordPress i poszukaj Treść() funkcjonować.
Sprawdź, czy jest wp_link_pages () funkcja zaraz po Treść() funkcjonować. Jeśli tak, to fragment kodu powyżej pojawia się po tym; w przeciwnym razie następuje Treść() funkcjonować.
Krok 6: Dodaj kod CSS do motywu potomnego
Otworzyć style.css plik motywu potomnego w edytorze kodu lub w edytorze motywów panelu administracyjnego WordPress, skopiuj wygenerowany kod CSS w kroku 1, wklej go na koniec pliku i zapisz go.
Dodamy dwie dodatkowe linie do pliku CSS, aby ikony udostępniania społecznościowego były poprawnie wyświetlane w każdym motywie. Skopiuj i wklej następujący fragment kodu na końcu style.css plik:
ul.share-buttons li a border: 0; ul.share-buttons li img display: inline;
Krok 7: Prześlij ikonę Social Media ustawioną na serwerze
Prześlij wybraną ikonę mediów społecznościowych, którą pobrałeś w kroku 1 do swojego folderu motywu. Połącz swój serwer przez FTP, utwórz nowy folder o nazwie obrazy wewnątrz katalogu głównego twojego folderu motywu (/ wp-content / themes / your-child-theme / images) i prześlij zestaw ikon tutaj.
Nazywamy folder obrazy ponieważ jest to domyślna nazwa folderu obrazów, z którego korzysta generator prostego udostępniania przycisków.
Krok 8: Sprawdź ścieżkę plików ikon
Po przesłaniu ikon mediów społecznościowych na serwer w kroku 7 ważne jest, aby sprawdzić ścieżkę plików ikon, aby upewnić się, że zostaną załadowane.
Ścieżka do pliku obrazu daje wskazówkę dla przeglądarki o jego lokalizacji na serwerze. Sprawdźmy ścieżki obrazu wewnątrz functions.php plik motywu potomnego. Otwórz plik w edytorze kodu i przejdź do add_social_sharing () funkcja, w której musisz sprawdzić kod HTML wygenerowany za pomocą prostego generatora przycisków udostępniania.
W kodzie HTML znajdziesz tag z src atrybut dla każdej ikony. Sprawdź, czy każdy src przypisuje punkty do dokładnej lokalizacji, w której zestaw ikon został przesłany w kroku 7.
Generator przycisków prostego udostępniania dodaje względne ścieżki do pliki. Czasami przeglądarki nie mogą renderować obrazów, jeśli używasz ścieżki względnej, więc to dobry pomysł zamiast tego używaj ścieżek bezwzględnych. W ten sposób każda przeglądarka potencjalnie wykorzystywana przez użytkowników może być martwa co do lokalizacji wymaganych plików ikon.
Względna ścieżka obrazu dodana przez generator wygląda mniej więcej tak:
Zmieńmy src atrybut każdej ikony do ścieżki bezwzględnej, co oznacza, że będzie zawierać pełny adres URL pliku.
Powyższa ścieżka URL będzie wyglądać następująco:
Krok 9: Prześlij zmodyfikowane pliki i aktywuj motyw potomny
Połącz swój serwer przez FTP i prześlij wszystkie pliki, które utworzyliśmy w tym samouczku, których jeszcze nie przesłałeś: functions.php, style.css, i odpowiedni plik szablonu (w tym samouczku albo single.php albo content.php).
Na koniec aktywuj motyw potomny w panelu administracyjnym WP pod Wygląd> Tematy menu.
Teraz jesteś gotowy z super lekkimi, oszczędzającymi zasoby, dostosowanymi ikonami udostępniania społecznościowego. Możesz przejść do trybu online i sprawdzić na żywo na swojej stronie.
Wniosek
W tym samouczku pokazałem, jak dodać niestandardowe przyciski udostępniania społecznościowego do końca pojedynczych postów. Możesz dodać ikony udostępniania do dowolnych innych lokalizacji na swojej stronie za pomocą stworzonego przez nas haka akcji.
Po prostu dodaj kod użyty w kroku 5 do miejsca, w którym mają być wyświetlane przyciski:
Musisz także znaleźć odpowiedni plik szablonu, jeśli chcesz umieścić ikony w innym miejscu. Pojedyncze strony są rządzone przez plik szablonu o nazwie page.php, podczas gdy załączniki takie jak obrazy są ładowane przez attachment.php.
Jeśli chcesz wyświetlić przyciski udostępniania społecznościowego w innym miejscu na swojej stronie, możesz użyć hierarchii szablonów WordPress, aby je znaleźć.
