Stan Melching

WordPress Shortcode: Recente posts

20 mei, 2014
en geplaatst in CMS , Websites , WordPress

Vorige keer hebben we laten zien hoe je met een shortcode recente blog posts kan laten zien, waar je maar wilt. In dit bericht gaan we de shortcode uitbreiden middels attributen.

Recente posts shortcode

Laten we de shortcode uit het vorige blog bericht gebruiken om attributen toe te voegen. De shortcode, geplaatst in de functions.php was als volgt:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function laatste_posts() {
 
    query_posts(array('post_type'=> 'portfolio', 'posts_per_page' => '3'));
 
    echo '<ul>';
        if (have_posts()) :
        while (have_posts()) : the_post();
            echo '<li><a href="'.get_permalink().'">'.get_the_title().'</a></li>';
        endwhile;
        endif;
    echo '</ul>';
 
    p_reset_query();
}
 
function laatste_posts_shortcode() {
    ob_start();
    laatste_posts();
    return ob_get_clean();
    wp_reset_query();
}
 
add_shortcode('laatste_posts', 'laatste_posts_shortcode');

Dit resulteerde in de volgende lijst:
Lingzhi Praktijk
JRM Glashandel
Online eCountdown

Attributen

Met attributen kun je argumenten aan functies meegeven. Zo is het bijvoorbeeld handig om in de shortcode mee te geven hoeveel berichten die moet laten zien, of dat er een titel aanwezig moet zijn. Je kan zelfs zo ver gaan om de hele opmaak via de shortcode te regelen. We zullen enkele attributen uit gaan lichten.

Let op: Om attributen te laten werken, moet je de functie laten weten dat er gebruik wordt gemaakt van attributen, op de volgende manier:

Aantal berichten

We willen standaard 3 berichten laten zien, mits anders wordt voorgesteld in de shortcode. Dit gaat op de volgende manier: function laatste_posts($atts, $content = null){

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
function laatste_posts($atts, $content = null) {
 
    extract(shortcode_atts(array(
        'aantal'  => '3' // het aantal berichten, 3 is de default
    ), $atts));
 
    query_posts(array('post_type'=> 'portfolio', 'posts_per_page' => $aantal ));
 
    echo '<ul>';
    if (have_posts()) :
        while (have_posts()) : the_post();
            echo '<li><a href="'.get_permalink().'">'.get_the_title().'</a></li>';
        endwhile;
    endif;
    echo '</ul>';
 
    wp_reset_query();
}
 
function laatste_posts_shortcode($atts, $content = null) {
    ob_start();
    laatste_posts($atts, $content = null);
    return ob_get_clean();
    wp_reset_query();
}
 
add_shortcode('laatste_posts', 'laatste_posts_shortcode');

Uitleg: In deze functie halen we het attribuut “aantal” uit de shortcode. Deze gebruiken we vervolgens in de query om de “posts_per_page” te vervangen van 3 posts naar 4 posts. De shortcode wordt nu [laatste_posts aantal=”4″] en resulteert in het volgende:

Lingzhi Praktijk
JRM Glashandel
Online eCountdown
Windows 8 Geïnspireerde Template

Veranderd de custom post type

In deze shortcode worden recente posts geladen uit de post type portfolio. Stel dat je de laatste berichten uit nieuws weer wilt laten geven, dan gaat dat op de volgende manier:

1
2
3
4
5
6
extract(shortcode_atts(array(
        'aantal'    => '3', // het aantal berichten, 3 is de default
        'type'      => 'portfolio'
    ), $atts));
 
query_posts(array('post_type'=> $type, 'posts_per_page' => $aantal ));

Merk op dat we nu portfolio bij de “type” hebben gezet, omdat we deze als standaard willen gebruiken. Als we nu de laatste 4 posts uit Nieuws willen halen, wordt de shortcode [laatste_posts aantal=”4″ type=”nieuws”] en resulteert in het volgende:

10 Mythes over Graphic Design
WordPress Beginner Tips & Tricks Tutorial
Verwijder p-tags rond image tags in WordPress
WordPress Favicon voor Backend Admin

Titel

1
Zo kan je ook een titel meegeven aan de shortcode, zodat deze boven de recente berichten wordt weergegeven.

extract(shortcode_atts(array(
‘aantal’ => ‘3’, // het aantal berichten, 3 is de default
‘type’ => ‘portfolio’,
‘titel’ => ”
), $atts));

En dan is het alleen nog taak om de titel te positioneren, waarschijnlijk boven de lijst:

1
2
3
4
5
echo $titel . "<br />";
echo '<ul>';
    if (have_posts()) :
 
...

De shortcode wordt nu [laatste_posts aantal=”4″ type=”nieuws” titel=”Laatste Nieuwsberichten”], zoals hieronder wordt weergegeven:
Laatste Nieuwsberichten

10 Mythes over Graphic Design
WordPress Beginner Tips & Tricks Tutorial
Verwijder p-tags rond image tags in WordPress
WordPress Favicon voor Backend Admin

De volledige code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
function laatste_posts($atts, $content = null) {
 
    extract(shortcode_atts(array(
        'aantal'    => '3', // het aantal berichten, 3 is de default
        'type'      => 'portfolio',
        'titel'     => ''
    ), $atts));
 
    query_posts(array('post_type'=> $type, 'posts_per_page' => $aantal ));
 
    echo $titel . "<br />";
 
    echo '<ul>';
    if (have_posts()) :
        while (have_posts()) : the_post();
            echo '<li><a href="'.get_permalink().'">'.get_the_title().'</a></li>';
        endwhile;
    endif;
    echo '</ul>';
 
    wp_reset_query();
}
 
function laatste_posts_shortcode($atts, $content = null) {
    ob_start();
    laatste_posts($atts, $content = null);
    return ob_get_clean();
    wp_reset_query();
}
 
add_shortcode('laatste_posts', 'laatste_posts_shortcode');

Nu dat we weten hoe we argumenten kunnen meegeven aan codes, kunnen jullie vast wel meer leuke dingen verzinnen! Hier is de volledige code:

Deel je opmerking