TLDR;
Nur für Webentwickler
Ziel
Custom header für eine WordPress Website mit dem GeneratePress Theme
Umsetzung
Neues Element vom Typ Block anlegen und als Hook “Header” auswählen
![custom_header_2](https://wordpressspezialist.de/wp-content/uploads/2024/05/custom_header_2.png)
Inhalte für den Header einfügen
Beispiel
<!-- wp:generateblocks/container {"uniqueId":"ca9d7686","templateLock":"all","backgroundColor":"var(\u002d\u002dcontrast)","isDynamic":true,"blockVersion":4,"lock":{"move":true,"remove":true},"metadata":{"name":"WRAPPER"}} -->
<!-- wp:generateblocks/container {"uniqueId":"e2b2fbbf","backgroundColor":"var(\u002d\u002dcontrast-2)","isDynamic":true,"blockVersion":4,"useGlobalMaxWidth":true,"spacing":{"marginLeft":"auto","marginRight":"auto"},"metadata":{"name":"CENTER CONTENT"}} -->
<!-- wp:generateblocks/container {"uniqueId":"f6f294a8","templateLock":"all","backgroundColor":"var(\u002d\u002dcontrast-3)","isDynamic":true,"blockVersion":4,"display":"flex","lock":{"move":true,"remove":true},"metadata":{"name":"LAYOUT (flex)"}} -->
<!-- wp:generateblocks/container {"uniqueId":"c3ddd0f5","isDynamic":true,"blockVersion":4,"spacing":{"paddingRight":"40px"},"metadata":{"name":"LOGO"}} -->
<!-- wp:generateblocks/image {"uniqueId":"38267fbc","mediaId":58,"sizeSlug":"full","width":"100px","blockVersion":2} -->
<figure class="gb-block-image gb-block-image-38267fbc"><img class="gb-image gb-image-38267fbc" src="http://customheader1.local/wp-content/uploads/2024/04/logo-gp.svg"/></figure>
<!-- /wp:generateblocks/image -->
<!-- /wp:generateblocks/container -->
<!-- wp:generateblocks/container {"uniqueId":"31e9a4e4","templateLock":"all","backgroundColor":"var(\u002d\u002dbase)","isDynamic":true,"blockVersion":4,"display":"flex","flexDirection":"column","sizing":{"width":"100%"},"lock":{"move":true,"remove":true},"metadata":{"name":"NAVIGATIONS (flex)"}} -->
<!-- wp:generateblocks/container {"uniqueId":"4d06eccc","backgroundColor":"rgba(180, 180, 191, 0.71)","isDynamic":true,"blockVersion":4,"display":"flex","justifyContent":"flex-end","metadata":{"name":"NAV2"}} -->
<!-- wp:shortcode -->
[gp_secondary_nav]
<!-- /wp:shortcode -->
<!-- /wp:generateblocks/container -->
<!-- wp:generateblocks/container {"uniqueId":"b6a4fc53","backgroundColor":"rgba(88, 88, 97, 0.5)","isDynamic":true,"blockVersion":4,"display":"flex","flexDirection":"row","justifyContent":"flex-start","metadata":{"name":"NAV1"}} -->
<!-- wp:shortcode -->
[gp_primary_nav]
<!-- /wp:shortcode -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->
<!-- /wp:generateblocks/container -->
Appearance > GeneratePress > Secondary Nav > aktivieren
Das ist notwendig, damit die Shortcodes im nächsten Abschnitt funktionieren.
![custom_header_1](https://wordpressspezialist.de/wp-content/uploads/2024/05/custom_header_1.png)
Shortcodes für die Ausgabe der Primary und Secondary Navigation in der functions.php erstellen
<?php
// -------------------------------------------------------------------
// Custom Header (1/2)
// -------------------------------------------------------------------
// Shortcut for primary navigation
// -------------------------------------------------------------------
// https://generate.support/topic/shortcode-nav/#post-94443
// -------------------------------------------------------------------
add_shortcode( 'gp_primary_nav', function() {
ob_start();
if ( function_exists( 'generate_secondary_navigation_position' ) )
{
generate_navigation_position();
}
else
{
echo '<p>Error: Function does not exist: generate_navigation_position()</p>';
}
return ob_get_clean();
} );
// -------------------------------------------------------------------
// Custom Header (2/2)
// -------------------------------------------------------------------
// Shortcut for secondary navigation
// -------------------------------------------------------------------
// Prerequisites in WP Backend
// 1. in Appearance > GenratePress activate the Secondary Navigation and assign it a Menu in Appearanace > Menus.
// 2. in Customizer > Layout > Secondary Navigation set the Location to No Navigation
// -------------------------------------------------------------------
// https://generate.support/topic/would-like-to-create-something-like-the-screenshot/#post-93651
// -------------------------------------------------------------------
add_shortcode( 'gp_secondary_nav', function() {
ob_start();
if ( function_exists( 'generate_secondary_navigation_position' ) )
{
generate_secondary_navigation_position();
}
else
{
echo '<p>Error: Function does not exist: generate_secondary_navigation_position()</p>';
}
return ob_get_clean();
} );
?>
Ergebnis
Der Header von dieser Seite:
![custom_header_4_ERGEBNIS](https://wordpressspezialist.de/wp-content/uploads/2024/05/custom_header_4_ERGEBNIS.png)