Articles

Mastering WordPress Shortcodes

by admin
  • 9 min lezen
  • WordPress,Essentials,Shortcodes,Technieken (WP)
  • Opgeslagen voor offline lezen
  • Delen op Twitter, LinkedIn
Geïntroduceerd in WordPress 2.5, shortcodes zijn krachtige maar toch nog vrij onbekend WordPress functies. Stel je voor dat je gewoon kon typen ” adsense “om een AdSense-advertentie of” post_count ” weer te geven om direct uit te vinden het aantal berichten op uw blog.

WordPress shortcodes kunnen dit en meer doen en zullen uw blogleven zeker gemakkelijker maken. In dit artikel laten we u zien hoe u shortcodes kunt maken en gebruiken, evenals killer kant-en-klare WordPress shortcodes die uw blogervaring zullen verbeteren.

u kunt ook een kijkje nemen op de volgende gerelateerde berichten:

  • WordPress Shortcodes: een Complete gids
  • Widgets invoegen met Shortcodes
  • 10 nuttige WordPress Loop Hacks

Wat zijn Shortcodes?

het gebruik van shortcodes is zeer eenvoudig. Om er een te gebruiken, Maak een nieuw bericht (of bewerk een bestaande), schakel de editor naar HTML-modus en typ een shortcode tussen haakjes, zoals:

Het is ook mogelijk om attributen te gebruiken met shortcodes. Een shortcode met attributen zou er ongeveer zo uitzien:

Shortcodes kunnen ook inhoud insluiten, zoals hier getoond:

Smashing Magazine

Shortcodes worden behandeld door een set van functies die in WordPress 2.5 zijn geïntroduceerd, genaamd de shortcode API. Wanneer een bericht wordt opgeslagen, wordt de inhoud ervan ontleed, en de shortcode API transformeert automatisch de shortcodes om de functie uit te voeren die ze bedoeld zijn uit te voeren.

het creëren van een eenvoudige Shortcode

het ding om te onthouden met shortcodes is dat ze zeer eenvoudig te maken zijn. Als je weet hoe je een basis PHP functie te schrijven, dan weet je al hoe je een WordPress shortcode te creëren. Voor onze eerste, laten we de bekende “Hello, World” boodschap.

  1. Open de functies.php-bestand in uw thema. Als het bestand niet bestaat, Maak het aan.

  2. eerst moeten we een functie aanmaken om de “Hello World” Tekenreeks terug te geven. Plak dit in je functies.php file:

    function hello() { return 'Hello, World!';}

  3. nu we een functie hebben, moeten we er een shortcode van maken. Dankzij de functie add_shortcode() is dit zeer eenvoudig te doen. Plak deze regel na onze hello() functie, Sla de functies op en sluit ze.php file:

    add_shortcode('hw', 'hello');

    de eerste parameter is de shortcode naam, en de tweede is de functie die aangeroepen moet worden.

  4. nu de shortcode is aangemaakt, kunnen we deze gebruiken in blogberichten en op pagina ‘ s. Om het te gebruiken, schakelt u de editor naar HTML mode en typt u het volgende:

    u bent klaar! Natuurlijk, dit is een zeer eenvoudige shortcode, maar het is een goed voorbeeld van hoe gemakkelijk het is om een te maken.

geavanceerde Shortcodes aanmaken

zoals vermeld, kunnen shortcodes worden gebruikt met attributen, die zeer nuttig zijn, bijvoorbeeld voor het doorgeven van argumenten aan functies. In dit voorbeeld laten we je zien hoe je een shortcode maakt om een URL weer te geven, net zoals je zou doen met de BBCodes die je gebruikt op forums zoals VBulletin en PHPBB.

  1. Open uw functies.php bestand. Plak de volgende functie erin:

    function myUrl($atts, $content = null) { extract(shortcode_atts(array( "href" => 'http://' ), $atts)); return '<a href="'.$href.'">'.$content.'</a>';}

  2. laten we van de functie een shortcode maken:

    add_shortcode("url", "myUrl");

  3. de shortcode wordt nu aangemaakt. U kunt het gebruiken op uw berichten en pagina ‘ s:

    WordPress recipes

    wanneer u een bericht opslaat, toont de shortcode een link met de titel” WordPress recepten”en wijst naar http://www.wprecipes.com.

