{"id":13969,"date":"2018-07-18T15:18:21","date_gmt":"2018-07-18T15:18:21","guid":{"rendered":"https:\/\/www.templatemonster.com\/de\/blog\/?p=13969"},"modified":"2020-05-19T14:52:18","modified_gmt":"2020-05-19T14:52:18","slug":"wordpress-wie-erstellst-du-benutzerdefinierte-seiten-templates","status":"publish","type":"post","link":"https:\/\/monsterspost.com\/de\/wordpress-wie-erstellst-du-benutzerdefinierte-seiten-templates\/","title":{"rendered":"WordPress: Wie erstellst du benutzerdefinierte Seiten-Templates?"},"content":{"rendered":"

In WordPress\u00a0lassen sich sehr einfach die Gestaltung und Funktionen\u00a0\u00a0\u00e4ndern. Benutzerdefinierte Seiten-Templates helfen dir, eine Website auf deine individuellen Bed\u00fcrfnisse anzupassen.<\/strong><\/p>\n

\"\"<\/p>\n

Wie sind Prinzipien der Template-Hierarchie?<\/strong><\/a><\/p>\n

Seiten-Templates selbst erstellen und anpassen<\/strong><\/a><\/p>\n

Seiten-Templates f\u00fcr verschiedene Zwecke<\/strong><\/a><\/p>\n

Benutzerdefinierte\u00a0Templates f\u00fcr jede Seite<\/strong><\/a><\/p>\n

Templates f\u00fcr einzelne Seiten<\/strong><\/a><\/p>\n

Benutzerdefinierte Seitentypen f\u00fcr Beitr\u00e4ge<\/strong><\/a><\/p>\n

Noch mehr Optionen mit konditionalen\u00a0Tags<\/strong><\/a><\/p>\n

Funktionen eines Seiten-Templates<\/strong><\/a><\/p>\n

Themes bestimmen das Erscheinungsbild\u00a0von Websites, die mit WordPress laufen. Die Gesamtheit\u00a0der Parameter wie Farben, Schriftarten, Platzierung der\u00a0Elemente bildet ein Theme. WordPress Themes\u00a0gelten als\u00a0sehr felxibel: Jede Seite im Theme ist anpassungsf\u00e4hig. Zudem kann man eigene Templates f\u00fcr Seiten unbegrenzt erstellen und\u00a0somit jeden Bereich\u00a0der Website\u00a0ganz auf seine W\u00fcnsche\u00a0 zuschneiden.\u00a0\u00a0<\/span><\/p>\n

Das Seiten-Template<\/strong> stellt eine php-Datei dar, die\u00a0f\u00fcr die Gestaltung\u00a0 der\u00a0einzelnen Seiten verantwortlich ist. Alle php-Dateien\u00a0von\u00a0\u00a0<\/span>WordPress Themes<\/span><\/a>\u00a0liegen im Ordner \u201cThemes\u201d im Verzeichnis \u201cwp-content\u201d. Seiten-Templates lassen sich Seiten, einem Seitenbereich oder einem Seitentyp zuweisen.\u00a0Ein WordPress Theme verf\u00fcgt\u00a0standardm\u00e4\u00dfig \u00fcber vorgefertigte Seiten wie zum Beispiel \u201c\u00dcber uns\u201d-Seite, die automatisch angewendet werden.\u00a0<\/span><\/p>\n

Aber woher wei\u00df WordPress, welche Seiten-Templates\u00a0und wann zu verwenden sind? Das Geheimnis liegt in der \u00a0Template Hierarchie,<\/a>\u00a0die das CMS einsetzt, um Seiten\u00a0zu laden.<\/span><\/p>\n

Wie sind Prinzipien der Template-Hierarchie?<\/h3>\n

\"\"<\/h2>\n

Wenn ein Benutzer durch Seiten deiner WordPress-Website browst, legt die php-Datei fest, was angezeigt werden soll. Das CMS sucht nach einer notwendigen Datei\u00a0immer in einer stabilen Reihenfolge.\u00a0Diese wird als Template Hierarchie bezeichnet. Lass mich jetzt erkl\u00e4ren, wie das Ganze funktioniert. <\/span><\/p>\n

Ein Besucher m\u00f6chte einen deiner Blogbeitr\u00e4ge lesen und klickt auf den Link http:\/\/iamawesome.com\/blog\/category-best\/coolpost<\/em>. Das Erste, was WordPress \u00fcberpr\u00fcfen wird, ist, ob du f\u00fcr die angefragte Seite ein spezifisches Seiten-Template angelegt hast.\u00a0<\/span><\/p>\n

Wenn es keine festgelegte Datei gibt, sucht WordPress nach einem Kategorie-Template. Die Datei sieht so aus: category-best.php<\/em>. Dieses Template ist f\u00fcr die Darstellung \u00a0der Seiten in der ganzen Kategorie zust\u00e4ndig. Damit k\u00f6nnen auch mehrere\u00a0themenbezogene Beitr\u00e4ge ein anderes Bild bekommen. Wenn du f\u00fcr\u00a0unterschiedliche Optik jeder Kategorie nicht gesorgt hast und\u00a0die category1.php<\/em>-Datei fehlt, wird WordPress die ID einer Kategorieseite checken. Beispielsweise lautet sie 15. Dann wird WordPress nach einer category-15.php<\/em>-Datei suchen. <\/span><\/p>\n

Wenn du keine Kategorien erstellt hast,\u00a0wird WordPress ein Template f\u00fcr statische Seiten page.php<\/em>\u00a0laden. So sollten alle Seiten angezeigt werden, wenn keine \u00c4nderungen vorgenommen wurden. <\/span><\/p>\n

Wenn keine page.php<\/em>-Datei vorhanden ist, \u00a0ist das eher ein seltener Fall. Nutzt du ein vorgefertigtes Theme, wirst du dich mit diesem Problem h\u00f6chstwahrscheinlich nicht konfrontieren. Wenn das jedoch geschieht, findet WordPress die index.php<\/em>-Datei und zeigt sowieso etwas an. Denn das ist ein Basis-Template, das\u00a0zum Anzeigen einer Seite standardm\u00e4\u00dfig verwendet wird.<\/span><\/p>\n

Seiten-Templates selbst erstellen und anpassen<\/h3>\n

Nun\u00a0ben\u00f6t<\/span>ig<\/span>e<\/span>n wir<\/span> ein wenig Praxis<\/span>. Zuerst nehmen wir\u00a0PHP in Angriff: Du\u00a0<\/span>solltest eine php-Datei mit einem Texteditor deiner Wahl erstellen. Wir\u00a0tun das in\u00a0einem einfachen Windows-Notepad, aber daf\u00fcr eignen sich auch\u00a0<\/span>Notepad++, Sublime oder andere.\u00a0<\/span><\/p>\n

Header und Footer sind zwei Bereiche, die auf \u00a0jeder Website nicht fehlen d\u00fcrfen. Wenn du diese\u00a0in deinem Seiten-Template anzeigen lassen willst, dann f\u00fcge den folgenden Code-Schnipsel in die erstellte <\/span>php-Datei <\/b>ein. <\/span><\/p>\n

\n\n\n\n
\n
&lt;!--?php \/** * Template Name: Custom Page Template *\/ get_header(); ?--&gt;\n\u00a0\n&lt;!--?php get_footer(); ?--&gt;<\/pre>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n
Das sollte\u00a0folgenderweise aussehen:<\/span><\/p>\n
\"\"<\/p>\n
Speichere die \u00c4nderungen und rufe das FTP oder den Dateimanager von cPanel deiner Website auf. Lade die erstellte Datei in <\/span>wp-content-> themes-> current theme folder <\/b>\u00a0hoch. <\/span><\/p>\n
\"\"<\/p>\n
W\u00e4hle\u00a0die Datei\u00a0in diesem Ordner aus, um eine Seite zu gestalten. Gehe zu <\/span>Pages > Add new<\/b>,<\/span> f\u00fclle die Seite mit Inhalten und schau bitte nach rechts. Du siehst das Panel \u201cAttribute der Seite\u201d. Klicke auf \u201cTemplates\u201d und w\u00e4hle im Dropdown-Men\u00fc benutzerdefiniertes Template (Custom Page Template) aus.<\/span><\/p>\n
\"\"<\/p>\n
Nachdem du den Button \u201cVer\u00f6ffentlichen\u201d (\u201cPublish\u201d) gedr\u00fcckt hast, gehe zur Website und du siehst eine sehr einfache Seitenstruktur, die nur \u00fcber einen Header und Footer verf\u00fcgt. Ein wenig langweilig, nicht wahr?<\/span><\/p>\n
\"\"<\/p>\n
Deshalb schlage ich vor,\u00a0die Seite ein wenig\u00a0interessanter zu machen. Das ist sehr einfach und erfolgt durch das Kopieren und Einf\u00fcgen. Fast jedes WordPress Theme\u00a0bietet\u00a0zus\u00e4tzliche vorgefertigte Seiten.\u00a0Mein\u00a0Theme (FreeBook von TemplateMonster) hat eine Landingpage und ein benutzerdefiniertes Template ohne Header und Footer. Das Theme Twenty Twelve (eines der kostenlosen Standard-Themes f\u00fcr WordPress) hat eine vorgefertigte 404- und Archiv-Seite. Das Theme Twenty Fourteen (ein anderes kostenloses Theme) hat eine Teamseite. Also, in jedem Theme gibt es schon codierte Seitenteile, die im Ordner \u00a0<\/span>wp-content\/themes\/your_theme <\/span><\/i>gespeichert sind. Du kannst so eine Datei auf deinem Rechner herunterladen, \u00f6ffnen und in dein neues benutzerdefiniertes WordPress Seiten-Template einf\u00fcgen. Mein\u00a0Sidebar-Template sieht so aus:<\/span><\/p>\n
\"\"Ich kopiere es einfach und f\u00fcge in meine .php Datei ein. Schau mal,\u00a0die\u00a0Sidebar hat sich ge\u00e4ndert!<\/p>\n
\"\"<\/p>\n
\u00a0Seiten-Templates f\u00fcr verschiedene Zwecke<\/h3>\n
Mit der\u00a0WordPress Template Hierarchie ist es m\u00f6glich, php-Templates nicht nur f\u00fcr einzelne Seiten sondern auch f\u00fcr Seitengruppen zu erstellen. Diese Gruppen\u00a0lassen sich mit der Kategorie oder dem Typ verkn\u00fcpfen. Seiten-Templates sind ausw\u00e4hlbar oder k\u00f6nnen automatisch angewendet werden.<\/span><\/p>\n
\u00a0Benutzerdefinierte\u00a0Templates f\u00fcr jede Seite<\/h3>\n
Beispielsweise brauchst du ein php-Template,\u00a0das f\u00fcr jede Seite verf\u00fcgbar sein soll. In erster Linie sollst du hier auf den Dateinamen aufpassen. Wenn dein php-Template mit \u201cpage-\u201d beginnt, interpretiert es WordPress als spezialisiertes Template, das f\u00fcr spezifische Seiten genutzt werden soll. W\u00e4hle einen passenden Dateinamen, der dir Aufschluss \u00fcber das Seiten-Template geben w\u00fcrde. Das fertige\u00a0 Seiten-Template hast du in den Ordner <\/span>wp-content\/themes\/your_theme <\/span><\/i>mit FileZilla oder cPanel herunterzuladen. Diese Option ist im Men\u00fc des Panels \u201cPage Attributes\u201d verf\u00fcgbar, so hast du eine M\u00f6glichkeit, neue Seiten zu erstellen oder zu editieren.<\/span><\/p>\n
Templates f\u00fcr einzelne Seiten<\/h3>\n
M\u00f6chtest du, dass sich deine statischen Seiten von anderen abheben? Das w\u00e4re auch m\u00f6glich, aber es lohnt sich damit nicht zu weit gehen, damit deine Website nicht geschmacklos oder verr\u00fcckt wirkt.<\/span><\/p>\n
Erstelle ein Seiten-Template, benenne es <\/span>page-{slug}.php<\/span><\/i> or <\/span>page-{page\u2019s ID number}.php <\/span><\/i>und lade es in den aktuellen Ordner herunter.\u00a0Jetzt wird WordPress dieses Template zur Anzeige von einer einzelnen Seite \u00fcber ID oder Slug automatisch abrufen. Zum Beispiel m\u00f6chtest du eine Kontaktseite mit der ID 9 erstellen. Dann soll\u00a0der Template-Namen so lauten:\u00a0<\/span>page-contacts.php<\/span><\/i>\u00a0oder\u00a0<\/span>page-9.php.\u00a0<\/span><\/i><\/p>\n
Benutzerdefinierte Seitentypen f\u00fcr Beitr\u00e4ge<\/h3>\n
Du hast ein benutzerdefiniertes Seiten-Template erstellt und m\u00f6chtest, dass deine Beitr\u00e4ge gleich aussehen. Hier w\u00fcrde die Umbenennung nicht helfen. Du sollst eine zus\u00e4tzliche Codezeile in dein php-Template einf\u00fcgen. Gib \u201c<\/span>Template Post Type: post, page<\/span><\/i>\u201c rechts unter dem Template-Namen ein:<\/span><\/p>\n
\"\"<\/p>\n
Auf diese Weise lassen sich auch Ereignisse und andere Inhaltstypen auf deiner Website hinzuf\u00fcgen. Du sollst aber darauf achten, dass diese Methode nur f\u00fcr WordPress\u00a0 ab 4.7 gilt. \u00c4ltere Versionen werden die Zeile \u201cTemplate Post Type\u201d ignorieren.<\/span>\u00a0<\/span><\/p>\n
Noch mehr Optionen mit konditionalen\u00a0Tags<\/h3>\n
Du wei\u00dft schon, wie du neue Seiten-Templates erstellt. Was tun, wenn du lediglich einige \u00c4nderungen an bestehendem Template vornehmen willst? Es mag sein, dass etwas auf der Seite nur unter bestimmter Bedingung angezeigt werden muss.\u00a0<\/span><\/p>\n
Da kommen konditionale Tags ins Spiel. Sie werden in eine Codezeile eingef\u00fcgt, die pr\u00fcft, ob\u00a0angebene Bedingung\u00a0erf\u00fcllt ist. Bei erf\u00fcllter Bedingung l\u00e4uft der erste Teil des Codes weiter und bei nicht erf\u00fcllter wird der Teil nach \"else\" ausgef\u00fchrt:<\/span><\/p>\n
\"\"<\/p>\n
Hier ist eine Liste der konditionalen Tags, die h\u00e4ufig eingesetzt werden:<\/span><\/p>\n