kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

WordPress-Theme um Logo-Upload-Funktion (Custom Logo) ergänzen

Seit WordPress 4.5 haben Theme-Entwickler die Möglichkeit im Customizer den Logo-Upload zu erlauben. Wenn die Funktion integriert wurde, sehen Redaktuere im Backend die Option ein Logo hochzuladen, dass dann auf der Website erscheint. In diesem Beitrag beschreiben wir wie die Funktion eingebaut wird, und welche Optionen euch zur Verfügung stehen

Workshops und Seminare von kulturbanause

Visual Prototyping, Responsive Design, CSS Grid & Flexbox, WordPress, Adobe XD, HTML & CSS Grundlagen, Website-Optimierung …

Jetzt Frühbucher-Rabatte sichern!

WordPress Theme-Feature »Custom Logo« aktivieren

Der Logo-Upload wird in den Theme-Funktionen aktiviert. Kopiert dazu folgende Zeilen in die functions.php:

function kb_theme_setup() {
  add_theme_support('custom-logo'); 
} 

add_action('after_setup_theme','kb_theme_setup');

Möglicherweise existiert der Action-Hook after_setup_theme und die zugehörige Funktion bei euch schon. In diesem Fall fügt ihr add_theme_support('custom-logo'); in die bestehende Funktion ein.

Wenn ihr die Anpassung korrekt umgesetzt habt, wird dem Redakteur im Backend unter »Design → Anpassen → Website-Informationen« ein Upload-Feld angezeigt.

Links: Der Customizer ohne Logo-Upload, mitte: Mit Logo-Upload, rechts: mit hochgeladenem Logo
Links: Der Customizer ohne Logo-Upload, mitte: Mit Logo-Upload, rechts: mit hochgeladenem Logo

Das Logo kann eine beliebige Größe besitzen. Wenn ihr die Bildgröße des Logos festlegen wollt, stehen euch folgende Argumente zur Verfügung:

add_theme_support( 'custom-logo', array(
	'height' => 80,
	'width' => 300,
	'flex-height' => true,
	'flex‐width' => true,
));

Die Argumente height und width legen fest, wie groß die Grafik mindestens sein muss um als Logo verwendet werden zu können. Wenn flex-height und/oder flex-width auf true gesetzt sind, kann die Logo-Grafik auch breiter oder höher sein.

Der Redakteur kann nach dem Upload der Grafik die hochgeladene Grafik beschneiden. Wie frei er dabei ist, hängt von den gesetzten Argumenten ab.

Im Dialog »Bild zuschneiden« hat der Redakteur die Möglichkeit die Logo-Grafik zu beschneiden oder den Ausschnitt zu verschieben
Im Dialog »Bild zuschneiden« hat der Redakteur die Möglichkeit die Logo-Grafik zu beschneiden oder den Ausschnitt zu verschieben

Das hochgeladene Logo auf der Website anzeigen

Um das Logo nun auf der Seite anzuzeigen, fügt folgenden Template Tag an der Stelle im Theme ein an der das Logo erscheinen soll:

<?php the_custom_logo(); ?>

Für eine bessere Abwärtskompatibilität zu alten WordPress-Versionen, könnt ihr zusätzlich prüfen, ob die Funktion überhaupt unterstützt wird:

<?php if(function_exists('the_custom_logo')) { 
  the_custom_logo();
} ?>

Wenn ihr ein SVG-Logo verwendet möchtet, müsst ihr zunächst den Dateiupload für SVG in WordPress erlauben.

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freuen wir uns auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Wir sind dir für jede Unterstützung dankbar!

Unterstützung bei WordPress-Projekten

Unsere WordPress Agentur ist auf die Entwicklung maßgeschneiderter WordPress-Themes und -Websites spezialisiert. Wenn du Unterstützung bei der Planung, Gestaltung und Entwicklung eines Projekts benötigst, helfen wir gerne weiter.
WordPress-Leistungsangebot →

Das könnte dich auch interessieren

