15 nützliche WordPress Snippets, um deine Website zu verbessern!

WordPress Snippets können Plugins ersetzen, da Plugins deine Webseite oft langsam machen und oft zu viele Funktionen beinhalten. Mit diesen 15 WordPress Code Snippets kannst du deine Seite richtig aufpimpen.

Wenn man länger mit WordPress arbeitet, merkt man, dass viele Funktionen ganz einfach selber programmiert sind, anstatt immer ein eigenes Plugin zu installieren, welches die Seite langsamer macht. Versteh‘ mich nicht falsch: Für viele Funktionen sind WordPress Plugins hervorragend geeignet, nicht umsonst habe ich eine Liste der besten kostenlosen WordPress Plugins für dich zusammengestellt. Trotzdem lassen sich viele Sachen doch schneller, einfacher und performanter über ein WordPress Snippet lösen.

Aber was ist ein Code Snippet eigentlich? Das ist ein (mehr oder weniger) kleiner Code-Schnipsel, welchen du einfach per Copy&Paste in die functions.php deines (Child-) Themes einfügst und dann eben ausgeführt wird.

Aber Achtung: Falls du Code falsch einfügst, kann es sein, dass deine Seite danach nicht mehr richtig funktioniert. Deshalb solltest du schon ein wenig Ahnung haben was du tust. Hier erfährst du wie du vorgehen kannst.

1. Frontend Verbesserungen

1.1 Ähnliche Beiträge nach der Hälfte des Posts anzeigen

Das erste WordPress Snippet kann Besucher länger auf deiner Seite halten und ihnen noch mehr interessante und vor allem relevante Beiträge zu zeigen, sollte man auf relevante Artikel verlinken.

Und wo schaut dein Besucher am meisten hin? Genau, im eigentlichen Content. Deshalb ist es eine (in meinen Augen) gute Strategie, gute Artikel direkt im Beitrag zu verlinken.

Mit diesem Code Snippet passiert das ganz automatisch in der Hälfte eines Beitrags.

function add_interesting_article_in_the_middle($content) {
    if (!is_single()) return $content;

    $paragraphs = explode("</p>", $content);
    $paragraphs_count = count($paragraphs);
    $middle_index= absint(floor($paragraphs_count / 2));
    $interesting_content = "";

    if($paragraphs_count <= 10) return $content;

    for ( $i = 0; $i < $paragraphs_count; $i++) {
        if($i === $middle_index) {

            $primary_category = get_post_primary_category($post->ID)["primary_category"];
            $category_id = $primary_category->term_id;
            $posts = get_posts(array(
                "posts_per_page" => 6,
                "category" => $category_id,
                "orderby" => "rand"
            ));

            if(count($posts) > 1) {

                $interesting_content .= "<div class=\"interesting-container\">";
                    $interesting_content .= "<span class=\"interesting-headline\">Auch interessant</span>";
                    $interesting_content .= "<ul>";

                        foreach($posts as $post_obj) {
                            if($post_obj->ID == get_the_ID()) continue;
                            $interesting_content .= "<li><a href=\"" . get_permalink($post_obj->ID) . "\" title=\"" . $post_obj->post_title . "\">" . $post_obj->post_title . "</a></li>";
                        }

                    $interesting_content .= "</ul>";
                $interesting_content .= "</div>";

            }

        }
        $interesting_content .= $paragraphs[$i] . '</p>';
    }
    return $interesting_content;
}
add_filter('the_content', 'add_interesting_article_in_the_middle');

In den markierten Zeilen kannst du die Anzahl und die Sortierung der anzuzeigenden Beiträge einstellen.

Außerdem benötigst du folgende Funktion, um die primäre Kategorie eines Beitrags herauszufinden.

function get_post_primary_category($post_id, $term='category', $return_all_categories=false){
    $return = array();

    if (class_exists('WPSEO_Primary_Term')){
        // Show Primary category by Yoast if it is enabled & set
        $wpseo_primary_term = new WPSEO_Primary_Term( $term, $post_id );
        $primary_term = get_term($wpseo_primary_term->get_primary_term());

        if (!is_wp_error($primary_term)){
            $return['primary_category'] = $primary_term;
        }
    }

    if (empty($return['primary_category']) || $return_all_categories){
        $categories_list = get_the_terms($post_id, $term);

        if (empty($return['primary_category']) && !empty($categories_list)){
            $return['primary_category'] = $categories_list[0];  //get the first category
        }
        if ($return_all_categories){
            $return['all_categories'] = array();

            if (!empty($categories_list)){
                foreach($categories_list as &$category){
                    $return['all_categories'][] = $category->term_id;
                }
            }
        }
    }

    return $return;
}

