WordPress Logo Funktion über Customizer

Damit das eigene Logo über WordPress hochgeladen und verändert werden kann werden zwei grundsätzliche Template Änderungen benötigt. Die Logo-Funktionalität muss im Theme functions.php File hinzugefügt werden. Anschliessend kann das Logo über die WordPress eigene Funktion get_custom_logo( ) abgerufen werden.

Logo Funktion aktivieren

Um die Logo Funktion im WordPress Theme zu aktivieren muss in der aktiven functions.php Datei folgender Code hinzugefügt werden:

function themename_custom_logo_setup() {
    $defaults = array(
        'height'               => 100,
        'width'                => 400,
        'flex-height'          => true,
        'flex-width'           => true,
        'header-text'          => array( 'site-title', 'site-description' ),
        'unlink-homepage-logo' => true, 
    );
    add_theme_support( 'custom-logo', $defaults );
}
add_action( 'after_setup_theme', 'themename_custom_logo_setup' );

Dieser Code teilt WordPress mit, dass dieses Theme die Logo Funktion unterstützt. Neben Höhe und Breite des anzuzeigenden Logos werden ebenfalls Titel und Text definiert, sofern kein Logo hochgeladen wurde.

Das Logo kann unter „Design“ -> „Header“ hochgeladen und ausgewählt werden.

Logo in Header Datei einbinden

Um das Logo anschliessend über den Customizer auf der WordPress Webseite einzufügen, wird in der header.php Datei folgender Code hinzugefügt:

if ( function_exists( 'the_custom_logo' ) ) {
    the_custom_logo();
}

Dieser Code überprüft, ob die Funktion the_custom_logo exisitert. Wenn dies der Fall ist, wird via the_custom_logo( ) das Logo als HTML <img>-Tag ausgegeben und angezeigt.

Um mehr Kontrolle über das eingebettete Logo zu erlangen, beispielsweise eigene Klassen oder ID hinzuzufügen, kann mit folgendem Code lediglich die Bild URL ausgegeben werden. Das richtige Verpacken der URL muss dann selbst erfolgen und könnte wie folgt aussehen:

$custom_logo_id = get_theme_mod( 'custom_logo' );
$logo = wp_get_attachment_image_src( $custom_logo_id , 'full' );
 
if ( has_custom_logo() ) {
    echo '<img src="' . esc_url( $logo[0] ) . '" alt="' . get_bloginfo( 'name' ) . '">';
} else {
    echo '<h1>' . get_bloginfo('name') . '</h1>';
}

Sofern ein Custom Logo in WordPress hochgeladen wurde, wird das Bild in einem <img>-Tag ausgegeben. Sollte kein Logo vorhanden sein, wird der Blogname in einem <h1>-Tag stattdessen ausgegeben.

Quelle: WordPress Codex