verklaring van de Code. Om goed te werken, moet onze shortcode functie twee parameters verwerken: $atts en $content$atts is het kenmerk(en) shortcode. In dit voorbeeld wordt het attribuut href genoemd en bevat het een link naar een URL. $content is de inhoud van de shortcode, ingebed tussen het domein en de submap (d.w.z. tussen “www.example.com” en “/ subdirectory”). Zoals u kunt zien aan de code, hebben we standaardwaarden gegeven aan $content en $atts.

nu we weten hoe shortcodes te maken en te gebruiken, laten we eens kijken naar enkele killer kant-en-klare shortcodes!

Maak een” Send to Twitter “Shortcode

het probleem. Het lijkt erop dat veel van jullie genoten van mijn “verzenden naar Twitter” hack. Ik heb ook echt genoten van die hack, maar het heeft een nadeel: als je de code te plakken op uw single.php bestand, de” Send to Twitter ” link zal zichtbaar zijn op elke post, die je misschien niet wilt. Het zou beter zijn om deze hack te controleren en in staat zijn om aan te geven wanneer het toe te voegen aan een bericht. De oplossing is eenvoudig: een shortcode!

de oplossing. Deze shortcode is eenvoudig aan te maken. Kortom, we krijgen gewoon de code van de” Send to Twitter ” hack en zet het in een PHP-functie. Plak de volgende code in de functies.php-bestand in uw thema:

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');

om deze shortcode te gebruiken, schakelt u de editor over naar HTML-modus en typt u:

en er verschijnt een link” Verzenden naar Twitter ” waar u de shortcode hebt geplaatst.

  • How to: Create a” send this to twitter “button
  • Twitter tools

Maak een” Abonneren op RSS “Shortcode

het probleem. Je weet al dat een zeer goede manier om RSS-abonnees te krijgen is om een mooi uitziende doos die iets zegt als “abonneren op de RSS-feed weer te geven.”Maar nogmaals, we willen niet echt hard-code iets in ons thema en verliezen de controle over de manier waarop het lijkt. In deze hack, we maken een” Abonneren op RSS ” shortcode. Toon het op sommige plaatsen en niet op andere, in berichten of op pagina ‘ s, boven of onder de hoofdinhoud, het is allemaal aan jou.

de oplossing. Zoals gewoonlijk maken we een functie en maken er een shortcode van. Deze code gaat in uw functies.php bestand. Vergeet niet om de voorbeeldfeed URL te vervangen door uw eigen!

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');

het kader opmaken. U heeft waarschijnlijk de klasse rss-box opgemerkt die toegevoegd is aan het div element dat de link bevat. Dit stelt u in staat om de doos te stylen zoals u wilt. Hier is een voorbeeld van een aantal CSS stijlen die u kunt toepassen op uw “abonneren op RSS” doos. Plak het gewoon in de stijl.css-bestand in uw thema:

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

invoegen Google AdSense Anywhere

het probleem. De meeste bloggers gebruiken Google AdSense. Het is heel gemakkelijk om AdSense-code op te nemen in een thema-bestand zoals sidebar.php. Maar succesvolle online marketeers weten dat mensen meer klikken op advertenties die zijn ingebed in de inhoud zelf.

de oplossing. Als u AdSense ergens in uw berichten of pagina ‘ s wilt insluiten, maakt u een shortcode:

  1. Open de functies.php bestand in uw thema en plak de volgende code. Vergeet niet om de JavaScript-code aan te passen met uw eigen AdSense-code!

    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. zodra u functies hebt opgeslagen.php, kunt u de volgende shortcode gebruiken om AdSense overal weer te geven op uw berichten en pagina ‘ s:

    merk op dat onze AdSense code is omwikkeld met een adsense div element, we kunnen het stijl zoals we willen in onze stijl.css-bestand.

