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 (oder ein anderes Element) an einer festen Position „angeklebt“ sein soll, verwendest du folgende Zeilen CSS-Code. Die Selektoren müssten natürlich noch auf deinen Bedarf angepasst werden.

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

Suche anpassen (z.B. Produkte)

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

Ankerlinks sind praktisch, um zu bestimmten Inhaltsbereichen einer Seite zu springen. Das springen jedoch kann unschön wirken und ein scrollen wirkt oft sehr viel weicher und angenehmer. Dafür gibt es bei GeneratePress die Klasse „smooth-scroll“, welche direkt am Link anzubringen ist. Beachte bitte, dass die Funktion selbst im Customizer eingeschaltet sein muss.

Wenn es nun Inhalte gibt, wo du keine Klasse hinterlegen kannst, wird dir das folgende Snippet helfen. Denn es ergänzt alle Ankerlinks auf deiner Website mit der nötigen Klasse, ohne das du sie manuell hinterlegen musst. Z.B. für deinen Table of Content (das Inhaltsverzeichnis einer Seite) kannst du mit dem folgenden Code das sanfte Scrollen für interne Links auch global aktivieren. ^[4]generate_smooth_scroll_elements

add_filter( 'generate_smooth_scroll_elements', function( $elements ) {
    $elements[] = 'a:not([data-gpmodal-trigger="gp-search"])[href*="#"]';
    
    return $elements;
} );

Für alle anderen Elemente und Inhalte kannst du natürlich weiterhin die GP-eigene Klasse „smooth-scroll“ ^[5]Smooth-Scroll nutzen und schon sind diese Links auch vom sanften Bildlauf betroffen.

Menüpunkte unterstreichen & animieren

Die Menüpunkte deines primären Menüsmit GeneratePress hübsch zu stylen ist nicht schwer. Wir nutzen hierfür eine zusätzliche Klasse (menu-label), welche automatisch an jeden Haupt-Menüpunkt hinzugefügt wird. Dieses Code-Snippet kommt in deine functions.php. ^[6]GeneratePress Forum – Menü Unterstreichung

add_filter('wp_nav_menu_objects', 'db_menu_item_featured_image', 10, 2);

function db_menu_item_featured_image($sorted_menu_objects, $args) {

    // Check navigagtion is primary
    if ($args->theme_location != 'primary')
        return $sorted_menu_objects;
    // edit menu items
    foreach ($sorted_menu_objects as $menu_object) {
       $menu_object->title = '<span class="menu-label">' . $menu_object->title . '</span>';
    }

    return $sorted_menu_objects;
}

Für das Styling kannst du nun das nachfolgende CSS in der style.css deines Child-Theme hinzufügen.

@media (min-width: 769px) {
    .main-navigation .menu>.menu-item>a>.menu-label {
        position: relative;
    }

    .main-navigation .menu>.menu-item>a>.menu-label::after {
        content: "";
        position: absolute;
        right: 0;
        left: 50%;
        bottom: -5px;
        -webkit-transform: translate3d(-50%, 0, 0);
        transform: translate3d(-50%, 0, 0);
        display: block;
        width: 0;
        height: 2px;
        background-color: currentColor;
        transition: 0.3s width ease;
    }

    .main-navigation .menu>.menu-item.current-menu-item>a>.menu-label::after,
    .main-navigation .menu>.menu-item.current-menu-ancestor>a>.menu-label::after,
    .main-navigation .menu>.menu-item:hover>a>.menu-label::after {
        width: 100%;
    }
}

Mit diesen beiden Snippets (PHP & CSS) hast du nun deine Hauptmenü-Punkte um die Unterstreichung bei Hover ergänzt. Es werden automatisch die hinterlegten Farben genutzt und vererbt (currentColor). Bei Bedarf einfach die entsprechenden Werte anpassen und Individualisieren.

Quellen und Fußnoten[+]