Siehe diesen online Wordpresskurs von Jan Hellwig "Wordpress Themes entwickeln und gestalten" Der Author kann gut erklären, das Thema ist sehr gut durchstrukturiert. Alle Infos sind auf den Punkt gebracht und somit lernt man sehr schnell.
WordPress ist einfach zu installieren. Man kann es auch erstmal offline installieren Dazu braucht man einen Apache Server und eine MySql Datenbank, beispielsweise XAMPP oder MAMP oder WAMP.
Nach der Installation von XAMPP startet man die Benutzeroberfläche und dort Apache und mySql. Gehe nach Sicherheitseinstellungen und vergebe Passwörter. Rufe php my Admin auf, indem du im Browser http://localhost/phpmyadmin eingibst. Der Benutzername ist root. das Passwort hast du vergeben. Klicke oben links auf Datenbank , dann auf neue Datenbank anlegen . Nenne sie beispielsweise wp_datenbank wähle die Option utf-8_general_ci
Bei der Standardinstallation entsteht ein Ordner C: xampp / htdocs in diesem Unterordner kannst du dir wordpress entpacken, vielleicht in dem standardmäßig erzeugten Unterordern wordpress. Nun kannst du im Browser unter http://localhost/wordpress. WordPress aufrufen. Klicke auf “erstelle die Konfigurationsdatei” folgen den Anweisungen, Datenbankname db_wordpress, Benutzername und Passwort, den du zuvor vergeben hast. Datenbankhost ist localhost
Datenbankname: Der Name der Datenbank, die du für wordpress angelegt hast. Beispielsweise db_datenbank
Benutzername: root
Passwort: MySQL Passwort welches du beim Einrichten von Xamp vergeben hast.
Datenbankhost: localhost
Tabellen-Präfix: Ein Kürzel, welches vor jeder Wordpress Tabelle vorangestellt wird. Das ist eigentlich nur wichtig, wenn mehre Wordpress Installationen eine Datenbank benutzen. z.B.: wp_
Datenbankname: Der Name der Datenbank, wird von deinem Provider geliefert beispielsweise: DB30493
Benutzername: wird von deinem Provider geliefert, beispielsweise: U30493
Passwort: welches du bei deinem Provider für die Datenbank vergibst oder erfährst.
Datenbankhost: Adresse deiner Datenbank, bei Strato beispielsweise rdbms.strato.de
Tabellen-Präfix: Ein Kürzel, welches vor jeder Wordpress Tabelle vorangestellt wird. Das ist eigentlich nur wichtig, wenn mehrere Wordpress Installationen eine Datenbank benutzen. z.B.: wp_
Dann gibt man noch einen Blogtitel und Benutzernamen sowie Passwort für den WordPressblog ein und fertig ist das.
Wenn WordPress nicht im Hauptverzeichnis der Domain liegt, aber die Domain als Startseite angezeigt werden soll. Oder wenn irgendeine andere Konstellation von Ornder und Seitenanzeige gewünscht ist, macht man folgendes. Gehe im Backend auf Einstellungen, Allgemein. Dort findet man “WordPress Adresse”, das ist der Pfad zum WordPress Verzeichnis. “Seiten Adresse” Das ist der Pfad zur Hauptdomain.
Im Wordpress Hauptverzeichnis liegt die Datei wp-config.php und der Ordner wp-content mit einigen Unterordnern. Alle anderen Dateien und Ordner werden in der Regel nicht verändert. In der wp-config werden einige Grundeinstellungen abgespeichert. Im Ordner wp-content gibt es einige Unterordner, in denen Plugins, Themes und andere Dateien abgelegt werden.
Themes bieten viele zusätzliche Funktionen. Wenn man ein anderes Theme installiert, stehen eventuell einige dieser Theme-spezifischen Funktionen nicht mehr zur Verfügung. Die Funktionen die Plugins zur Verfügung stellen sind Theme-übergreifend.
Das Backend in Wordpress erreicht man über den Ordner "wp-admin".
http://www.meineDomain.de/meinWordpressOrdner/wp-admin
Gehe im Backend auf: Benutzer / Dein Profil
Hier kannst du ein neues Passwort vergeben.
Werkzeugleiste, ermöglicht das schnelle Navigieren ins Backend.
Man kann ein Farbschema für das Backend auswählen und einiges mehr.
Es gibt in WordPress 2 Arten von Inhalten. “Seiten” für statische Inhalte, (Über uns, Service, Impressum etc.) und “Beiträge”. Unabhängig davon erstellt man verschiedene Kategorien. Das ist auch hierachisch möglich. Wenn man einen Beitrag erstellt, weist man den Beitrag eine oder mehreren Kategorien zu.
Aus diesen Kategorien wird in der Seitenleiste automatisch ein Menü erstellt, sofern das Thema, das so vorsieht. Beim Aufruf der Kategorie, werden alle dazugehörigen Beiträge angezeigt.
Sofern das Thema es zulässt, kann man auch eigene Menüs erstellen. Man findet es unter “Design, Menü”. Hier gibt man einen Namen für das neue Menü ein und klickt auf “Erstellen”.
Auf der linken Seite hat man nun die Möglichkeit, verschiedenes ins Menü einzubinden: Seiten, Links, Kategorien.
Um eine “WordPress Seite” als Menüpunkt hinzuzufügen, gehe auf der linken Seite auf den Eintrag “Seiten”. Dort erscheinen alle erstellten Seiten mit einer Checkbox. Aktiviere die Checkbox der gewünschten Seite und klicke dann links unten auf den Button. “Zum Menü hinzufügen” Die Seite erscheint nun rechts im Menü.
Klicke dort auf den Pfeil und du kannst dem Menüpunkt einen anderen Namen als den Seitennamen vergeben oder HTML- Attribute zuweisen.
Die Position der Menüpunkte lässt sich per drag und drop verschieben.
Man kann eine Kategorie hinzufügen, indem man sie auf gleiche Weise wie eine einzelne Seite dem Menü hinzufügt. Allderings werden die einzelnen Beitrage nicht als Unterpunkte des Menüpunktes angezeigt.
Folgendermaßen fügt man Unterpunkte hinzu. Füge gewünschten Menüpunkt hinzu, indem du ihn im Drop Down Menü aktivierst. Unter Positionen verwalten siehst du die Reihenfolge der Menüpunkte. Durch drag and drop kannst du die Reihenfolge ändern. Um einen Unterpunkt zu erzeugen ziehst du ihn direkt auf das Elternelement
Themes sollte bestimmte Features haben. Siehe Wordpress Codex
Ein Theme zu installieren ist denkbar einfach, denn hierzu gibt es im Backend unter Design / Themes die Möglichkeiten zum suchen, herunterladen und installieren. Sollte die Meldung kommen, dass das Theme zu groß ist, muss man in der php.ini eine größere Datenmenge für den upload ermöglichen. Sofern man keinen eigenen Server hat, sollte man sich an den Provider wenden. Bei einer offline Installation suche die Datei php.ini. In der Datei suche die Stelle upload_max_filesize und trage dort einem höheren Wert ein z.B.:
upload_max_filesize=10M
Wenn man ein Theme erst per FTP hochladen will und dann installieren will, kann man das folgendemaßen machen. Zum Beispiel das Theme "enfold" Hier entpackt man den kompletten Ordner. Darin befindet sich eine weitere ZIP namens "enfold". Entpacke diese Datei und lade Sie per ftp in das Verzeichnis, wordpress/ wp-content/themes. Nun befindet sich im themes Ordner ein Ordner namens enfold.
Der Rest wird im Backend erledigt. Unter Design, Themes erscheint das enfold Thema. Hier kann man auf Vorschau klicken und es aktivieren.
Das "Enfold" Thema hat noch die Besonderheit, dass es als Extra Eintrag im Menü erscheint. Wenn man auf dieser Enfold Einstellungseite alle Optionen einblendet, findet man weiter unten den Button "Import Dummy Data" um Beispielseiten zu laden.
Neben den anderen Möglichkeiten Dateien hochzuladen, kann man über Medien, Dateien hinzufügen, ein Bild oder eine andere Mediendatei hochladen. Man kann die Datei auf die Fläche ziehen oder über den Dateimanager aufrufen. Die Dateien werden dann in der Mediathek aufgeführt.
Klicke dort ein Bild an, wähle Bearbeiten Hier kann man Beschriftung, Alternativen Text und Beschreibung angeben.
Es hängt vom Theme ab, wo und auf welche Weise diese Infos erscheinen.Beschriftung erscheint als Beschriftung unter dem Bild. Es entspricht dem caption Element. Alternativ, erscheint bei der großen Anzeige über dem Bild. Es ist das alt Attribut.
Zwischen dieser Eingabemöglichkeit und der Anzeige des Bildes befindet sich der Button "Bild bearbeiten". Ein Klick bietet die Möglichkeit das Bild zurechtzuschneiden und die Größe zu ändern. Hierzu steht das Bescheiden Werkzeug bereit. Auch drehen, spiegeln, rückgängig, wiederholfen findet man hier.
Bild skalieren ändert die Größe des Bildes. Es reicht einen Wert einzugeben, der andere wird automatisch angepasst, um die Proportionen zu erhalten.
Bildausschnitt ermöglicht Feineinstellung.
Miniaturbildeinstellung bietet die Möglichkeit zu definieren, was genau geändert werden soll.
Fügt man das Bild beispielsweise in einen Beitrag ein, kann man es anklicken und über das Bleistiftsymbol, Einstellen. Über das X-Symbol kann man es wieder entfernen.
Füge einen Beitrag hinzu. Wähle unter Formatvorlage Galerie aus. Gehe auf Medien hinzufügen. Im sich öffnenenden Fenster gehe im linken Bereich auf “Neue Galerie”. Aktiviere alle Bilder, die in der Galerie erscheinen sollen.
Man kann aber auch eine Galerie einfach irgendwo in einen Beitrag einfügen.
Es gibt spezielle Plugins mit Effekten für eine Galerie. Zum Beispiel “Fotorama”. Wenn man dieses Plugin installiert hat, wird eine normal erzeugte Galerie automatisch in eine “Fotorama” Galerie umgewandelt.
Wähle das Plugin aus und gehe auf Bearbeiten. Dort findest du eine readme Datei mit Infos zu den Optionen. Wähle deine erzeugte Galerie aus und gehe auf Bearbeiten. Wähle die Quelltextansicht und gebe dort die Optionen ein. z.B.: gallery ‘eckigeKlammer’ids=”86,85,84″ allowfullscreen=”true” loop=”true” nav=”thumbs” ‘eckigeKlammer’
Der Permalink erscheint beim Erstellen eines neuen Beitrags direkt unter der Überschrift oder dem Titel. Es ist der Pfad und Name der HTML-Seite. Standardmäßig werden die Seiten einfach nur durchnummeriert. Das ist nicht sehr schön, auch unter SEO Aspekten von Nachteil.
Man kann für jede Seite einen eigenen Namen vergeben. Man kann aber auch generell festlegen auf welche Art und Weise diese Permalinks generiert werden sollen.
Achtung! Das solltest du zu Beginn einstellen, bevor du Beiträge schreibst. Wenn du diese Einstellung später vornimmst, nachdem schon Beiträge geschrieben wurden, funktionieren sämtliche Querverweise innerhalb des Blogs nicht mehr.
Gehe dazu auf Einstellungen / Permalinks und setze beispielsweise folgende “Benutzerdefinierte Permalinkstruktur”. Hiermit wird eine eindeutige Beitrags ID gefolgt von dem Beitragstitel erzeugt.
%post-id%/%postname%
Folgende Platzhalter sind möglich:
| Platzhalter | Bedeutung |
|---|---|
| %year% | Jahr |
| %monthnum% | Erscheinungsmonat numerisch |
| %day% | Erscheinungstag |
| %hour% | Erscheinungsstunde |
| %minute% | Erscheinungsminute |
| %second% | Erscheinungssekunde |
| %postname% | Beitragstitel in Kurzform |
| %post_id% | eindeutige Beitrags ID |
| %category% | Kategorie in Kurzform |
| %tag% | Tag in Kurzform |
| %author% | Author |
Ein Theme kann aus unterschiedlich vielen Dateien aufgebaut sein. Schaue dir diese Seite in den verschiedenen Themes an. Die Dateien nennt man Templates oder Template Dateien.
Zwingend erforderlich sind nur 2 Dateien: index.php. Sie bestimmt den Aufbau der Seite und welche Informationen aus der Datenbank geladen werden sollen und style.css. für Aussehen und Layout.
Hat man mehrere Dateien können die einzelnen Seiten abwechslungsreicher angelegt werden. Die einzelnen Templates steuern die Bereiche der Seiten. Es gibt primäre, sekundäre und tertiäre Templates.
Sie steuern die Ansicht einer bestimmten Art von Unterseite. Sie müssen einer festglegten Namenskonvention folgen und liegen im Hauptordner.
Sie steuern einen Teilbereich einer Unterseite. Auch diese folgen der Namenskonvention von Wordpress und liegen im Hauptordner. Sie werden in eine Seite hineingeladen.
Sie folgen keiner Namenskonvention und können eigentständig angelegt werden.
Diese Template liegen in der Regel nicht im Hauptverzeichnis des Themes sondern im Unterordnern namens inc und/ oder template-parts
Einige Dateien mit Sonderstatus
Tempalte Hierachie Wordpress Siehe die Grafik dieser Seite.
In der Grafik wird die Template Hierachie von Wordpress gezeigt. Wordpress geht von links nach Rechts. Wenn es eine Seite gefunden hat, werden die Seiten rechts davon ignoriert und nicht weiter gesucht. Wenn es eine page.php gibt wird nicht nach einer singular.php oder index.php gesucht.
Dazu folgendes Beispiel.
Die Seite page.php bestimmt eine einzelne Seite. Füge in die Seite page.php nach dem body <mark>page.php</mark> ein. Dieser Hinweis sollte beim Aufruf einer einzelnen Seite angezeigt werden.
Verfahre nach dem gleichen Schema in der index.html und benenne page.php um, damit sie nicht gefunden wird. Man sieht nun das index.html geladen wird, sofern es keine single.php gibt. Außerdem fügt Wordpress diese Infos im body Element ein. Überprüfe das mit den Developer Tools.
In der Template Hierachie erscheint vor der page.php die page-$id.php. Rufe eine Seite auf und berühre oben "Seite bearbeiten" Dann wird die id unten links im Browser angezeigt, Nehmen wir für dieses Beispiel die Index-nummer 22. Erzeuge von der page.php eine Kopie und benenne sie page-22.php Ändere das Markup dieser Seite und rufe sie auf.
In der Hierachie vor der page-$id.php ist die page-$slug.php. Hier wird der Name der Seite erwartet. Der Name erscheint oben im Browser. Man vergibt den Namen unter Permalink. Auch damit liesse sich eine spezielle Seite erzeugen, die noch vor der page-$id.php geladen würde.
Erstelle einen im Themes Ordner einen Ordner und füge dort eine style.css und eine index.php ein.
Die notwendige Struktur in Kommentarzeichen kannst du hier entnehmen. Diese Infos erscheinen im Backend unter Theme Info.
Füge folgenden Quellcode ein.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hier steht der Titel</title>
</head>
<body>
<header>
<h1>Logo</h1>
<p>Slogan</p>
<nav>Hier steht die Navi</nav> </header> <main>
<article>
Hauptinhalt page.php
</article>
<aside>Seitenleiste</aside> </main>
<footer>
<p>Copyright</p>
</footer>
</body>
</html>
Das Template kann nun aktiviert werden.
Auf dieser Grundlage kann man nun die einzelnen sekundären Templates im Hauptordner des Tempaltes erstellen:
und ein tertiäres Template im Unterordner inc
Dazu kopiert man sich die Teile aus der index.php und fügt diese in die einzelnen Dateien ein. Hier eine Übersicht.
Außerdem fügt man sich in die index.php include Befehle ein, um die einzelnen Templates zu laden. Des Weiteren erhält auch die header.php einen include Befehl für die navi.php
Siehe dazu die Seite Template include Tags
Beachte, dass der include Tag für die navi.php ein Custom Include Tag ist. Als Parameter wird der Pfad zur Datei eingeben.
<?php get_template_part('inc/navi.php'); ?>
Um die echten Inhalte aus der Datenbank zu laden, werden Template Tags eingesetzt. Es gibt verschiedene Arten von Template Tags: General Tags, Blog Tags, Author Tags, Bookmark Tags, Category Tags, Comment Tags,. etc.
Mit dem General Tag Bloginfo werden Infos zum System ausgegeben, wie Name der Seite, Url, Stylesheet url, Zeichensatz, Sprache etc.
Ändere die H1 Überschrift in header.php folgendemaßen:
<h1><?php bloginfo( 'name' ); ?></h1>
Dadurch wird der Titel der Seite eingefügt. Der Titel wird im Backend unter Einstellungen vergeben. Der dort eingegebene Untertitel lässt sich mit folgendem Template Tag ausgeben:
<?php bloginfo( 'description' ); ?>
<?php wp_title(''); ?>
Das Hochkomma entfernt das Attribut
$sep, welches standardmäßig einen Pfeil am Anfang anzeigt.
Die CSS Datei lässt sich mit einem bloginfo Tag einbinden. Das Argument ist stylesheet_url
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">
Innerhalb des body Tag kann man sich die body_class einfügen.
<body <?php body_class(); ?>>
Dadruch werden Klassen im Body Tag eingefügt, die anzeigen ob man eingeloggt ist, ob die schwarze Leiste oben zu sehen ist etc. In der Quelltextansicht einer Seite kann man das überprüfen.
Es gibt verschiedene Möglichkeiten Navigationselemente zu integrieren.
Die Liste der statischen Seite ist: wp_page_menu(). Damit werden li Elemente eingefügt, welche man von einem ul-Tag oder ol-Tag umschließen kann.
Gebe folgendes in die navi.php ein und überprüfe anschließend die Seite im Browser mit Quelltextansicht.
<nav><ul> <?php wp_page_menu(); ?> </ul></nav>
Mittels wp_list_pages wird eine umgebende ul mit einem Title eingefügt. Mittels Array Element kann man das unterbinden:
<?php
$args= array('title_li' => '');
wp_list_pages($args); ?>
Die Startseite wird mit echo hom_url() aufgerufen. Die Zeile im Header sieht somit folgendermaßen aus:
<h1><a href="<?php echo home_url('/') ?>"><?php bloginfo( 'name' ); ?></a></h1>
Wir benötigen unterschiedliche Seiten, wie Beiträge und Seiten. Speicher dazu die Seite index.php unter den neuen Namen page.php und single.php ab. Füge jeweils einen anderne Hinweistext ein, damit man den Unterschied sieht. "Hauptinhalt page.php", "Hauptinhalt single.php"
Hier eine Übersicht mit allen bisher erstellten Seiten:
Mittels Action- Hooks wird Code in die Seite eingefügt. Im folgenden soll die schwarze Werkzeugleiste angezeigt werden. Dazu wird im header.php und im footer.php jeweils ein Befehl eingefügt. Die Befehle müssen direkt vor dem schließenden head-Tag und vor dem schließenden body-Tag eingefügt werden, so wie man es in folgenden Beispielen sieht.
<?php wp_head(); ?>
</head>
<?php wp_footer(); ?>
</body>
Überprüfe die Änderung in der Quelltextansicht.
Der Standardloop ist eine Programmschleife, die Inhalte lädt, je nachdem auf welcher Seite man sich befindet. Auf einer Startseite, welche die letzten Beiträge lädt werden soviele Beiträge angezeigt, wie unter Einstellungen / Lesen eingestellt sind.
Nach einer Suche werden die Inhalte der Suchergebnisse geloopt.
Auf einer Beitragseite werden die Inhalte des Beitrags geloopt .
Auf einer Kategorieseite beinhaltet der Loop alle Beiträge der Kategorie.
Auf einer Seite werden die Inhalte der Seite angzeigt.
Auf einer Archivseite die Inhalte des Archivs.
Der Standardloop zeigt die Inhalte an, die standardmäßig auf einer Seite eines bestimmten Typs angzeigt werden.
Im folgenden sollen auf der Startseite die letzten Beiträge anzeigt werden. Jeder Beitrag sollte ein einem article Element eingefügt werden. Ändere dazu die index.php folgendermaßen ab.
<?php get_header(); ?>
<main>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article>
Hauptinhalt index.php
</article>
<?php endwhile; else : ?>
<article>
Sorry nichts gefunden.
</article>
<?php endif; ?>
<?php get_sidebar(); ?>
</main>
<?php get_footer(); ?>
Testet man die Seite im Browser wird man feststellen, dass bisher nur die statischen Inhalte der Seiten angzeigt werden. Es werden die nicht eingebenen Texte der Beiträge angezeigt. Diese kann man mit Template Tags anzeigen.
Alle Template Tags, bei denen es sich um die Detailsansicht eines Beitrags handelt, kann man nur innerhalb von Loops einfügen. Beispielsweise die Überschrift, den Author, das Datum den Text.
Siehe im Wordpress Codex Template Tags / Post tags / the_content oder the_title
Mit diesen beiden Tags kann man nun innerhalb des article-Tags Titel und Inhalt der Beiträge einfügen
<article> <h2><?php the_title(); ?></h2> <?php the_content(); ?> </article>
Da der Content eines Beitrags an verschiedenen Stellen gebraucht wird, kann man diesen Bereich der index.php auslagern. Auch die Fehlermeldung kommt in eine extra Datei.
Erstelle eine Datei content.php im Ordner inc und füge dort den obenstehenden Code mit einer kleinen Änderung ein. post_class() fügt Attribute hinzu, die Informationen über den Inhalt liefern. Schaue dir eine Seite im Quellcode an.
<article <?php post_class(); ?>> <h2><?php the_title(); ?></h2> <?php the_content(); ?> </article>
Erstelle außerdem eine Datei content-error.php im inc Ordner und füge dort die Error Meldung aus index.php ein.
<article>
Sorry nichts gefunden.
</article>
Ändere anschließend die index.php folgendermaßen ab.
<?php get_header(); ?>
<main>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php get_template_part('inc/content'); ?>
<?php endwhile; else : ?>
<?php get_template_part('inc/content','error'); ?>
<?php endif; ?>
<?php get_sidebar(); ?>
</main>
<?php get_footer(); ?>
Beachte wie der Name content-error zusammengesetzt wird. Es sind 2 Strings. Sollte es keine content-error.php geben, zeigt Wordpress content.php an.
Füge diesen Code auch in single.php und page.php ein. Damit auch dort die Inhalte (content.php) angzeigt werden.
Der Content auf statischen Seiten (page.php) soll sich von den Inhalten auf Beitragseiten single.php unterscheiden. Das erreicht man, indem man eine zweite geänderte content.php erstellt und diese auf page.php einbindet.
Erzeuge eine Kopie von content.php nenne sie content-page.php und speichere sie im Ordner inc.
Ändere auf der page.php die Zeile folgendermaßen ab.
<?php get_template_part('inc/content','page'); ?>
Die einzelnen Seiten auf der Startseite sind noch nicht verlinkt. Füge dazu einen link auf der content.php ein. Der Befehl lautet the_permalink
<article <?php post_class(); ?>> <h2> <a href="<?php the_permalink(); ?>"> <?php the_title(); ?></a> </h2> <?php the_content(); ?> </article>
Template Tag the_author und the_time
Diese Infos kann man in content.php einfügen. Die Zeit the_time() benötigt ein Format, sonst wird nur die Uhrzeit angezeigt.
the_time('d.m.Y')
<article <?php post_class(); ?>>
<h2>
<a href="<?php the_permalink(); ?>"> <?php the_title(); ?></a>
</h2>
<p>Veröffentlicht von <?php the_author(); ?> am: <?php the_time('d.m.Y'); ?></p>
<?php the_content(); ?>
</article>
Das nachfolgende CSS benötigt noch ein paar Eingriffe in HTML
. 1.) der gesamte Inhalt soll ab einer bestimmten Größe mittig plaziert werden und nicht breiter als 1000Pixel sein.
2.) Sidebar und Loop sollen gefloatet werden.
Zuerst wird der gesamte Inhalt in ein div mit class="site" eingeschlossen. Das Start Tag wird auf der header.php hinter dem body eingefügt. Das Endtag auf der footer.php hinter dem abschließenden Footer Tag.
Der gesamte Loop wird in ein div eingeschlossen mit der class="loop". Das geschieht auf den Seiten index.php, page.php, single.php
<?php get_header(); ?>
<main>
<div class="loop">
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php get_template_part('inc/content'); ?>
<?php endwhile; else : ?>
<?php get_template_part('inc/content','error'); ?>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
</main>
<?php get_footer(); ?>
Die CSS Datei wird folgendermaßen aufgebaut. Siehe Beispiel
Wordpress Codex Conditional Tags
Mittels Conditional Tags kann man Bedingungen abfragen. Beispielsweise auf welcher Art von Seite man sich befindet page.php / single.php oder auch welcher Seite genau. etc.
Man erzeugt eine if Bedingung und fügt den Conditional Tag in die Klammern der Bedingung ein.
if(conditional tag) {Anweisung;}
Im folgenden Beispiel wird abgefragt ob man sich auf einer page.php befindet. Der Html Inhalt wird daraufhin angezeigt. Da hier php und html gemischt wird, wird der PHP zwischendurch geschlossen und wieder geöffnet. Das Beispiel kann man in sidebar.php einfügen.
<?php if(is_page()){ ?>
<aside>Seitenleiste</aside>
<?php } ?>
Einzelne Seiten kann man abfragen indem man die id der Seite als Argument in this_page() einfügt. Die Id der Seite kann man sich im Frontend über den Quelltext oder Devoloper Tools anzeigen lassen, da wir zuvor im body Tag auf der Seite header.php die body_class(); eingefügt haben.
Hier nun der aktuelle Inhalt der Templates
Wordpress Codes WP Query
Während ein Standardloop immer genau das anzeigt, was auf der Seite angesagt ist, kann man mit einem WP Query Loop genauer bestimmen, was man anzeigen möchte.
Hier ein Beispiel eines Standardloops zum Vergleich
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php get_template_part('inc/content'); ?>
<?php endwhile; else : ?>
Die Sache ist leider fehlgeschlagen.
<?php endif; ?>
Hier ein Beispiel eines WP Query, der die letzten 3 Beiträge anzeigt.
<?php
$args = array(
'post_type' => 'post',
'posts_per_page' => 3
);
$mein_loop = new WP_Query($args);
if ($mein_loop -> have_posts() ) : while ( $mein_loop -> have_posts() ) : $mein_loop -> the_post(); ?>
<?php get_template_part('inc/content'); ?>
<?php endwhile; else : ?>
Die Sache ist leider fehlgeschlagen.
<?php endif; wp_reset_postdata(); ?>
Beide Loops sind sehr ähnlich. Im WP_Query Loop wird lediglich eine Variable hinzugefügt
$mein_loop welcher ein WP_Query() Objekt zugewiesen wird.
WP_Query() erwartet ein Array hier $args.
Dort werden die Parameter des Loops bestimmt.
Eine weitere Änderung ist wp_reset_postdata();
In einer functions.php kann man Funktionen hinzufügen. Im folgenden Beispiel wird eine Funktion erzeugt, die ein Style Tag und darin ein Style Sheet auf die Seite schreibt. Diese Funktion wird innerhalb der Funktion wp_head() aufgerufen. (Die wp_head() wird in der Regel vor dem schließenden Header Tag eingefügt um die schwarze Werkzeugleiste am oberen Rand anzuzeigen.
function wpv_red_bg(){
echo '<style>body {background: red;}</style>';
}
add_action('wp_head','wpv_red_bg');
?>
Diese Funktion wird im folgenden Beispiel als Plugin eingesetzt. Dazu wird eine Datei beliebigen Namens im 'plugins' Ordner gespeichert. Das Plugin müsste im Backend erscheinen und kann dort aktiviert werden.
<?php
/*Plugin Name: Roter Hintergrund
Author: Michael Albers
Description: Mit diesem Plugin wird der Seitenhintergrund rot.
Author URI: http://www.pastorpixel.de
*/
function wpv_red_bg(){
echo '<style>body {background: red;}</style>';
}
add_action('wp_head','wpv_red_bg');
?>
Speichert man die PHP Seite des Plugins in einem Ordner 'mu-plugins' wird das Plugin automatisch aktiviert und kann nicht im Backend deaktiviert werden. In Backend unter Plugins erscheint ein Hinweis: 'Obligatorisch'
Im Backend kann man über den die Option "Menü" Menüs erstellen und aktivieren. Hier geht es darum diese Funktionalität zu erstellen. Dazu sind 3 Schritte nötig.
Siehe WP Codex register_nav_menu
Eine functions.php anlegen und folgenden Code einfügen:
<?php
add_action( 'after_setup_theme', 'wpv_my_menu' );
function wpv_my_menu() {
register_nav_menu( nav_main,'Navigation oben' );
}
?>
Nun kann man schon im Backend den Punkt "Menüs" aufrufen. Unter Positionen erscheint das Menü "Navigation oben". Sollten dort zuvor erstellte Menüs erscheinen kann man diese löschen.
after_setup_theme Das Menü wird beim Aufruf erstellt
wpv_my_menu Name des Menüs
nav_main ist ein selbst vergebener Name für die Theme Location. Diese wird für das Template Tag benötigt.
Die Position des Menüs muss innerhalb eines Templates bestimmt werden, beispielsweise auf der header.php, index.php, page.php
Siehe WP Codex wp_nav_menu
Dieser Code wurde innerhalb eines Templates zwischen 2 nav- Tags eingefügt. Beachte den selbst vergbenenen Namen nav_main
<?php
$args = array( 'theme_location' => 'nav_main' ); wp_nav_menu($args); ?>
Im Backend erscheint schon ein fertiges Menü mit allen Seiten. Das macht Wordpress standardmäßig wenn man kein Menü erstellt hat. Gehe unter "Menü" auf Postitionen und wähle das erstellte Menü aus. In diesem Beispiel heißt es "Navigation oben". Nun kannst du Seiten hinzufügen und löschen, indem auf die kleinen Pfeile der Menüpunkte klickst.
Wähle unter "Menüeinstellungen" die "Position im Theme" aus.
Weitere Menüs werden in der functions.php folgendermaßen angelegt. Diese müssen in den einzlenen Templates wie unter Punkt 2 beschrieben positioniert werden.
<?php
add_action( 'after_setup_theme', 'wpv_my_menu' );
function wpv_my_menu() {
register_nav_menu( nav_main,'Navigation oben' );
register_nav_menu( 'nav_side', 'Navigation Sidebar');
}
?>
WP Codex register_sidebar
Um das Theme Widget fähig zu machen muss man in der functions.php das Widget registrieren und innerhalb eines Templates an der gewünschten Stelle zuweisen.
Gehe in die Functions gebe folgenden Code ein:
//Sidebar
add_action( 'widgets_init', 'wpv_register_sidebar' );
function wpv_register_sidebar() {
register_sidebar( array(
'name' => 'Sidebar 1',
'id' => 'sidebar-1',
'description' => 'Rechte Sidebar bzw. Smartphone View unten' ,
'before_widget' => '',
'after_widget' => '',
'before_title' => '<h3 class="widgettitle">',
'after_title' => '</h3>',
)
);
}
WP Codex dynamic_sidebar
Füge die Sidebar in einem Template ein. In diesem Beispiel auf der Seite sidebar.php
<?php dynamic_sidebar( 'sidebar-1' ); ?>
Folgende Überprüfung sorgt dafür, dass das aside Element nicht angezeigt wird, wenn keine Widget Elemente im Backend hinzugefügt werden. Außerdem wird noch ein umschließendes ul Element hinzugefügt.
<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?> <aside class="site-sidebar"> <ul> <?php dynamic_sidebar( 'sidebar-1' ); ?> </ul> </aside> <?php endif; ?>
WP Codex custom_backgrounds
Damit man im Customizer des Themes eine Hintergrundfarbe auswählen kann, füge in der functions.php folgenden Code ein.
add_theme_support( 'custom-background' );
Nun kann man im Customizer Hintergrundfarbe und Bild definieren. Im body Tag wurde eine Klasse: custom-background hinzugefügt.
Das Style Sheet, welches die Eigenschaften definiert wird hinter dem Standardstylesheet aufgeführt (siehe Quelltext) Foltendermaßen könnte man die im Customizer erzeugten Eigenschaften überschreiben in der style.css
body.custom-background{background-repeat: repeat-x !important;}
add_theme_support bietet die Möglichkeite mehrere Paramater einzustellen. Siehe dazu die WP Dokumentation.
WP Dokumentation custom_headers
Auch der Header lässt sich im Customizer anpassen, gebe folgenden Code in der functions.php ein. Optional kann man auch ein Array mit Eigenschaften eingeben.
add_theme_support( 'custom-header' );
Im Customizer kann man nun ein Bild oder mehrere Bilder auswählen, die zufällig im Header angezeigt werden sollen. Gibt man im Array eine Bildbreite und Höhe, so kann der User das Bild zuschneiden.
Man muss jedoch noch definieren, wo im Header das Bild angzeigt wird. Hier gibt es 2 Möglichkeiten:
Folgende Befehle kann man in einem Template nutzen:
Header Bild anzegen:
<?php header_image(); ?>
Weitere Eigenschaften lassen sich über get_custom_header() abrufen
WP Codex get_custom_header
<?php echo get_custom_header()->width; ?>
<?php echo get_custom_header()->height; ?>
Das komplette img-Tag:
<img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="" />
Anstatt ein img- Tag im header.php Template einzufügen, kann man auch ein style Element mit einem Selektor einfügen direkt in der header.php einfügen:
<style>
.container{background-image: url(<?php header_image(); ?>);}
</style>
Auf die Art wäre es auch sehr einfach verschiedene zufällige Hintergrundbilder für den body zu bestimmen.
Mit folgendem Code wird ein Header-Bild vor der Klasse container angezeigt (.container ist in diesem Beispiel ein umschließendens div Element für die komplette Seite. Der body bekommt ein padding-top welches der Höhe des eingefügten Header-Bildes entspricht, damit der Inhalt unter dem Bild bzw. unter dem before Element angezeigt wird.
<style>
.container:before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
height: <?php echo get_custom_header() -> height;
?>px;
background-image: url(<?php header_image();
?>);
background-repeat: no-repeat;
background-position: top center;
}
body {
padding-top: <?php echo get_custom_header() -> height; ?>px;
}
</style>
Über “Design, Editor” kann man den Quelltext der Theme- Dateien bearbeiten oder man erstellt sich ein eigenes Theme. Hier gibt es einige PHP Funktionen und wordspezifische PHP Methoden, die besonders wichtig sind.
Eine Konstante ist eine Variable, mit festem Wert. Es ist Konvention den Namen der Konstanten in Großbuchstaben zu notieren. Die Funktion define() erwartet 2 Parameter: den Namen der Konstanten und den Wert.
define ('PATH_TO_WEBSITE', 'http://www.on-design.de');
Der Aufruf der Funktion erfolgt mit echo in einem PHP Anweisungsblock:
echo PATH_TO_WEBSITE
Hooks ermöglichen die Einbindung von Funktionen an einer bestimmten Stelle. Siehe auch diesen gut erklärten Beitrag von den Netzialisten Hook in Wordpress
Erstellt man eine Seite beispielsweise index.php werden dort die Bereiche (header, footer, sidebar) deren Inhalt auf den Seiten header.php, footer.php, sidebar.php definiert wurde, folgendermaßen eingebunden:
<?php get_header(); ?>
Wozu also nun noch zusätzlich dieser Hook? Hooks haben eine andere Aufgabe, denn mit Hooks kann man PHP-Code an bestimmten Stellen aufrufen.
wp_head()
Dieses Codesnippet für den Head-Bereich sollte man am Besten vor den endenden Head-Tag einfügen und zwar innerhalb der Seite header.php
<?php wp_head() ?></head>
Auch die anderen Elemente oder Teile werden auf diese Weise eingebunden.
wp_sidebar();
wp_footer();
Nun kann man auf der Seite functions.php eine Funktion definieren, die mittels des Hooks an der Stelle aufgerufen wird. Ein Beispiel für den Head könnte so aussehen.
add_action( 'wp_head', 'mein_actionhook' );
function mein_actionhook() {
echo '<meta name="description" content="Alles logo in Togo?" />' . "\n";
}
Überprüfe den Metatag im Quellcode.
get_stylesheet_directory_uri()get_template_directory_uri()bloginfo('name')bloginfo('wpurl')wp_title()wp_title('|', 0, left);
the_title()the_permalink()the_author_posts_link()previous_post_link() / next_post_linkprevious_posts_link() / next_posts_linkthe_time("d.m.Y")the_category(',')single_cat_title()category_description()single_tag_titletag_description()comments_popup_link('Keine Kommentare','1 Kommentar','% Kommentare','','Kommentare geschlossen')the_content('Weiterlesen...')posts_nav_link(' | ', ' zu den älteren Beiträgen', 'zu den neueren Beiträgen')the_tags('','•',' ')bloginfo(template_url)<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/normalize.css">Ein einzelne Seite könnte so aussehen:
<?php get_header(); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<div class="entry">
<h1><?php the_title(); ?></h1>
<?php the_content('Weiterlesen...'); ?>
</div>
<?php endwhile; endif; ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Hier wird in einer if-Abfrage abgefragt, ob ein Eintrag oder Einträge vorhanden sind. Diese werden mittels while Schleife aufgerufen. header, footer und sidebar werden an den entsprechenden Stellen eingebunden.
Man kann in Wordpress eine Seite auf mehrere Unterseiten aufteilen. Das macht man indem man im "Text" Modus einer Seite oder eines Beitrags folgenden Quicktag einfügt.
<!--nextpage-->
Damit diese Paginierung ausgeführt wird, muss man den Quellcode der page.php ergänzen. Füge hinter das schließend </div> folgenden Quellcode ein.
<?php $args = array(
'before' => '<p>' . __('Seiten:'),
'after' => '</p>',
'link_before' => '',
'link_after' => '',
'next_or_number' => 'number',
'nextpagelink' => 'Nächste Seite',
'previouspagelink' => 'Vorige Seite',
'pagelink' => '%',
'more_file' => '',
'echo' => 1 ); ?>
<?php wp_link_pages( $args ); ?>
Auf der Startseite eines Blogs werden standardmäßig die letzten Einträge aufgerufen. Die index.php ist der page.php sehr ähnlich ersetze hier lediglich die if Struktur und while Schleife.
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>< (...) <?php endwhile; else: ?> (...) <?php endif; ?>
Die Anzeige der einzelnen Beiträge innerhalb der while Schleife sieht so aus:
<div class="entry">
<h2><a href="<?php the_permalink(); ?>" title="Lesen Sie "<?php the_title(); ?>" vollständig">
<?php the_title(); ?>
</a></h2>
<p class="blogmeta">
<?php the_author_posts_link(); ?>
</p>
<?php the_content('Weiterlesen...'); ?>
</div>
Hinter das else: kann ein Hinweis eingefügt werden, z.B: "Es wurden keine Beiträge gefunden."
Am Ende kann man eine Navigation einfügen:
<p><?php posts_nav_link('|', '« Ältere Artikel', 'Neuere Artikel »'); ?></p>
Der komplette Code könnte so aussehen:
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?><
<div class="entry">
<h2><a href="<?php the_permalink(); ?>" title="Lesen Sie "<?php the_title(); ?>" vollständig"><?php the_title(); ?></a></h2>
<p class="blogmeta"><?php the_author_posts_link(); ?></p>
<?php the_content('Weiterlesen...'); ?>
</div>
<?php endwhile; else: ?>
<p> Es wurden leider keine Beiträge gefunden</p>
<?php endif; ?>
<p><?php posts_nav_link('|', '« Ältere Artikel', 'Neuere Artikel »'); ?></p>
Erstelle eine php Seite mit irgendeiner Funktionalität oder Besonderheit, beispielsweise eine Seite, welche als Archivauflistung die Seiten nach Monaten geordnet anzeigt. Speichere sie unter archives.php ab.
Füge am Anfang in Kommentarzeichen den Namen des Templates auf folgende Art ein.
<?php /*Template Name: Archiv*/ ?>
Erstelle dann im Backend eine Seite und wähle unter "Attribute, Template" den Eintrag "Archiv"
Es folgt ein Codesnippet mit dem Befehl für den Auflistung der Seiten nach Monaten geordnet innerhalb der bekannten while Schleife.
<div class="entry">
<h1> Archiv</h1>
<ul class="archiv">
<?php wp_get_archives('type_monthly'); ?>
</ul>
weitere Werte sind daily, weekly, yearly
Neben der üblichen Auflistung der Beiträge mittels while Schleife, empfiehlt es sich in einer author.php ein paar Infos über den Author/ User einzufügen.
get_user_by()
Mit dieser Funktion kann man an die Daten eines Nutzers kommen.
Hier sind einige Parameter möglich:
Über ein Kurzform des Namens:
get_user_by('slug', $author_name);
Weitere Parameter: email, login
Man kann aber auch mit get_user_data() über die id auf den User zugreifen
get_user_data(intval($author));
Es folgt ein Beispiel:
<?php $curauthor = (isset($_GET['author_name'])) ? get_user_by('slug', $author_name) : get_userdata(intval($author)); ?>
Hier wird in einer if-Struktur auf 2 Arten auf den User zugegriffen und das Ergebnis in der Variablen $curauthor gespeichert. Auf folgende Weise kann man eine bestimmte Eigenschaft aufrufen:
$curauthor->description;
folgende Eigenschaften kann man abrufen.
| Eigenschaft | Erklärung |
|---|---|
| ID | eindeutige ID Nummer |
| user_email | Email Adresse |
| user_url | Webadresse, Website |
| display_name | Anzeigename |
| first_name | Vorname |
| last_name | Nachname |
| nicname | Spitzname |
| description | Biografie |
| aim | Instant-Messenger-Kontakt "AIM" |
| yim | Instant-Messenger-Kontakt "Yahoo IM" |
| jabber | Instant-Messenger-Kontakt "Jabber/Google-Talk " |
Wähle die Seitenübersicht, wo alle Seiten aufgeführt werden.
Klicke bei der gewünschten Seite auf "Quickedit"
Deaktivieren Kommentar.
Auf folgende Weise fügt man ein Suchfeld ein.
<div class="widget">
<h6>Suche</h6>
<form role="search" method="get" id="searchform" action="<?php bloginfo('url'); ?>
<input type="text" name="s" id="search-field" value="<?php echo get_search_query(); ?>" />
<input type="submit" value="suchen" id="search-button"/>
<div class="clear"></div>
</div>
Außerdem braucht man eine Seite, welche das Suchergebnis anzeigt. Das geschieht mit der üblichen if Struktur und while Schleife. Die Seite nennt man search.php. Wenn Sie nicht vorhanden ist, nimmt Wordpress die index.php
Eine search.php kann man besser anpassen. Beispielsweise könnte man sie folgendermaßen einleiten:
<h1 class="archive">Ihre Suche nach: "<?php echo get_search_query(); ?>"</h1>
Um in einem selbst erstellten Theme Widgets einbinden zu können, sind mehrere Schritte nötig, hier eine kurze Übersicht:
Im folgenden werden ich drei verschiedene Bereiche registrieren. Sie haben die Namen Menu, Sidebar, Footer Diese Namen sind frei gewählt. Die Funktion register_sidebar() kann Parameter enthalten.
if ( function_exists('register_sidebar') ) {
register_sidebar(array('name' => 'Menu',
'description' => '',
'before_widget' => '<div class="widget">',
'after_widget' => '</div>'));
register_sidebar(array('name' => 'Sidebar',
'description' => '',
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h6>',
'after_title' => '</h6>'));
register_sidebar(array('name' => 'Footer',
'description' => '',
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<h6>',
'after_title' => '</h6>'));
}
Auf der Seite header.php soll ein Widget eingefügt werden können. Dazu wird der registrierte Bereich Menu verwendet. Füge an der Stelle, wo das Menü erscheinen soll folgenden Code ein.
<?php if ( !function_exists('dynamic_sidebar') || dynamic_sidebar('Menu') ) : endif; ?>
Auch auf anderen Seiten wie beispielsweise sidebar.php oder footer.php kann man auf diese Weise einen registrierten Bereich verankern. Ersetze lediglich den Namen Menu durch einen der beiden anderen Namen. Lasse dich nicht durch die Namen verwirren. Du kannst auch den Bereich sidebar auf der Seite footer.php verankern, das wäre dann allerdings nicht so übersichtlich.
Gehe ins Backend auf Design/ Widget Hier siehst du im rechten Bereich die 3 Bereiche Menu, Sidebar, Footer.
Im linken Bereich siehst du die Widgets, die es gibt. Ziehe per Drag and Drop ein Widget auf einen Bereich. Beispielsweise Individuelles Menü auf den Bereich Menu. Wähle im Menü ein zuvor erstelltes Menü aus. Siehe dazu meinen Tipp Kategorie und Menü, um nachzuschauen, wie man ein Menü erstellt.
Verfahre genauso mit den anderen Widgets. Ziehe beispielsweise das Widget Kategorie auf Sidebar. Wenn Sidebar auf der Seite sidebar.php verankert ist, wird dort eine Auflistung der Kategorien erscheinen. Selbstverständlich kann man weitere Widgets hinzufügen. Die Reihenfolge kann man durch drag & drop ändern.
Diese Zusammenstellung von Widgets kann man als Sidebar in die Seite einfügen. Möchte man für unterschiedliche Sidbars auf verschiedenen Seiten zeigen, braucht man ein Plugin wie beisielsweise Custom Sidbars oder Display Widgets
Wenn man ein paar grundsätzliche Änderungen an einem Theme vornehmen möchte, bietet sich ein Child Theme an. Das ist quasi ein neues Theme, welches alle Eigenschaften des Elternthemes erbt. Der Vorteil liegt darin, dass bei einem Update des Elternthemes die Änderungen nicht verloren gehen.
Siehe auch das Thema bei kau-boys
Denke dir einen Namen für das Theme aus und erzeuge einen Ordner mit diesem Namen in folgendem Unterordner:
WordPress / wp-content / themes
Erstelle dir in diesem Ordner folgende Dateien:
style.css
function.php
Im Kommentar der style.css werden Informationen untergebracht, mit denen Wordpress erkennt, welches das Elterntheme ist. Im folgenden Beispiel ist der Name des Elternthemes. twentyseventeen
/* Theme Name: Kind von 2017 Description: Twenty Seventeen Child Theme Author: Micha Pixel Author URI: http://pastorpixel.de Template: twentyseventeen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html */
In dieser CSS Datei können alle gewünschten Änderungen vorgenommen werden. Wie üblich kann man im Frontend mittels Webdeveloper, unter Elements (F12)die gewünschten Elemente suchen.
Lege dir für Hintergrundbilder etc. die gleiche Ordnerstruktur an wie im Elterntheme:
assets /
img
Füge folgenden PHP Code in die functions.php ein. Achte auch hier wieder auf den Hinweis zum Elterntheme, welches in diesem Beispiel twentyseventeen ist:
<?php
function child_theme_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-theme-css', get_stylesheet_directory_uri() .'/style.css' , array('parent-style'));
}
add_action( 'wp_enqueue_scripts', 'child_theme_styles' );?>
Mit oembed werden beispielsweise Vimeo Youtube Videos, Instagram, Twitte, Facebook rund vieles mehr eingebettet. In Wordpress ist das denkbar einfach, da man lediglich die Adresse zum Video einträgt. Schau dir den Link in der Adresszeile deines Browsers an. Alles was nach dem kaufmännischem & erscheint sollte nicht eingefügt werden.
https://www.youtube.com/watch?v=rIh2kB1J1U0
mehr dazu in diesem Wordpress embed Tipp
Man kann bei einem Update nicht einfach mehrere Versionen überspringen. In Version 2.6 gab es in Wordpress noch keine Updatefunktion. Um auf eine jetzige Version zu kommen, muss man ein update nach dem anderen vollziehen. Hierzu findet man Infos im Netz.
Ich habe folgende Lösung ausprobiert, jedoch ist diese ohne Gewähr, probiert das unbedingt erstmal auf einem lokalen Server aus.
In meiner 2.6 Version hatte ich keine Seiten sondern nur Beiträge. Diese befinden sich in der Datenbank unter wp_posts.
Ich gehe mit "PHP my Admin" in die Datenbank wähle Tabelle wp_post und klicke oben auf exportieren. Es wird eine Datei mit Endung sql abgespeichert.
Ich erzeuge mir ein neues Wordpress auf dem lokalen Server. Ich gehe dort mit PHPmyAdmin auf die wordpress Datenbank wähle mit die Tabelle wp_posts und klicke oben auf Operationen. Ich benenne die Tabelle um in irgendwas anderes.
Dann klicke ich auf importieren und importiere die zuvor exprotierte Tabelle wp_posts. Die Spalte wp_categories lösche ich, da ich sie in der Orginal nicht gefunden habe. Das bedeutet übrigens dass ich die Kategorien im Backend von Wordpress erzeugen muss und den Beiträgen einzeln zufügen muss. Das ist ein bisschen arbeitsaufwändig, wenn man viele Beiträge hat.
Coblocks von GoDaddy erweitert die Gutenberg Blocks
visual compser / pagebuilder
Hompage: http://www.pastorpixel.de