Lesedauer in WordPress & Elementor anzeigen: Ohne Plugin

  • 8 min
Bild von Nioveo
Nioveo
Link kopieren
Shape-gradient-c-grey

Mit Code-Snipptes kannst du schnell und einfach die geschätzte Lesedauer anzeigen, ohne extra ein Plugin zu installieren. Hier findest du Code für zwei Lösungen: Eine universelle Shortcode-Variante, die mit jedem WordPress Theme funktioniert und eine Variante, die speziell für das Elementor Pro Theme geeignet ist (die hier dargestellte Lesezeit verwendet exakt die Lösung für Elementor Pro).

Geschätzte Lesedauer in WordPress anzeigen

Zeitaufwand: ~2min. Für eine Lösung die mit jedem WordPress Theme funktioniert (auch Elementor) kannst du einfach diesen Code verwenden. Einfügen kannst du das Script entweder über die function.php oder mit einem Code Snippet Tool (empfohlene Variante, Plugin WPCode). Eine detaillierte Anleitung für die WPCode findest du im Part für Elementor Pro, ist aber sehr einfach:

  1. Neues PHP-Snippet erstellen
  2. Namen vergeben, z.B. „Lesezeit-Shortcode“
  3. Code einfügen
  4. Snippet aktivieren und speichern.

 

// Reading Time Shortcode
function nioveo_reading_time( $atts ) {
// Attribute mit Standardwerten
$atts = shortcode_atts( array(
'wpm' => 200, // Wörter pro Minute
), $atts, 'reading-time' );

$post = get_post();
if ( ! $post ) {
return '';
}

// Wortanzahl berechnen
$content = wp_strip_all_tags( $post->post_content );
$word_count = str_word_count( $content, 0 );

// Lesedauer in Minuten
$reading_time = max( 1, ceil( $word_count / (int) $atts['wpm'] ) );

// Ausgabe mit Singular/Plural
$output = sprintf(
_n( '%s Minute', '%s Minuten', $reading_time, 'textdomain' ),
number_format_i18n( $reading_time )
);

return esc_html( $output );
}
add_shortcode( 'reading-time', 'nioveo_reading_time' );

 

Shortcodes für die Lesedauer

Das Script hat jetzt zwei neue Shortcodes erstellt, die überall eingesetzt werden können:

[reading-time]
[reading-time wpm="230"]

Mit dem Shortcode wird die ungefähre Lesezeit überall in WordPress angezeigt. Mit dem Zusatz „wpm“ (Words per Minute) und eine Zahl, kann die Kalkulation der geschätzten Lesezeit angepasst werden. Anstatt 200 Wörter/Minute würde ein wpm von 230 die Lesezeit entsprechend verkürzen. In Elementor kannst du es z.B. auch mit dem Shortcode-Widget verwenden und das Styling mit einem Text-Widget oder einer Icon-Liste verändern.

Vorteile von diesem Shortcode

  • Sichere Ausgabe
    Mit „esc_html()“ wird sichergestellt, dass die Ausgabe korrekt escaped wird, wodurch mögliche Sicherheitsrisiken minimiert werden.
  • Genauere Pluralbildung
    Die Ausgabe von „Minute“ oder „Minuten“ wird über die WordPress-Funktion „_n()“ gesteuert. Dadurch wird sowohl die korrekte Singular- oder Pluralform gewählt als auch die Lokalisierung (Übersetzung) in andere Sprachen unterstützt.
  • Anpassbare Lesegeschwindigkeit
    Standardmäßig geht die Berechnung von 200 Wörtern pro Minute aus. Über einen Shortcode-Parameter kann die Lesegeschwindigkeit jedoch flexibel angepasst werden, zum Beispiel [reading-time wpm=“200″].
  • Verbesserte Textanalyse
    Statt „str_word_count()“ auf Raw HTML-Inhalt anzuwenden, werden alle HTML-Tags entfernt und direkt mit dem reinen Text gearbeitet. Das reduziert Ungenauigkeiten, insbesondere bei UTF-8-Zeichen wie Umlauten.
  • Robustheit gegenüber fehlenden Beiträgen
    Die Funktion prüft, ob ein gültiger Beitrag vorhanden ist, bevor die Berechnung erfolgt. Dadurch wird vermieden, dass Fehlermeldungen auftreten, wenn der Shortcode außerhalb eines Beitrags eingesetzt wird.

Lesedauer für Elementor Pro als Dynamic Tag

Zeitaufwand: ~3min. Mit dem folgenden Code speziell für Elementor Pro, kannst du die geschätzte Lesezeit als dynamisches Attribut festlegen. Damit wird die Funktion nativ in das Theme eingebunden.

if (!defined('ABSPATH')) exit;

