Wordpress Tipps

 




First Step Installation

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

Entpacke wordpress in einen Unterordern des root Verzeichnis des Apache Servers. Bei der Standardinstallation von Xampp entsteht ein Ordner C: xampp / htdocs (bei wamp heißt der Ordner www )Wenn du wordpress dort in den Unterordner wordpress entpackst, kannst du im Browser unter http://localhost/wordpress. WordPress aufrufen. Klicke auf “erstelle die Konfigurationsdatei” folge den Anweisungen, Datenbankname db_wordpress, Benutzername und Passwort, den du zuvor vergeben hast. Datenbankhost ist localhost

Installation 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_

Installation extern

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.

WordPress im anderen Verzeichnis

Wenn WordPress nicht im Hauptverzeichnis der Domain liegt, aber die Domain als Startseite angezeigt werden soll. Oder wenn irgendeine andere Konstellation von Order 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.

Die Ordner und Dateien

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 vs Plugins

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.

Backend / Profil

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.

 

Seiten, Beiträge, Kategorien, Menü

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

 

Theme Features

Themes sollte bestimmte Features haben. Siehe Wordpress Codex

 

Theme installieren

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.

Medien

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.

  Galerie

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’

Permalink

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:

Permalinks
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

Eigenes Theme

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.

Primäre Templates

Sie steuern die Ansicht einer bestimmten Art von Unterseite. Sie müssen einer festglegten Namenskonvention folgen und liegen im Hauptordner. 

Sekundäre Templates

Sie steuern einen Teilbereich einer Unterseite. Auch diese folgen der Namenskonvention von Wordpress und liegen im Hauptordner. Sie werden in eine Seite hineingeladen.

Tertiäre Templates

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

Weitere Templates

Einige Dateien mit Sonderstatus

Template Hierachy

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.

PHP Code für eine einzelne  Seite ändern

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.

Theme /   Step by Step

Erstelle einen im Themes Ordner einen Ordner und füge dort eine style.css und eine index.php ein.

style.css

Die notwendige Struktur in Kommentarzeichen kannst du hier entnehmen. Diese Infos erscheinen im Backend unter Theme Info.

index.php

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'); ?>

Template Tags / Inhalte aus der Datenbank laden

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' ); ?>

Der Title einer Seite

<?php wp_title(''); ?>
Das Hochkomma entfernt das Attribut $sep, welches standardmäßig einen Pfeil am Anfang anzeigt.

CSS Datei mittels Template Tag einbinden

Die CSS Datei lässt sich mit einem bloginfo Tag einbinden. Das Argument ist stylesheet_url

<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>">

Body class

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.

Navigation

Es gibt verschiedene Möglichkeiten Navigationselemente zu integrieren.

wp_list_pages, wp_page_menue

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); ?>

Startseite Link

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>

Beiträge und Seiten

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:

Code einfügen Hooks / Werkzeugleiste

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.

Loops / Standardloop

Wordpress Codex Loop

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.

Template Tags für Beiträge

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'); ?>

Verlinkung

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>

Author / Veröffentlichungsdatum

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>

CSS

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

Conditional Tag / Bedingungen / if

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

WP Query Loop

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.

siehe auch Post Types

 <?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();

Functions und Plugins

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'

 

Navigationsbereich  erstellen

Menü welches man Backend verwalten kann

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.

  1. Navigationsbereich in der functions.php registrieren und Namen fürs Backend vergeben
  2. Im Template ein Templatetag einfügen
  3. Im Backend ein Navigationsmenü erstellen, und einer Position im Theme zuweisen

1) Menü in functions.php registrieren

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.

2) Theme Position auf einer Template Seite

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); ?>

3) Menü im Backend anlegen und zuweisen

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.

4) Weitere Menüs

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'); 
	}
?>

Widgets

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; ?>

Hintergrundfarbe und Hintergrundbild für den Customizer

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.

Header im Customizer

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:

  1. Header Bild über einem img-Tag anzeigen.
  2. Header Bild über CSS definieren.

Header Bild in einem img-Tag anzeigen

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="" />

 

Header Bild in CSS definieren

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>

Wichtige Methoden

Ü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.

PHP Konstante

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

Hook

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.

Weitere Funktionen

get_stylesheet_directory_uri()
Pfad zum Theme
 
 
get_template_directory_uri()
Pfad zum Theme
bloginfo('name')
Name des Block, wird definiert unter. Einstellungen, Allgemein
bloginfo('wpurl')
Pfade zu Ping und RSS Feed
wp_title()
Kann t den Titel eines Beitrags zusätzlich zum Titel des Blogs in der Titelzeile anzeigen, wenn der Beitrag als einzelne Seite aufgerufen wird. Folgende Parameter sind möglich:
  • Welches Trennzeichen neben dem Titel angezeigt werden soll.
  • Boolscher Wert als true, false, oder 0, 1. Der Wert true bestimmt, dass der Titel nicht ausgegeben werden soll, sondern nur in einer Variablen gespeichert werden soll.
  • right, left, Position des Trennzeichens.

wp_title('|', 0, left);

