Tutorial WordPress einrichten – Teil 2: Header und Kopfzeilentext formatieren

1) Oberer Abstand zwischen Webpage und Browserrand

Der Standardabstand ist mir für meinen Geschmack etwas zu hoch. Man kann ihn wie folgt ändern:

  1. Öffnet die Datei „style.css“ aus dem Verzeichnis „\wp-content\themes\twentyeleven\“ in eurem bevorzugten Editor.
  2. Sucht folgende Codestelle und kopiert den Code in das style.css eures Child Themes:
    #page {
    margin: 2em auto;
    max-width: 1000px;
    }
  3. Über die Änderung der „2em“ Angabe bei „margin:“ könnt ihr den Abstand verändern. Es gehen auch gebrochene Werte, z. B. 0.5 (Achtung: Punkt, kein Komma!).

2) Entfernen der grauen Begrenzungslinie des Headers

Im Interesse eines cleaneren Aussehens habe ich die obere, graue Linie des Headers, die wohl einen Schatten darstellt, wie folgt entfernt:

  1. Die Datei „style.css“ aus dem Verzeichnis „\wp-content\themes\twentyeleven\“ öffnen:
  2. Folgende Codestelle suchen und in das style. css des Child Theme kopieren:
    /* =Header
    ———————————————– */#branding {
    border-top: 2px solid #bbb;
    padding-bottom: 10px;
    position: relative;
    z-index: 9999;
    }
  3. Die rot geschriebene Linie wird gelöscht, oder mit */ /* auskommentiert. Fertig.

3) z-index anpassen

Der z-index steht für den Header auf 9999 (siehe Code in Punkt 2). Das hat den Nachteil, dass, wenn man später ein Bild in einer Lightbox öffnen möchte, das Bild vom Header überlagert wird. Ich habe den z-Index auf 2 gesetzt, dann passiert das nicht. Einen Nachteil durch diese Änderung habe ich bisher nicht feststellen können.

4) Hintergrundfarbe der Zeile mit dem Kopfzeilentext ändern

Die Hintergrundfarbe kann wie folgt angepaßt werden:
Wieder die Codestelle aus Punkt 2 in der „style.css“ suchen und folgende Zeile addieren:
background-color:#222;
Damit kann dann die gewünschte Hintergrundfarbe angegeben werden.

Nach den Änderungen aus den Punkten 2-4 sollte der Codeabschnitt jetzt z. B. wie folgt aussehen:

/* =Header
———————————————– */
#branding {
/*border-top: 2px solid #bbb;*/
padding-bottom: 10px;
position: relative;
background-color:#222;
z-index: 2;
}

5) Schriftfarbe und -größe in der Zeile mit dem Kopfzeilentext ändern

Unterhalb des Codes, den wir in den Punkten 2-4 bearbeitet haben, finden wir die Formatierungsangaben für die Schriften für den Seitentitel und die Description.
Für den Seitentitel unterhalb von: #site-title a {
Für Description unterhalb von: #site-description {
Kopiert die Codeschnipsel in euer Child und paßt die Angaben einfach entsprechend eurer Vorstellungen an.

6) Höhe der Zeile für den Kopfzeilentext ändern

Die Zeile für den Kopfzeilentext ist mir im Original viel zu hoch. Die Codestellen, um das zu ändern, befinden sich im gleichen Bereich wie der unter Punkt 5 bearbeitete Code:

#site-title {
margin-right: 270px;
padding: 3.65625em 0 0;
}


#site-description {
color: #CCC;
font-size: 14px;
margin: 0 270px 3.65625em 0;
}

Durch die Angabe des padding unter „#site-title“ (im Beispiel „3.65625“) wird der Abstand der Schrift zum oberen Spaltenrand definiert.
Durch die Angabe des margin unter „#site-description“ (im Beispiel „3.65625“) wird der Abstand der Schrift zum unteren Spaltenrand definiert.
Ihr könnt die Werte bis auf 0 verkleinern und euch ansehen was passiert.

7) Das Search Feld im Header anders positionieren oder löschen

Durch die Änderung unter Punkt 6 verrutscht das Search Feld im Header. Es kann jetzt entweder wieder richtig positioniert oder gelöscht werden. Mir reicht das Search Feld in der Sidebar, ich habe es im Header gelöscht.
Zum Positionieren öffnet die Datei „style.css“ aus dem Verzeichnis „\wp-content\themes\twentyeleven\“. Folgenden Codeabschnitt suchen:

/* Search Form */
#branding #searchform {
position: absolute;
top: 3.8em;
right: 7.6%;
text-align: right;
}

Durch die Änderung des Wertes bei „top:“ kann die Seachbar in der vertikalen Position verschoben werden. Kleinere Werte verschieben sie nach oben.

Solltete ihr die Searchbar im Header behalten haben, dann müßte jetzt die „style.css“ im Childtheme ungefähr wie folgt aussehen:

@charset „UTF-8“;
/*
Theme Name: twentyelevenchild
Template: twentyeleven
Theme URI: http://DeineWebseite.xx/
Description: Ein Child für das twentyeleven-Theme
Author: Dein Name
Author URI:
Version: 1.0
*/
@import url(‚../twentyeleven/style.css‘);


/* =Structure
———————————————– */
#page {
margin: 1em auto;
max-width: 1000px;
}


/* =Header
———————————————– */
#branding {
/*border-top: 2px solid #bbb;*/
padding-bottom: 10px;
position: relative;
background-color:#222;
z-index: 2;
}
#site-title {
margin-right: 270px;
padding: 0em 0 0;
}
#site-title a {
color: #fff;
font-size: 30px;
font-weight: bold;
line-height: 36px;
text-decoration: none;
}
#site-description {
color: #CCC;
font-size: 14px;
margin: 0 270px 0em 0;
}


/* Search Form */
#branding #searchform {
position: absolute;
top: 1em;
right: 7.6%;
text-align: right;
}

Für die folgenden Änderungen an den .php Dateien kopiert man die jeweils genannte Datei in den Ordner des Child-Themes und editiert sie dort.

Zum löschen des Search Feldes aus dem Header benötigt ihr die Datei „header.php“ aus dem Verzeichnis „\wp-content\themes\twentyeleven\“. Kopiert sie in das Child Theme, öffnet sie und sucht folgenden Codeabschnitt:

<?php
// Has the text been hidden?
if ( ‚blank‘ == get_header_textcolor() ) :
?>
<div>
<?php get_search_form(); ?>
</div>
<?php
else :
?>
<?php get_search_form(); ?>
<?php endif; ?>

Ihr könnt jetzt entweder den ganzen Abschnitt löschen, oder einfach nur das Laden des Search Feldes unterbinden. Dazu einfach in den beiden rot geschriebenen Zeilen einen Doppelslash (//) vor das „get“ setzen. Nicht an den Anfang der Zeilen!

Teil 1: Child Theme erstellen
Teil 2: Header und Kopfzeilentext formatieren
Teil 3: Fußzeile entfernen
Teil 4: WordPress-Link aus Meta Widget löschen
Teil 5: Abstand vom Text zum Seitenrand verkleinern


13 Gedanken zu “Tutorial WordPress einrichten – Teil 2: Header und Kopfzeilentext formatieren

  1. Traumhaft. Nach stundenlangem Suchen bin ich auf diese Seite gestoßen und habe genau das gefunden, was ich gesucht habe. Einfach, präzise und nachvollziehbar erklärt, leicht nachvollziehbar und umzusetzen. Durch das Kopieren der relevanten Passagen aus dem Stylesheet in einem Custom-CSS-Editor konnten alle gewünschten Veränderungen in ein paar Minuten durchgeführt werden. Sie sollten sich einmal die anderen Beiträge zu diesem Thema in deutscher und in englischer Sprache ansehen. 🙂 Vielen Dank.

  2. Hallo, ich weiß nicht, ob das hier rein gehört, aber ich habe ein für mich sehr großes Problem mit meinem Blogheader.. Auf einmal ist er doppelt. Ich weiß nicht, was ich falsch gemacht haben könnte.. Daher habe ich die Headerfunktion erstmal deaktiviert mit einem CSS – Code, den ich im Internet gefunden habe. Aber kein Header ist auch keine Option für mich. Bitte hilf mir! /:

    • Hallo Ina, ich bin leider auch kein Hellseher… 😉
      Ich empfehle dir mal die Google Suche unter „wordpress header doppelt“. Du wirst einige Tips zum ausprobieren finden.

  3. Hallo Christoph,

    erst einmal tausend Dank für die super Erklärung. Ich bin Grafikerin, aber was Web angeht völlig unwissend. Ich bastel gerade einen Blog in WordPress, blogge aber schon unter XXXXXX (Entfernt, da kommerzielle Seite) als Autorin. Ich weiß also, wie aufwändig es ist solche super Anleitungen zu schreiben. Nun meine Frage: Ich wünsche mir für meinen Blog (Grundaufbau Twenty Twelve) eine Slideshow. Ist das überhaupt machbar? Und wenn ja, würde ich das auch hinbekommen? Vielleicht gibt es ja irgendwo so etwas als Programmierungsschnipsel zu kaufen, so dass ich nur über Copy/Paste einfügen kann?

    Liebe Grüße
    Andrea

  4. Danke für die hilfreiche Seite. Gibt es eine Möglichkeit das Kopfzeilenbild in „twenty eleven“ auf einzelnen Seiten zu entfernen und auf anderen zu belassen? Habe vorher Weaver II benutzt, dort ging das problemlos.
    Danke für einen Tipp und Grüße
    Jo

    • Hallo Jo, sorry für die späte Antwort. Bin im Moment ziemlich beschäftigt. Zu deiner Frage: Ich weiß im Moment keine Möglichkeit, die nicht einen Eingriff in den php-Code erfordern würde. Und um das auszuprobieren fehlt mir momentan leider die Zeit…

  5. Super sachdienliche Hinweise:
    Haben selbst einem ‚Computer-Unkundigen‘ wie mir sehr geholfen, denn alles war sehr leicht umzusetzen und hat problemlos funktioniert: Vielen Dank & viele Grüße!
    Ed.

  6. Hallo,

    vielen Dank für diesen tollen und verständlichen Bericht zur Anpassung von Twenty Eleven.
    Kannst du auch einen Tipp geben, wie man im Child Theme die Grafikbreite des Headerbildes verändern kann, z.B. von 1000px auf 900px?

    Danke schonmal!

    • Hallo Marta,

      die folgenden Antworten sind jetzt ungetestet (Habe momentan nicht so viel Zeit…):
      1) Wenn es nur um die Breite des Bildes geht, dann such einmal in der „functions.php“ den folgenden Abschnitt:
      // Add support for custom headers.
      $custom_header_support = array(
      // The default header text color.
      ‚default-text-color‘ => ‚000‘,
      // The height and width of our custom header.
      ‚width‘ => apply_filters( ‚twentyeleven_header_image_width‘, 1000 ),
      ‚height‘ => apply_filters( ‚twentyeleven_header_image_height‘, 288 ),
      // Support flexible heights.

      Ändere dort die 1000 einmal in deine Wunschbreite ab.

      2) Geht es um die Breite der ganzen Seite, suche in der style.css nach den folgenden Einträgen:
      #page {
      margin: 1em auto;
      max-width: 1000px;
      Sollte es nicht reichen, diese Breite zu ändern, suche nach allen Breitenangaben mit „max-width: 1000px;“ und ändere sie ab, bzw. kopiere sie in das Child Theme und ändere sie dort.
      Aber erst in der Testumgebung testen! Ich habe es, wie gesagt, nicht ausprobiert!

      Viele Grüße
      Christoph

      • [Als Spam markiert von Antispam Bee | Spamgrund: Server IP]
        Hallo Christoph,
        coole Tips – Danke dafür!
        Zusatzfrage: dein Theme ist ein child von Twenty Eleven – wie hast du es angestellt, dass dein headerbild sich proportional mitskaliert? im Originalzustand macht das Theme das nämlich nicht …!

        • Hallo Wolfgang,
          leider weiß ich das auf die Schnelle auch nicht mehr… Habe momentan auch keine Zeit, mich im Code zu vergraben. Tut mir leid.

          • Hallo Christoph,

            ich bin gerade dabei, eine Homepage nur aufzusetzen. Auch ich würde das Headerbild gerne schrumpfen lassen. Momentan wird er ja von rechts abgeschnitten, ist aber keine gute Lösung, da spätestens in der Smartphone-Ansicht das Firmenlogo nur noch halb zu sehen ist.
            Falls du zwischendurch Zeit findest, nach dem entsprechenden Befehl und wo er eingegeben werden muss zu suchen, wäre das echt super 🙂
            Danke schonmal!
            Heiko

Schreibe einen Kommentar

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

Leider ist ein Spamschutz notwendig geworden, daher bitte Rechenaufgabe lösen: * Time limit is exhausted. Please reload the CAPTCHA.