Chcesz dowiedzieć się, jak stworzyć krótki kod w WordPressie?
Nauka tworzenia krótkich kodów w WordPressie może być skutecznym sposobem na dostosowanie Twoich postów i stron. Jeśli jednak jesteś nowy w tym procesie, możesz mieć trudności ze zrozumieniem, jak korzystać z takiej funkcji w swojej witrynie.
Dlatego przygotowaliśmy przewodnik, który pomoże Ci zacząć. Patrząc na to, jak działają skróty i jak je skutecznie stosować, możesz zacząć dostosowywać swoje treści do własnych upodobań bez potrzeby stosowania dodatkowych wtyczek.
W tym artykule omówimy, czym są skróty WordPress i dlaczego warto z nich skorzystać. Następnie pokażemy Ci, jak stworzyć własną.
Ale wcześniej, jeśli nigdy nie instalowałeś WordPress, odkryj Jak zainstalować WordPress blogu kroki 7 et Jak znaleźć, zainstalować i aktywować WordPress na swoim blogu
Wróćmy do tego, dlaczego tu jesteśmy.
Czym są skróty WordPress?
Skróty WordPress działają jak skróty, które pozwalają szybko osadzić elementy w poście lub na stronie. Są to zazwyczaj pojedynczy wiersz kodu zawarty w nawiasach kwadratowych. Na przykład :
[exemplecodehortcode]Ten kod wyświetli wstępnie ustaloną funkcję w interfejsie witryny.
WordPress pierwsze wprowadzone skróty z wydaniem Krótki kod API. Ułatwiło to użytkownikom dodawanie atrakcyjnych elementów do swoich postów i stron, takich jak Mapy Google lub przycisk Facebooka „Lubię to”.
Istnieje w WordPress domyślnat sześć krótkich kodów :
- podpis: Zawijaj podpisy wokół treści
- galeria : wyświetla galerie zdjęć
- Audio: osadza i odtwarza pliki audio
- vidéo : osadza i odtwarza pliki wideo
- playlista : wyświetla kolekcję plików audio lub wideo
- osadzać : Zawija elementy inline
Natkniesz się również na dwa podstawowe typy formatowania shortcode: self-closing et enclosing.
Skróty self-closing mogą stać samodzielnie i nie potrzebują znacznika zamykającego.
Tymczasem enclosing otocz treść, którą chcesz edytować i wymuś ręczne zamknięcie tagu. Na przykład możesz osadzić film z YouTube, umieszczając adres URL między tagami embed et /embed :
Na przykład dałoby to następujący wynik:
Niektóre najlepsze wtyczki WordPress przychodzą z własnymi skrótami. Na przykład, Formularze WP et Formularz kontaktowy 7 mają skróty, które pozwalają szybko osadzić plik formularz kontaktowy w poście lub na stronie. Możesz także użyć wtyczki, np Maksymalna liczba przycisków aby dodać krótki kod przycisku w dowolnym miejscu na swojej stronie.
Dlaczego warto rozważyć użycie skrótów WordPress?
Istnieje wiele powodów, dla których możesz używać skrótów WordPress. Na przykład jest to łatwiejsze i szybsze niż nauka i pisanie długiego fragmentu kodu w HTML. Ponadto pomagają zachować czystość i dostępność treści.
Skróty mogą służyć do automatyzacji niektórych funkcji, z których korzystasz wielokrotnie. Na przykład, jeśli użyjesz przycisku wezwanie do działania (CTA) na każdym z Twoich artykułów, przygotowanie dedykowanego shortcode może być szybkim i wygodnym rozwiązaniem.
Należy wspomnieć, że Redaktor Gutenberga działa w ten sam sposób, polegając na wykorzystaniu skrótów. Pozwala użytkownikom WordPressa dodawać kilka interaktywnych funkcji za pomocą bloków.
Taka metoda jest znacznie bardziej przyjazna dla początkujących, ponieważ możesz dodawać treści bezpośrednio w interfejsie użytkownika. Jednak edytor bloków WordPress jest nadal ograniczony w tym, co oferuje. Na szczęście przychodzi z blokadą Krótki kod, który umożliwia dodawanie do stron niestandardowych treści.
Jak stworzyć krótki kod w WordPress
Jeśli masz już wiedzę na temat kodowania, możesz tworzyć własne niestandardowe shortcodes. Daje Ci to pełną kontrolę nad wyglądem i funkcjonalnością Twojej witryny.
Zobaczmy, jak stworzyć niestandardowy shortcode WordPress. W tym samouczku jako przykład dodamy linki do mediów społecznościowych do artykułu.
Krok 1 – Utwórz nowy plik motywu
Zanim zaczniesz, warto całkowicie wykonaj kopię zapasową swojej witryny WordPress. Będziesz także musiał utworzyć osobny plik dla niestandardowego krótkiego kodu poza plikiem functions.php swój WordPress. Zapewni to rozwiązanie awaryjne na wypadek, gdyby coś poszło nie tak.
Możesz użyć klienta FTP (protokół przesyłania plików) jak na przykład fileZilla aby uzyskać dostęp do plików motywu witryny. Po zalogowaniu się na swojej stronie przejdź do wp-content> motywy i znajdź swój aktualny folder motywów. W naszym przykładzie będzie to sowa:
Otwórz swój folder WordPress, kliknij prawym przyciskiem myszy i naciśnij Utwórz nowy plik.
Nazwij swój nowy plik custom-shortcodes.php następnie kliknij OK. Następnie możesz go edytować, klikając go prawym przyciskiem myszy i wybierając opcję Pokaż zmiany :
Spowoduje to otwarcie pliku w domyślnym edytorze tekstu. Następnie wystarczy dodać następujący blok kodu:
<?php ?>
Gwarantuje to, że nowy plik zostanie zinterpretowany jako PHP, który jest językiem skryptowym, na którym zbudowany jest WordPress.
Następnie możesz zapisać zmiany i zamknąć plik. Pamiętaj, aby zaznaczyć następujące pole, aby upewnić się, że zostanie zaktualizowane na serwerze i zastosowane w Twojej witrynie:
Następnie otwórz plik functions.php w tym samym folderze motywu i dodaj następujący wiersz kodu na dole dokumentu:
include('shortcodes-personnalises.php');
To powie systemowi, aby uwzględnił wszelkie zmiany wprowadzone w pliku custom-shortcodes.php w ciągu functions.php jednocześnie pozwalając je oddzielić. Kiedy będziesz gotowy, zapisz zmiany i zamknij plik.
Krok 2 — Utwórz funkcję skrótu
Następnie musisz utworzyć funkcję shortcode, instruując ją, co ma zrobić. Wybierz opcję ponownie Pokaż zmiany twojego pliku custom-shortcodes.php. Użyj poniższego fragmentu kodu, aby dodać akcję, do której chcesz podłączyć funkcję:
function subscribe_link(){
return 'Follow us on <a rel="nofollow" href="https://twitter.com/BlogPasCher">Twitter</a>';
}Następnie będziesz musiał dodać funkcję zwrotną, która będzie działać, gdy akcja podpięcia zostanie aktywowana. Dodanie następującego wiersza kodu bezpośrednio po tym, o którym mowa powyżej, powie WordPressowi, że twoja funkcja jest skróconym kodem:
add_shortcode('sabonner', 'subscribe_link');Kiedy tworzysz krótki kod za pomocą funkcji add_shortcode, przypisujesz tag shortcode „ ($tag) " i odpowiedni hak funkcyjny " ($func) który będzie uruchamiany za każdym razem, gdy używany jest skrót.
Innymi słowy, jeśli tag shortcode to [subskrybuj], to haczyk „subskrybuj_link” przekierowuje odwiedzającego do podanego adresu URL.
Dlatego cały kod, którego używasz w swoim pliku shortcodes-personnalises.php będzie wyglądać tak:
Należy zauważyć, że podczas nazywania tagów należy używać tylko małych liter, chociaż można używać znaków podkreślenia. To też jest kluczowe unikaj używania myślników, ponieważ może zakłócać inne skróty.
Krok 3 – Dodaj skrót do samodzielnego zamykania na stronie
Możesz teraz przetestować swój początkowy kod jako samozamykający się shortcode w swojej witrynie WordPress. Korzystając z edytora bloków WordPress, możesz wstawić tag [subscribe] bezpośrednio do posta:
Spowoduje to wyświetlenie następujących treści odwiedzającym Twoją witrynę:
Jeśli jesteś zadowolony z tego skrótu, nie musisz robić nic więcej. Jeśli jednak chcesz go dostosować, możesz przejść do następnego kroku.
Krok 4 - Dodaj parametry do Shortcode
Możesz dostosować krótki kod "Subskrybuj" w celu uzyskania dodatkowych funkcji wyświetlania innych linków do mediów społecznościowych. Możesz to zrobić, dodając parametr do modyfikacji adresu URL.
Wlać dodaj atrybuty zarządzania, musisz otworzyć plik custom-shortcodes.php i dodaj następujący kod:
function subscribe_link_att($atts) {
$default = array(
'link' => '#',
);
$a = shortcode_atts($default, $atts);
return 'Follow us on '.$a['link'];
}
add_shortcode('sabonner', 'subscribe_link_att');Umożliwi to dostosowanie linków w tagu shortcode, aby dodać je do edytora Gutenberg. Możesz go wkleić do poprzedniego kodu w pliku niestandardowe-shortcodes.php. Powinno to wyglądać mniej więcej tak:
Dodanie funkcja shortcode_atts() połączy atrybuty użytkownika ze wszystkimi znanymi atrybutami, a wszelkie brakujące dane zostaną zastąpione ich wartościami domyślnymi. Kiedy będziesz gotowy, zapisz zmiany i zamknij plik.
Krok 5 — Przetestuj ustawienia
Możesz teraz przetestować zaktualizowany shortcode w edytorze bloków WordPress. W naszym przykładzie testujemy nasze linki do Twittera i Facebooka za pomocą następujących krótkich kodów:
[subskrybuj link='https://www.facebook.com/live.blogpascher']Facebook[/subscribe]
[subskrybuj link='https://twitter.com/BlogPasCher']Twitter[/subskrybuj]
Spowoduje to na interfejsie użytkownika następujący wynik:
Ten samozamykający się kod wyświetla odwiedzającym bezpośrednie adresy URL Twoich profili społecznościowych. Możesz jednak chcieć, aby ta funkcja wyglądała na nieco dopracowaną.
Na przykład będziesz mógł utworzyć załączoną wersję, która pozwoli Ci w pełni dostosować tekst kotwicy wyświetlany użytkownikom, gdy mają go kliknąć. Pokażemy Ci, jak to zrobić w następnym kroku.
Krok 6 – Utwórz załączający krótki kod
Załączony krótki kod będzie sformatowany tak samo, jak w poprzednim przykładzie automatycznego zamykania. Będzie jednak zawierał dodatkowy parametr funkcji.
Najpierw musisz dodać $content = null, który identyfikuje tę funkcję jako obejmujący krótki kod. Następnie możesz dodać do_shortcode z WordPressa, który przeszuka zawartość w poszukiwaniu skrótów.
W pliku custom-shortcodes.php, dodaj nowy krótki kod do załączenia:
function subscribe_link_att($atts, $content = null) {
$default = array(
'link' => '#',
);
$a = shortcode_atts($default, $atts);
$content = do_shortcode($content);
return 'Suivez nous sur <a href="'.($a['link']).'" style="color: blue">'.$content.'</a>';
}
add_shortcode('sabonner', 'subscribe_link_att');Kiedy będziesz gotowy, twój plik custom-shortcodes.php powinien wyglądać tak:
Poprzedni kod ma atrybut „styl” dodatkowy, który zmieni tekst kotwicy na niebieski kolor. Nie zapomnij zapisać zmian, gdy skończysz.
Krok 7 – Dodaj załączający krótki kod do strony internetowej
Możesz teraz wstawić swój krótki kod do edytora bloków WordPress, aby zobaczyć ostateczny wynik:
Jak zauważyłeś, możesz łatwo zmienić adresy URL stron w mediach społecznościowych i tekst kotwicy wyświetlany odwiedzającemu za pomocą tego krótkiego kodu opakowania. W tym przypadku wybraliśmy " Facebook " et "Świergot" :
Tam ! Utworzyłeś teraz niestandardowy krótki kod dla linków subskrypcji na swoich stronach i postach. Pamiętaj, że wszystkie powyższe kroki można zmodyfikować, aby utworzyć różnego rodzaju różne elementy za pomocą funkcji WordPress Skróconych.
Dodanie dodatkowej funkcjonalności do witryny WordPress jest znacznie łatwiejsze dzięki skrótom. Możesz ich używać do personalizowania istniejących treści i dodawania interaktywnych funkcji, takich jak formularze kontaktowe, galerie zdjęć czy linki do subskrypcji.
Inne zalecane zasoby
Zachęcamy również do zapoznania się z poniższymi zasobami, aby przejść dalej w zakresie kontroli nad witryną i blogiem.
- Jak utworzyć pływający przycisk z indeksem Z za pomocą Elementora
- Kiedy i jak zainstalować WordPress w podkatalogu
- Jak stworzyć prostą wtyczkę WordPress z blokiem Gutenberga
- Jak dodać niestandardowe czcionki do witryny WordPress?
Wnioski
W tym artykule dowiedzieliśmy się, jak stworzyć własny shortcode w WordPressie. Jeśli masz jakiekolwiek wątpliwości lub sugestie, daj nam znać w ciągu commentaires.
Będziesz jednak mógł również skonsultować się z nami Zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.
Tymczasem udostępnij ten artykuł w różnych sieciach społecznościowych.
...
