Jak utworzyć bibliotekę fragmentów postów do wykorzystania w swoich postach i stronach?

Wiele witryn WordPress używa niestandardowego kodu lub funkcji gdzieś w swoich postach i stronach. Platforma ułatwia dodawanie tego kodu, ale jeśli zamierzasz ponownie wykorzystywać fragmenty w swojej witrynie, ręczne dodawanie kodu może być trudne, gdy zajdzie taka potrzeba.

Zamiast konieczności ręcznego wstawiania fragmentów kodu za każdym razem, gdy są potrzebne, bardziej sensowne jest ich porządkowanie i zapisywanie za pomocą wtyczek. W tym artykule omówimy korzyści płynące z organizowania fragmentów kodu, a następnie pokażemy, jak to zrobić za pomocą wtyczki Code Snippets Extended w dwóch krokach. Chodźmy do pracy!

Dlaczego powinieneś organizować swoje fragmenty kodu

Nawet jeśli nie jesteś programistą, prawdopodobnie będziesz musiał ręcznie dodać kod do swojej witryny.

Wielu użytkowników WordPressa dodaje niestandardowe fragmenty kodu do swoich postów i stron. Niezależnie od Twojej niszy i rozmiaru, istnieje wiele sytuacji, w których będziesz musiał dodać trochę kodu do swojej witryny. Weźmy na przykład Google Adsense lub Facebook Pixel, które wymagają dodania kilku linijek kodu JavaScript do Twojej witryny, zanim będą mogły działać. Wiele wtyczek WordPress wymaga również używania skrótów, więc szanse na dodanie niestandardowego kodu do Twojej witryny są wysokie.

Biorąc to pod uwagę, doskonałym pomysłem jest znalezienie sposobu na zapisanie wszystkich fragmentów kodu, których używasz w swojej witrynie. Dlatego:

• W razie potrzeby możesz odwołać się do swojego kodu. Czasami możesz zapomnieć, jakie wiersze niestandardowego kodu dodałeś do swoich plików, więc opłaca się organizować swoje fragmenty za pomocą biblioteki.
• Będziesz mieć możliwość łatwiejszego ponownego wykorzystania fragmentów kodu. Jeśli musisz wielokrotnie użyć tego samego kodu, warto zapisać go do późniejszego wykorzystania.

Możesz oczywiście po prostu zapisać te fragmenty kodu za pomocą zwykłych plików tekstowych na komputerze lub w chmurze. Jednak korzystanie z odpowiedniej wtyczki WordPress może zapewnić bardziej odpowiedni sposób przechowywania ich w witrynie. W ten sposób będziesz wiedzieć, jaki kod został dodany do każdej konkretnej witryny, z którą pracujesz.

Przedstawiamy rozszerzoną wtyczkę fragmenty kodu

Wtyczka Code Snippets Extended to ciekawe narzędzie, które umożliwia skonfigurowanie prostej biblioteki kodu w WordPressie. Umożliwia zapisanie niestandardowego kodu, zidentyfikowanie go przy użyciu dowolnej nazwy, a następnie dodanie go do dowolnych postów i stron za pomocą kilku kliknięć.

Ponadto wtyczka umożliwia również podgląd efektów fragmentów kodu, o ile są to proste JavaScript lub CSS. Obsługuje również PHP, ale te fragmenty zwykle nie wyświetlają się tak dobrze, gdy korzysta się z funkcji podglądu narzędzia.

Chociaż wtyczka dobrze współpracuje z Divi Builder jako całość, jest jeden problem, który wymaga obejścia. Domyślnie narzędzie dodaje do edytora nowy przycisk, który umożliwia dodawanie dowolnych fragmentów biblioteki do posta lub strony. Jednak przycisk znika po przełączeniu na Divi Builder. Poprawka jest jednak prosta i za chwilę ją omówimy.

Kluczowe cechy:

• Zapisz wszystkie niestandardowe fragmenty kodu w scentralizowanej bibliotece na pulpicie nawigacyjnym.
• Zidentyfikuj każdy fragment za pomocą unikalnej nazwy.
• Przypisz łatwe w użyciu skróty do każdego elementu w swojej bibliotece.
• Dodaj fragmenty do swoich postów i stron za pomocą nowej opcji w edytorze WordPress, bez konieczności dotykania kodu.

Cena: ZA DARMO | Więcej informacji

Jak utworzyć bibliotekę fragmentów postów do wykorzystania w swoich postach i stronach (w 2 krokach)