if (defined('ELEMENTOR_PRO_VERSION') || (function_exists('is_plugin_active') && is_plugin_active('elementor-pro/elementor-pro.php'))) {

    add_action('elementor/dynamic_tags/register_tags', function($dynamic_tags) {
        $dynamic_tags->register(new Reading_Time_Tag());
    });

    class Reading_Time_Tag extends \Elementor\Core\DynamicTags\Tag {
        
        const DEFAULT_WPM = 200;
        const MIN_WPM = 50;

        public function get_name() {
            return 'lesezeit';
        }

        public function get_title() {
            return esc_html__('Lesezeit', 'text-domain');
        }

        public function get_group() {
            return 'post';
        }

        public function get_categories() {
            return [\Elementor\Modules\DynamicTags\Module::TEXT_CATEGORY];
        }

        protected function register_controls() {
            $this->add_control(
                'wpm',
                [
                    'label'       => esc_html__('Lesegeschwindigkeit (WPM)', 'text-domain'),
                    'type'        => \Elementor\Controls_Manager::NUMBER,
                    'default'     => self::DEFAULT_WPM,
                    'min'         => 100,
                    'description' => esc_html__('Durchschnittliche Lesegeschwindigkeit: 200-250 Wörter pro Minute', 'text-domain')
                ]
            );
            
            $this->add_control(
                'format',
                [
                    'label'   => esc_html__('Anzeigeformat', 'text-domain'),
                    'type'    => \Elementor\Controls_Manager::SELECT,
                    'default' => 'min',
                    'options' => [
                        'min'  => esc_html__('Kompakt (X min)', 'text-domain'),
                        'full' => esc_html__('Vollständig (X Minute(n) Lesezeit)', 'text-domain'),
                    ]
                ]
            );
        }

        public function render() {
            $post_id = get_the_ID();
            if (!$post_id) return;

            $content = get_post_field('post_content', $post_id);
            if (empty($content)) {
                echo '<span class="reading-time" aria-label="Lesezeit nicht verfügbar">0 min</span>';
                return;
            }

            $settings = $this->get_settings();
            $wpm = !empty($settings['wpm']) ? absint($settings['wpm']) : self::DEFAULT_WPM;
            
            $reading_time = $this->calculate_time($content, $wpm, $settings['format']);
            echo '<span class="reading-time" itemprop="timeRequired" content="PT' 
                 . max(1, ceil(str_word_count(wp_strip_all_tags($content)) / max(self::MIN_WPM, $wpm))) 
                 . 'M">' . esc_html($reading_time) . '</span>';
        }

        private function calculate_time($content, $wpm, $format) {
            $word_count = str_word_count(wp_strip_all_tags($content));
            $minutes = max(1, ceil($word_count / max(self::MIN_WPM, $wpm)));
            
            if ($format === 'min') {
                return sprintf('%d min', $minutes);
            }
            
            return sprintf(
                _n('%d Minute Lesezeit', '%d Minuten Lesezeit', $minutes, 'text-domain'),
                $minutes
            );
        }
    }
}

 

Ist der hier gezeigte Code für die Lesezeit in Elementor Pro gut?

Standard-Implementierungen oder bekannte Custom-Codes aus dem Netz für die Anzeige der Lesezeit (Estimated Reading Time) in Elementor haben in der Regel alle oder einige der folgenden Schwächen:

  • SEO-Integration (Schema markup)
  • WordPress-Sicherheitsstandards und Best Practices missachtet
  • Übersetzung (inkl. deutsch)
  • Fehlende Konfigurationsmöglichkeiten
  • Mangelnde Barrierefreiheit
  • Unnötiger Code (Performance)
  • Unzureichende Fehlerbehandlung.

Der hier gezeigte Code löst all diese Probleme. Eine durchdachte Lösung sollte verschiedene Anzeigeformate bieten, unterschiedliche Lesegeschwindigkeiten berücksichtigen und dabei Sicherheitsstandards einhalten. Technischere Details und Anpassungsmöglichkeiten findest du weiter unten im Artikel.

Lesedauer mit Code Snippet anzeigen: Anleitung

1. Code Snippets Plugin installieren

Navigiere zu Plugins > Neu hinzufügen und suche nach „code snippets“, Empfehlung: WPCode (detaillierte Installationsanleitung für WP Plugins). Nach der Installation und Aktivierung steht dir ein sicherer Weg zur Verfügung, um z.B. PHP-Code hinzuzufügen, ohne die functions.php direkt zu bearbeiten.

2. Neuen PHP-Code Snippet erstellen

Unter Snippets > Neu hinzufügen erstellst du einen neuen Code-Snippet. Kopiere den kompletten obigen Code in das Eingabefeld. Im Fenster Deinen individuellen Code hinzufügen wählen, danach PHP-Snippet. Füge in das leere Feld mit Code Vorschau den Code von oben im Beitrag ein.

Einstellungen:

  • Snippet-Name: Z.B „Lesezeit – Elementor Pro“
  • Einfügemethode: „Automatisch Einfügen“
  • Standort: Global, „Überall ausführen“.

3. Snippet speichern & aktivieren

Klicke auf „Speichern“. Das aktiviert noch nicht den Code. Erst ein Klick auf den Schalter neben „Inaktiv“ aktiviert den Code. Damit ist das neue Dynamic Tag in Elementor integriert und verfügbar.

Lesedauer als Dynamic Tag in Elementor Pro konfigurieren

Nach der Aktivierung findest du unter Dynamische Attribute (Dynamic Tags) den neuen Eintrag „Lesezeit“.