Hinweis: Die Funktion get_post_primary_category() habe ich aus diesem Artikel.

1.2 Inhaltsverzeichnis hinzufügen

Zum Erstellen eines WordPress Inhaltsverzeichnis habe ich einen eigenen Beitrag geschrieben, da ich noch einige Funktionen erkläre.

WordPress Inhaltsverzeichnis erstellen lassen

1.3 Werbeanzeigen zwischen Absätzen automatisch einfügen

Wenn man nebenbei mit seiner Website etwas Geld verdienen möchte, ist das vollkommen legitim. Bei manchen Anbietern (z.B. Google AdSense), gibt es die Möglichkeit Werbeanzeigen automatisch platzieren zu lassen. Nicht immer funktioniert das gut und erzielt den gewünschten Erfolg.

Viele Anzeigen möchte man einfach manuell positionieren. Dafür eignet sich neben der Sidebar natürlich mit am besten der eigentliche Inhalt der Seite. Mit diesem WordPress Snippet werden in gleichmäßigem Abstand die Anzeigen in deinem Inhalt platziert.

Alles was du dafür tun musst, ist in Zeile 7 deinen JavaScript Code oder das iFrame der Anzeige einzufügen.

function insert_ads_in_post($content) {
    if (!is_single()) return $content;  // show ads only on post pages

    $paragraphs = explode("</p>", $content);
    $paragraphs_count = count($paragraphs);
    $content_with_ads = "";
    $ad_code = "**YOUR AD CODE**";

    for ($i = 0; $i < $paragraphs_count; $i++) {

        // show 4 ads when more than 30 paragraphs
        if ($paragraphs_count > 30) {
            if ($i === absint(floor($paragraphs_count/5))
                || $i === absint(floor($paragraphs_count/5*2))
                || $i === absint(floor($paragraphs_count/5*3))
                || $i === absint(floor($paragraphs_count/5*4))) {

                $content_with_ads .= $ad_code;
            }
        } else {    // show 3 ads
            if ($i === absint(floor($paragraphs_count/4))
                || $i === absint(floor($paragraphs_count/4*2))
                || $i === absint(floor($paragraphs_count/4*3))) {

                $content_with_ads .= $ad_code;
            }
        }

        $content_with_ads .= $paragraphs[$i] . "</p>";
    }
    return $content_with_ads;
}
add_filter("the_content", "insert_ads_in_post");

Der Code funktioniert so, dass drei Anzeigen platziert werden. Falls die Seite mehr als 30 Absätze enthält, werden vier platziert. Die Häufigkeit kannst du so anpassen, dass du und vor allem deine Besucher damit zufrieden sind und die Seite nicht in Werbung untergeht.

1.4 Beiträge einer Kategorie über Shortcode anzeigen

An manchen Stellen kann es in einem Beitrag oder auf einer Seite sinnvoll sein, Beiträge einer bestimmten Kategorie anzeigen zu lassen.

Die Live-Demo zur Kategorie WordPress sieht auf meiner Seite so aus:

Und das ist der Code dazu. Die HTML musst du natürlich an deinen Blog anpassen.

// functions.php

function category_function($atts) {
    global $post;

    $post_id = $post->ID;
    ob_start();

    $attributes = shortcode_atts(array(
        "name" => "",
        "amount" => -1,
        "class" => ""
    ), $atts);

    echo "<div class=\"post-container post-preview-container " . $attributes["class"] . "\">";

    $args = array (
        'posts_per_page' => ($attributes["amount"] + 1),
        "category_name" => $attributes["name"]
    );

    $index = 0;
    $kb_custom_query = new WP_Query($args);
    while ($kb_custom_query->have_posts()) {
        $kb_custom_query->the_post();
        if($post->ID === $post_id || $index >= $attributes["amount"]) continue;
        $index++;
        get_template_part( 'template-parts/content/content', "excerpt-three" );
    }

    wp_reset_postdata();

    echo "</div>";

    return ob_get_clean();
}
add_shortcode('category', 'category_function');

