Wordpress Dokumente

Wie füge ich ein benutzerdefiniertes Logo in WordPress hinzu?

05/01/2023
Wordpress Custom Logo

Beim Erstellen eines neuen Designs in WordPress ist eine benutzerdefinierte WordPress-Logokonfiguration über functions.php erforderlich, damit das Logo der Seite hinzugefügt werden kann.

Laden Sie das Logo in WordPress hoch

Es gibt einen Bereich, in dem Sie ein Logo auf der Registerkarte Design > Customizer > Website-Informationen hinzufügen können. Wenn Sie dieses Feld nicht über die functions.php in einem neu erstellten WordPress-Theme aktivieren, wird der Bereich zum Hinzufügen von Logos nicht auf der Registerkarte Website-Informationen angezeigt.

Wordpress Theme Customizer

Wordpress Theme Customizer

WordPress-Anpassungsbildschirm nicht über functions.php konfiguriert

Hinzufügen eines benutzerdefinierten WordPress-Logos

Wenn Sie den unten stehenden Code kopieren und in die Datei functions.php einfügen, wird der Bereich zum Einfügen des Logos auf der Registerkarte Website-Informationen aktiv.

add_theme_support( 'custom-logo' );
Wordpress Logo Auswahlen

Der obige Code löst das benutzerdefinierte Logo aus, aber mit der folgenden Codestruktur können Sie einige Parameter der Funktion add_theme_support('custom-logo') ändern, während Sie das benutzerdefinierte Logo hinzufügen. Der Code muss in der Datei functions.php enthalten sein.

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' => false, 
   ); 

   add_theme_support( 'custom-logo', $defaults ); 
} 
add_action( 'after_setup_theme', 'themename_custom_logo_setup' );
  • Die Werte height und width bestimmen die Maße für das Logo.
  • flex-height und flex-weight geben an, ob sich die angegebenen Breiten- und Höhenwerte ändern können. Die Werte sind “true” und “false”. Wenn zum Beispiel die flexh-height und flex-width Werte im Array mit 1oopx. height, 400px width Werten falsch sind, wird das WordPress-Bedienfeld das Logo beschneiden, das der Benutzer hat wird zu 100px height und 400px width hinzugefügt.
  • unlink-homepage-logo verhindert das Verlinken der Startseite über das Logo. Wenn wahr, hat das Logo keinen Link. Wenn falsch, wird dem Logo ein Link hinzugefügt.

Logo auf der Seite anzeigen

Verwenden Sie den folgenden Code, um das Logo anzuzeigen. Der Code wird normalerweise in der Datei header.php verwendet, dies hängt jedoch von den Vorlieben des Entwicklers ab.

the_custom_logo();

Nur der the_custom_logo() Code kann das Logo auf der Seite anzeigen, aber WordPress empfiehlt die Verwendung des function_exists() Codes wie im folgenden Format, um die Kompatibilität mit früheren Versionen von WordPress aufrechtzuerhalten. Denn in alten WordPress-Versionen kann die Funktion anders als Name verwendet werden.

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

Wenn Sie eine andere Logo-URL verwenden möchten oder das <img>-Tag selbst bearbeiten müssen, können Sie eine Struktur wie im folgenden Beispiel verwenden.

$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>'; 
}

Verweise:

https://developer.wordpress.org/themes/functionality/custom-logo/