Konfiguration im Editor

  1. Text-Widget, Icon Liste oder Überschrift auswählen
  2. Dynamic Tag-Symbol klicken
  3. Lesezeit auswählen
  4. Einstellungen anpassen:
    • Lesegeschwindigkeit nach Zielgruppe anpassen
    • Anzeigeformat entsprechend dem Design wählen.

Weitere Optionen und Features Einstellungen: Klicke auf Lesezeit. In den Einstellungen kannst die Lesegeschwindigkeit ändern (Default ist 200 WPM) und du kannst zwischen einer kompakten und vollständigen Anzeige der Lesezeit wählen.

Unter Erweitert kann vor oder nach der Lesezeit ein beliebiger Text festgelegt werden.

Styling-Möglichkeiten

Das generierte HTML mit der Klasse reading-time ermöglicht individuelles CSS-Styling. Z.B. mit color die Farbe, font-size für die Schriftgröße, font-weight für die Schriftstärke.

.reading-time {
color: #666;
font-size: 0.9em;
font-weight: 500;

Custom CSS für verschiedene Formate

/* Kompaktes Format */
.reading-time[content*="PT"] {
    background: #f0f0f0;
    padding: 2px 8px;
    border-radius: 12px;
}

 

/* Icon-Integration */
.reading-time::before {
    content: "???? ";
    margin-right: 4px;
}

Besonderheiten

  • Sicherheit und Standards: Die Implementierung beginnt mit einem ABSPATH-Check, der unbefugten direkten Zugriff verhindert. Die doppelte Überprüfung auf Elementor Pro gewährleistet Kompatibilität auch bei unterschiedlichen Installationsmethoden.
  • Lesegeschwindigkeit: Nutzer können zwischen 100 und unbegrenzten WPM (words per minute) wählen. Der Standardwert von 200 WPM entspricht dem gängigen Wert für Online-Leser.
  • Anzeigeformat: Die kompakte Variante zeigt „5 min“ an, während das vollständige Format „5 Minuten Lesezeit“ ausgibt. Vor und nach der Anzeigen kann ein beliebiger Text hinzugefügt werden.
  • Barrierefreiheit und SEO: Schema.org-Markup durch itemprop="timeRequired" und content="PT5M" verbessert die Suchmaschinenoptimierung erheblich. Screenreader profitieren von aria-label-Attributen bei fehlenden Inhalten.
  • Robuste Fehlerbehandlung: Die Lösung prüft systematisch auf Post-Existenz und Inhalte. Bei leeren Beiträgen wird eine semantisch korrekte Fallback-Ausgabe mit entsprechender Kennzeichnung generiert.
  • Performance und Optimierung: Die Berechnung erfolgt zur Laufzeit ohne Datenbank-Zugriffe. str_word_count() arbeitet effizient auch bei längeren Texten. Die Verwendung von wp_strip_all_tags() statt einfachem strip_tags() gewährleistet korrekte Behandlung von WordPress-Shortcodes. Caching-Plugins beeinflussen die Funktionalität nicht negativ, da die Berechnung serverseitig stattfindet.
  • Mehrsprachige Websites: Die vollständige Lokalisierung unterstützt mehrsprachige WordPress-Installationen. Übersetzungs-Plugins wie WPML oder Polylang erkennen die Textdomäne automatisch.

Warum Code anstatt einem Lesezeit-Plugin?

Nutzer entscheiden binnen Sekunden, ob sie einen Artikel lesen werden. Eine geschätzte Lesezeit hilft dabei die Verweildauer auf deiner Website zu erhöhen. Jedes zusätzliche Plugin bedeutet mehr Sicherheitslücken, langsamere Ladezeiten und erhöhten Wartungsaufwand. Für die einfache Anzeige der Lesezeit ist kein komplexes „Estimated Reading Time Plugin“ nötig.

  • Performance: Custom Code lädt nur das absolut Notwendige. Während Reading-Time-Plugins zwischen 50-200 KB groß sind, benötigt der Code hier weniger als 3 KB.
  • Kontrolle: Plugins folgen einem „One-Size-Fits-All“-Ansatz und bieten selten die gewünschte Flexibilität. Custom Code lässt sich exakt anpassen, ohne unnötige Features mitzuschleppen.
  • Abhängigkeiten: Plugin-Updates können Funktionen verändern oder entfernen. Entwickler stellen den Support ein oder verkaufen ihre Plugins. Custom Code bleibt unter deiner Kontrolle.
  • Wartung: Ein einziges Script in einem Code Snippet ist übersichtlicher als mehrere spezialisierte Plugins. Updates erfolgen gezielt und nur wenn nötig, nicht bei jedem Plugin-Update.

Es muss nicht immer ein Plugin sein. Teste die Lösung zunächst in einer Staging-Umgebung, bevor du sie auf der Live-Website implementierst. So stellst du sicher, dass alles reibungslos funktioniert und deinen Vorstellungen entspricht.

Info

Lesedauer in WordPress & Elementor anzeigen: Ohne Plugin

  • 8 min
Bild von Nioveo
Nioveo
Link kopieren