Nützliche WordPress Code Snippets zur Optimierung Deiner Website

Nützliche WordPress Code Snippets zur Optimierung Deiner Website Thumbnail
Veröffentlicht am 3. Juni 2020

WordPress lässt sich durch Code Snippets schnell um viele schöne und nützliche Funktionen erweitern und optimieren – ganz ohne Plugin. Damit auch Du davon profitieren kannst, habe ich Dir hier eine Sammlung meiner besten WordPress Code Snippets für Deine Website zusammengestellt.

Anzeige

Wenn man länger mit WordPress arbeitet, merkt man, dass viele Funktionen ganz einfach selber programmiert sind, anstatt immer ein Plugin zu installieren, welches die Seite zusätzlich langsamer macht.

Auch mir ging es so. Deshalb bekommst Du hier einen Überblick über meine Sammlung der nützlichsten und hilfreichsten WordPress Code Snippets, welche auch größtenteils auf dieser Seite eingesetzt werden.

Es ist eben manchmal sinnvoll, einfach per „Copy-Paste“ nützliche Funktionen schnell zu implementieren. Man muss das Rad ja nicht jedes Mal neu erfinden! 🙂

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

Um Besucher länger auf seiner Seite zu 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.

Anzeige
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

Hierbei handelt es sich nicht direkt um ein WordPress Code Snippet, sondern vielmehr um eine komplette Funktion. Deshalb gibt es dazu ein komplettes Tutorial.

WordPress Inhaltsverzeichnis automatisch 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 Code 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.

Anzeige
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.

Was Du dabei noch alles beachten musst, erfährst Du in meinem Google AdSense FAQ.

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:

Anzeige
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.

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 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.

Anzeige

Mit diesem WordPress 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');

2. Technische WordPress Optimierungen

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 Code 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.

Anzeige

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');

3. Nützliche 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.

Anzeige

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. 🙂

Ähnliche Beiträge
Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.