Articles

Mastering WordPress Shortcodes

Jean-Baptiste Jung
  • 9 min czytaj
  • WordPress,essentials,shortcodes,techniques (WP)
  • zapisany do czytania offline
  • Udostępnij na Twitterze, LinkedIn
wprowadzone w WordPress 2.5, skróty są potężnymi, ale wciąż zupełnie nieznanymi funkcjami WordPressa. Wyobraź sobie, że możesz po prostu wpisać „adsense”, aby wyświetlić reklamę AdSense lub „post_count”, aby natychmiast dowiedzieć się liczby postów na swoim blogu.

WordPress shortcodes może to zrobić i więcej, a na pewno ułatwi Ci życie w blogowaniu. W tym artykule pokażemy, jak tworzyć i używać skrótów, a także dostarczać gotowe do użycia skróty WordPress, które poprawią twoje wrażenia z blogowania.

Możesz również rzucić okiem na następujące powiązane posty:

  • WordPress Shortcodes: kompletny przewodnik
  • Wstawianie widżetów z Shortcodes
  • 10 przydatnych WordPress Loop Hacki

czym są Shortcodes?

Używanie skrótów jest bardzo proste. Aby go użyć, utwórz nowy post (lub edytuj istniejący), Przełącz edytor w tryb HTML i wpisz skrót w nawiasach, na przykład:

możliwe jest również użycie atrybutów z krótkimi kodami. Krótki kod z atrybutami wyglądałby mniej więcej tak:

skróty mogą również osadzać zawartość, jak pokazano tutaj:

Smashing Magazine

skróty są obsługiwane przez zestaw funkcji wprowadzonych w WordPress 2.5 o nazwie shortcode API. Gdy post jest zapisywany, jego zawartość jest analizowana, a interfejs API shortcode automatycznie przekształca skróty, aby wykonać funkcję, którą mają wykonać.

Tworzenie prostego Shortcode

rzeczą do zapamiętania przy shortcodes jest to, że są one bardzo łatwe do utworzenia. Jeśli wiesz, jak napisać podstawową funkcję PHP, to już wiesz, jak utworzyć krótki kod WordPress. Dla naszego pierwszego, stwórzmy dobrze znany komunikat „Witaj, świecie”.

  1. Otwórz funkcje.plik php w Twoim temacie. Jeśli plik nie istnieje, utwórz go.
  2. najpierw musimy utworzyć funkcję zwracającą ciąg „Hello World”. Wklej to w swoich funkcjach.plik php:

    function hello() { return 'Hello, World!';}
  3. teraz, gdy mamy funkcję, musimy zmienić ją w shortcode. Dzięki funkcjiadd_shortcode() jest to bardzo łatwe do zrobienia. Wklej tę linię po naszej funkcjihello(), a następnie zapisz i zamknij funkcje.plik php:

    add_shortcode('hw', 'hello');

    pierwszym parametrem jest nazwa skrócona, a drugim funkcja, która ma być wywołana.

  4. Po utworzeniu skrótu możemy go używać w postach na blogu i na stronach. Aby go użyć, wystarczy przełączyć edytor w tryb HTML i wpisać:

    gotowe! Oczywiście jest to bardzo prosty shortcode, ale jest to dobry przykład tego, jak łatwo jest go utworzyć.

tworzenie zaawansowanych skrótów

jak wspomniano, skróty mogą być używane z atrybutami, które są bardzo przydatne, na przykład do przekazywania argumentów do funkcji. W tym przykładzie pokażemy Ci, jak utworzyć shortcode, aby wyświetlić adres URL, tak jak w przypadku BBCodes używanych na forach takich jak VBulletin i PHPBB.

  1. otwórz swoje funkcje.plik php. Wklej w nim następującą funkcję:

    function myUrl($atts, $content = null) { extract(shortcode_atts(array( "href" => 'http://' ), $atts)); return '<a href="'.$href.'">'.$content.'</a>';}
  2. przekształćmy funkcję w shortcode:

    add_shortcode("url", "myUrl");
  3. shortcode został utworzony. Możesz go używać na swoich postach i stronach:

    WordPress recipes

    Po zapisaniu postu, shortcode wyświetli link zatytułowany „WordPress recipes” i wskazuje nahttp://www.wprecipes.com.

Wyjaśnienie kodu. Aby działać poprawnie, nasza funkcja shortcode musi obsługiwać dwa parametry :$attsI $content$atts jest atrybutem (- ami) shortcode. W tym przykładzie atrybut nazywa sięhref I zawiera link do adresu URL. $content jest zawartością krótkiego kodu, osadzonego między domeną a podkatalogiem (tj. między „www.example.com „i” /podkatalog”). Jak widać z kodu, daliśmy domyślne wartości $content I $atts.

teraz, gdy wiemy, jak tworzyć i używać skrótów, spójrzmy na kilka gotowych do użycia zabójczych skrótów!