verklaring van de Code. De bovenstaande code wordt gewoon gebruikt om AdSense-advertenties weer te geven. Wanneer de shortcode in een post wordt ingevoegd, retourneert het een AdSense-advertentie. Het is vrij eenvoudig, maar ook, u zult het eens, een real time-saver!

bronnen:

  • How to: Embed AdSense anywhere on your posts

Embed an RSS Reader

het probleem. Veel lezers leek ook te genieten van de “8 RSS Hacks voor WordPress” post gepubliceerd op Smashing Magazine onlangs. Nu, laten we onze kennis van zowel RSS en shortcodes gebruiken om een RSS-lezer recht in te sluiten in onze berichten en pagina ‘ s.

de oplossing. Zoals gebruikelijk, om deze hack toe te passen, plak de volgende code in de functie van uw thema.php bestand.

//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');

om de shortcode te gebruiken, typt u:

het feed attribuut is de feed-URL die moet worden ingebed, en num is het aantal weer te geven items.

posts ophalen uit WordPress Database met een Shortcode

het probleem. Ooit gewenst dat je kon bellen een lijst van gerelateerde berichten rechtstreeks in de WordPress editor? Zeker, de” gerelateerde berichten ” plug-in kan ophalen gerelateerde berichten voor u, maar met een shortcode kunt u gemakkelijk een lijst van een willekeurig aantal berichten uit een bepaalde categorie.

de oplossing. Plak zoals gewoonlijk deze code in uw functies.php bestand.

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");

om het te gebruiken, plakt u het volgende in de WordPress-editor, na het overschakelen naar HTML-modus:

Dit toont een lijst van drie berichten uit de categorie met een ID van 1. Als je niet weet hoe je de ID van een specifieke categorie kunt krijgen, wordt hier een eenvoudige manier uitgelegd.verklaring van

Code. Na het gewonnen van de argumenten en de globale variabele $posts, de sc_liste() functie maakt gebruik van de get_posts() functie met de numberpostsorderorderby en category parameters om de X-meest recente berichten van categorie Y. Eenmaal gedaan, worden berichten ingebed in een ongeordende HTML-lijst en teruggestuurd naar u.

bron:

  1. WordPress: Création de shortcode avancé

haal de laatste afbeelding bij een bericht

het probleem. In WordPress zijn afbeeldingen vrij eenvoudig te manipuleren. Maar waarom zou je het niet nog makkelijker maken? Laten we eens kijken naar een meer complexe shortcode, een die automatisch krijgt de nieuwste afbeelding gekoppeld aan een bericht.

de oplossing. Open de functies.php bestand en plak de volgende code:

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");

om de shortcode te gebruiken, typt u in HTML-modus het volgende in de editor:

uitleg van de Code. De functie sc_postimage() haalt eerst de shortcode-attributen uit. Vervolgens wordt de afbeelding opgehaald met behulp van de get_children()wp_get_attachment_image() en wp_get_attachment_image_src() WordPress functies. Eenmaal gedaan, de afbeelding wordt geretourneerd en ingevoegd in het bericht inhoud.

bronnen:

  1. WordPress Shortcode: toont eenvoudig de laatste afbeelding die aan post

het probleem. Zelfs als u genoten van dit artikel, je misschien een beetje gefrustreerd hebben gevoeld, omdat, standaard, WordPress niet toestaan dat shortcode worden ingevoegd in sidebar widgets. Gelukkig, hier is een kleine truc om WordPress functionaliteit te verbeteren en shortcodes kunnen worden gebruikt in de zijbalk widgets.

de oplossing. Nog een stukje code om in je functies te plakken.php file:

add_filter('widget_text', 'do_shortcode');

dat is alles wat je nodig hebt om shortcodes toe te staan in zijbalk widgets!verklaring van

Code. Wat we hier deden is vrij eenvoudig: we hebben een filter toegevoegd aan de widget_text()functie om de do_shortcode() functie uit te voeren, die de API gebruikt om de shortcode uit te voeren. Dus, shortcodes zijn nu ingeschakeld in sidebar widgets.

Smashing Editorial(al)