Skrawki kodu WordPressa

Najlepsze sposoby umieszczania fragmentów kodu w WordPressie

Jeśli prowadzisz stronę internetową WordPress, z pewnością przyjdzie czas, kiedy będziesz miał do czynienia z Code Snippets (fragmentami kodu). Ponieważ utrzymanie snippetów może powodować niepotrzebną pracę, jeśli nie są one prawidłowo zintegrowane, istnieją wtyczki do snippetów. Istnieją jednak również inne sposoby na włączenie Code Snippets do swojej witryny. W tym artykule porównujemy najlepsze sposoby dodawania fragmentów kodu do witryny WordPressa. 

Po pierwsze, należy odpowiedzieć na pytanie: Czym jest snippet (" fragment kodu")? Fragment kodu to mały kawałek kodu, który rozszerza funkcjonalność Twojej strony internetowej. Stąd nazwa - tłumaczona jako "fragment kodu". Ma to sugerować, że jest to tylko kilka linijek kodu. Przydatne przykłady to możliwość umieszczania filmów responsywnych i dopuszczanie dodatkowych formatów plików do biblioteki mediów. Interesujące jest to, że te fragmenty kodu mogą zastąpić całą wtyczkę. Może to znacznie poprawić ilość kodu (a co za tym idzie wielkość plików), wydajność i odporność na błędy twojej strony.

Są też inne przypadki, kiedy musisz dodać Code Snippets do swojej strony WordPressa. Jeśli chcesz śledzić, kto odwiedza twoją stronę, możesz dodać kod śledzenia w nagłówku lub stopce. Jeśli chcesz użyć na swojej stronie gotowego rozwiązania do wyrażania zgody na pliki cookie, zazwyczaj dodajesz kod JavaScript w nagłówku lub stopce strony.  

Po co w ogóle są wtyczki Code Snippet? 

W wielu witrynach WordPressa kod został dostosowany, ale czasami w sposób, który nie jest trwały. Fragmenty kodu nie powinny być umieszczane bezpośrednio w motywie "rodzica" lub głównym motywie WordPressa. Dzieje się tak dlatego, że zostaną one nadpisane i usunięte, gdy tylko zaktualizujesz motyw.

To samo dotyczy wtyczek. Jeśli bezpośrednio zmienisz kod wtyczki, twoje zmiany zostaną prawdopodobnie usunięte podczas aktualizacji. Jedynym sposobem zachowania zmian jest ich zapisanie lub wykonanie kopii zapasowej w innym miejscu. Niektóre aktualizacje wtyczek dodają tylko nowe funkcje, ale inne zawierają poprawki bezpieczeństwa. Należy je prawidłowo zastosować, aby zmniejszyć podatność witryny na ataki. Dlatego nieprawidłowe stosowanie fragmentów kodu może nawet stać się zagrożeniem dla bezpieczeństwa, ponieważ możesz wtedy wpaść na pomysł, by pozwolić na aktualizację ze względu na fragment kodu.

Przedstawię ci teraz trzy sposoby wstawiania kodu, który będzie używany w pliku functions.php. Jednym z nich są wtyczki do pobierania wycinków kodu. Nie obejmuje to wszystkich sytuacji, w których chcesz dostosować wtyczkę lub motyw, ponieważ zależy to od istnienia odpowiednich haków do wprowadzania niezbędnych zmian. Hooki to miejsca w kodzie służące do interakcji z rdzeniem WordPressa, czyli rodzaj "haka", w którym wtyczki i motywy mogą się "zaczepić". Jeśli więc nie ma haka dla danej funkcji, najrozsądniejszym rozwiązaniem są fragmenty kodu (w pliku functions.php).

Utwórz wtyczkę do WordPressa

