Help me een aangepaste shortcode implementeren voor mijn WordPress-site
description
Door een aangepaste shortcode te implementeren, kun je gemakkelijk dynamische inhoud beheren en weergeven op je WordPress-site, waardoor de gebruikersbetrokkenheid en functionaliteit worden verbeterd.
prompt
try_prompt
Ik wil een aangepaste shortcode maken om specifieke inhoud weer te geven op mijn WordPress-website. Beschrijf de inhoud die ik wil opnemen: {{shortcode_inhoud}}. Mijn huidig ... more
generate_helper
...
ai_answers
provider: openai
model: gpt-4.1-nano
Om een aangepaste shortcode te maken die de laatste 5 blogberichten weergeeft op je WordPress-website, kun je de volgende stappen volgen. Gezien dat je WordPress 5.8 gebruikt, is het maken van een shortcode met behulp van de `add_shortcode()` functie en een aangepaste functie een goede aanpak.
**Stap 1: Voeg de code toe aan je functions.php**
Open het functions.php-bestand van je actieve thema of gebruik een site-specific plugin om de code veilig toe te voegen.
**Stap 2: Codevoorbeeld**
```php
// Functie om de laatste 5 blogberichten weer te geven
function laatste_5_blogberichten_shortcode() {
// Query parameters
$args = array(
'post_type' => 'post',
'posts_per_page' => 5,
'orderby' => 'date',
'order' => 'DESC',
);
// Query uitvoeren
$query = new WP_Query( $args );
// Controle of er berichten zijn
if ( $query->have_posts() ) {
$output = '<ul class="laatste-blogberichten">';
while ( $query->have_posts() ) {
$query->the_post();
$output .= '<li>';
$output .= '<a href="' . get_permalink() . '">' . get_the_title() . '</a>';
$output .= '</li>';
}
$output .= '</ul>';
// Reset postdata
wp_reset_postdata();
return $output;
} else {
return '<p>Geen blogberichten gevonden.</p>';
}
}
// Shortcode registreren
add_shortcode( 'laatste_blog', 'laatste_5_blogberichten_shortcode' );
```
**Stap 3: Gebruik van de shortcode**
Plaats in je pagina, bericht of widget de shortcode:
```plaintext
[laatste_blog]
```
**Aanbevelingen en best practices:**
- Plaats de code in het functions.php-bestand van je child theme of gebruik een plugin voor aangepaste code om updates niet te beïnvloeden.
- Voeg CSS toe voor de class `laatste-blogberichten` om de stijl aan te passen.
- Overweeg om de shortcode uit te breiden met parameters, bijvoorbeeld het aantal berichten, door een parameter toe te voegen.
- Test de shortcode op verschillende pagina’s om zeker te zijn dat het correct werkt.
Met deze aanpak kun je eenvoudig de laatste 5 blogberichten op je website tonen via een handige shortcode.
provider: deepseek
model: deepseek-chat
Hier is een complete handleiding voor het maken van een aangepaste shortcode voor de laatste 5 blogberichten in WordPress 5.8:
## Stap 1: Shortcode toevoegen aan functions.php
Voeg deze code toe aan het `functions.php` bestand van je thema:
```php
function laatste_5_blogberichten_shortcode($atts) {
// Shortcode attributen met standaardwaarden
$atts = shortcode_atts(array(
'categorie' => '',
'class' => 'blog-lijst'
), $atts);
// Query voor laatste 5 berichten
$args = array(
'post_type' => 'post',
'posts_per_page' => 5,
'post_status' => 'publish',
'orderby' => 'date',
'order' => 'DESC'
);
// Optionele categorie filter
if (!empty($atts['categorie'])) {
$args['category_name'] = sanitize_text_field($atts['categorie']);
}
$query = new WP_Query($args);
// Output buffer starten
ob_start();
if ($query->have_posts()) {
echo '<div class="' . esc_attr($atts['class']) . '">';
while ($query->have_posts()) {
$query->the_post();
?>
<article class="blog-item">
<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<div class="post-meta">
<time datetime="<?php echo get_the_date('c'); ?>">
<?php echo get_the_date(); ?>
</time>
</div>
<div class="post-excerpt">
<?php the_excerpt(); ?>
</div>
</article>
<?php
}
echo '</div>';
// Reset post data
wp_reset_postdata();
} else {
echo '<p>Geen blogberichten gevonden.</p>';
}
// Output buffer teruggeven
return ob_get_clean();
}
// Shortcode registreren
add_shortcode('laatste_blogberichten', 'laatste_5_blogberichten_shortcode');
```
## Stap 2: Shortcode gebruiken
**Basis gebruik:**
```
[laatste_blogberichten]
```
**Met aangepaste CSS class:**
```
[laatste_blogberichten class="mijn-custom-class"]
```
**Met categorie filter:**
```
[laatste_blogberichten categorie="nieuws"]
```
## Stap 3: CSS styling (optioneel)
Voeg toe aan je theme's CSS:
```css
.blog-lijst {
margin: 20px 0;
}
.blog-item {
border-bottom: 1px solid #eee;
padding: 15px 0;
margin-bottom: 15px;
}
.blog-item:last-child {
border-bottom: none;
}
.blog-item h3 {
margin: 0 0 10px 0;
font-size: 1.2em;
}
.blog-item h3 a {
text-decoration: none;
color: #333;
}
.blog-item h3 a:hover {
color: #0073aa;
}
.post-meta {
color: #666;
font-size: 0.9em;
margin-bottom: 10px;
}
.post-excerpt {
line-height: 1.6;
}
```
## Best practices en aanbevelingen:
### 1. **Beveiliging:**
- Gebruik `esc_attr()` en `sanitize_text_field()` voor escaping
- Gebruik `wp_kses_post()` als je HTML toestaat
### 2. **Performance:**
- Gebruik `WP_Query` in plaats van `get_posts()` voor betere caching
- Limiteer het aantal posts (hier: 5)
- Reset post data met `wp_reset_postdata()`
### 3. **Uitbreidingsmogelijkheden:**
**Uitgebreide versie met meer opties:**
```php
function geavanceerde_blog_shortcode($atts) {
$atts = shortcode_atts(array(
'aantal' => 5,
'categorie' => '',
'tag' => '',
'offset' => 0,
'class' => 'blog-lijst',
'toon_thumbnails' => 'nee'
), $atts);
$args = array(
'post_type' => 'post',
'posts_per_page' => intval($atts['aantal']),
'post_status' => 'publish',
'orderby' => 'date',
'order' => 'DESC',
'offset' => intval($atts['offset'])
);
if (!empty($atts['categorie'])) {
$args['category_name'] = sanitize_text_field($atts['categorie']);
}
if (!empty($atts['tag'])) {
$args['tag'] = sanitize_text_field($atts['tag']);
}
// Rest van de code...
}
```
### 4. **Gebruik in templates:**
```php
<?php echo do_shortcode('[laatste_blogberichten categorie="featured"]'); ?>
```
### 5. **Caching overwegingen:**
Voor zwaar verkeer websites, overweeg transients:
```php
function cached_blog_shortcode($atts) {
$cache_key = 'laatste_blogberichten_' . md5(serialize($atts));
$output = get_transient($cache_key);
if (false === $output) {
$output = laatste_5_blogberichten_shortcode($atts);
set_transient($cache_key, $output, HOUR_IN_SECONDS);
}
return $output;
}
```
## Veiligheidstips:
- Plaats code altijd in een child theme
- Maak regelmatig backups
- Test eerst op een ontwikkelomgeving
- Gebruik de WordPress Codex als referentie
Deze implementatie is compatibel met WordPress 5.8 en volgt de huidige WordPress development standards voor security en performance.

