20. WordPress: shortcodes gebruiken.

Shortcodes, misschien ken je deze al. Een simpele code zoals [b] zet een tekst in het vet. Klinkt mager, maar stel dat je hiermee ook je Adsense advertenties kunt laten tonen binnenin een bericht, dan begint dit al meer en meer de moeite te klinken.

Bij het schrijven van dit bericht gebruik ik de shortcodes nog niet, maar ik wil er over bijleren en zodoende wordt dit een hoofdstuk dat ik zeker en vast in de toekomst nog zal raadplegen voor toekomstige projecten.

Een shortcode voor je adsense ads

Plaats een adsense advertentie eender waar in je artikel: Het is gelukkig vrij makkelijk in WordPress om je eigen shortcodes te maken. We beginnen met het openen van functions.php dat zich in het mapje van onze theme bevindt en we plaatsen daar de volgende codes bij:


function get_adsense($atts) {
return '<script type="text/javascript"><!--
google_ad_client = "pub-xxxxxxxxxxxxxxx";
/* 468x60, created 9/13/10 */
google_ad_slot = "xxxxxxxxxxx";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
'
;}

Vervang de kruisjes door je eigen adsense gegevens, of plak daar zelf de code in die je van Adsense krijgt.

Het is nog niet gedaan, nu moeten we er voor zorgen dat WordPress de shortcode herkent van zodra je ze gebruikt in een bericht (men noemt dit de WordPress API); voeg er nog volgende code aan toe:


add_shortcode('adsense', 'get_adsense');

En nu zijn we klaar! De eerste parameter heeft betrekking op de naam van de shortcode: [ adsense] en de tweede parameter zegt welke functie hij moet laden: get-adsense.
Probeer het zelf uit: log in op je WordPress dashboard, ‘edit’ een artikel en plaats eender waar de shortcode [ adsense] in het bericht. Sla het op en bekijk de pagina.
Bij mij ziet dat er ongeveer zo uit:

wp-serie-56_shortcode_adsense

Nota 1: Als je pas de adsense advertentie hebt aangemaakt kan het een 10-tal minuten duren alvorens die werkt, zoniet krijg je een ‘pagina niet gevonden’-bericht en moet je dus even afwachten.
Nota 2: je kan uiteraard ook via plugins adsense toevoegen aan themes, zelfs ook binnenin berichten doch hier heb je zelf de volledige controle over.

Shortcodes voor het onderlijnen van tekst

In WordPress is er geen html tag voorzien voor het onderlijnen van tekst in je berichten. Nu we aan de shortcodes zijn toegekomen gaan we dit eens invoegen; Open functions.php en typ er volgende code bij:


function underline_shortcode( $atts, $content = null ) {
   return '<span style="text-decoration: underline;">' . $content . '</span>';
}
add_shortcode('u', 'underline_shortcode');

Als je nu een bericht typt, en je wilt iets onderlijnen, dan hoef je enkel iets soortgelijks typen in het artikel:
[u]Deze tekst is onderlijnd[/u]

Shortcodes: toevoegen van kleur aan een tekst

We willen niet alleen een stukje tekst onderlijnen, maar ook een andere kleur geven; Vervang onze vorige code door:


function underline_shortcode( $atts, $content = null ) {
    extract(shortcode_atts(array(
    "color" => 'black',
  ), $atts));   
   return '<span style="color: ' . $color . '; text-decoration: underline;">' . $content . '</span>';
}
add_shortcode('u', 'underline_shortcode');

