Header Area

Style & edit HEADER AREA

Unter diesem Punkt wird der Headerbereich des Atahualpa-Themes gestaltet. Dazu gehören nicht nur die großformatigen Bilder, sondern auch das Logo, die Seiten- und Kategoriennavigation, der Blogtitel, das Suchfeld usw.


Standardheader von Atahualpa

Headerbereich des Atahualpa-Themes

Da ich nur eine Headergrafik (kein Logo) mit eingefügtem Schriftzug verwende, sehen meine Einstellungen folgendermaßen aus:

Configure Header Area
%logo %bar2 %pages %cats %image

Den Logobereich lasse ich in der Kopfgestaltung drin, obwohl ich kein Logobild verwende, denn im Logobereich befindet sich das Suchfeld, und das habe ich über meiner Headergrafik stehen.

Logo Area: Styling
background: #446193;

Show Logo Image: Feld leer lassen

Show Blogtitle: No

Show Search Box: Yes

Text in Header Search Box: Suchbegriff eingeben und Eingabetaste drücken …

Horizontal Bar 1: Styling
height: 5px;
background: #5c77a8;
Horizontal Bar 2: Styling
height: 5px;
background: #466294;

Mit diesen Bars kannst du Linien sowie Rahmen unterschiedlicher Breite und Farbe in den Headerbereich einfügen und dabei auch mehrmals einbinden.

Header Image

Hier stellst du verschiedene Optionen für deine Headergrafik oder -grafiken ein. Wenn du mehrere Headergrafiken einsetzt, kannst du diese mithilfe von JavaScript (erstes Feld, Wert höher als 0 setzen) rotieren oder mit einem Abblend-Effekt (FadeIn/FadeOut) anzeigen lassen (Wert höher 0 setzen).

Wichtig ist auch noch, die Höhe der Headergrafiken unter Header Image: Height zu setzen. Wer an den Rändern der Header diese hellere Schicht (Opacity) nicht möchte, setzt bei diesen Feldern den Wert auf 0.

Atahualpa Einstellunen Header

RSS Settings

Falls du das RSS-Symbol und das Symbol für den Kommentarfeed ganz oben rechts im Headerbereich haben willst, brauchst du hier nichts Wesentliches zu ändern.

Willst du eines der Symbole oder beide entfernen, stellst du bei Show Post Feed Icon und/oder bei Show Comment Feed Icon den Wert auf No.

Das gleiche betrifft das Feedburner E-Mail Icon.

MENU 1 (Page Menu)

Unter diesem Punkt kannst du das MENU 1 gestalten. Dort werden normalerweise statische Seiten eingebaut, aber man kann natürlich auch Kategorienseiten vom Blog einfügen (siehe Aufbau unter Design – Menüs).

Atahualpa Einstellungen Menu

Da du im WordPress-Dashboard unter Design – Menüs deine Menüleisten individuell gestalten kannst, ist dieser Punkt bei Atahualpa hauptsächlich für das Layout des Menüs wichtig.

Seiten ausschließen (Exclude Pages …) für die Navigation brauchst du hierüber nicht mehr.

Lesen  Einen Blog erstellen mit WordPress – Teil 5: Weitere wichtige Einstellungen im Backend

Ich habe folgende Einstellungen vorgenommen (siehe Bild):

Atahualpa Einstellungen Menü

Genauso habe ich auch das MENU 2 (Category Menu) gestaltet.

Center Column

Style & edit CENTER COLUMN

Hier geht es um den Inhaltsbereich, also den Bereich, wo die Blogbeiträge angezeigt werden. Du kannst hier den Standardwert so lassen, aber auch den Inhaltsbereich in Hintergrundfarbe deiner Gestaltungsidee anpassen, sodass noch ein background-Wert eingefügt werden muss.

Ich habe in dem Feld Center Column Style folgende CSS:

padding: 5px 20px 10px 20px;
background: #ffffff;
border-right: dashed 1px #ddd;

Previous/Next Navigation

Du kannst mit dem Atahualpa-Theme oberhalb und/oder unterhalb eines Blogbeitrags eine Navigation für die Ansteuerung des vorherigen oder nächsten Beitrags einfügen (siehe Bild unten). Dies geht über den Punkt Previous/Next Navigation.