the_title()
Titel eines Beitrags
the_permalink()
Link zum Beitrag.
the_author_posts_link()
Ein Link auf eine Seite mit allen Beiträgen des Authors.
previous_post_link() / next_post_link
Ein Link auf den vorigen Post (Wordpress Codex) Diesen Link benutzt man in einem einzelnen Beitrag, um auf den vorigen Beitrag zu kommen. Beispielsweise auf der single.php
previous_posts_link() / next_posts_link
Ein Link auf den vorigen Posts (Wordpress Codex) Diesen Link benutzt man auf einer Seite wo mehrere Beiträge angezeigt werden. Beispielsweise auf der page.php, index.php, etc. Wenn auf der Startseite die drei letzten Beiträge angezeigt werden, erstellt man einen link auf weitere Beiträge, bzw. die vorigen.
the_time("d.m.Y")
Datum, in der Form, wie man es im Parameter übergibt.
the_category(',')
Die Kategorie. Wenn es mehrere Kategorien sind, werden diese mit einem Trennzeichen ausgegeben. Das Trennzeichen wird als Parameter übergeben.
single_cat_title()
Titel der aktuellen Kategorie.
category_description()
Das Äquivalent für die Beschreibung erzeugt schon einen HTML- Absatz. Um es zu formatieren, sollte man ein umschließendes Div erzeugen, den man mit CSS gestalten kann.
single_tag_title
Titel des aktuellen Tags
tag_description()
Das Äquivalent für die Beschreibung. siehe auch category_description 2 Abschnitte höher
comments_popup_link('Keine Kommentare','1 Kommentar','% Kommentare','','Kommentare geschlossen')
Die Anzahl der Kommentare werden als Links ausgegeben. Die Parameter bestimmen, was unter bestimmten Bedingungen ausgegeben werden soll. Die Parameter der Reihe nach:
  1. Wenn kein Kommentar vorhanden ist.
  2. Wenn ein Kommentar vorhanden ist.
  3. Wenn mehr als ein Kommentar vorhanden ist. Dabei gibt das Prozentzeichen die Anzahl der Kommentare aus.
  4. Eine CSS Klasse für den Link (optional)
  5. Wenn die Kommentarfunkion deaktiviert ist.
the_content('Weiterlesen...')
Der Inhalt. Hier kann man einen Parameter übergeben, der den Titel des Weiterlesens-Link enthält.
posts_nav_link(' | ', ' zu den älteren Beiträgen', 'zu den neueren Beiträgen')
Wenn es mehr Blogartikel gibt, als auf einer Seite dargestellt werden können, kann man mit dieser Funktion einen Link auf die Seite mit älteren und einen Link auf die Seite mit neueren Beiträgen erzeugen.
  1. Trennzeichen
  2. Text für Link zur Seite mit älteren Beiträgen.
  3. Text für Link zur Seite mit neueren Beiträgen.
the_tags('','•',' ')
Die Tags eines Beitrags. Die 3 Parameter sind. Der erste was vor dem Tagbereich erscheint, der zweite, das Trennzeichen, der dritte, was nach dem Tagbereich erscheint.
bloginfo(template_url)
Hiermit greift man auf das Verzeichnis des Templates zu. Das kann man gebrauchen um Stylesheets, Scripte oder andere Dateien zu integrieren.
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/normalize.css">

 

Einzelne Seite / page.php

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.

Seiten mit Paginierung

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 ); ?>

 

Letzte Einträge aufrufen

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 &quot;<?php the_title(); ?>&quot; 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('|', '&laquo; Ältere Artikel', 'Neuere Artikel &raquo;'); ?></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 &quot;<?php the_title(); ?>&quot; 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('|', '&laquo; Ältere Artikel', 'Neuere Artikel &raquo;'); ?></p>

 

Seite als Template erstellen

Beispiel Archive

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

 

Beiträge eines Authors | author.php

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 "

 

Kommentar auf einzelner Seite deaktivieren

Wähle die Seitenübersicht, wo alle Seiten aufgeführt werden.
Klicke bei der gewünschten Seite auf "Quickedit"
Deaktivieren Kommentar.

Suchen

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: &quot;<?php echo get_search_query(); ?>&quot;</h1>

 

Widget fähig machen

Um in einem selbst erstellten Theme Widgets einbinden zu können, sind mehrere Schritte nötig, hier eine kurze Übersicht:

  1. In der functions.php werden Widget Bereiche registriert. Nach der Registrierung erscheinen diese Bereiche im Backend unter Design / Widgets
  2. Auf den Seiten (z.B.: header.php, footer.php etc.) wo ein Widget erscheinen soll, muss man die registrierten Bereiche verankern.
  3. Nun kann man im Backend, ein Widget auf den registrierten Bereich ziehen und weitere Einstellungen vornehmen.

1) functions.php Bereiche registrieren

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>'));
    }
  

2. registrierten Bereich verankern

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.

3. Ein Widget hinzufügen

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

Wichtige Plugins

updraftPlus
Sicherungen
nextgen Gallery
Slideshow etc.
TablePress
Tabellen einfügen
Antispam bee
Spamschutz
Contact Form 7
Formulare
All in One SEO Pack
SEO Suchmaschinen Optimierung
Wordfence Security
Spamschutz, Firewall, High Speed Cache
Statify
Statistik
Custom Sidebars
für jede Seide eine individuelle Sidebar erstellen.
Email Adress Encoder
Encodiert Email Adressen, um sie vor Spam Bots zu schützen
Duplicator
mit der kompletten Seite umziehen Anleitung

 

Child Theme

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

Ordner anlegen

Denke dir einen Namen für das Theme aus und erzeuge einen Ordner mit diesem Namen in folgendem Unterordner:

WordPress / wp-content / themes

Dateien anlegen

Erstelle dir in diesem Ordner folgende Dateien:
style.css
function.php

style.css

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
*/

Änderungen in CSS

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

functions.php

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' );?>

oembed

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

Update von 2.6 auf 4

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.

Links

Starterthemes

Themes Quellen

Plugins

Coblocks von GoDaddy erweitert die Gutenberg Blocks

shortcodes ultimate

visual compser / pagebuilder

 

Hompage: http://www.pastorpixel.de