10 Kommentare

  1. Maria

    Verfasst am 15. Mai 2016 um 23:48 Uhr.

    Hallo,

    vielen Dank für diesen Artikel!
    ich bin wirklich komplett neu bei WordPress und brauche wirklich Hilfe. Es hat wunderbar geklappt das Logo einzubinden und es anzuzeigen. Allerdings schaffe ich es nicht, es kleiner zu machen.
    Ich arbeite mit Twenty Eleven Theme (bzw. habe ein Childtheme davon erstellt).

    An welcher Stelle genau kann ich das „add theme support“ mit den Größenangaben einfügen? Bzw. wenn ich direkt im Stylesheet.css die Größe versuche zu ändern mit:
    funktioniert es nicht.

    img.custom-logo {
    height: 20%;
    }

  2. Dr. Elmar Basse

    Verfasst am 2. Juni 2016 um 16:04 Uhr.

    Hallo, schöner Artikel mit vielen nützlichen Informationen.

    Vielen Dank dafür
    Dr. Elmar Basse

  3. maykay

    Verfasst am 10. Juli 2016 um 21:16 Uhr.

    Sehr hilfreicher Artikel. Damit konnte ich problemlos das Logo hochladen.

  4. Patrick Berthel

    Verfasst am 2. November 2016 um 9:56 Uhr.

    Hallo,

    Ich habe da mal eine Frage. Ich habe mir dein Videotutorial für WordPress gekauft, es ist richtig gut und verständlich erklärt, aber vielleicht könnte ich einen tip bekommen, wie ich mit dem Custom Logo so arbeiten kann, dass wenn ich auf Titel Anzeigen den Hacken herausnehme auch der Titel unter dem Logo Ausgeblendet wird, wie es im Theme twenty-sixteen funktioniert. Mit Custom Logo habe ich zwar diese Option zur Verfügung, jedoch gibt es im Theme selbst keine Reaktion. Ich verwende kein Child-Theme sondern ein eigenes Theme. Somit muss ich diese Funktion leider selbst irgendwie unterbringen.

    gruß Patrick

  5. Doro

    Verfasst am 30. Oktober 2017 um 18:32 Uhr.

    Ich arbeite mit den Twentysixteen wo es die logo Funktion schon gibt.
    Allerdings lässt sich das Logo nur über den Webseitentitel /Webseiteninformation laden.
    Ich hätte es gerne aber neben dem Webseitentitel /Webseiteninformation. Sieht sonst doof,doof aus .
    Geht das?
    lg

  6. Ulf J. Froitzheim

    Verfasst am 25. November 2017 um 23:55 Uhr.

    Danke für den Tipp. Aber irgendetwas habe ich wohl nicht kapiert. Nur was?
    Ich habe den Code in die functions.php des Child Theme so eingebaut:

    17 /**
    18 * Tell WordPress to run twentyeleven_setup() when the ‚after_setup_theme‘ hook is run.
    19 */
    20 add_action( ‚after_setup_theme‘, ‚twentyeleven_setup‘ );
    21 function kb_theme_setup() {
    22 add_theme_support(‚custom-logo‘);
    23 }
    24
    25 add_action(‚after_setup_theme‘,’kb_theme_setup‘);
    26
    27 if ( ! function_exists( ‚twentyeleven_setup‘ ) ):
    28 /**
    29 * Sets up theme defaults and registers support for various WordPress features.
    30 *
    31 * Note that this function is hooked into the after_setup_theme hook, which runs
    32 * before the init hook. The init hook is too late for some features, such as indicating
    33 * support post thumbnails.

  7. Ulf J. Froitzheim

    Verfasst am 26. November 2017 um 0:00 Uhr.

    Sorry, hat doch geklappt. Was nicht funktioniert hatte, war das Upload. ;-)

  8. doro

    Verfasst am 2. Dezember 2017 um 2:18 Uhr.

    Ich habe zwar das Logo neben der Seiteninfo bekommen, aber leider war dann der Seitentitel nur noch halb zu lesen.
    Aber trotzdem vielen Dank
    Lg

Kommentar verfassen

Dieser Blog lebt vom Feedback der Besucher! Also los, mach mit!
Bitte habe Verständnis dafür, dass Kommentare die mit dem Inhalt dieses Beitrags nichts zu tun haben, gelöscht werden.