Wszystko o skrótach WordPress

Jeśli kiedykolwiek pracowałeś z motywem WordPress, prawdopodobnie natknąłeś się na krótki kod WordPress… coś, co wygląda trochę tak:

 [button type="twitter"]

To, czy rozumiesz, czym jest shortcode i jak działa, to inna sprawa! Autorzy motywów intensywnie używają skrótów, ale czasami po prostu „zakładają”, że użytkownicy będą wiedzieć, kim są i jak działają, gdy w rzeczywistości mogą być dość mylące!

Dobrą wiadomością jest to, że skróty są łatwe do zrozumienia i użytkowania. W tym artykule przyjrzymy się skrótom, aby dowiedzieć się, jak najlepiej je wykorzystać, zanim przyjrzymy się, jak zbudować własny krótki kod!

Wskoczmy!

Co to są skróty WordPress?

WordPress wprowadził skróty już dawno, gdy wypuścił WordPress v2.5 (to było w 2008 roku) i od tego czasu są one szeroko stosowane w większości motywów i wtyczek.

Czym dokładnie są skróty? Krótko mówiąc (przepraszam, nie mogłem się oprzeć), skróty to fragment kodu, którego można użyć praktycznie w dowolnym miejscu witryny, aby wstawić funkcję lub funkcję. Tak więc, zamiast żmudnego kodowania, powiedzmy, ikony mediów społecznościowych za pomocą HTML, możesz zamiast tego wstawić krótki kod, który „mówi” WordPressowi, aby wstawił ikonę mediów społecznościowych w dowolnym miejscu, w którym wstawiasz określony krótki kod. Styl i funkcja (w tym przykładzie) ikony mediów społecznościowych jest wstępnie zdefiniowana przez twórcę motywu, więc cała trudna praca z perspektywy programowania została wykonana za Ciebie.

Być może chcesz umieścić ikonę Facebooka na dole posta na blogu. Zamiast ręcznie wstawiać to, dodawać hiperłącze, aktualizować rozmiar ikony i tak dalej, wystarczy umieścić krótki kod, który został „zaprogramowany” przez autora motywu, który może wyglądać tak:

 social icon="facebook"]

Ważne jest, aby w tym miejscu powtórzyć, że nie możesz po prostu dodać własnych skrótów i oczekiwać, że zadziałają. Muszą zostać dodane jako opcja do twojego motywu. Zazwyczaj motywy zawierają wiele gotowych skrótów, a instrukcje motywów zawierają listę dostępnych skrótów do wyboru.

Shortcodes to świetny skrót dla nie-programistów do wyświetlania wielu rodzajów treści bez pisania kodu, a także narzędzie, które może zaoszczędzić czas programistom.

Co możesz zrobić ze skrótami WordPress?

Krótkie kody służą do wstawiania szerokiej gamy treści, od przycisku wezwania do działania (CTA), dynamicznego pola reklamowego, formularza kontaktowego, galerii zdjęć, suwaków i wielu innych… ale, jak wspomniano powyżej, jakie są opcje shortcode dostępne dla Ciebie będą zależeć od motywu i używanych wtyczek.

Przykład skróconego kodu przy użyciu wtyczki Contact Form 7

Nie tylko motywy wykorzystują skróty. Jedna z najpopularniejszych dostępnych obecnie wtyczek Contact Form, Contact Form 7, wykorzystuje skrócone kody, aby umożliwić użytkownikom szybkie i łatwe osadzenie formularza kontaktowego w wybranej przez siebie lokalizacji.

Aby to zrobić, po zainstalowaniu Formularza Kontaktowego 7, wszystko, co musisz zrobić, aby dodać formularz do strony lub opublikować w swojej witrynie, jest następujące.

Krok pierwszy:

Przejdź do menu Kontakt > Formularze kontaktowe i utwórz nowy formularz lub użyj istniejącego, z którym pochodzi wtyczka.

Skopiuj krótki kod [contact-form-7 title="Contact form 1"] odpowiadający formularzowi.

Krok drugi:

Wklej krótki kod w miejscu, w którym ma się pojawić formularz, jak pokazano poniżej:

Zapisz stronę i powinieneś zobaczyć to:

I to wszystko! Właśnie udało Ci się użyć skróconego kodu, aby umieścić formularz kontaktowy na swojej stronie internetowej. Jak widać, skróty są niezwykle łatwe w użyciu i mogą przyspieszyć zadania, które w innym przypadku mogłyby być złożone i czasochłonne.

Korzystanie z domyślnych skrótów WordPress

Chociaż większość skrótów, których prawdopodobnie użyjesz, zostanie wprowadzonych w wyniku zainstalowania motywu lub wtyczki. Jednak sam WordPress ma kilka „domyślnych” skrótów, których możesz użyć. Obejmują one:

• Audio
• Podpis
• Osadzać
• Galeria
• Lista odtwarzania
• Wideo

Te skróty mogą być używane w całej witrynie, aby dodać szereg treści, na przykład odtwarzacz audio. Na poniższym obrazku pokazujemy to używane w widżecie stopki.

Aby dowiedzieć się, jak bardziej szczegółowo korzystać z tych skrótów, zapoznaj się z artykułem pomocy WordPress na ich temat.

Co więc robisz, gdy WordPress lub motyw/wtyczka, której używasz, nie zapewnia krótkiego kodu, którego potrzebujesz do określonego celu? Proste… stwórz własne!

Stwórz własny krótki kod WordPress

WordPress ma interfejs API Shortcode, który można wykorzystać do stosunkowo łatwego tworzenia własnych krótkich kodów. Przejdźmy teraz przez podstawowe kroki, które musisz wykonać, aby stworzyć własny krótki kod.

