Zur Suche springen Zur Navigation springen Zum Hauptinhalt springen Zum Footer springen

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

Schulungen von kulturbanause

Intensive Trainings mit hohem Praxisbezug.

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.

Geschrieben von Jonas

thumb

Jonas ist Gründer der Webdesign Agentur kulturbanause® und des kulturbanause® Blogs. Er übernimmt Projektleitung, Grafik sowie Frontend- und WordPress-Development und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Als Dozent leitet er Schulungen und Workshops. Am liebsten beschäftigt er sich mit Projekten und Themen, die ihn gleichermaßen konzeptionell als auch gestalterisch und technisch fordern.

Seminare mit Jonas Hellwig anzeigenJonas Hellwig bei Xing

Feedback & Ergänzungen – 10 Kommentare

  1. 19 hilfreiche Webdesign-Blogs & -Podcasts zur Weiterbildung - Webdesign Journal
    schrieb am 05.05.2018 um 14:46 Uhr:

    […] Typische kulturbanause-Artikel SVG-Grafiken in Websites/HTML-Seiten einbinden Responsive Sticky Footer WordPress-Theme um Logo-Upload-Funktion (Custom Logo) ergänzen […]

    Antworten
  2. doro
    schrieb am 02.12.2017 um 02: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

    Antworten
  3. Ulf J. Froitzheim
    schrieb am 26.11.2017 um 00:00 Uhr:

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

    Antworten
  4. Ulf J. Froitzheim
    schrieb am 25.11.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.

    Antworten
  5. Doro
    schrieb am 30.10.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

    Antworten
  6. Patrick Berthel
    schrieb am 02.11.2016 um 09: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

    Antworten
  7. maykay
    schrieb am 10.07.2016 um 21:16 Uhr:

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

    Antworten
  8. Dr. Elmar Basse
    schrieb am 02.06.2016 um 16:04 Uhr:

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

    Vielen Dank dafür
    Dr. Elmar Basse

    Antworten
  9. Maria
    schrieb am 15.05.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%;
    }

    Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

WordPress-Projekte mit kulturbanause

Wir wissen wovon wir reden. Wir setzen WordPress seit über 10 Jahren erfolgreich ein und realisieren maßgeschneiderte Websites auf Basis dieses großartigen CMS.

WordPress-Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →

Unsere Agentur in Berlin realisiert vom durchgestylten One-Pager bis zur funktionalen Konzern-Website Projekte mit sehr unterschiedlichem Umfang. Wir haben u.a. mit folgenden Kunden erfolgreich zusammengearbeitet: