Im Auslieferungszustand wird das jeweilige Jahresthema, also zum Beispiel „twenty seventeen“ installiert. Diese mitgelieferten Themen sind einfach aber solid. Man kann damit rechnen, dass sie etwa 4-5 Jahre aktualisiert werden und eventuelle Fehler oder Einflüsse eine neueren WordPress-Eigenschaft berichtigt werden.
Um eines dieser aktuellen Themen zu verändern, benutzt man zunächst den neuen „Customizer“. Mit dem „Customizer“ sieht man gleich eines jener neuen Elemente, die bei allen bestehenden großen Themen noch nicht unterstützt wird. Daher haben käufliche Themen immer ein eigenes Menü im Dashboard, mit dem Details verändert werden können.
Informationen
- WordPress-Homepage
- WordPress-Homepage (deutsch)
- WordPress-Handbuch
- WordPress-Entwicklerseite
- WordPress-Forum (deutsch)
- WordPress Support (deutsch)
Über diese Seiten gelangt man zu zahlreichen Foren, bei denen die meisten Einsteigerprobleme schon behandelt worden sind.
Übersetzung
Alle diese Seiten sind in Englisch. Man kann die Seiten aber auch in Deutsch lesen, wenn auch ein bisschen holprig und zwar so:
http://itools.com/tool/google-translate-web-page-translator
Hier gibt man die gewünschte Seite ein, als „From“ wählt man Englisch und als „To“ Deutsch und mit „Translate“ wird die Seite übersetzt.
Es bleibt oberhalb der übersetzten Seite ein Rahmen, in dem man die Einstellungen ändern kann, insbesondere kann man immer zum englischen Original zurückschalten.
Auf Grund der Url kann man die interaktive Eingabe überspringen und direkt in der Adresszeile eingeben:
https://translate.google.com/translate?hl=en&sl=en&tl=de&u=https://codex.wordpress.org/
Hinweis: Diese Übersetzung funktioniert sehr gut, wenn man in dem Handbuch blättert. Wenn man aber nach einem Begriff sucht, kommt eine weiße Seite.
Finden von Erklärungen
Wenn im folgenden Text Elemente von PHP oder WordPress verwendet werden, die nicht ausreichend beschrieben worden sind, verwendet man am besten die Suche. Aber Achtung, die Suche ist nur in der englischen WordPress-Homepage implementiert. Verwende also bei Bedarf die Google-Übersetzung der Seite wie oben beschrieben.
Beispielsweise kommt immer wieder die Funktion bloginfo vor. Sucht man nach diesem Begriff, findet man 13.800 Artikel. Mit AND kann man die Suche weiter einschränken und einen zweiten Begirff angeben, der durch die Suche gefunden werden muss. Etwa findet man mit „bloginfo AND header“ nur mehr 5710 Artikel.
Aufbau eines Themas
Themen können sehr komplex sein. Für grundsätzliches Verständnis genügt es, die Struktur zu kennen.
Template
Ein Template ist ein Gerüst für eine Webseite, das zwar Platzhalter für den späteren Inhalt hat aber im Grundzustand keinen Inhalt zeigt. Ein solches Template wird bei einem Aufruf am Server durch die jeweilige Serversprache (PHP) mit Inhalten gefüllt. Bei Microsoft gibt es dafür eine ausgeklügelte Technologie mit einer eigenen Template-Sprache (ASPX).
Ein Thema kann viele Templates haben, zum Beispiel für verschiedenartige Spaltenzahlen, für die Suchseite, für eine Fehlerseite usw.
Die Hauptseite eines WordPress-Webs kann zum Beispiel so aufgebaut sein:
Eine Datei, die auf jedenfalls existieren muss, ist die index.php. In dieser Datei werden alle anderen genannten Dateien, also header.php, content.php, sidebar.php, footer.php inkludiert. Man könnte deren Code auch direkt in index.php einfügen, allerdings könnte man diesen Code dann nicht auch in anderen Zusammenhängen nutzen. Daher arbeitet man immer mit mehreren Dateien. Index.php ist also ein Template für die Hauptseite. An geeigneten Stellen des Code werden bei Aufruf die richtigen Inhalte aus der Datenbank eingebaut und an den Client gesendet.
Beispiel: Header-Teil einer index.php
[code lang=”php”]
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( ‘charset’ ); ?>" />
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( ‘stylesheet_url’ ); ?>" />
<link rel="pingback" href="<?php bloginfo( ‘pingback_url’ ); ?>" />
<title><?php bloginfo( ‘name’ ); ?><?php wp_title( ‘—’ ); ?></title>
<?php if ( is_singular() && get_option( ‘thread_comments’) ) wp_enqueue_script( ‘comment-reply’ ); ?>
<?php wp_head(); ?>
</head>
[/code]
Man sieht, dass eine PHP-Datei aus ganz normalen HTML-Elementen besteht, die aber dann, wenn ein von der aktuellen Installation bereitgestelltes Element einzufügen ist, ein Konstrukt eingefügt wird.
- language_attributes(); ist ein Funktionsaufruf, der einen Text zurückliefert, der an dieser Stelle eingefügt wird. Zum Beispiel könnte das der Text lang=”de-DE” sein, der angibt, dass es sich um eine Seite in deutscher Sprache handelt.
- bloginfo() zeigt durch Angabe eines Parameters sehr viele Kenngrößen des WordPress-Blogs, wie zum Beispiel die Adresse (url), den Zeichensatz (charset), die Sprache (language) oder den Namen (name)
Es gibt auch weitere solcher Template-Seiten, zum Beispiel single.php, die einen einzelnen Beitrag anzeigt oder comments.php, die Kommentare zu einer Seite anzeigt. Man sieht aus diesem Beispiel, dass ein Template in ein anderes Template eingefügt werden kann.
Jedes Thema benötigt auch eine Stil-Datei style.css.
Über das Editor-Menü kann man die wichtigsten Darstellungen eines Textes verändern.
Die zentrale Schleife zum Anzeigen von Seiten und Beiträgen wird „The Loop“ genannt. Hier erfährt man mehr darüber: https://codex.wordpress.org/The_Loop
Um den Inhalt in der Template einzubetten, gibt es eine Reihe von Funktionen, die meist mit „the“ beginnen:
- the_category() – Kategorien, die der Seite/dem Beitrag zugeordnet sind
- the_author() – Autor
- the_content() – Der eigentliche Inhalt
- the_excerpt() – Die ersten 55 Wörter des Inhalte, gefolgt von (…) oder einem Link, der zum vollständigen Artikel verzweigt.
- the_ID() –ID der Seite / des Beitrags
- the_meta() – Benutzerdefinierte Felder
- the_shortlink() – Link zur Seite / zum Beitrag in Kurzschreibweise (Benutzt die ID)
- the_tags() – Stichwörter
- the_title() – Titel
- the_time() – Zeitpunkt der Publikation
- next_post_link() – Link zum nächsten Beitrag
- previous_post_link() – Link zum vorigen Beitrag
Dazu komen eine Reihe von Bedingungen, die man für den Seitenaufbau verwenden kann.
Das einfachste Thema (/simplest/)
Änderungen am Thema
Wenn man aber etwas ganz Besonderes gestalten will, das man über den Editor nicht erreicht, dann kann man das Thema auch verändern.
Diese Themen unterliegen ebenso wie WordPress und seine PlugIns einem ständigen Update-Prozess. Wenn man nun eine Änderung an einem Thema durchführt und das Thema wird upgedatet, dann kann die Arbeit umsonst gewesen sein, wenn von dem Update diese geänderte Datei betroffen ist. Daher sollte man nichts am Original-Thema verändern, sondern mit einem Child-Thema arbeiten.
Child-Themen
Ein solches abgeleitetes Thema besteht eigentlich nur aus einem Link zum Original und enthält anfangs nur eine leere Dateien style.css und functions.php.
Über Child-Themen
- https://codex.wordpress.org/Child_Themes
- https://developer.wordpress.org/themes/advanced-topics/child-themes/
Für Anfänger ist es ratsam, diese Dinge dem PlugIn Child Theme Configurator zu überlassen: https://wordpress.org/plugins/child-theme-configurator/ (mehr als 100.000 Installationen).
Inline-Style
Wenn man ein Feld in einer Tabelle ganz besonders formatieren will, kann man das über das eingebaute Menü tun. Im folgenden Beispiel wird eine Tabelle mit einem hellblauen Hintergrund und einem dunkelblauen Rand formatiert. Es gibt eine Menge interessanter Codes, die man in Webseiten mitverwenden kann. In der Regel braucht man dazu eine JavaScript-Bibliothek, einen StyleSheet und der eigentliche HTML-Kode benötigt bestimmte Attribute, damit die JavaScript-Programme korrekt arbeiten. Kostenpflichtige Themen bieten sehr viele Einstellungen des Aussehens und der Details aller Stile. Wie es aber oft ist, möchte man etwas verändern, was in all diesen Konfigurationsseiten nicht dabei ist. Was tun? Will man eine bestimmte Eingenschaft verändern, dann stellt man gleich die Frage, in welcher der zahlreichen Dateien eines Themas diese Eigenschaft zu finden ist. Der Browser ist uns dabei behilflich, die betreffende Einstellung zu finden.
Schaltet man auf die Textansicht um, sieht man folgenden Code (styling-1.htm):
[code lang=”html”]
<table style="border: 5px solid #154894; background-color: #bddedc;">
<tbody>
<tr>
<td>Das ist ein umrandeter Text</td>
</tr>
</tbody>
</table>
[/code]
Möchte man nun diese Formatierung auch an anderen Stellen der Webseite verwenden, damit sich ein einheitliches Bild ergibt und diese mühsamen Formatierungen nicht immer wieder nachgeschaut werden müssen, definiert man einen eigenen Style, zum Beispiel MeinRahmen und formatiert diesen Rahmen indirekt über den StyleSheet.
Man geht dazu in des „Customizer“ und wählt dort den Punkt „Zusätzliches CSS“ und trägt die Angabe aus dem inline-Format ein (styling-2.htm):
[code lang=”css”]
.MeinRahmen {
border: 5px solid #154894;
background-color: #bddedc;
}
[/code]
Die direkte Formatierung entfernt man und schreibt stattdessen class=“MeinRahmen“:
[code lang=”html”]
<table class="MeinRahmen">
<tbody>
<tr>
<td>Das ist ein umrandeter Text</td>
</tr>
</tbody>
</table>
[/code]
Einen kleinen Nachteil hat diese Vorgangsweise, denn im Editor sieht man nur die inline-Formatierung richtig dargestellt, die zweite sieht man nur zur Laufzeit.
Wenn man aber eine WordPress-Seite editiert, dann arbeitet man nur im HTML-Kode, noch dazu in einem Wysiwyg-Editor, der sich so manche Freiheit nimmt, den Kode auch einmal zu modifizieren. Was gar nicht geht, sind Einfügungen, die in den Header-Teil einer Seite gehören. Die kann man in dem editierbaren Teil auf keinen Fall unterbringen.
Dafür benötigt man das PlugIn Embed Code. Achtung, es gibt auch ein ganz ähnliches PlugIn, das die beiden Wörter vertauscht hat. Beides probiert, ich empfehle dieses. Vielleicht gibt es was Besseres, dann bitte ich um eine Nachricht.
Dieses PlugIn fügt Code im Header-Teil (vor dem /head-Tag) und im Fußteil einer Seite (vor dem /body-Tag) ein. Warum an zwei Stellen? Der Grund ist, dass für machen Code die Seite bereits aufgebaut sein muss, damit alle Objekte auch durch den Code angesprochen werden können. Diese Codeteile müssen in den Footer-Bereich. Alle anderen kommen in der Kopfteil.
Das PlugIn zeigt sich beim Editieren jeder Seite / jedes Beitrags durch zwei Textfelder, in die man den Code hineinkopiert. Schreibt man nichts hinein, passiert nichts.
Da es auch Code gibt, den man auf allen oder auf sehr vielen Seiten benötigt, gibt es zwei solcher Felder auch unter Dashboard -> Einstellungen -> Embed Code. Der dort eingefügte Code wird in jede Seite eingefügt.
Und so schaut diese Passage in den Einstellungen von WordPress aus:
Ergebnis
Änderungen am Thema
WordPress bietet uns die Möglichkeit, alle Dateien eines Themas zu editieren und zwar unter Dashboard -> Design -> Editor. Im folgenden Beispielbild werden in der rechten Spalte alle Dateien des Themas „Betheme“ (wählbar rechts oben über das Pull-Down-Menü) zum Editieren angeboten. Im mittleren Editor wird gerade die Datei 404.php angezeigt. Es geht zunächst gar nich so sehr darum, ob man den Code versteht. In dem konkreten Beispiel sind alle Texte in Englisch und die könnte man übersetzen wollen.
Wer kennt schon alle Funktionen, die in diesem Code vorkommen? WordPress bietet dazu eine praktische Hilfe an. Unter „Dokumentation“ findet man alle in diesem Code verwendeten Funktionsnamen und unter „Nachschlagen“ kommt man direkt zur Originaldokumentation zu dieser Funktion.
Anmerkung Übersetzung: WordPress selbst und viele PlugIns gibt es bereits in Deutsch. Wer sich für mehrsprachige Webs interessiert oder etwas konkret übersetzen möchte, sollte unbedingt diese Seite studieren: http://wplang.org/changing-wordpress-language/ Änderungen am Layout
Es geht hier gar nicht unbedingt um WordPress, es geht ganz allgemein um eine komplexe Webseite.
Beispiel: https://wordpress.org/plugins/post-smtp/
Diese Seite beschreibt das PlugIn „Postman“, das man für den automatischen Versand von E-Mails braucht. Auf dieser Seite findet man auch ein Logo, das man allerdings nicht über das Kontextmenü downloaden kann. Das ist immer dann der Fall, wenn sich die Adresse dieses Logos in einem StyleSheet befindet. Ja, aber in welchem?
Man kann das so herausfinden (Chrome-Browser)
Man öffnet die fragliche Seite und öffnet die Entwickleroptionen mit Strg-Shift-I oder mit Einstellungen -> Weitere Tools -> Entwicklertools.
Wenn man mit der Maus über den Code fährt, wird dabei jener Seitenteil markiert, der von dem betreffenden Code dargestellt wird. Man öffnet mit den grauen Pfeilen jenen Abschnitt, bei dem der gewünschte Seitenteil erfasst wird. In der rechten Spalte findet man nun eine Liste aller Stile, die sich auf das Element beziehen. Die gewünschte Adresse ist leicht zu finden. Man kopiert sie und kann sich das Bild auf den PC laden.
Man sieht hier in der Spalte „Styles“ auch, dass manche Stile durchgestrichen sind. Das ist dann der Fall, wenn ein bestimmtes Tag oder eine Klasse oder eine ID mehrfach definiert ist. Es gilt dann nur jener Stil, der zuletzt angewendet wurde, es sei denn, er hätte mit !important eine Vorrangstellung eingeräumt bekommen.
Mit diesem Beispiel wird auf das wichtigste Tool verwiesen, mit dem man den Ort feststellen kann, an dem ein bestimmtes Aussehen definiert wird: den Browser in der Entwickleransicht.
Hier findet man eine genauere Anleitung, wie man ein konkretes WordPress-Thema mit dem Debugging-Tool anpasst: https://thethemefoundry.com/blog/how-to-customize-a-wordpress-theme/
Hinweise
webseiten zum Ausprobieren.
Franz Fiala
Letzte Artikel von Franz Fiala (Alle anzeigen)
Neueste Kommentare