Utwórz skrót „Wyślij do Twittera”

problem. Wygląda na to, że wielu z was cieszyło się moim” Wyślij do Twittera ” hack. Ja również bardzo podobał się ten hack, ale ma wadę: jeśli wkleisz kod do swojego singla.plik php, link „Wyślij do Twittera” będzie widoczny na każdym poście, którego możesz nie chcieć. Lepiej byłoby kontrolować ten hack i być w stanie określić, kiedy dodać go do postu. Rozwiązanie jest proste: shortcode!

rozwiązanie. Ten shortcode jest prosty do utworzenia. Zasadniczo, po prostu dostać kod z” Wyślij do Twittera ” hack i przekształcić go w funkcję PHP. Wklej następujący kod w funkcjach.plik php w Twoim temacie:

function twitt() { return '<div><a href="http://twitter.com/home?status=Currently reading '.get_permalink($post->ID).'" title="Click to send this page to Twitter!" target="_blank">Share on Twitter</a></div>';}add_shortcode('twitter', 'twitt');

aby użyć tego krótkiego kodu, po prostu przełącz edytor w tryb HTML, a następnie wpisz:

i pojawi się link „Wyślij do Twittera”, w którym umieściłeś krótki kod.

  • Jak: utworzyć przycisk „Wyślij to do Twittera”
  • narzędzia Twittera

Utwórz Krótki kod „Subskrybuj RSS”

problem. Wiesz już, że bardzo dobrym sposobem na pozyskanie subskrybentów RSS jest wyświetlenie ładnego pudełka z napisem ” Subskrybuj kanał RSS.”Ale po raz kolejny nie chcemy tak naprawdę kodować czegoś w naszym motywie i tracić kontroli nad tym, jak się wydaje. W tym hack, będziemy tworzyć” Subscribe to RSS ” shortcode. Wyświetlaj go w niektórych miejscach, a nie w innych, w postach lub na stronach, nad lub pod główną treścią, wszystko zależy od Ciebie.

rozwiązanie. Jak zwykle tworzymy funkcję, a następnie zamieniamy ją w shortcode. Ten kod przechodzi do Twoich funkcji.plik php. Nie zapomnij wymienić przykładowego adresu URL kanału na własny!

function subscribeRss() { return '<div class="rss-box"><a href="http://feeds.feedburner.com/wprecipes">Enjoyed this post? Subscribe to my RSS feeds!</a></div>';}add_shortcode('subscribe', 'subscribeRss');

Prawdopodobnie zauważyłeś klasęrss-box, która została dodana do elementu div zawierającego odnośnik. Dzięki temu możesz stylizować pudełko tak, jak lubisz. Oto przykład niektórych stylów CSS, które możesz zastosować do pola „Subskrybuj RSS”. Po prostu wklej go do stylu.plik css w Twoim temacie:

.rss-box{ background:#F2F8F2; border:2px #D5E9D5 solid; font-weight:bold; padding:10px;}

Wstaw Google AdSense gdziekolwiek

problem. Większość blogerów korzysta z Google AdSense. Bardzo łatwo jest dołączyć kod AdSense do pliku motywu, takiego jak pasek boczny.php. Ale skuteczni marketerzy online wiedzą, że ludzie klikają więcej na reklamy, które są osadzone w samej treści.

rozwiązanie. Aby osadzić AdSense w dowolnym miejscu postów lub stron, Utwórz krótki kod:

  1. Otwórz funkcje.plik php w szablonie i wklej poniższy kod. Nie zapomnij zmodyfikować kodu JavaScript z własnego kodu AdSense!

    function showads() { return '<div><script type="text/javascript"><!-- google_ad_client = "pub-XXXXXXXXXXXXXX"; google_ad_slot = "4668915978"; google_ad_width = 468; google_ad_height = 60; //--></script><script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script></div>';}add_shortcode('adsense', 'showads');
  2. Po zapisaniu funkcji.php, możesz użyć następującego skrótu, aby wyświetlić AdSense w dowolnym miejscu na swoich postach i stronach:

    zauważ, że nasz kod AdSense jest owiniętyadsense element div, możemy go stylizować tak, jak chcemy w naszym stylu.plik css.

Wyjaśnienie kodu. Powyższy kod służy po prostu do wyświetlania reklam AdSense. Gdy shortcode zostanie wstawiony do postu, zwraca reklamę AdSense. Jest to dość łatwe, ale także, zgodzisz się, oszczędność czasu w czasie rzeczywistym!

Źródła:

  • jak: osadzić AdSense gdziekolwiek na swoich postach

osadzić czytnik RSS

problem. Wielu czytelników również wydawało się cieszyć” 8 Hacki RSS dla WordPress ” post opublikowany na Smashing Magazine niedawno. Teraz, użyjmy naszej wiedzy zarówno RSS i shortcodes osadzić czytnik RSS prawo w naszych postach i stronach.

rozwiązanie. Jak zwykle, aby zastosować ten hack, po prostu wklej następujący kod w funkcji motywu.plik php.

//This file is needed to be able to use the wp_rss() function.include_once(ABSPATH.WPINC.'/rss.php');function readRss($atts) { extract(shortcode_atts(array( "feed" => 'http://', "num" => '1', ), $atts)); return wp_rss($feed, $num);}add_shortcode('rss', 'readRss');

aby użyć krótkiego kodu, wpisz:

feed atrybut jest adresem URL kanału do osadzenia, anum jest liczbą elementów do wyświetlenia.

Get posts from WordPress Database with a Shortcode

the problem. Czy kiedykolwiek chciałeś wywołać listę powiązanych postów bezpośrednio w edytorze WordPress? Oczywiście, wtyczka „powiązane posty” może pobierać powiązane posty, ale dzięki shortcode możesz łatwo uzyskać listę dowolnej liczby postów z danej kategorii.

rozwiązanie. Jak zwykle wklej ten kod do swoich funkcji.plik php.

function sc_liste($atts, $content = null) { extract(shortcode_atts(array( "num" => '5', "cat" => ’ ), $atts)); global $post; $myposts = get_posts('numberposts='.$num.'&order=DESC&orderby=post_date&category='.$cat); $retour='<ul>'; foreach($myposts as $post) : setup_postdata($post); $retour.='<li><a href="'.get_permalink().'">'.the_title("","",false).'</a></li>'; endforeach; $retour.='</ul> '; return $retour;}add_shortcode("list", "sc_liste");

aby go użyć, po prostu wklej następujące elementy w edytorze WordPress, po przejściu do trybu HTML:

wyświetli listę trzech postów z kategorii o ID 1. Jeśli nie wiesz, jak uzyskać identyfikator konkretnej kategorii, prosty sposób jest wyjaśniony tutaj.

Wyjaśnienie kodu. Po wyodrębnieniu argumentów i utworzeniu zmiennej globalnej $posts, funkcja sc_liste() używa funkcji get_posts() z funkcją numberpostsorderorderby I category parametry, aby uzyskać x najnowsze posty z kategorii Y. Po zakończeniu posty są osadzane na nieuporządkowanej liście HTML i zwracane do ciebie.

źródło:

  1. WordPress: Création de shortcode avancé

Pobierz ostatni obrazek dołączony do posta

problem. W WordPress obrazy są dość łatwe do manipulowania. Ale dlaczego nie uczynić tego jeszcze łatwiejszym? Spójrzmy na bardziej złożony shortcode, taki, który automatycznie pobiera najnowszy obraz dołączony do posta.

rozwiązanie. Otwórz funkcje.plik php i wklej poniższy kod:

function sc_postimage($atts, $content = null) { extract(shortcode_atts(array( "size" => 'thumbnail', "float" => 'none' ), $atts)); $images =& get_children( 'post_type=attachment&post_mime_type=image&post_parent=' . get_the_id() ); foreach( $images as $imageID => $imagePost ) $fullimage = wp_get_attachment_image($imageID, $size, false); $imagedata = wp_get_attachment_image_src($imageID, $size, false); $width = ($imagedata+2); $height = ($imagedata+2); return '<div class="postimage" style="width: '.$width.'px; height: '.$height.'px; float: '.$float.';">'.$fullimage.'</div>';}add_shortcode("postimage", "sc_postimage");

aby użyć krótkiego kodu, po prostu wpisz w edytorze, gdy jesteś w trybie HTML:

Wyjaśnienie kodu. Funkcjasc_postimage() najpierw wyodrębnia atrybuty shortcode. Następnie pobiera obraz za pomocą funkcji WordPress get_children()wp_get_attachment_image() I wp_get_attachment_image_src(). Po zakończeniu obraz jest zwracany i wstawiany do treści postu.

Źródła:

  1. WordPress Shortcode: łatwo wyświetla ostatni obrazek dołączony do postu

problem. Nawet jeśli podobał Ci się ten artykuł, możesz czuć się nieco sfrustrowany, ponieważ domyślnie WordPress nie pozwala na wstawianie shortcode do widżetów paska bocznego. Na szczęście oto mała sztuczka, aby zwiększyć funkcjonalność WordPress i umożliwić Używanie skrótów w widżetach paska bocznego.

rozwiązanie. Jeszcze jeden kawałek kodu do wklejenia w swoich funkcjach.plik php:

add_filter('widget_text', 'do_shortcode');

to wszystko, czego potrzebujesz, aby umożliwić skróty w widżetach paska bocznego!

Wyjaśnienie kodu. To, co zrobiliśmy tutaj, jest dość proste: dodaliśmy filtr do funkcjiwidget_text(), aby wykonać funkcjędo_shortcode(), która używa API do wykonania skrótu. Tak więc skróty są teraz włączone w widżetach paska bocznego.

Smashing Editorial(al)