Atahualpa Next Navigation

Ich habe diese nützliche Navigation unter dem Beitrag unterhalb des Kommentarfelds eingefügt.

Meine Einstellungen sind die folgenden:

Atahualpa Nextnavigation

Atahualpa Nextnavigation

Atahualpa Nextnavigation

Die Platzierung der Navigation lässt sich über die Location-Felder bestimmen. Bottom ist unten, Top oben.

Sidebar und Widgets

Style & configure SIDEBARS

Du kannst mit dem Theme bis zu vier Sidebars einfügen, eine linke, eine linke innere, eine rechte und eine rechte innere. Vier Sidebars auf einmal machen allerdings nicht so viel Sinn.

Aber mit den vier Optionen kannst du verschiedene Sidebars erstellen und sie verschiedenen Seiten oder Blogkategorien über deren ID zuweisen.

Du kannst über das Setzen von Häkchen festlegen, auf welchen Seiten die jeweilige Sidebar angezeigt wird und über die jeweiligen Felder Don’t display … Bereiche ausschließen, indem du in die Felder die jeweiligen IDs der Seiten oder Kategorien einträgst.

Weiter auf der Seite hast du die Möglichkeit, die Breite der Sidebars festzulegen (in Pixel) und ganz unten kannst du die Sidebars mit CSS-Einstellungen gestalten (Rahmen bestimmen, Hintergrundfarbe festlegen, Abstand einstellen, Schriftart festlegen usw.)

Ich habe in meinem Theme nur eine rechte Sidebar festgelegt und die Einstellungen für diese sehen so aus:

Ich habe der Sidebar eine Breite von 325 Pixel gegeben und  sie bis auf zwei Seiten für alle Blogbereiche eingeblendet.

Gestalterisch habe ich nicht viel vorgenommen, außer dass ich den Bereich mit einer gestrichelten Linie abgrenze, einen weißen Hintergrund vergebe und bestimmte Abstände zu Rand und Inhalt über Padding festlege:

border-left: dashed 1px #CCCCCC;
background: #ffffff;
padding: 10px 20px 10px 10px;
Atahualpa SidebarAtahualpa Sidebar

Style WIDGETS

Über diesen Bereich werden die Widgets-Container, die in die Sidebar gezogen werden, gestaltet. In meinem Blog hat jedes Widget eine blaue Überschrift in Kapitälchen mit einen dünnen Unterstrich.

Lesen  Google Adsense - Teil 6: WordPress-Plugins für Adsense-Anzeigen - Easy Adsense Lite

Widget Container:

margin: 0 0 15px 0;

Widget Title:

text-align: left;
color: #7990B0;
font-family: arial, serif;
font-size: 16px;
padding-bottom: 5px;
padding-left: 4px;
background:#ffffff;
border-bottom: solid 1px #eeeeee;
text-transform: uppercase;

Widget Content Box:

padding: 10px 5px 5px 0;

Widget Item List:

Atahualpa Widgetlist

Add Dynamic Widget Areas

Dieser Bereich des Definierens neuer Widgetbereiche im Theme (außerhalb der Sidebars) ist etwas komplex und sollte von Einsteigern vernachlässigt werden.

Post und Pages

Edit POST/PAGE INFO ITEMS

Unter diesem Punkt kannst du deinen Blogbeiträgen in bestimmten Bereichen (siehe Grafik: blau eingezeichnet) Grafiken und Informationen mitgeben.

Atahualpa Postitem-Bereiche

So lassen sich Icons einbinden, wie eine Sprechblase für Kommentare, ein Ordnersymbol für Kategorien, ein Kalender für das Datum usw.

Die Icons und die Variablen für den entsprechenden Text findest du auch unter Post & Pages aufgeführt.

Ich habe auf Geld-online-Blog in der Byline ein Datum-Icon mit Datumsangabe (Veröffentlichungsdatum des Beitrags) und eine Sprechblase für Kommentare eingefügt.

Im Footer finden sich ein Icon für Kommentare und eins für Tags (siehe Bild unten).

Atahualpa Beispiel Postitem