Zanim zaczniemy, musisz zainstalować i aktywować wtyczkę. Gdy będziesz gotowy, przejdź do kroku numer jeden!

Krok #1: Dodaj nowe fragmenty do swojej biblioteki

Po zainstalowaniu wtyczki zobaczysz nową kartę o nazwie Snippets na pulpicie WordPress. Kliknij i poszukaj opcji Dodaj fragmenty . Na następnym ekranie będziesz mógł ustawić nazwę identyfikującą kod w bibliotece, a także przesłać wszelkie pliki multimedialne potrzebne do wykonania kodu:

Pamiętaj – kod będzie nadal działał, nawet jeśli nie prześlesz niezbędnych multimediów z tej strony, o ile znajduje się w Twojej bibliotece. Ta funkcja jest dostępna tylko tam, więc możesz wyświetlić podgląd efektów swojego kodu za pomocą przycisku Test na dole strony.

Idąc dalej, zobaczysz także edytor, w którym będziesz wpisywać kod CSS, JavaScript, PHP i jQuery. Jednak będzie musiał być opakowany w określone tagi dla każdego języka. Oto kilka szybkich przykładów w celach informacyjnych:

<style>CSS goes between these tags.</style>

<?php PHP tags, on the other hand, are different, so keep that in mind. ?>
<script type="text/javascript"> Same goes for JavaScript, which uses this tag type. </script>
<script type="text/javascript"> jQuery(function($) {
$(document).ready(function(){
// jQuery uses the most complex tags – they need to be set up exactly as shown, and any code should go within this section.
});
});
</script>

Możesz odwoływać się do wszystkich tych tagów pod edytorem za każdym razem, gdy dodajesz nowy fragment, i jeśli pamiętasz, że każdy język wymaga innego, nie musisz ich zapamiętywać. Dodatkowo możesz używać wielu języków w tym samym fragmencie – pamiętaj tylko, aby owinąć je za pomocą odpowiednich tagów.

Gdy skończysz wpisywać lub wklejać kod, użyj przycisku Zapisz fragment na dole strony, a pojawi się on na karcie Fragmenty > Fragmenty na pulpicie WordPress:

Teraz wszystko, co pozostało, to przetestowanie nowego fragmentu za pomocą edytora WordPress i Divi Builder.

Krok #2: Wstaw swoje fragmenty do swoich postów i stron Divi

Jeśli nie korzystasz z Divi Builder, możesz po prostu otworzyć dowolny ze swoich postów lub stron za pomocą zwykłego edytora WordPress. U góry zobaczysz nowy przycisk Wstaw fragment :

Kliknięcie go spowoduje wyświetlenie nakładki wyświetlającej wszystkie elementy w Twojej bibliotece i możesz wybrać dowolny z nich:

Teraz wtyczka doda kod do edytora i gotowe – to takie proste. Jeśli jednak korzystasz z Divi Builder, nie będziesz mieć dostępu do tej opcji. Najłatwiejszym sposobem obejścia tego problemu jest otwarcie karty Snippets pulpitu nawigacyjnego w nowym oknie i skopiowanie odpowiedniego skrótu dla kodu, który chcesz dodać. Gdy już to zrobisz, wróć do Divi Builder i dodaj moduł kodu do strony, nad którą pracujesz:

Gdy już będziesz w środku, wklej swój krótki kod w polu Treść i zapisz zmiany:

Teraz Twój fragment będzie działał jak zwykle. Korzystanie z Divi Builder dodaje jeden krok do procesu, ale nadal możesz przechowywać wszystkie fragmenty kodu w wewnętrznej bibliotece, do której można łatwo uzyskać dostęp.

Wniosek

Jeśli jesteś podobny do nas, cenisz efektywność we wszystkich swoich projektach. Ręczne dodawanie tego samego kodu do wielu stron lub postów jest możliwe, ale nie jest to dobre wykorzystanie czasu. Zamiast tego o wiele lepiej przetestować kod raz, zapisać go w swojej bibliotece, a następnie przechowywać w wirtualnej tylnej kieszeni zawsze, gdy jest potrzebny.

Wtyczka Code Snippets Extended umożliwia właśnie to. Po prostu zainstaluj i wykonaj te dwa kroki:

1. Dodaj nowe fragmenty do swojej biblioteki.
2. Wstaw swoje fragmenty do swoich postów i stron Divi.

Czy masz pytania dotyczące dodawania fragmentów kodu do swojej witryny Divi? Zapytaj w sekcji komentarzy poniżej!

Obraz miniatury artykułu autorstwa Andrii Bezvershenko / shutterstock.com.