WordPress Share Buttons und ähnliche Beiträge ohne Plugin [Anleitung]

Ein Vorteil von WordPress sind die unzähligen Plugins für alle erdenklichen Zwecke.

Beschränke aber den Einsatz auf ein Minimum – so wenig wie möglich, so viel wie nötig.
Dein Blog kann unter Umständen nicht mehr funktionieren oder wird langsam.

Related Post Plugins werden häufig in WordPress genutzt, um ähnliche Beiträge anzuzeigen.

Dem Besucher werden zu seinen Interessen weitere Inhalte angezeigt. Das hilft die Verweildauer zu erhöhen und hat Auswirkung auf das Ranking.

Ermögliche deinen Besuchern Beiträge in soziale Netzwerke einfach zu teilen und fordere sind dazu auf. Google ist in der Lage die Viralität eines Beitrages zu ermitteln.

In diesem Beitrag zeige ich dir, wie du ohne den Einsatz von Plugins,

• Share Buttons und
• die Anzeige von ähnlichen Beiträgen

unter den Beiträgen hinzufügst.

Social Share Buttons ohne Plugin und DSVGO konform einbauen

Dafür musst du ein wenig PHP und CSS Code zu deinem Theme hinzufügen.

Ich empfehle die Nutzung eines Child Themes. Bei einem Theme-Update bleiben diese Anpassungen erhalten.

1. Füge folgenden Code in die functions.php Datei (im Child Ordner) am Ende hinzu:

   include_once('socialshare.php');

2. Lade die Zip-Datei herunter und kopiere die socialshare.php in den Child-Theme Ordner. Füge den Inhalt der share.css ans Ende der style.css ein.

Das war‘s. Jetzt werden Share Buttons unter jedem Blogbeitrag schnell und DSVGO konform geladen.

Wenn du Buttons für LinkedIn und/oder Pinterest möchtest, dann öffne die Datei socialshare.php.

Bei ca. Zeile 36 findest du den entsprechenden Code. Entferne dazu einfach die beiden // vor dem Code und speichere die Datei ab.

Warum DSVGO konform?

Es wird kein Code von den Plattformen geladen und somit keine Daten der Besucher (IP Adresse, Browser Typ…) beim Aufruf der Seite weitergegeben.

Das ist z.B. bei den von Facebook zur Verfügung gestellten Social Plugins der Fall.

Seit Oktober 2019 gelten hier strenge Regelungen – das sogenannte Opt-In Verfahren.
Tracking Cookies dürfen nur noch mit ausdrücklicher Einwilligung der Nutzer gesetzt werden.

Ähnliche Artikel (Related Post) ohne Plugin

Wie bereits erwähnt, ist es ratsam unter jedem Beitrag auf ähnliche Artikel hinzuweisen.

Auf dem Markt gibt es unzählige Plugins teilweise mit Beeinträchtigungen der Performance, aber auch schlanke und schnelle Lösungen.

Diese bieten aber häufig nicht mehr Funktionen an, als meine Lösung ohne Plugin.

1. Lade dir den Code für die CSS und PHP hier herunter.

   Füge den Code der related.css ind die style.css hinzu. Kopiere die related-posts.php in den Child Ordner.

2. Gehe nun in den Hauptordner deines Themes und suche nach der single.php.
   Kopiere diese in den Child Ordner.
3. Öffne die single.php und suche nach

   the_content();

4. Füge darunter folgendes ein. Am Ende muss es so aussehen wie auf dem Screenshot.

   include ("related-posts.php");

   

Hinweis
Viele Themes verwenden “Template-Parts”. Beim von mir genutztem Astra Theme befindet sich die Datei zur Anzeige der Posts im Ordner /template-parts/single/single-layout.php

Falls dein Theme einen ähnliche Struktur hat, dann kopiere die related-posts.php in diesen Ordner.

Die Anpassungen unter Punkt 4 musst du dann in der single-xxx.php in diesem Ordner machen.

Die single.php im Child Ordner kannst du wieder löschen.

Leider müssen bei einem Theme Update diese Änderungen erneut gemacht werden. Ich suche aber nach einer Lösung mit Hilfe der functions.php.

Optional

Damit Bilder für ähnliche Posts in der richtigen Größe geladen werden, füge folgenden Code in die functions.php ein:

function ah_related_posts_thumbnails() {    
    add_image_size( 'related-posts', 352, 185, true );     
}
add_action( 'after_setup_theme', 'ah_related_posts_thumbnails' ); 

Beim Bilder-Upload in die Mediathek wird ein weiteres Bild in der Größe 352 x 185 angelegt. Dadurch muss der Browser keine Skalierung durchführen, die Dateigröße ist kleiner und die Seite wird schneller geladen.

Bitte schaue den Teil Bilder-Optimierung in meinem Pagesspeed Guide an.

Darstellung

Desktop

Mobil

Auf mobilen Geräten wird nur der Facebook und Whatsapp Button angezeigt.

Wenn du Fragen hast oder Hinweise hinterlasse einfach einen Kommentar.