Zusätzlich musst du die Datei content-excerpt-three.php mit folgendem Inhalt anlegen.

// template-parts/content/content-excerpt-three.php

<div class="entry-item" id="post-<?php the_ID(); ?>">
	<div class="post-entry">

		<a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"></a>
		<div class="content-container shorter">
			<?php the_title( sprintf( '<span><a href="%s">', esc_url(get_permalink())), '</a></span>' ); ?>
		</div>
	</div>
</div>

Den Shortcode kannst du dann im Backend wie folgt einfügen (name und class Parameter sind optional):

[category name="wordpress" amount="3" class="foobar"]

Im Code kannst du übrigens Shortcode über diese Funktion ausführen:

echo do_shortcode('[category name="wordpress" amount="3"]');

Bei der HTML Formatierung habe ich einige Klassen und Hintergrundbilder weggelassen, da ich sie spezifisch für meine Seite angepasst habe. Die kannst du natürlich entsprechend ergänzen und anpassen.

Für größere Funktionalitäten (SEO, Caching, …) ist ein Plugin manchmal die bessere Wahl. Dazu habe ich dir eine Liste der besten kostenlosen WordPress Plugins zusammengestellt.

1.5 Adminbar deaktivieren

Die Adminbar von WordPress hat doch einige nützliche Funktionen, um Beiträge direkt zu bearbeiten, den Cache zu leeren, uvm. Allerdings stört sie an manchen Stellen einfach. Dieses WordPress Snippet schafft Abhilfe.

add_filter( 'show_admin_bar', '__return_false' );

1.6 NEU-Icon bei neuen Beiträgen anzeigen

Für viele Besucher ist das Veröffentlichungsdatum eines Beitrags wichtig, da es unter Umständen um neue und vielleicht auch zeitlich begrenzte Informationen geht.

Mit einem NEU-Icon auf deinem Beitragsbild oder Titel kann der Nutzer einen neuen Beitrag viel schneller wahrnehmen und sieht, dass deine Seite up-to-date ist.

function print_new_icon() {
    $publish_date = get_post_time();
    $current_timestamp = time();

    $period_to_show_in_seconds = 60*60*24*30;
    $time_diff = $current_timestamp - $publish_date;

    if($time_diff < $period_to_show_in_seconds) {
        echo "<span class=\"new-post\" title=\"" . get_the_date() . "\">NEW</span>";
    }
}

Die Funktion print_new_icon() kannst du fast überall in deinen Templates, etc. verwenden. Du musst Dich nur in der WordPress Loop, also in Schleifen über Posts & Pages oder direkt in einem Post oder Page befinden.

In der markierten Zeile kannst du die Dauer bestimmen, wie lange ein Beitrag als Neu gilt. Dort sind aktuell 30 Tage eingestellt (Wert in Sekunden).

1.7 Aktualisierungs-Datum von Beiträgen anzeigen

Beiträge sollten im Laufe der Zeit immer wieder aktualisiert und damit auf dem neusten Stand gehalten werden.

Das ist wichtig, damit die Leser stets mit den neuesten Informationen versorgt werden und zum anderen, da eventuelle Fehler über die Zeit auffallen und korrigiert werden müssen.

Es ist also wichtig, Änderungsdaten in einzelnen Beiträgen anzuzeigen, falls diese vom Veröffentlichungsdatum abweichen.

Mit diesem Code Snippet wird ein Aktualisierungsdatum hinzugefügt, wenn es 14 Tage nach der Veröffentlichung eine Änderung gab.

function show_last_updated_date($content) {
    if(!is_single()) return $content;
    
	$u_time = get_the_time('U');
	$u_modified_time = get_the_modified_time('U');

    $custom_content .= "<span class=\"update-info\">";
    $publish_date = get_the_time("j. F Y");
    $custom_content .= "<span>Veröffentlicht am <b>" . $publish_date . "</b></span>";

	if ($u_modified_time >= $u_time + (60*60*24*14) && is_single() ) {
		$updated_date = get_the_modified_time('j. F Y');

        $custom_content .= "<span>Zuletzt aktualisiert am <b>" . $updated_date . "</b></span>";

	}

    $custom_content .= "</span>";

	$custom_content .= $content;
	return $custom_content;
}
add_filter('the_content', 'show_last_updated_date');