Als we nu kleur willen geven, moeten we in ons artikel volgende shortcode gebruiken:
[u color=#c0c0c0]onderlijnen[/u]
Of
[u color=green]onderlijnen[/u]
Zoals je ziet, kan je kiezen tussen de hex-code of het typen van de kleur.

wp-serie-57_shortcode_kleur-&-onderlijnen

Waarom bepalen we ‘black’ in onze code? Dat is om een kleur weer te geven indien er geen kleur wordt bepaald in de shortcode. Als je [ u]onderlijnen[/u ] zou typen, dan zou dit in het zwart worden weergegeven.

Shortcodes: Een informatieve box toevoegen

Laten we een stapje verder gaan. We gaan een informatieve box toevoegen, of duidelijker uitgelegd: als we een stukje tekst typen binnenin de shortcode, dan zal dit een andere achtergrondkleur krijgen.

Voeg volgende code toe aan functions.php :


function box_shortcode( $atts, $content = null )
{
    extract( shortcode_atts( array(
      'color' => 'yellow',
      'size' => 'medium',
      ), $atts ) );
 
      return '
    <style type="text/css">
    .shortcode_box {
      padding: 2px 4px;
      border: 1px solid #ccc;
    }
    .yellow {
      background: #ffd149;
      color: #666;
    }
    .blue {
      background: #a0c5ef;
      color: #333;
    }
    .gray {
      background: #f0f0f0;
      color: #333;
    }
    </style>
 
      <div class="shortcode_box ' . $size . ' ' .  $color . '">' . $content . '</div>';
 
}
add_shortcode('box', 'box_shortcode');

Gebruik nu volgende shortcode in een artikel om het te laten zien:
[box color=yellow]Dit is een box met belangrijke informatie dat veel beter opvalt. [/box]
En dan krijg je zoiets:

wp-serie-58_shortcode_box

Shortcodes: Een download button maken

Laten we dit nog eens naar een hoger niveau tillen, ditmaal willen we met een simpele korte code, onze shortcode, een downloadbutton laten weergeven.

Open functions.php en typ daar de volgende code bij:


function dlbutton_shortcode( $atts, $content = null )
{
    extract( shortcode_atts( array(
      'color' => 'blue',
      'size' => 'medium',
      ), $atts ) );
 
      return '
    <style type="text/css">
    .shortcode_button {
      padding: 2px 8px;
      border: 1px solid #ccc;
      border-radius: 10px;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
    }
    .black {
      background: #ffd149;
      background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#636363), to(#332F2F));
      background: -moz-linear-gradient(19% 75% 90deg,#332F2F, #636363);
      color: #f0f0f0;
      border-top-color: #1c1c1c;
      border-left-color: #1c1c1c;
      border-right-color: #525252;
      border-bottom-color: #525252;
    }
    .blue {
      background: #a0c5ef;
      background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#508BC7), to(#203F75));
      background: -moz-linear-gradient(19% 75% 90deg,#203F75, #508BC7);
      color: #f0f0f0;
      border-top-color: #023778;
      border-left-color: #023778;
      border-right-color: #26609e;
      border-bottom-color: #26609e;
    }
 
    .large  {
      width: 200px;
    }
    .medium  {
      width: 120px;
    }
    .small  {
      width: 80px;
    }
    </style>
 
      <div class="shortcode_button ' . $size . ' ' .  $color . '">' . $content . '</div>';
 
}
add_shortcode('dlbutton', 'dlbutton_shortcode');

Wederom moet ik toegeven deze code ergens gevonden te hebben, maar waarom zou ik dit niet met jullie delen he?

De shortcode die je in het artikel gebruikt is dan als volgt: [ dlbutton color=black size=medium]<a href="#">Download</a>[/dlbutton ]

Je kan volgende gegevens wijzigingen:
Color: black of blue (dewelke zijn gespecifieerd) of eender welke kleur die je kan instellen in de code. De blauwe class wordt gebruikt indien er geen bepaald wordt in het bericht.
Size: large, medium of small: deze drie opties hebben elk een breedte meegekregen in de css dat geladen wordt in de code dat we net hebben toegevoegd. De class medium wordt gebruikt indien er geen bepaald wordt in het bericht.
#’ in de html code kan je door eender welke url vervangen.

wp-serie-59_shortcode_dlbutton_post

wp-serie-60_shortcode_dlbutton_result

Meerdere shortcodes binnen elkaar gebruiken:

Het is mogelijk om meerdere shortcodes binnen elkaar te gebruiken; denk maar aan zoiets:
[ box] Welkom, download onmiddellijk ons gratis bestand: [ dlbutton color=black size=medium]<a href="#">Download</a>[/dlbutton ];  Wees er snel bij![/box ]

WordPress ondersteund dit in eerste instantie niet, daarom moeten we nog een stukje code toevoegen aan functions.php, namelijk het volgende:
add_filter('the_content', 'do_shortcode');

Shortcodes: ‘drop caps’ weergeven met een shortcode

Een drop cap is een grote vette letter aan het begin van een artikel; We kunnen zoiets makkelijk realiseren met shortcodes. In functions.php gaan we volgende code toevoegen:


function dropcap($atts, $content = null) {
  return '
<div class="dropcap">'.$content.'</div>
';
}
add_shortcode('dropcap', 'dropcap');

Deze code gaat een DIV met een class toevoegen aan de tekst tussen de shortcode. Daarom moet je nog in style.css volgende code opnemen:


.dropcap {
display:block;
float:left;
font-size:50px;
line-height:40px;
margin:0 5px 0 0;
}

Schrijf nu je artikel, gebruik de shortcode als volgt:
[dropcap]M[/dropcap]auris ut lectus erat.

Shortcodes: Berichten van een bepaalde categorie weergeven in een artikel

We hebben dit reeds toegepast in de sidebar, maar nu gaan we dit eens in een shortcode gieten:


function category_shortcode( $atts )
{
extract(shortcode_atts(array(
      'limit' => '5',
            'category' => '',
  ), $atts));
  //The Query
  query_posts('category=' . $id . 'posts_per_page=' . $limit);
  //The Loop
  if ( have_posts() ) : while ( have_posts() ) : the_post();
    echo  '<h3><a href="'; echo the_permalink(); echo '">'; echo the_title(); echo '</a></h3>';
    echo the_excerpt();
  endwhile; else:
  endif;
 
  //Reset Query
  wp_reset_query();
}
add_shortcode('category', 'category_shortcode');

Gebruik het als volgt:
[category id=# limit=5]
Vervang het hekje door de ID van de categorie. Dit is verplicht!
De limit kan je eventueel weglaten, als dit niet bepaald is dan wordt er standaard een limiet van 5 berichten gezet.

Shortcode: Een Google pdf-viewer

Het standaard gebruik van de attachments binnen WordPress kan soms verwarrend zijn, of niet ideaal bevonden worden. Waarom laat je je bezoeker niet een pdf lezen die jij op je webserver host, maar dat hij kan bekijken via Google docs? Het is misschien voor jou makkelijker dit in een artikel te implementeren aan de hand van een shortcode.
Open functions.php en voeg volgende code toe:


function pdflink($attr, $content) {
    if ($attr['href']) {
        return '<a class="pdf" href="http://docs.google.com/viewer?url=' . $attr['href'] . '">'.$content.'</a>';
    } else {
        $src = str_replace("=", "", $attr[0]);
        return '<a class="pdf" href="http://docs.google.com/viewer?url=' . $src . '">'.$content.'</a>';
    }
}
add_shortcode('pdf', 'pdflink');

Gebruik het als volgt binnen een artikel:
[pdf=http://linknaardelocatie/naam.pdf]Link naar een PDF[/pdf]

Shortcodes: Een retweet button laten tonen.

Je kan een tweetme button beter elders in de theme verwerken, maar misschien heb je wel een goede reden om een artikel speciaal in de spotlight te plaatsen in de hoop meer retweets te mogen ontvangen. Sociaal media … het is en blijft een belangrijk proces voor de vindbaarheid van je site. Wist je dat links naar je site op sociale media meetellen voor de ranking van je site? Het zijn makkelijke links om te verkrijgen … think about it.

Tweetmeme is een dienst dat zo’n button levert zodat je bezoekers je artikelen kunnen ‘retweeten’.

In elk geval, zo kan je via een shortcode de button aanmaken:
In functions.php voeg je volgende code toe:


function tweetmeme(){
return '<div class="tweetmeme"><script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script></div>';
}
add_shortcode('tweet', 'tweetmeme');

Je gebruikt het in een artikel met volgende shortcode: [tweet]

Shortcodes: Het huidige jaartal weergeven.


function jaartal(){
  return date('Y');
}
add_shortcode('jaartal', 'jaartal');

Gebruik in een bericht:
[jaartal]

Shortcodes gebruiken binnen je theme.

Stel dat je een aantal shortcodes hebt staan, laat ons het jaartal van hierboven nemen, en je wilt dit implementeren in je theme: dat kan, maar je moet het op volgende manier doen:

Open bijvoorbeeld sidebar.php en helemaal bovenaan (kan ook elders op de pagina) typ je als volgt:
<?php echo do_shortcode('[jaartal]'); ?>

Het jaartal zal dan weergegeven worden.

Shortcodes: Google Maps weergeven in artikel.

In functions.php typ er volgende code bij:


//Google Maps Shortcode
function do_googleMaps($atts, $content = null) {
   extract(shortcode_atts(array(
      "width" => '640',
      "height" => '480',
      "src" => ''
   ), $atts));
   return '<iframe width="'.$width.'" height="'.$height.'" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="'.$src.'&amp;output=embed" ></iframe>';
}
add_shortcode("googlemap", "do_googleMaps");

Nu kan je het als volgt gebruiken in een artikel:
[googlemap width="200" height="200" src="de_url"]
De_url moet je dan vervangen door de link dat door Google meegegeven wordt op Google maps.

Slot

En hiermee sluit ik het deel af van de shortcodes. Ik wil wel nog volgende links meegeven naar plugins die de shortcode functies bevatten:

Wordpress theme maken of toch kopen?

Een Wordpress theme maken vergt veel werk, al is wat extra kennis altijd welkom. We maken zelf geen sites meer maar gebruiken nu de themes die terug te vinden zijn op: Theme Junkie. theme junkie Je kan op hun website ook gratis Wordpress themes terugvinden en downloaden!

Deze website gebruikt cookies om jou de beste ervaring te kunnen geven. Door deze website te gebruiken ga je hiermee akkoord. Meer info

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close