42 Gedanken zu „WP-Theme-Tipp: Twenty Twelve mit Logo im Header

  1. Peter Grab

    ich hätte das Logo gern anstelle des header und mit einer url hinterlegt, die gestartet wird, wenn man auf das logo klickt.
    Vorschlag?

    Antworten
    1. Heiko Mamerow Beitragsautor

      Hallo Peter,

      …kein Problem: Lass einfach die div-Box aus meinem Beispiel weg und setze den Link um das Bild. z.B so:

      In diesem Code-Schnipsel geht der Link auf die Startseite.
      [php]
      <hgroup>
      <a href="<?php echo esc_url( home_url( ‚/‘ ) ); ? rel="nofollow">" title="<?php echo esc_attr( get_bloginfo( ’name‘, ‚display‘ ) ); ?>" rel="home">
      <img alt="Logo" src="<?php bloginfo(‚wpurl‘); ?>/wp-content/uploads/heikomamerow-logo.png" />
      </a>
      </hgroup>
      [/php]

      Antworten
  2. Mo

    Funktioniert prima! Danke für den Tipp! Habe aber noch eine Frage zur Schrift, eventuell hast du eine Lösung:
    Beim Aufruf der Seite mit dem IPod wird die Schriftart auf der zweiten Seite bzw. einer angeklickten Seite miniaturhaft angezeigt? Wenn mann darauf tacht, passt sich das Layout nicht automatisch der angezeigten Fläche an sondern man kann hin und her schieben. Hast du einen Ansatz ?

    Antworten
  3. Heiko Mamerow Beitragsautor

    Hallo Mo,
    entschuldige meine späte Reaktion. Ich war ein paar Wochen krank.

    Tritt der Fehler nur bei meiner Seite auf oder generell bei Twenty Twelve? Ich habe leider keinen IPod und kann das nicht prüfen….

    bb
    Heiko

    Antworten
  4. Mo

    Hallo Heiko,
    auf deiner Seite und jetzt auch auf meiner wird auf dem ipod alles super dargestellt. Habe den Fehler selbst produziert, indem ich Quelltext an die falsche Stelle platziert habe. Danke für deine Antwort und weiter viel Spaß beim tüffteln. ;)

    Antworten
  5. Peter Nowottny

    Hallo Heiko,

    wie muss den der code aussehen, wenn man das Logo links vor dem Seitentitel haben möchte, genauso, wie Du es auf Deiner Seite hast.
    Vielen Dank.

    Peter

    Antworten
  6. Michael

    Moin!
    Ich habe nun dank Deiner Hilfe mein Logo erfolgreich in das Theme einbinden können.
    Nun wird aber bei der mobilen Ansicht gar kein Logo angezeigt. Wie kann ich das ändern-
    z.B. das bei der Mobilen Ansicht ein Seitentitel oder Logo angezeigt wird?

    Gruss
    Michael

    Antworten
    1. Heiko Mamerow Beitragsautor

      Hallo Michael,
      das Logo wird bei schmalen Fenstern sichtbar, wenn Du bei meinem oben gezeigten Beispiel bei „Stylesheet anpassen“ den Code-Schnipsel von Punkt 3 NICHT verwendest bzw. aus Deiner CSS-Datei entfernst.

      Also das hier muss raus:
      hgroup img {
      display: none;
      }

      :-)

      Antworten
  7. Daniel

    Hallo Heike,

    das mit dem Logo hat super geklappt!
    Hab noch eine spezielle Frage und zwar möchte ich nach Kundenwunsch gerne
    den Kopfbildtext farbig anpassen und zwar so das genau dieses Wort aus 2 Farben besteht,
    keinen Verlauf sondern z. B. das Wort „Farbwechsel“, wo Farb in einer und wechsel in einer
    Farbe hinterlegt ist, ist sowas im Twenty Twelve Theme machbar?
    Freu mich über Deine Antwort.

    Gruß
    Daniel

    Antworten
    1. Heiko Mamerow Beitragsautor

      Hallo Daniel, alles ist machbar… ;-)
      Wenn sich im Wort die Farbe ändern soll, dann kommst Du ohne HTML/CSS nicht aus. Solche HTML-Tags werden aber bei Blog- und Untertiel nicht gerendert, sondern wie Text dargestellt. Ich würde also den Kopfzeilentext anders einbinden. Entweder direkt im Header (quick&dirty) oder als custom-field (falls es vom Kunden editierbar sein soll).

      Antworten
      1. Roland Schnurr

        Hallo Heiko,
        ich habe das selbe Thema wie Daniel,
        kannst Du etwas genauer auf die Lösung mit unterschiedlichen Farben des „title“ eingehen. Deine bisherige Lösung mit dem Logo habe ich bereits integriert. Funktioniert wunderbar.
        Gruss Roland

        Antworten
  8. W. Zegenhagen

    Grandios – Danke für diese Tipps!
    Ich hatte mir angewöhnt, das „twentytwelve“ zu nutzen, weil es schon für mobile Geräte optimiert ist – bislang aber immer ohne Logo im Header … was für mich (bis heute …) ein Manko darstellt! Nun werde ich nach und nach ALLE Seiten, bei denen ich dieses schlanke Theme nutze, mit einem schönen Logo versehen!

    Antworten
  9. Christoph

    Hallo Heiko,
    das ist echt eine gute Lösung und hat mir sehr geholfen. Ich würde jetzt noch gerne in einem gewissen abstand zum Logo site-title und site-description in einer Zeile aufeinander folgend positionieren. Also Links das Logo und dann auf etwa 30% der Logohöhe in einem abstand von 100px einzeilig title und description. Hoffe du verstehst was ich meine.
    bisher schaffe ich die beiden nicht einmal in eine Zeile zu bekommen so dass ich sie dann unterschiedlich per css gestalten kann…
    Würde mich freuen über eine Lösung!!!
    Gruß Christoph

    Antworten
    1. Heiko Mamerow Beitragsautor

      Hallo Christoph, wenn ich Dich richtig verstehe, willst Du alles nebeneinander haben? Dann brauchst Du eigentlich nur im CSS die HTML-Tags vom Titel und der Beschreibung als Inline-Elemente deklarieren.

      Ungefähr so:
      .site-title, .site-description {display: inline;}

      Antworten
  10. Susa

    Hallo Heiko,
    super Anleitung für das Theme Twenty Twelve. Ich benutze Twenty Eleven und habe ein ganz ähnliches Anliegen. Ich möchte im gesamten Kopfzeilenbereich ein Logo mit Überschrift (logo.png 870x180px, mittig) unterbringen und auf den site-title und die site-description in der header.php verzichten. Hast Du dafür eine Idee?
    Gruß Susa

    Antworten
    1. Heiko Mamerow Beitragsautor

      Hallo Susa, ein Logo über den gesamten Header liesse sich einfach realisieren. Die einfachste Möglichkeit wäre, wenn Du das Markup für Blogtitel und Untertitel entfernst und das Bild wie gewünscht über die ganze Breite legst. (Falls Du meinen Code vom Header benutzten möchtest, musst Du auch den div-Container entfernen und das CSS anpassen…)

      Ich würde übrigens nicht auf Blog- und Untertitel verzichten, sondern die einfach „unsichtbar“ machen. ;-)

      Antworten
  11. Pingback: WP 3.6 Twenty Twelve – Header Bild – Breite an iPad mini anpassen Thema | My Blog

  12. Daniel

    Hallo Heiko,
    musste aufgrund das es mir die Seite zerschossen hat (warum auch immer) das Logo nochmal neu einbinden, hat auch alles geklappt… nur ist mir aufgefallen das es auf kleineren Geräten wie auf dem iPad mini das Logo „abschneidet“. Auch der Versuch die Zeile

    /* Tweak for logo in header
    ———————————————–*/
    hgroup img {
    display: none;
    }

    zu entfernen hat nichts gebracht. Wie bringe ich es nun zustande das dieses Logo auch auf einem iPad mini voll zur Geltung kommt und ganz angezeigt wird? Weißt du da einen Rat?

    LG
    Daniel

    Antworten
    1. Heiko Mamerow Beitragsautor

      Hallo Daniel, mit „display: none“ wird das entsprechende Element (hgroup img) völlig ausgeblendet. Da sollte kein Logo zu sehen sein, falls die Referenzierung stimmt. Woher der Effekt des Abschneidens kommt, kann ich nur raten. Ich tippe mal darauf, dass Höhen- und/oder Breitenangaben nicht stimmen.

      Antworten
  13. Kat

    Hallo Heiko,
    vielen Dank für diese tolle WP Inspirations und Code-quelle!
    Ich würde gerne einen header realisieren, wo der blog Titel, ggf. Tagline und die Navigation auf einer Linie liegt. Ich bekomme die Navigation nicht auf die selbe höhe und auch die Einstellung der Hintergrund Farben sind mir schleierhaft, auch nach ausgiebiger Suche und Tests.
    Hier mal ein Beispiel, wie ich es schicker nicht gesehen habe
    Könntest Du mir da ein, zwei Tipps geben?! Vielen Dank! Kathrin

    Antworten
  14. Stan

    Hallo Heiko,

    super Anleitung! Kannst du mir erklären, wie ich das beim Hiero Theme von aThemes mache?

    hier der Schnipsel aus der header.php:

    < class="site-title">
    <a href="" rel="home">
    <img src="" alt="" />

    </>

    < class="site-title">
    <a href="" rel="home">

    </>


    Antworten
  15. Micha

    Hallo Heiko,
    deine Anleitungen sehen sehr gut aus. Ich würde gerne ein Logo im Header von twenty eleven einbauen und außerdem den Headerbereich weniger hoch gestalten. Da ich noch WordPress-Anfänger bin, würde ich mich über eine Anleitung sehr freuen. Ich habe dich so verstanden, dass man die header.php des Eltern-Themes anpassen muss, jedenfalls gibt es diese Datei beim Child gar nicht. Ist das richtig?
    Gruß, Micha

    Antworten
    1. Heiko Mamerow Beitragsautor

      Hallo Micha, wenn es die Datei header.php im Child nicht gibt, kopierst Du sie einfach vom Parent dort hinein und passt sie an, wie Du magst. WP benutzt dann die header-Datei aus dem Child.

      Antworten
  16. Alexander Dert

    Hallo,
    vielen Dank für die super Anleitung – es funktioniert einwandfrei. Habe schon verschiedene andere Lösungen gesehen, aber ich denke die hier ist am saubersten!
    Ich habe nur ein Problem: Auf dem Handy erscheint mit nach diesem Tweak das Menü nicht mehr. Der „Menue“ Button ist da, aber wenn ich drauf drücke passiert nichts. Ich habe nun schon Stunden am Code herumprobiert… leider ohne Erfolg.
    Können Sie mir sagen, was die responsive-Seite beeinflusst?
    Wenn ich die Seite header.php aus dem Child-Theme lösche, funktioniert es mobil wieder so wie es soll – nur fehlt mir dann halt der Banner auf der richtigen, sprich PC-Seite.
    Besten Dank und Grüße,
    Alex

    Antworten
  17. marco

    Hallo Heiko,

    danke für die grandiose Anleitung. Nun, ich habe auch eine Frage und vielleicht kannst du mir da einen Tipp geben. Ist es möglich das Logo auf mobilen Endgeräten skaliert darzustellen? Oder ein kleineres Logo angezeigt wird wenn die Breite unter 960 Pixel liegt?

    Beste Grüße

    Marco

    Antworten
    1. Heiko Mamerow Beitragsautor

      Hallo Marco, beides ist möglich. Denkbar ist auch eine Kombination aus beiden. 1) Die Skalierung erlangst Du, wenn Du dem Logo im CSS „height: auto; max-width: 100%;“ zuweist. Dann skaliert es immer auf die volle Breite des umschließenden Elternelementes. 2) Das geht mit: Adaptive Images Allerdings ist die Umsetzung nicht gerade trivial, falls Du unerfahren mit WordPress sein solltest.

      Antworten
  18. Roland

    Hallo Heiko,

    ich bekomme das irgendwie nicht hin. Bei mir steht das Logo über den anderen beiden Elementen und nicht links daneben. Wäre für einen Tipp dankbar (sitze schon den ganzen Abend daran).

    Viele Grüße
    Roland

    Antworten
  19. Frank

    Hallo Heiko,

    ich möchte Variante 1 umsetzen und das Logo entsprechend verkleinern lassen wenn die Seite unter 960px. Wo füge ich “height: auto; max-width: 100%;” denn im CSS genau ein?

    Danke Dir vorab für Tipps.

    Frank

    Antworten
  20. Frank

    Hallo Heiko,
    wo füge ich im style.css den Befehl: “height: auto; max-width: 100%;” konkret ein?

    Danke vorab für Deine Tipps! Bin echt begeistert.

    Grüße

    Frank

    Antworten
  21. Locke

    Hi Heiko, kannst du auch eine Anleitung für Twenty Fifteen erstellen? Hab’s teilweise hinbekommen, jedoch verschwindet der Header auf Unterseiten und das Logo ist auch nicht mit der URL verknüpft. Wäre super! Danke :)

    Viele Grüße
    Lukas

    Antworten
  22. Locke

    Hi Heiko, ich bin es nochmal! Hab nun mal das Twenty Twelve Theme ausprobiert, sieht auch gut aus. Kann man das Logo so einbinden, das es je nach Displayauflösung / Anzeige auch mit skaliert? Falls ja, wäre super, wenn du das erklären/zeigen könntest!

    Nochmals viele Grüße
    Lukas

    Antworten

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.