Du möchtest dein GeneratePress weiter individualisieren? Dann haben wir folgend eine Ansammlung an Mini-Helfern. Die Liste wird stetig erweitert.
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;
}
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
Je nachdem wie du dein Inhaltsverzeichnis für Beiträge oder andere Ankerlinks integrieren möchtest (bei denen du keine zusätzliche Klasse direkt im a-Tag angeben kannst), 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[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.
Quellen und Fußnoten