1.8 WYSIWYG Editor für WordPress Kommentare

Standardmäßig kann man bei WordPress Kommentaren nur Text schreiben. Ich finde es aber hilfreich, seinen Besuchern die Möglichkeit zu geben Formatierungen beim Kommentare schreiben zu benutzen. Wie einfach das funktioniert, habe ich in einem eigenen Artikel erklärt.

WYSIWYG Editor in WordPress Kommentare einbinden

2. Technische WordPress Optimierungen

Die folgenden Code Snippets bringen einige technische Verbesserungen für deine WordPress Webseite, die auch deine SEO durch z.B. schnellere Ladezeiten verbessern.

2.1 WordPress Responsive Images: img-Tag durch picture-Tag ersetzen

Ich muss zugeben, ich habe lange Zeit Reponsive Images ignoriert, da ich sie schlicht für unwichtig hielt.

Allerdings musste ich feststellen, dass sie für die Suchmaschinenoptimierung (SEO) auch in WordPress ein ganz extrem wichtiger Bestandteil sind.

Ich habe keine genauen Statistiken oder Angaben, aber ich würde schätzen, dass meine Seite etwa 20-30% schneller, allein durch die Optimierung auf Responsive Images geworden ist.

Da ich dafür nicht extra ein Plugin installieren wollte, habe ich schnell meine eigene Funktion geschrieben.

function rewrite_img_to_picture_tag($content) {
    preg_match_all("/<img.*src=\"([^\"]+).*\salt=\"([^\"]*).*\"\swidth=\"([^\"]*).*\"\/>/", $content, $matches);

    for($i = 0; $i < count($matches[0]); $i++) {
    	if(strpos($matches[1][$i], ".gif") !== false) continue;
        $img_id = find_post_id_from_path($matches[1][$i]);
        $width = (count($matches) > 2 ? $matches[3][$i] : "");
        $medium_img = wp_get_attachment_image_url($img_id, "large");
        $small_img = wp_get_attachment_image_url($img_id, "medium");
        $img_tag = "<picture>
            <source srcset=\"" . $medium_img . "\" media=\"(min-width: 768px)\">
            <source srcset=\"" . $small_img . "\">";

        if($width) {
        	$img_tag .= "<img loading=\"lazy\" src=\"" . $matches[1][$i] . "\" width=\"" . $matches[3][$i] . "\" alt=\"" . $matches[2][$i] . "\"></picture>";
        } else {
            $img_tag .= "<img loading=\"lazy\" src=\"" . $matches[1][$i] . "\" alt=\"" . $matches[2][$i] . "\"></picture>";
        }

        $content = str_replace($matches[0][$i], $img_tag, $content);
    }

    return $content;

}
add_filter('the_content', 'rewrite_img_to_picture_tag');

Du solltest beachten, dass die Funktion auf meine Seite zugeschnitten ist. Deshalb solltest du noch folgende Schritte selber ausführen und einstellen:

• Bildgrößen bestimmen: Du gehst auf deine Seite und notierst dir die Bildgrößen deiner Thumbnails in verschiedenen Auflösungen. Bei mir habe ich mir zwei Bildgrößen rausgesucht:
  • > 768px: Bilder mit 1024px Breite
  • < 768px: Bilder mit 700px Breite
• Bildgrößen eintragen: Die Bildgrößen kannst du über add_image_size() direkt oder im Backend unter Einstellungen > Medien ändern.
• Vorschaubilder regenerieren (Achtung!): Dazu nutze ich das Plugin Regenerate Thumbnails. Nachdem du die Bildgrößen bestimmt und in WordPress festgelegt hast, kannst du damit alle Thumbnails neu generieren lassen. Achtung: Vorher unbedingt ein Backup anlegen!!! Das Plugin verändert die Bildgrößen ALLER Bilder nach den neuen Einstellungen!!!

Das oben gezeigte WordPress Snippet verwendet die Auflösungen „small“ und „medium“. Die kannst du, sofern du über add_image_size() eine eigene Bildgröße hinzugefügt hast entsprechend anpassen.

