WordPress Theme-Anpassung

Das default-theme bietet eine gute Grundlage für die Anpassung an eigene Bedürfnisse. Einfach eine Kopie des Ordners auf der lokalen Festplatte erstellen und umbenennen. Dann den Ordner hochladen. Sobald der Ordner online ist, wechseln Sie in den Admin-Bereich von WordPress. Unter der Rubrick Design > Themes wird jetzt auch dieser Ordner aufgeführt.

Zum Aktivieren dieses Themes müssen Sie auf den Link mit dem Namen Aktivieren klicken. Die Optik ändert sich nicht. WordPress greift aber jetzt auf den neuen Ordner zu. Das default-theme kann online bleiben – als backup für alle Fälle…

Struktur und CSS Anpassung für WordPress

Für diese Arbeit benötigen Sie Kenntnsse in HTML und CSS. Des Weiteren sollten Sie keine Scheu vor PHP-Quellcode haben. Dann kann es losgehen: Firefox bietet mit dem Add-On Firebug eine ideale Arbeitsumgebung. Notepad++ oder auch Adobe Dreamweaver sind für die Korrekturen hilfreich.

Sehen Sie sich zuerst den Quellcode der ersten Seite im Browser an. Hier finden Sie das ausgelieferte Ergebnis des Servers, also kein PHP-Code mehr. Hier gibt es ein paar unglückliche Fundstellen: Inline-CSS im Head-Bereich der Seite, keine CSS-Datei für die Druckdarstellung, Überschrift 1. Ordnung <h1> für alle Seiten identisch (Mit Startseite verlinkter Blog-Titel) und weitere…

Eigenen Link zur Blog-Startseite erstellen | Erster Test

Öffnen Sie die Datei header.php aus dem aktuellen Theme-Ordner in einen Editor. Ändern Sie den Code wie unten dargestellt. Die Optik und Lage des neuen Links kann später noch angepasst werden. Laden Sie die veränderte Datei auf den Server. Aktualisieren Sie die Browser-Darstellung, zum Beispiel mit [F5]. Geht doch!

<div id="header" role="banner">
<div id="headerimg">
<h1><a href="<?php echo get_option(‚home‘); ?>/"><?php bloginfo(’name‘); ?></a></h1>
<div class="description"><?php bloginfo(‚description‘); ?></div>
</div>
<div><a href="<?php echo get_option(‚home‘); ?>/">Blog-Startseite</a></div>
</div>

Überschrift 1.Ordnung in Artikeln und Seiten von WordPress verwenden

Aus SEO-Sicht ist WordPress nicht optimal ausgestattet. Die Überschrift 1.Ordnung ist fest in der header.php verbaut. Damit ist diese Überschrift auf allen Blog-Seiten identisch: Nicht so clever!

Das div id="header" sollte keine <h1> enthalten. Auch kann die Verlinkung entfernt werden. Dieser Eingriff muss insofern geplant werden, als das die optische Seite (CSS) mit bedacht werden muss. Hier könnte bereits ein <span> als Block-Element funktionieren, es gibt aber viele Varianten:

<div id="header" role="banner">
<div id="headerimg">

<span
><?php bloginfo(’name‘); ?></span>

<div class="description"><?php bloginfo(‚description‘); ?></div>
</div>
<div><a href="<?php echo get_option(‚home‘); ?>/">Blog-Startseite</a></div>
</div>

In der CSS-Datei style.css können Sie dann Definitionsinhalte von h1 für das span verwenden:

#header span {
display: block;
font-family: ‚Trebuchet MS‘, ‚Lucida Grande‘, Verdana, Arial, Sans-Serif;
font-weight: bold;
font-size: 4em;
text-align: center;
text-decoration: none;
color: white;
padding-top: 70px;
margin: 0;
}

Überschriften 1.Ordnung in Content-Seiten von WordPress einbauen

Oh. Oh. Es ist doch mühsam… Aber es lohnt sich! Jetzt zum Gebrauch von <h1>: Die Datei page.php wird für alle Seiten (nicht Artikel!) als Vorlage herangezogen. Ändern Sie den Code, indem Sie aus h2 h1 machen! Aber Achtung: Die Optik müssen Sie wieder in CSS anpassen. Zwischenzeitlich wird eine weiße Überschrift auf ggf. weißem Hintergrund gezeigt…

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<h1><?php the_title(); ?></h1>

In der CSS-Datei style.css können Sie dann Definitionsinhalte von h2 für h1 verwenden:

h1 {
font-family: ‚Trebuchet MS‘, ‚Lucida Grande‘, Verdana, Arial, Sans-Serif;
font-weight: bold;
color: #333;
text-decoration: none;
margin: 0;
padding-top: 20px !important;
}

Alle anderen Nennungen von h1 sollten Sie entfernen. Kleine Anmerkung: Die Optik ist noch nicht ausgefeilt. Es geht um Grundlagen.

Überschrift 1.Ordnung in der Blog-Startseite verwenden | Erster Versuch

Für den schnellen Erfolg öffnen Sie die index.php aus dem aktuellen WordPress-Theme-Ordner. Schreiben Sie vorerst fest in den Code, direkt nach dem Anfang der div id="content" zum Beispiel: <h1>Corporate Blog der Akademie der Wildner AG | [beta-Version]</h1>. Später sollte dieser feste Text in eine Sprachdatei eingebaut werden…

Überschrift 1.Ordnung in einfachen Artikeln verwenden

Öffnen Sie die Datei single.php im Theme-Ordner. In Zeile 20 können Sie aus der h2 eine h1 machen (vorne und hinten…). Hochladen. Artikel anklicken: Das geht!

OK, jetzt sind wir auf dem richtigen Weg. Aber der Weg ist noch etwas länger. Mehr zur Anpassung folgt!

 

Veröffentlicht von

Philip Hoevels

Akademieleitung Wildner AG Qualitätsmanagement Online Marketing

3 Gedanken zu „WordPress Theme-Anpassung“

Schreibe einen Kommentar

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