Ta metoda wymaga trochę pracy w pliku i na samej stronie, więc powinieneś zachować ostrożność i najlepiej zrobić kopię zapasową przed wprowadzeniem jakichkolwiek zmian. Wtyczka ma co najmniej jeden folder, w którym znajduje się plik PHP. Spróbuj wymyślić unikalną nazwę dla swojego folderu i plików (możesz dodać przedrostek oparty na swoim imieniu lub nazwie swojej firmy, lub coś podobnego (na przykład "Raidboxes.io Disk Usage Sunburst").

W tym pliku potrzebna jest jeszcze jedna rzecz - nagłówek z informacjami o wtyczce. Tutaj również potrzebujesz deklaracji nazwy swojej wtyczki, jak poniżej: 

<?php

/**
* Plugin Name: your plugin name
*/

Dobra robota! Teraz stworzyłeś swoją pierwszą wtyczkę. Po nagłówku dodaj swoje fragmenty kodu (te, które chcesz umieścić w functions.php) i prześlij folder do katalogu /wp-content/plugins/ na serwerze. Twoja wtyczka powinna pojawić się w sekcji Wtyczki w obszarze administracyjnym. 

Wtyczki WordPress

Jeśli chcesz dowiedzieć się więcej na temat tworzenia wtyczek do WordPressa, możesz przeczytać post o tym w Codex.

Preferuję podejście polegające na tworzeniu niestandardowych wtyczek, ponieważ jest to świetny sposób na dodawanie kodu do pliku functions.php. Jest też łatwy do skonfigurowania. 

Użyj wtyczki do WordPressa

Dla tych, którzy nie mają odwagi tworzyć własnych wtyczek, jedna z wtyczek Code Snippet jest świetnym sposobem na zarządzanie wycinkami kodu lub dodawanie niestandardowego kodu do stron WordPressa. Prawdopodobnie jesteś już przyzwyczajony do instalowania wtyczek innych firm, więc ta opcja może być łatwiejsza niż pierwsza.

Po prostu zainstaluj odpowiednią wtyczkę i przejdź do nowej pozycji menu, która pojawi się w obszarze administracyjnym. Zauważ, że poszczególne wtyczki mogą mieć różną strukturę. Jednak większość z nich jest prosta i łatwa do zrozumienia. Powinieneś zmienić nazwę każdego dodawanego fragmentu kodu. Jest to bardzo przydatne, aby ułatwić znalezienie konkretnego Code Snippet. Takie podejście jest bardzo zalecane i może zaoszczędzić ci kłopotów z wieloma Code Snippets.

Czynnikami decydującymi o wyborze dobrej wtyczki, która umożliwia uruchamianie snippetów kodu na stronie internetowej, są między innymi wpływ na wydajność strony i łatwość obsługi. Przedstawię Ci teraz kilka wtyczek do WordPressa, w których można znaleźć fragmenty kodu.

Najlepsze wtyczki Code Snippet dla WordPressa

Code Snippets

Code Snippets

To rozszerzenie zostało opracowane przez Code Snippets Pro i jest moim ulubionym. Ideą tego rozszerzenia jest możliwość dodawania małych fragmentów kodu PHP. Oferuje proste rozwiązanie umożliwiające dodawanie własnych fragmentów kodu HTML, JavaScript lub PHP. Korzystanie z wtyczki jest podobne do korzystania z innych menu administracyjnych WordPressa i jest bardzo łatwe. Wtyczka umożliwia dodawanie fragmentów kodu do motywu za pomocą interfejsu graficznego. Zwróć uwagę, że to rozszerzenie nie nadaje się do dodawania kodów śledzących itp. Tego rozszerzenia najlepiej używać, aby dodać więcej funkcji do pliku functions.php motywu.

Cechy:

  • Możesz użyć kodu PHP w widżetach, stronach i postach.
  • Dodaj PHP, aby tworzyć formularze kontaktowe i przetwarzać dowolny rodzaj danych wejściowych.
  • Dodaj PHP, aby stworzyć zawartość zoptymalizowaną pod kątem użytkownika.
  • Dzięki PHP możesz dostosować każdy aspekt swojej instalacji WordPress.

Insert PHP Code Snippets

Insert PHP Code Snippets

Ten dodatek został stworzony przez xyzscripts.com i jest popularnym rozszerzeniem, które jest regularnie aktualizowane. Dzięki tej wtyczce możesz używać kodu PHP, który można łatwo wstawić do normalnego edytora WordPressa, ponieważ tworzy ona snippet shortcodes dla każdego dodanego kodu. Wstawianie działa również za pomocą shortcode w pasku bocznym widgetu tekstowego strony. 

Cechy: 

  • W edytorze TinyMCE masz inteligentne menu rozwijane
  • Konwersja fragmentów PHP na shortcodes dla łatwego wdrożenia
  • Prosta i elastyczna funkcjonalność

Custom CSS Pro 

Code Snippets Custom CSS Pro

Dzięki wtyczce Custom CSS Pro WordPress możesz łatwo dodać niestandardowy kod CSS do swojej witryny WordPress. Ta darmowa wtyczka do WordPressa oferuje kilka przydatnych funkcji, takich jak podgląd w czasie rzeczywistym i numerowanie linii, które ułatwiają edycję kodu. 

Cechy:

  • Wizualnie przypomina środowisko w Visual Studio Code lub Sublime Text
  • Łatwo jest dodać niestandardowy kod CSS do WordPressa
  • Podgląd na żywo w czasie rzeczywistym

Insert Headers and Footers

Code Snippets Wstawianie nagłówka i stopki

Ten typ wtyczki ułatwia wstawianie kodu do nagłówka lub stopki. Rozszerzenie zostało opracowane przez WPbeginner, który stworzył również słynną wtyczkę do formularzy WPforms. Dzięki tej wtyczce możesz łatwo wstawić fragmenty kodu umożliwiające integrację takich usług jak Google Analytics czy Facebook Pixel. 

Cechy: 

  • Szybka konfiguracja
  • Łatwe wstawianie nagłówków, skryptów i innego kodu
  • Pozwala na dodanie dowolnego kodu lub skryptu wraz z HTML i JavaScript
  • Jest to najprostsza opcja wstawiania kodów śledzenia

Narzędzia zintegrowane z Elementorem (wersja Pro)

Jeśli używasz kreatora stron Elementor w wersji Pro, nie musisz instalować innej wtyczki. Elementor ma wbudowane narzędzie do wstawiania kodów śledzących i tym podobnych. Elementor obsługuje także zmianę nazw wszystkich skryptów, które dodajesz do swojej witryny WordPress. Aby znaleźć własny kod Elementora, wykonaj następujące kroki. Przejdź do Pulpitu nawigacyjnego > Własny kod Elementora. Tam wklej skrypt, który chcesz umieścić na swojej stronie. Pamiętaj, że musisz mieć aktywną licencję Elementor Pro, aby móc korzystać z narzędzi do tworzenia kodu wbudowanych w Elementor.

Cechy: 

  • Prosta i logiczna struktura
  • Zintegrowany z Twoim page builderem

Użyj motywu potomnego

Ta metoda jest najmniej zalecana do dodawania fragmentów kodu, ale nadal działa dobrze. Jest to nieco bardziej skomplikowane niż tworzenie wtyczki. Motyw potomny powinien zawierać kod i stylizację, które dotyczą układu i wyglądu twojej strony. Jednak snippet jest zwykle używany do zmiany funkcjonalności, a więc nie wchodzi w zakres "odpowiedzialności" motywu potomnego. 

Aby utworzyć motyw podrzędny, utwórz folder o tej samej nazwie co motyw nadrzędny i z końcówką "-child" (jeśli folder motywu nadrzędnego nazywa się "raidboxes.io-theme", to folder motywu podrzędnego będzie brzmiał "raidboxes.io-theme-child"). 

W tym folderze potrzebujesz co najmniej dwóch plików: Plik arkusza stylów o nazwie style.css oraz plik PHP o nazwie child.php.

Plik style.css musi zawierać nagłówek o następującej minimalnej specyfikacji:

/* 
Theme Name: Raidboxes.io Theme Child
Template: Raidboxes Theme
Version: 1.0.0
*/

Następnie dodaj swój fragment kodu na końcu pliku functions.php i prześlij folder child theme na serwer pod adresem /wp-content/themes/.

Jeśli wszystko jest w porządku, możesz otworzyć menu Projektowanie → Motywy w obszarze administracyjnym i aktywować nowy motyw potomny. Jeśli chcesz dowiedzieć się więcej, wyjaśniamy w magazynie jak stworzyć motyw potomny.

Wnioski 

Ten artykuł dostarczył ci podstawowych informacji na temat możliwości włączenia snippetów kodu do WordPressa. Decyzja między stworzeniem własnej wtyczki WordPressa lub motywu potomnego a użyciem wtyczki Code Snippet należy do ciebie - i zależy tylko od twoich preferencji, ponieważ te trzy metody funkcjonalnie spełniają to samo zadanie. Najlepiej jest używać tego, co najbardziej Ci odpowiada.

Spodobał Ci się ten artykuł?

Zostawiając opinię pomożesz nam udoskonalać publikowane przez nas treści.

Napisz komentarz

Twój adres e-mail nie zostanie opublikowany. Pola wymagane oznaczone są *.