Für statische Seiten habe ich keine Byline und keinen Footer erstellt. Das geht aber auch, wer dies möchte.

Style POSTS & PAGES

Hierüber lassen sich die einzelnen Seiten- und Blogbereiche mittels CSS gestalten.

Allzu viele gestalterische Mittel setze ich auf meinem Blog nicht ein, nur die Überschriftfarbe und -schriftart.

Hier die Einstellungen:

POST CONTAINER

margin: 0 0 30px 0;

HEADLINE BOX: Text

padding: 10px  0 0 0;

HEADLINE BOX: Links

color:#AE2B3D;

HEADLINE BOX: Links: Hover

color: #B12A3A;

FOOTER BOX: Links

color: #333;

FOOTER BOX: Links: Hover

color: #333;

Configure EXCERPTS

Unter diesem Punkt konfigurierst du die Darstellung des Blogartikels auf verschiedenen Übersichtsseiten.

Normalerweise wird ein Blogartikel auf einer Übersichtsseite wie der Startseite nur angerissen angezeigt, also ein kurzer Textabschnitt und dazu meist ein Weiterlesen-Link.

Diesen Anriss oder Exzerpt kannst du individuell anpassen. Willst du immer eine identische „Textmenge“ als Anriss, dann solltest du auf der Seite überall bei Posts or Excerpts on … den Wert Only Excerpts einstellen.

Die Länge des Exzerpts ist bei Atahualpa auf 55 Zeichen eingestellt. Diesen Wert kannst du natürlich verändern.

Willst du die Exzerpt-Länge von Beitrag zu Beitrag individuell gestalten, solltest du beim Verfassen des Artikels den More- (oder Weiterlesen-)Link mithilfe des Text-Editors einfügen.

Lesen  Woocommerce German Market: Installation und Einstellungen

Dann solltest du unter Configure EXCERPTS bei Posts or Excerpts on … den Wert auf Full Posts setzen.

Atahualpa Excerpts

Post THUMBNAILS

Jedem Blogartikel kannst du im Anriss ein Vorschaubild hinzufügen. Die Einstellungen dazu findest du unter Post THUMBNAILS.

Unter Width und Height kannst du die Standardwerte von 150 Pixel entweder hoch- oder runter setzen. Allerdings finde ich, sollte man nicht höher als bis 250 Pixel gehen, sonst wird das Bild zu groß.

Unter Crop Post Thumbnails kannst du entweder Yes oder No einstellen. Bei Yes wird das Vorschaubild immer auf die angegebene Größe unter Width und Height zurechtgeschnitten.

Setzt du beispielsweise ein Vorschaubild mit der Originalgröße von 600×400 Pixel ein, wird das Bild in ein Größenformat von 150×150 Pixel verkleinert und dadurch werden auch Bildbereiche weggeschnitten (außer das Bild ist in Originalgröße auch quadratisch, also beispielsweise 400×400 Pixel).

Setzt du das Crop-Feld auf den Wert No, wird das Bild in ein Größenformat von 150×100 Pixel (bei der oben genannten Originalgröße von 600×400 Pixel) verkleinert.

Mit Crop = Yes bekommst du Vorschaubilder mit immer der gleichen Größe, mit No nicht.

Vorschaubilder fügst du bei der Blogartikelerstellung auf der rechten Seite unter Beitragsbild mit einem Klick auf Beitragsbild festlegen ein.

Unter Post Thumbnail CSS kannst du schließlich auch die Gestaltung des Vorschaubildes anpassen. Standardmäßig ist es links ausgerichtet (float: left). Du kannst es auch rechts ausrichten, wenn du „left“ zu „right“ änderst.

Hinweis: Vorschaubilder werden auf Übersichtsseiten nur angezeigt, wenn du unter Configure EXCERPTS den Wert auf Only Excerpts stehen haben.

„Read More“ Tag

Hast du dich für die individuelle Exzerpt-Variante mit dem More-Button entschieden, kannst du diesen Link unter diesem Punkt anpassen.

Standardmäßig fügt Atahualpa Continue reading %post-title% als Weiterlesen-Link ein (also Continue reading plus Blogtitel).

Ich verwende die deutsche Variante Zum vollständigen Artikel „%post-title%“.