Vor und nach dem Einbau kannst du deine Seite über das Tool web.dev Measure testen und analysieren.

2.2 XML-RPC deaktivieren (Sicherheitslücke)

Die xmlrpc.php ist eine Schnittstelle für WordPress, um mit anderen Seiten zu kommunizieren. Allerdings stellt diese ein enormes Sicherheitsrisiko dar.

Wenn du diese Sicherheitslücke nicht schließt, wirst du schnell feststellen, dass die Datei ständig angegriffen wird. Deshalb aktiviere diese Funktion, sofern du sie nicht brauchst!

add_filter('xmlrpc_enabled', '__return_false');

2.3 WordPress Header aufräumen

Standardmäßig lädt WordPress im head Bereich deiner Webseite sehr viele Skripte. Viele davon wirst du niemals benötigen. Daher entfernen wir alle mit folgendem Snippet:

add_action('init', 'clean_up_head');
function clean_up_head() {
    remove_action('wp_head', 'rsd_link');
    remove_action('wp_head', 'wp_generator');
    remove_action('wp_head', 'index_rel_link');
    remove_action('wp_head', 'wlwmanifest_link');
    remove_action('wp_head', 'feed_links', 2);
    remove_action('wp_head', 'feed_links_extra', 3);
    remove_action('wp_head', 'parent_post_rel_link', 10, 0);
    remove_action('wp_head', 'start_post_rel_link', 10, 0);
    remove_action('wp_head', 'wp_shortlink_wp_head', 10, 0);
    remove_action('wp_head', 'wp_shortlink_header', 10, 0);
    remove_action('wp_head', 'adjacent_posts_rel_link_wp_head', 10, 0);
}

3. Nützliche WordPress Snippets beim Programmieren

3.1 Erkennen von Desktop- oder Mobilgeräten (Mobile Detect)

Bei einigen Funktionen kann es notwendig sein, abzufragen, ob etwas auf Mobilgeräten oder nur auf Desktopgeräten angezeigt werden soll. Beispielsweise können für Mobilgeräte andere Werbeanzeigen ausgeliefert werden, als für Desktopgeräte.

Dazu hat WordPress schon eine eingebaute Funktion, die viele nicht kennen.

wp_is_mobile();

Dokumentation

3.2 Pfad zum Child-Theme

Nützlich, aber doch oft in Vergessenheit geraten. Diese Funktion gibt den Pfad zum verwendeten Child-Theme zurück und ist bei Programmieraufgaben oft gefragt.

get_stylesheet_directory_uri();

Dokumentation

3.3 Bildformate hinzufügen

Wie bereits bei der Einbindung von Responsive Images gezeigt, kann man in WordPress weitere Bildgrößen hinzufügen. Dazu stellt die WordPress die Funktion add_image_size() bereit.

In meiner functions.php findet man folgende Code Zeilen.

add_image_size("xxs-thumbnail", 220, 95, true);   
add_image_size("xs-thumbnail", 350, 150, true); 
add_image_size("small-thumbnail", 525, 225, true);
add_image_size("normal-thumbnail", 750, 322, true); 

Ich habe so verschiedene, da ich versuche möglichst genau und effizient Bildgrößen auszuliefern, das kommt auch meine Ladegeschwindigkeit zu Gute! 🙂

Dokumentation

3.4 WordPress Seite ohne Plugin umziehen

Diese Aufgabe ist doch etwas umfangreicher, als sie in fünf Zeilen Text zu erklären. Deshalb gibt es dazu ein eigenes Tutorial von mir.

WordPress Seite umziehen – ohne Plugin

4. Wie füge ich die Code Snippets in WordPress ein?

Die folgenden WordPress Snippets kannst du ganz einfach in die functions.php deines Themes oder Child-Themes einfügen.

Aber Achtung: Vorher immer ein Backup anlegen und nur verändern, wo du dir auch sicher bist, was du tust!

Alternativ kannst du die functions.php übers Backend bearbeiten. Dazu navigierst du im Menü zu Design > Theme-Editor > Theme-Funktionen (functions.php). Dort kannst du es am Ende der Datei, oder noch besser: mit einem entsprechenden Kommentar an die passende Stelle kopieren und bei Bedarf noch anpassen. 🙂