GeneratePress Code Snippets

Du möchtest dein GeneratePress weiter individualisieren? Dann haben wir folgend eine Ansammlung an Mini-Helfern. Die Liste wird stetig erweitert.

Deine Sprungmarken Bitte Anzeigen

Lesezeit im Beitrag ausgeben

Du möchtest deinen Beitrag um die geschätzte Lesezeit ergänzen?^[1]GeneratePress Support-Frage Mit dem folgenden Code für die functions.php, kannst du die Lesezeit innerhalb der Meta-Angaben deines Beitrages hinterlegen. Beim Wert von „300“ wird die Anzahl der Worte je Minute angegeben. Je nach „Verdaulichkeit“ deiner Texte kannst du diesen Wert nach deinen Bedürfnissen anpassen. Die Textbereiche bei „Minuten“ sowie „Lesezeit ca.“ kannst du ebenfalls anpassen oder übersetzen.

/* Lesezeit im Beitrag ausgeben */
function dwp_estimated_reading_time() {
    $post = get_post();
    $content = $post->post_content;
    $wpm = 300; // How many words per minute.

    $clean_content = strip_shortcodes($content);
   $clean_content = strip_tags($clean_content);
    $word_count = str_word_count($clean_content);
    $time = ceil($word_count / $wpm);

    return $time . ' Minuten';
}

add_filter('generate_post_date_output', function ($output) {
    $output .= '<div class="read-time">Lesezeit ca. ' . dwp_estimated_reading_time() . '</div>';

    return $output;
});

Du findest fortan den Hinweis der Lesezeit hinter den Datumsangaben deines Beitrages. Wenn wir uns nun die Ausgabe der neuen Zeitangabe betrachten, sehen wir, dass die zeitlichen Angaben des Beitrages mit einem (time-Tag) umfasst werden und unsere Lesezeit einen anderen Aufbau hat. Wir nutzen hier bewusst nicht das time-Tag, da dies nur ein Datum oder eine Zeit enthalten sollte. Die zeitliche Dauer ist dagegen besser in einem (div-Tag) aufgehoben. Die Gestaltung kannst du dann per CSS und der hinterlegten Klasse „.read-time“ nach deinen Wünschen gestalten.

Container komplett klickbar machen

Mittlerweile besitzt GenerateBlocks Pro diese Funktion.

Wenn du kein Pro-Nutzer bist oder noch eine alte Version nutzen musst, kannst du die Funktion wie folgt nachrüsten. Hierzu erstellst du ein Overlay per HTML-Element für Links innerhalb des Containers. Dieser wird als komplette Klickfläche dienen. Eine schöne Alternative zu schnöden Buttons und auf Mobilgeräten mit größerer Klickfläche immer eine feine Sache.

/* Container klickbar machen */
.clickable-container {
    position: relative;
}
.clickable-container a.overlay {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
}

Sticky Sidebar

Wie der Name es bereits vermuten lässt, wenn deine Sidebar an einer festen Position angeklebt sein soll, verwendest du folgende Zeilen CSS-Code.

@media (min-width: 769px) {
    #right-sidebar > .inside-right-sidebar {
        position: -webkit-sticky;
        position: sticky;
        top: 120px;
    }
}

Suche anpassen

Die Ausgabe deiner Suchergebnisseite lässt sich individuell anpassen. Besonders spannend, wenn beispielsweise nach WooCommerce Produkten gesucht werden soll: Die Produktsuche aktivieren, Platzhalter hinterlegen und Suche nach absenden zurücksetzen.^[2]siehe GeneratePress-Doku

add_filter( 'generate_navigation_search_output', function() {
    printf(  
        '<form method="get" class="search-form navigation-search" action="%1$s">
            <input type="search" placeholder="Produkte durchsuchen ..." class="search-field" value="" name="s" title="%3$s" />
            <input type="hidden" name="post_type" value="product" />
        </form>', 
        esc_url( home_url( '/' ) ), 
        esc_attr( get_search_query() ),   
        esc_attr_x( 'Search', 'label', 'generatepress' ) 
    ); 
} );

Suchbox (Mobil) blauer Rahmen stört?

Die Headersuche hat mobil ggf. einen blauen Rahmen, welches durch das Browser Styling ausgegeben wird. Um die ungewünschte Farbe zu entfernten, kannst du diese CSS-Zeilen nutzen. ^[3]siehe GeneratePress-Board

#site-navigation.has-active-search .navigation-search input {
    outline: none !important;
    border: 1px solid #ccc; /* optional */
}

Weiches Scrollen für Anker-Links

Je nachdem wie du dein Inhaltsverzeichnis integrierst, so kannst du das sanfte Scrollen für interne Links aktivieren.

add_filter( 'generate_smooth_scroll_elements', function( $elements ) {
  $elements[] = 'a[href*="#"]';
  
  return $elements;
} );

Quellen und Fußnoten[+]