Mastering av WordPress-kortkoder
- om författaren
- Vad är kortkoder?
- skapa en enkel kortkod
- skapa avancerade kortkoder
- skapa en” Skicka till Twitter ”kortkod
- skapa en” prenumerera på RSS ”- kortkod
- infoga Google AdSense någonstans
- källor:
- bädda in en RSS-läsare
- få inlägg från WordPress databas med en kortkod
- källa:
- hämta den sista bilden kopplad till ett inlägg
- källor:
om författaren
detta gästinlägg skrevs av Jean-Baptiste Jung, en 28-årig bloggare från Belgien, som bloggar om webbutveckling på katter som kodar, om WordPress på …mer omjean-Baptiste Ukrainian
- 9 min läs
- WordPress,Essentials,kortkoder,tekniker (wp)
- Sparad för offline läsning
- Dela på Twitter, LinkedIn
WordPress kortkoder kan göra detta och mer och kommer definitivt att göra ditt bloggliv enklare. I den här artikeln visar vi dig hur du skapar och använder kortkoder, samt ger killer färdiga att använda WordPress kortkoder som kommer att förbättra din bloggupplevelse.
Du kanske också vill ta en titt på följande relaterade inlägg:
- WordPress kortkoder: en komplett Guide
- infoga Widgets med kortkoder
- 10 Användbara WordPress Loop Hacks
Vad är kortkoder?
att använda kortkoder är väldigt enkelt. För att använda ett, skapa ett nytt inlägg (eller redigera ett befintligt), byt redigeraren till HTML-läge och skriv en kortkod inom parentes, till exempel:
det är också möjligt att använda attribut med kortkoder. En kortkod med attribut skulle se ut så här:
kortkoder kan också bädda in innehåll, som visas här:
Smashing Magazine
kortkoder hanteras av en uppsättning funktioner som introduceras i WordPress 2.5 som kallas kortkod API. När ett inlägg sparas, dess innehåll analyseras, och kortkod API omvandlar automatiskt kortkoder för att utföra den funktion de är avsedda att utföra.
skapa en enkel kortkod
saken att komma ihåg med kortkoder är att de är väldigt lätta att skapa. Om du vet hur man skriver en grundläggande PHP-funktion, vet du redan hur man skapar en WordPress-kortkod. För vår första, låt oss skapa det välkända meddelandet ”Hej, värld”.
- öppna funktionerna.php-fil i ditt tema. Om filen inte finns, skapa den.
-
först måste vi skapa en funktion för att returnera ”Hello World” – strängen. Klistra in detta i dina funktioner.php-fil:
function hello() { return 'Hello, World!';}
-
Nu när vi har en funktion måste vi göra den till en kortkod. Tack vare funktionen
add_shortcode()
är det väldigt enkelt att göra. Klistra in den här raden efter vårhello()
– funktion, Spara och stäng sedan funktionerna.php-fil:add_shortcode('hw', 'hello');
den första parametern är kortkodnamnet och den andra är funktionen som ska anropas.
-
Nu när kortkoden skapas kan vi använda den i blogginlägg och på sidor. För att använda det, byt bara redigeraren till HTML-läge och skriv följande:
Du är klar! Naturligtvis är detta en mycket grundläggande kortkod, men det är ett bra exempel på hur lätt det är att skapa en.
skapa avancerade kortkoder
som nämnts kan kortkoder användas med attribut, som är mycket användbara, till exempel för att skicka argument till funktioner. I det här exemplet visar vi dig hur du skapar en kortkod för att visa en URL, precis som med de BBCodes som man använder på forum som VBulletin och PHPBB.
-
Öppna dina funktioner.php-fil. Klistra in följande funktion i den:
function myUrl($atts, $content = null) { extract(shortcode_atts(array( "href" => 'http://' ), $atts)); return '<a href="'.$href.'">'.$content.'</a>';}
-
låt oss förvandla funktionen till en kortkod:
add_shortcode("url", "myUrl");
-
kortkoden skapas nu. Du kan använda den på dina inlägg och sidor:
WordPress recipes
När du sparar ett inlägg kommer kortkoden att visa en länk med titeln” WordPress recipes”och peka på http://www.wprecipes.com.
kod förklaring. För att fungera korrekt måste vår kortkodsfunktion hantera två parametrar: $atts
och $content
$atts
är kortkod attribut(er). I det här exemplet kallas attributet href
och innehåller en länk till en URL. $content
är innehållet i kortkoden, inbäddad mellan domänen och underkatalogen (dvs. mellan ”www.example.com” och ”/underkatalog”). Som du kan se från Koden har vi gett standardvärden till $content och
$atts
.
Nu när vi vet hur man skapar och använder kortkoder, låt oss titta på några mördare färdiga att använda kortkoder!
skapa en” Skicka till Twitter ”kortkod
problemet. Verkar som en hel del av er haft min” skicka till Twitter ” hacka. Jag gillade också verkligen det hacket, men det har en nackdel: om du klistrar in koden till din singel.php-fil, länken ”Skicka till Twitter” kommer att vara synlig på varje inlägg, som du kanske inte vill ha. Det skulle vara bättre att kontrollera detta hack och kunna ange när du ska lägga till det i ett inlägg. Lösningen är enkel: en kortkod!
lösningen. Denna kortkod är enkel att skapa. I grund och botten får vi bara koden från ”Skicka till Twitter” hack och förvandla den till en PHP-funktion. Klistra in följande kod i funktionerna.php-fil i ditt tema:
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');
för att använda denna kortkod, byt helt enkelt redigeraren till HTML-läge och skriv sedan:
och en” Skicka till Twitter ” – Länk visas där du placerade kortkoden.
- så här skapar du en ”skicka detta till twitter” – knapp
- Twitter-verktyg
skapa en” prenumerera på RSS ”- kortkod
problemet. Du vet redan att ett mycket bra sätt att få RSS-abonnenter är att visa en snygg låda som säger något som ”Prenumerera på RSS-flödet.”Men än en gång vill vi inte hårdkoda något i vårt tema och förlora kontrollen över hur det verkar. I det här hacket skapar vi en” prenumerera på RSS ” – kortkod. Visa det på vissa ställen och inte andra, i inlägg eller på sidor, över eller under huvudinnehållet, det är allt upp till dig.
lösningen. Som vanligt skapar vi en funktion och gör den sedan till en kortkod. Denna kod går in i dina funktioner.php-fil. Glöm inte att ersätta exemplet foder URL med din egen!
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');
styla lådan. Du märkte förmodligen klassen rss-box
som lades till i div-elementet som innehåller länken. Detta gör att du kan utforma rutan som du vill. Här är ett exempel på några CSS-stilar som du kan använda i rutan ”prenumerera på RSS”. Klistra in det i stilen.css-fil i ditt tema:
.rss-box{ background:#F2F8F2; border:2px #D5E9D5 solid; font-weight:bold; padding:10px;}
infoga Google AdSense någonstans
problemet. De flesta bloggare använder Google AdSense. Det är väldigt enkelt att inkludera AdSense-kod i en temafil som sidofält.php. Men framgångsrika online marknadsförare vet att människor klickar mer på annonser som är inbäddade i själva innehållet.
lösningen. För att bädda in AdSense var som helst i dina inlägg eller sidor, skapa en kortkod:
-
Öppna funktionerna.php-fil i ditt tema och klistra in följande kod. Glöm inte att ändra JavaScript-koden med din egen AdSense-kod!
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');
-
När du har sparat funktioner.php, du kan använda följande kortkod för att visa AdSense var som helst på dina inlägg och sidor:
Observera att vår AdSense-kod är insvept med ett
adsense
div-element, vi kan utforma det som vi vill ha i vår stil.css-fil.
kod förklaring. Ovanstående kod används helt enkelt för att visa AdSense-annonser. När kortkoden infogas i ett inlägg returnerar den en AdSense-annons. Det är ganska enkelt men också, du håller med, en realtidsbesparare!
källor:
- så här: bädda in AdSense var som helst på dina inlägg
bädda in en RSS-läsare
problemet. Många läsare verkade också njuta av inlägget ”8 RSS Hacks for WordPress”som nyligen publicerades på Smashing Magazine. Låt oss nu använda vår kunskap om både RSS och kortkoder för att bädda in en RSS-läsare direkt i våra inlägg och sidor.
lösningen. Som vanligt, för att tillämpa detta hack, klistra in följande kod i ditt temas funktion.php-fil.
//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');
för att använda kortkoden, skriv in:
feed
attributet är matningsadressen som ska bäddas in, ochnum
är antalet objekt för att visa.
få inlägg från WordPress databas med en kortkod
problemet. Har du någonsin önskat att du kunde ringa en lista med relaterade inlägg direkt i WordPress-redigeraren? Visst, plugin-programmet ”relaterade inlägg” kan hämta relaterade inlägg åt dig, men med en kortkod kan du enkelt få en lista över valfritt antal inlägg från en viss kategori.
lösningen. Klistra in den här koden i dina funktioner som vanligt.php-fil.
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");
för att använda det, klistra in följande i WordPress-redigeraren efter att ha bytt till HTML-läge:
detta visar en lista med tre inlägg från kategorin med ett ID på 1. Om du inte vet hur du får ID för en viss kategori förklaras ett enkelt sätt här.
kod förklaring. Efter att den har extraherat argumenten och skapat den globala variabeln $posts
, använder funktionen sc_liste()
funktionen get_posts()
med funktionen numberposts
order
orderby
och category
parametrar för att få x senaste inläggen från kategori Y. När du är klar är inlägg inbäddade i en oordnad HTML-lista och returneras till dig.
källa:
- WordPress: Cr-användning av kortkod Avanc-användning Avanc
hämta den sista bilden kopplad till ett inlägg
problemet. I WordPress är bilder ganska lätta att manipulera. Men varför inte göra det ännu enklare? Låt oss titta på en mer komplex kortkod, en som automatiskt får den senaste bilden kopplad till ett inlägg.
lösningen. Öppna funktionerna.php-fil och klistra in följande 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");
för att använda kortkoden, skriv bara följande i redigeraren när du är i HTML-läge:
Kodförklaring. Funktionensc_postimage()
extraherar först kortkodsattributen. Sedan hämtar den bilden med hjälp av funktionerna get_children()
wp_get_attachment_image()
och wp_get_attachment_image_src()
WordPress. När du är klar returneras bilden och infogas i postinnehållet.
källor:
- WordPress kortkod: Visa enkelt den sista bilden som bifogas post
problemet. Även om du gillade den här artikeln kanske du har känt dig lite frustrerad eftersom WordPress som standard inte tillåter kortkod att infogas i sidofältet widgets. Tack och lov, här är ett litet knep för att förbättra WordPress-funktionaliteten och låta kortkoder användas i sidofältet widgets.
lösningen. Ytterligare en bit kod att klistra in i dina funktioner.php-fil:
add_filter('widget_text', 'do_shortcode');
det är allt du behöver för att tillåta kortkoder i sidofältet widgets!
kod förklaring. Vad vi gjorde här är ganska enkelt: vi lade till ett filter på funktionen widget_text()
för att utföra funktionen do_shortcode()
, som använder API för att utföra kortkoden. Således är kortkoder nu aktiverade i sidofältet widgets.