Krok pierwszy:

W tym przykładzie stworzymy przycisk CTA (Call to Action), który czytelnik może kliknąć, aby zostać przekierowanym do formularza kontaktowego.

Aby pomóc w utrzymaniu porządku, sugerujemy przechowywanie wszystkich skróconych kodów w osobnym pliku (zamiast dodawania kodu do istniejącego pliku). Aby to zrobić, utwórz nowy pusty plik w tym samym folderze co plik functions.php twojego motywu i nazwij go mniej więcej my-shortcodes.php . Następnie dołącz ten plik do swojego pliku functions.php w następujący sposób:

 include('my-shortcodes.php');

Chociaż, jak już powiedzieliśmy, zalecamy tworzenie krótkich kodów w osobnym pliku, na potrzeby tego artykułu zamierzamy od razu dodać nasz nowy kod bezpośrednio do naszego pliku functions.php , aby zachować przykład tak jasne, jak to możliwe.

Wykorzystamy funkcję add_shortcode , która jest wprowadzona w pliku wp-includes/shortcodes.php . Ta funkcja wymaga dwóch parametrów, tagu shortcode i funkcji zwrotnej.

 add_shortcode( string $tag, callable $callback )

Krok drugi:

Oto fragment kodu, który możesz umieścić w swoim pliku functions.php :

 add_shortcode( 'my_cta_button', 'my_cta_function' ); function my_cta_function() { return '<span class="cta_button"><a href="THE_CONTACT_FORM_URL">Let us know you are interested</a></span>'; }

Zauważ, że nazwy znaczników i funkcji zawierają tylko małe litery i podkreślenia.

Nie zapomnij zastąpić „THE_CONTACT_FORM_URL” adresem URL formularza kontaktowego, do którego chcesz przekierować użytkownika.

Możesz również opcjonalnie użyć tego kodu CSS w pliku style.css , aby przycisk wyglądał bardziej atrakcyjnie wizualnie:

 .cta_button a { color: white; text-decoration: none; } .cta_button { text-align: center; color: #fff !important; text-transform: uppercase; text-decoration: none; background: #ed3330; padding: 20px; border-radius: 5px; display: inline-block; border: none; transition: all 0.4s ease 0s; } .cta_button:hover { background: #434343; letter-spacing: 1px; -webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57); -moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57); box-shadow: 5px 40px -10px rgba(0,0,0,0.57); transition: all 0.4s ease 0s; }

Krok trzeci:

Wyświetlanie Twojego skróconego kodu w treści witryny odbywa się tak, jak w przypadku każdego innego skróconego kodu. W tym przykładzie nasz shortcode to [my_cta_button] . Dodaj to do posta lub strony, a podczas przeglądania strony powinieneś zobaczyć coś takiego:

Ten przykład wyświetla zawartość, która jest predefiniowana w dostarczonym przez nas kodzie PHP. Zobaczmy, jak możesz zezwolić administratorowi na dostosowanie wyjścia shortcode w razie potrzeby.

Krótki kod, który akceptuje atrybuty użytkownika

Aby utworzyć krótki kod, który ma atrybuty edytowalne przez użytkownika, musisz zdefiniować tablicę atrybutów, które chcesz zezwolić użytkownikowi na zmianę w funkcji zwrotnej. Na przykład możesz chcieć zmienić domyślny tytuł i adres URL przycisku.

 add_shortcode( 'my_cta_button', 'my_cta_function' ); function my_cta_function( $atts ) { $params = shortcode_atts( array( 'title' => 'Let us know you are interested', 'url' => 'THE_CONTACT_FORM_URL' ), $atts ); return '<span class="cta_button"><a href="' . $params['url'] .'">' . $params['title'] .'</a></span>'; }

W powyższym kodzie wykorzystaliśmy funkcję shortcode_atts , aby połączyć atrybuty zdefiniowane przez użytkownika ze znanymi atrybutami. W ten sposób musisz utworzyć inną funkcję shortcode dla każdego przycisku CTA, którego potrzebujesz, ale tylko taką, która za każdym razem przekierowuje do dowolnego miejsca określonego przez użytkownika.

Sposób użycia tego kodu powinien być określony w następujący sposób: [my_cta_button title='My Custom Title' url='MY_URL']

Dodaj krótki kod w pliku szablonu

Z punktu widzenia programistów istnieje również szybki sposób na wymuszenie umieszczenia shortcode na wstępnie zdefiniowanej pozycji w witrynie poprzez wywołanie go w odpowiednim pliku szablonu. Na przykład, jeśli chcemy, aby przycisk CTA był wyświetlany w dolnej części każdego posta lub strony, możemy edytować pojedynczy szablon i użyć funkcji do_shortcode . W motywie Twenty Twenty wyedytowaliśmy plik singular.php i wstawiliśmy tę linię pod zamknięciem głównego kontenera div:

 <?php echo do_shortcode('[my_cta_button]'); ?>

Wynik zostanie wyświetlony pod treścią posta i przed widżetami stopki.

Wniosek

Zanim zakończymy ten artykuł, pamiętaj, że jeśli użyjesz skrótów dostarczonych przez Twój motyw lub wtyczkę, a później wyłączysz ten motyw / wtyczkę, te skróty przestaną działać (pozostaniesz tylko z widocznym nawiasem skrótu na front-end witryny).

Z tym jednym drobnym zastrzeżeniem, skróty są naprawdę pomocną funkcją, jeśli chodzi o budowanie strony internetowej. Są one szeroko stosowane w WordPressie i jeśli jeszcze ich nie znasz, być może teraz nadszedł czas, aby nadać skrótom inny wygląd!