German (Deutsch) translation by Katharina Grigorovich-Nevolina (you can also view the original English article)
Themen sind ein großer Teil dessen, was WordPress so beliebt macht wie es ist, und in dieser dreiteiligen Serie werden wir Sie durch einen schrittweisen Prozess führen, der zu einem vollständigen, funktionierenden WordPress-Thema führt. In Teil zwei beschäftigen wir uns mit der Codierung des Großteils unseres Themas!
Zweiter Teil
Willkommen zum zweiten Teil dieser dreiteiligen Serie über die Entwicklung eines WordPress-Themas von Grund auf neu. Das letzte Mal haben wir uns angesehen, was ein "gutes Thema" ausmacht, sowie die allgemeinen Komponenten, die erforderlich sind, damit ein Thema funktioniert. Diese Woche werden wir direkt eintauchen und unser erstes Thema erstellen.
- Entwickeln Sie Ihr erstes WordPress-Theme: Tag 1 von 3
- Entwickeln Sie Ihr erstes WordPress-Theme: Tag 2 von 3
- Entwickeln Sie Ihr erstes WordPress-Theme: Tag 3 von 3 (in Kürze)
Unser Thema
Ich möchte betonen, dass Sie, wenn Sie ein eigenes Layout haben, mit dem Sie arbeiten können, es verwenden können. Wahrscheinlich lernen Sie durch Experimentieren mehr und erhalten ein Ergebnis, das auf Ihren Geschmack zugeschnitten ist. Wenn Sie kein Layout haben, mit dem Sie arbeiten können, bieten wir Ihnen ein einfaches persönliches Layout, mit dem Sie arbeiten können.
Dieses Layout habe ich vor einiger Zeit als eines von vielen unbenutzten Designs für einen persönlichen Blog eines Freundes erstellt. In der herunterladbaren Zip-Datei, die diesem Tutorial beiliegt, finden Sie zwei Ordner. bftheme und bffiles. Im Ordner bffiles befindet sich das Layout in seinem Zustand vor WordPress, der andere Ordner enthält das fertige Thema.
Öffnen Sie das Thema in einem Browser, um eine Vorstellung davon zu bekommen, was wir vorhaben. Es sollte ungefähr so aussehen:
Aufbrechen
Es wäre zwar möglich, ein Thema mit nur einer Datei zum Laufen zu bringen, aber es ist eine sehr schlechte Praxis und nichts, was Sie in freier Wildbahn sehen werden. Es ist gut, sich an die Standard-Dateistruktur zu halten, da dies das Ändern von Designs auf der ganzen Linie erleichtert und Sie die integrierten WordPress-Funktionen verwenden können, um Dateien einfach einzuschließen (z. B. get_header ()).
Lassen Sie uns zunächst unseren Arbeitsbereich vorbereiten. Erstellen Sie im Themenverzeichnis Ihrer WordPress-Installation einen neuen Ordner namens blindfaith. Erstellen Sie in diesem Ordner die folgenden Dateien:
- index.php
- single.php
- page.php
- comments.php
- functions.php
- header.php
- footer.php
- sidebar.php
Jetzt haben wir unsere Stylesheets und Bilder sowie ein Themenskelett, in das wir sofort einsteigen werden. Zuerst müssen wir unser Thema im WordPress-Dashboard anzeigen lassen. Dazu müssen wir unsere Datei style.css ändern.
WordPress sucht automatisch nach einer Datei namens style.css in einem Themenverzeichnis, um Informationen über das Thema zu extrahieren. Fügen Sie den folgenden Code oben in style.css ein:
1 |
/*
|
2 |
Theme Name: Blind Faith
|
3 |
Theme URI: https://www.danwalker.com/
|
4 |
Description: A minimalistic, simple theme for WordPress -- supports widgets in the sidebar, all manors of post/page formatting and comes with an easy to customize stylesheet.
|
5 |
|
6 |
Author: Dan Walker
|
7 |
Version: 1.0
|
8 |
Tags: minimalistic, simple, widgets, sidebar, elegant
|
9 |
*/
|
Wenn wir jetzt WordPress überprüfen, sollte unser Thema im Teil "Themen ändern" des Dashboards angezeigt werden. Aktivieren Sie unser neues Thema und laden Sie die Startseite von WordPress. Nichts sehen? Gut. Sobald WordPress seine Magie vollbracht hat, um herauszufinden, welche Seite der Benutzer möchte, und die Ergebnisse vorbereitet hat, ruft es index.php aus unserem Themenverzeichnis auf - außer im Moment ist diese Datei leer.
Zunächst müssen wir unseren HTML-Code in seine vier jeweiligen Teile zerlegen. Kopfzeile, Text, Seitenleiste, Fußzeile. Wenn Sie die mit diesem Lernprogramm gelieferte index.html öffnen, sollte Folgendes angezeigt werden:
1 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
2 |
<html lang='en'> |
3 |
<head>
|
4 |
<title>Blind Faith</title> |
5 |
<link rel="stylesheet" href="reset.css" type="text/css"> |
6 |
<link rel="stylesheet" href="style.css" type="text/css"> |
7 |
<!--[if IE]>
|
8 |
<link rel="stylesheet" href="ie.css" type="text/css" />
|
9 |
<![endif]-->
|
10 |
</head>
|
11 |
<body class="home blog"> |
12 |
<div id="top-bar-tile"> |
13 |
<div id="top-bar-content"> |
14 |
<h1><a href="http://www.danwalker.com/themes/blindfaith">Blind Faith</a></h1> |
15 |
<span class="slogan">Just Another Theme by Dan Walker</span> |
16 |
<div id="search-box"> |
17 |
<form method="get" id="searchform" action="" > |
18 |
<input type="text" value="Search..." onfocus="if(this.value == this.defaultValue) this.value = ''" name="s" id="s" /> |
19 |
</form>
|
20 |
</div><!-- search-box --> |
21 |
</div><!-- top-bar-content --> |
22 |
</div><!-- top-bar-tile --> |
23 |
<div id="nav-bar-tile"> |
24 |
<div class="nav-bar-content"><ul><li class="current_page_item"><a href="http://www.danwalker.com/themes/blindfaith/" title="Home">Home</a></li><li class="page_item page-item-2"><a href="http://www.danwalker.com/themes/blindfaith/?page_id=2" title="About">About</a></li><li class="page_item page-item-4"><a href="http://www.danwalker.com/themes/blindfaith/?page_id=4" title="Typography">Typography</a></li></ul></div> |
25 |
</div><!-- nav-bar-tile --> |
26 |
<div id="wrapper"> |
27 |
<div id="content"> |
28 |
|
29 |
<div class="post"> |
30 |
<h1><a href="http://www.danwalker.com/themes/blindfaith/?p=1">Hello world!</a></h1> |
31 |
<div class="post-details"> |
32 |
<div class="post-details-left"> |
33 |
Posted on <strong>February 6, 2011</strong> by <span class="author">Dan</span> under <span class="author"><a href="http://www.danwalker.com/themes/blindfaith/?cat=1" title="View all posts in Uncategorized" rel="category">Uncategorized</a></span> |
34 |
</div>
|
35 |
<div class="post-details-right"> |
36 |
<span class="comment-count"><a href="http://www.danwalker.com/themes/blindfaith/?p=1#comments" title="Comment on Hello world!">1 Comment</a></span> |
37 |
</div>
|
38 |
</div>
|
39 |
|
40 |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada sem in orci ornare et porta nisi tristique. Integer sodales feugiat interdum. Nunc nec hendrerit velit. Praesent at dolor arcu. Nulla porttitor dui vel justo vehicula fringilla. Nunc condimentum justo ut nibh pharetra tempor. Morbi nulla nisl, blandit eu egestas vel, cursus eget justo. Nulla lectus ante, pellentesque tempor pretium eu, porttitor vitae mi. Nunc et dolor eget purus ultricies sollicitudin. Phasellus luctus tincidunt lobortis. Nunc ac aliquam leo. In tortor orci, auctor non condimentum ultricies, hendrerit et nunc. Nam neque est, laoreet at rhoncus vitae, porttitor at nulla. Maecenas dignissim sagittis massa non ultrices. Cras eros quam, ultrices eu iaculis eu, egestas eget justo. Vivamus diam sapien, volutpat eget luctus nec, lacinia non quam. Duis suscipit nunc eget neque congue pretium. Vestibulum non lectus ut quam tempus varius. Nunc a ligula non metus luctus molestie.</p> |
41 |
|
42 |
<p> <a href="#" class="more-link">Read More</a></p> |
43 |
|
44 |
<div class="dots"></div> |
45 |
</div><!-- post --> |
46 |
|
47 |
<div id="only-page">No newer/older posts</div> |
48 |
|
49 |
<div class="spacer"></div> |
50 |
<div class="dots"></div> |
51 |
|
52 |
<div id="footer"> |
53 |
Copyright © 2011 <a href="http://www.danwalker.com">Dan Walker</a><br /> |
54 |
Don't steal anything etc |
55 |
</div>
|
56 |
|
57 |
</div><!-- content --> |
58 |
<div id="sidebar"> |
59 |
<div class="sidebar-box"> |
60 |
<span class="sidebar-title">a bit about me</span> |
61 |
<div class="dots"></div> |
62 |
<div class="textwidget"> |
63 |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada sem in orci ornare et porta nisi tristique. Integer sodales feugiat interdum. Nunc nec hendrerit velit. Praesent at dolor arcu. Nulla porttitor dui vel justo vehicula fringilla. Nunc condimentum justo ut nibh pharetra tempor. Morbi nulla nisl, blandit eu egestas vel, cursus eget justo.</p> |
64 |
</div>
|
65 |
</div>
|
66 |
<div class="sidebar-box"> |
67 |
<span class="sidebar-title">recent posts</span><div class="dots"></div> |
68 |
<ul>
|
69 |
<li><a href="http://www.danwalker.com/themes/blindfaith/?p=1" title="Hello world!">Hello world!</a></li> |
70 |
</ul>
|
71 |
</div>
|
72 |
</div><!-- sidebar --> |
73 |
<div class="spacer"></div> |
74 |
</div><!-- wrapper --> |
75 |
</body>
|
76 |
</html>
|
Wenn wir diesen HTML-Code momentan in einen Browser laden, sehen wir das Grundlayout. Wenn wir uns dieses Layout ansehen, müssen wir zunächst entscheiden, was der Header enthalten soll. Da wir den Titel, das Suchfeld und die Navigation oben auf jeder Seite haben möchten, werden wir dies in unsere Header-Datei einfügen.
Der Hauptinhaltsbereich ist variabel, dh es kann sich um index.php, page.php usw. handeln. Die Seitenleiste enthält den gesamten Inhalt außerhalb des Inhaltsfelds rechts neben dem Layout. Die Fußzeile ist lediglich die Copyright-Meldung. Unser Thema wird wie folgt zusammengestellt:
Kopieren Sie also den Code von index.html vom Doctype bis zur Inhaltsabteilung und fügen Sie ihn in unsere Header-Datei ein. Wir sollten jetzt eine header.php-Datei haben, die so aussieht:
1 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
2 |
<html lang='en'> |
3 |
<head>
|
4 |
<title>Blind Faith</title> |
5 |
<link rel="stylesheet" href="reset.css" type="text/css"> |
6 |
<link rel="stylesheet" href="style.css" type="text/css"> |
7 |
<!--[if IE]>
|
8 |
<link rel="stylesheet" href="ie.css" type="text/css" />
|
9 |
<![endif]-->
|
10 |
</head>
|
11 |
<body class="home blog"> |
12 |
<div id="top-bar-tile"> |
13 |
<div id="top-bar-content"> |
14 |
<h1><a href="http://www.danwalker.com/themes/blindfaith">Blind Faith</a></h1> |
15 |
<span class="slogan">Just Another Theme by Dan Walker</span> |
16 |
<div id="search-box"> |
17 |
<form method="get" id="searchform" action="" > |
18 |
<input type="text" value="Search..." onfocus="if(this.value == this.defaultValue) this.value = ''" name="s" id="s" /> |
19 |
</form>
|
20 |
</div><!-- search-box --> |
21 |
</div><!-- top-bar-content --> |
22 |
</div><!-- top-bar-tile --> |
23 |
<div id="nav-bar-tile"> |
24 |
<div class="nav-bar-content"><ul><li class="current_page_item"><a href="http://www.danwalker.com/themes/blindfaith/" title="Home">Home</a></li><li class="page_item page-item-2"><a href="http://www.danwalker.com/themes/blindfaith/?page_id=2" title="About">About</a></li><li class="page_item page-item-4"><a href="http://www.danwalker.com/themes/blindfaith/?page_id=4" title="Typography">Typography</a></li></ul></div> |
25 |
</div><!-- nav-bar-tile --> |
26 |
<div id="wrapper"> |
27 |
<div id="content"> |
Im Moment überspringen wir den Inhaltsbereich, da dies der größte und komplexeste Teil ist (der aus vielen verschiedenen Dateien besteht), und gehen direkt zur Fußzeile. Normalerweise steht eine Fußzeile in einem Layout an letzter Stelle. Da die Seitenleiste in unserem Code jedoch nach der Fußzeile steht, rufen wir die Seitenleiste einfach nach der Fußzeile auf. Daher sollte footer.php den folgenden Code enthalten;
1 |
<div class="spacer"></div> |
2 |
|
3 |
<div id="footer"> |
4 |
Copyright © 2011 Blind Faith by <a href="http://www.danwalker.com">Dan Walker</a><br /> |
5 |
</div>
|
6 |
|
7 |
</div><!-- content --> |
8 |
<?php get_sidebar(); ?>
|
Sie werden feststellen, dass wir oben unsere erste WordPress-Funktion verwenden. get_sidebar ();. Diese Funktion entspricht in etwa der Anforderung ("sidebar.php"). und da wir immer die Seitenleiste nach der Fußzeile benötigen, ist es sinnvoll, die Seitenleiste am Ende in der Fußzeilendatei aufzurufen.
Schließlich müssen wir die Seitenleiste einfügen. Da die Fußzeile vor der Seitenleiste steht, ist die Seitenleiste die letzte enthaltene Datei und sollte daher auch das Design schließen (durch Schließen der verbleibenden Tags; Wrapper, Body und HTML).
1 |
<div id="sidebar"> |
2 |
<div class="sidebar-box"> |
3 |
<span class="sidebar-title">a bit about me</span> |
4 |
<div class="dots"></div> |
5 |
<div class="textwidget"> |
6 |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada sem in orci ornare et porta nisi tristique. Integer sodales feugiat interdum. Nunc nec hendrerit velit. Praesent at dolor arcu. Nulla porttitor dui vel justo vehicula fringilla. Nunc condimentum justo ut nibh pharetra tempor. Morbi nulla nisl, blandit eu egestas vel, cursus eget justo.</p> |
7 |
</div>
|
8 |
</div>
|
9 |
<div class="sidebar-box"> |
10 |
<span class="sidebar-title">recent posts</span><div class="dots"></div> |
11 |
<ul>
|
12 |
<li><a href="http://www.danwalker.com/themes/blindfaith/?p=1" title="Hello world!">Hello world!</a></li> |
13 |
</ul>
|
14 |
</div>
|
15 |
</div><!-- sidebar --> |
16 |
<div class="spacer"></div> |
17 |
</div><!-- wrapper --> |
18 |
</body>
|
19 |
</html>
|
Öffnen Sie zunächst index.php und geben Sie Folgendes ein:
1 |
<?php get_header(); ?>
|
2 |
|
3 |
<?php get_footer(); ?>
|
Wenn wir zu unserer Installation von WordPress navigieren, sollten wir so etwas bekommen
Im Moment scheint der Inhalt der Website (oder was wir bisher gemacht haben) geladen zu werden, die Stylesheets jedoch nicht. Dies liegt daran, dass in unserer Header-Datei die Aufrufe der Stylesheets jetzt einen Pfad verwenden, der nicht vorhanden ist. Sie befinden sich jetzt in/wp-content/theme/blindfaith /, aber es gibt eine einfachere Möglichkeit, diese überall dort einzufügen, wo sie benötigt wird - eine dynamischere.
Die Funktion bloginfo()
WordPress verfügt über eine integrierte Funktion namens bloginfo(), mit der Sie alle möglichen nützlichen lokalen Informationen abrufen können, z. Blogname, Beschreibung, Stylesheet-URL, Stylesheet-Verzeichnis und mehr. Weitere Informationen darüber, was wir mit bloginfo erhalten können, finden Sie auf dieser Seite im WordPress-Codex.
Öffnen wir unsere Header-Datei und ändern einige Dinge, um die dynamischen Informationen von WordPress anstelle der statischen Informationen im Thema zu verwenden. Unsere aktuelle Datei header.php sieht bis zum Tag nav-bar-tile so aus:
1 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
2 |
<html lang='en'> |
3 |
<head>
|
4 |
<title>Blind Faith</title> |
5 |
<link rel="stylesheet" href="reset.css" type="text/css"> |
6 |
<link rel="stylesheet" href="style.css" type="text/css"> |
7 |
<!--[if IE]>
|
8 |
<link rel="stylesheet" href="ie.css" type="text/css" />
|
9 |
<![endif]-->
|
10 |
</head>
|
11 |
<body class="home blog"> |
12 |
<div id="top-bar-tile"> |
13 |
<div id="top-bar-content"> |
14 |
<h1><a href="http://www.danwalker.com/themes/blindfaith">Blind Faith</a></h1> |
15 |
<span class="slogan">Just Another Theme by Dan Walker</span> |
16 |
<div id="search-box"> |
17 |
<form method="get" id="searchform" action="" > |
18 |
<input type="text" value="Search..." onfocus="if(this.value == this.defaultValue) this.value = ''" name="s" id="s" /> |
19 |
</form>
|
20 |
</div><!-- search-box --> |
21 |
</div><!-- top-bar-content --> |
22 |
</div><!-- top-bar-tile --> |
Lassen Sie uns zunächst die fehlenden Stylesheets beheben. Wir werden zwei Werte aus bloginfo verwenden. stylesheet_directory und stylesheet_url. Der URL-Wert ist ein direkter Link zu style.css, während das Verzeichnis das Verzeichnis listet, in dem sich style.css befindet. Es ist wichtig zu beachten, dass WordPress-Funktionen wie diese keinen abschließenden Schrägstrich an Werte anhängen.
Ersetzen Sie die Stylesheet-Zeilen durch die folgenden;
1 |
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/reset.css" type="text/css"> |
2 |
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css"> |
3 |
<!--[if IE]>
|
4 |
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/ie.css" type="text/css" />
|
5 |
<![endif]-->
|
Unser Thema hat jetzt richtig verknüpfte Stylesheets. Als nächstes ändern wir, während wir uns in der Header-Datei befinden, den Blog-Titel, den Slogan und den Link.
Das <title >-Tag verfügt nicht nur über die bloginfo-Eigenschaft, die den Namen des Blogs darstellt. Sie können auch eine weitere Funktion hinzufügen. wp_title(). Diese Funktion gibt den Titel der Seite oder des Beitrags zurück, der gerade angezeigt wird, vorangestellt mit ». Um das »vor dem Seitennamen auszuschalten, ändern Sie einfach die Klammern von wp_title() in wp_title (“”, true).
1 |
<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title> |
Das wird etwas in der Art von produzieren;
1 |
Local Test Blog >> Hello World |
Jetzt können wir einfach den Logo-/Titeltext, den Slogan und die URL mithilfe der folgenden Eigenschaften von bloginfo() ändern.
1 |
<h1><a href="<!--?php bloginfo('url'); ?-->"><?php bloginfo('name'); ?></a></h1> |
2 |
<span class="slogan"><?php bloginfo('description'); ?></span> |
Unsere Seite sollte jetzt ungefähr so aussehen.
Jetzt schauen wir uns die Datei index.php an. Dies ist die Datei, die standardmäßig aufgerufen wird und in der Lage sein sollte, Listen mit Beiträgen für die Startseite, Kategorien, Archive und Suchergebnisse anzuzeigen - oder eine Fehlermeldung, falls keine vorhanden ist. Offensichtlich kann jede dieser verschiedenen Listen eine variable Anzahl von Posts enthalten. Wir können damit arbeiten, indem wir etwas in WordPress verwenden, das als "Die Schleife" bekannt ist.
Die Schleife
WordPress findet heraus, welche Beiträge angezeigt werden sollen, bevor die Indexdatei ausgeführt wird. Schließlich erstellen wir ein Thema, und das Thema kommt als letztes, da es lediglich eine Möglichkeit ist, die Ausgabe anzuzeigen. Mit einigen integrierten Funktionen können wir vermeiden, dass komplexe PHP-Schleifen mit ständigen Überprüfungen auf gültige Daten durchgeführt werden müssen. Dieser Aspekt der Entwicklung von WordPress-Designs erleichtert den Vorgang erheblich und verursacht weniger Kopfschmerzen.
Schauen wir uns zunächst unsere Poststruktur an.
1 |
<div class="post"> |
2 |
<h1><a href="http://www.danwalker.com/themes/blindfaith/?p=1">Hello world!</a></h1> |
3 |
<div class="post-details"> |
4 |
<div class="post-details-left"> |
5 |
Posted on <strong>February 6, 2011</strong> by <span class="author">Dan</span> under <span class="author"><a href="http://www.danwalker.com/themes/blindfaith/?cat=1" title="View all posts in Uncategorized" rel="category">Uncategorized</a></span> |
6 |
</div>
|
7 |
<div class="post-details-right"> |
8 |
<span class="comment-count"><a href="http://www.danwalker.com/themes/blindfaith/?p=1#comments" title="Comment on Hello world!">1 Comment</a></span> |
9 |
</div>
|
10 |
</div>
|
11 |
|
12 |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada sem in orci ornare et porta nisi tristique. Integer sodales feugiat interdum. Nunc nec hendrerit velit. Praesent at dolor arcu. Nulla porttitor dui vel justo vehicula fringilla. Nunc condimentum justo ut nibh pharetra tempor. Morbi nulla nisl, blandit eu egestas vel, cursus eget justo. Nulla lectus ante, pellentesque tempor pretium eu, porttitor vitae mi. Nunc et dolor eget purus ultricies sollicitudin. Phasellus luctus tincidunt lobortis. Nunc ac aliquam leo. In tortor orci, auctor non condimentum ultricies, hendrerit et nunc. Nam neque est, laoreet at rhoncus vitae, porttitor at nulla. Maecenas dignissim sagittis massa non ultrices. Cras eros quam, ultrices eu iaculis eu, egestas eget justo. Vivamus diam sapien, volutpat eget luctus nec, lacinia non quam. Duis suscipit nunc eget neque congue pretium. Vestibulum non lectus ut quam tempus varius. Nunc a ligula non metus luctus molestie.</p> |
13 |
|
14 |
<p> <a href="#" class="more-link">Read More</a></p> |
15 |
|
16 |
<div class="dots"></div> |
17 |
</div><!-- post --> |
Da wir wissen, wie die Struktur eines Posts aussieht und wir eine Kopie mit Dummy-Informationen haben, können wir die Dummy-Informationen durch einige Funktionen ersetzen, die tatsächliche Post-Werte zurückgeben. Es gibt verschiedene Informationen, die wir mit jedem Beitrag anzeigen können, wie z. B.
- the_title
- the_tags
- the_ID
- the_category
- the_date
- the_content
- viele weitere (die Sie unter http://codex.wordpress.org/Template_Tags#Post_tags finden)
Wenn eine dieser Funktionen innerhalb der Schleife aufgerufen wird, zeigen sie die richtigen Informationen für den aktuellen Beitrag an, der durchlaufen wird.
Versuchen Sie über den obigen Link (oder nur die vor dem Link bereitgestellten Funktionen), den Dummy-Inhalt selbst durch die richtigen Ersetzungsfunktionen zu ersetzen, bevor Sie fortfahren.
Der richtige Code sollte so aussehen.
1 |
<div class="post"> |
2 |
<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1> |
3 |
<div class="post-details"> |
4 |
<div class="post-details-left"> |
5 |
Posted on <strong><?php the_date(); ?></strong> by <span class="author"><?php the_author(); ?></span> under <span class="author"><?php the_category(', '); ?></span> |
6 |
</div>
|
7 |
<div class="post-details-right"> |
8 |
<?php edit_post_link('Edit', '<span class="comment-count"> ' , '</span>'); ?><span class="comment-count"><?php comments_popup_link('Leave a comment', '1 Comment', '% Comments'); ?></span> |
9 |
</div>
|
10 |
</div>
|
11 |
|
12 |
<?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
|
13 |
<?php the_excerpt(); ?>
|
14 |
<?php else : ?>
|
15 |
<?php the_content('Read More'); ?>
|
16 |
<?php endif; ?>
|
17 |
|
18 |
<div class="dots"></div> |
19 |
</div><!-- post --> |
Es gibt einige Dinge, die Sie möglicherweise nicht konnten. Schauen wir sie uns an.
Erstens druckt WordPress beim Anzeigen von Kategorien gerne einen Standardstil mithilfe einer Liste. Um dies zu überschreiben, können wir unser eigenes Trennzeichen bereitstellen, das in unserem Fall einfach ein Komma und ein Leerzeichen ist.
1 |
<?php the_category(', '); ? |
Als nächstes können wir zum Anzeigen eines Bearbeitungslinks, gefolgt von der Anzahl der Kommentare in einem Beitrag, eine Funktion verwenden, die den Link erstellt und drei verschiedene Status für ausgibt. Keine Kommentare, Einzelkommentare und Mehrfachkommentare (wobei das Prozentzeichen der Platzhalter für die Anzahl der Kommentare ist).
1 |
<?php comments_popup_link('Leave a comment', '1 Comment', '% Comments'); ?>
|
Schließlich haben wir eine einfache if-Anweisung, um zu entscheiden, welche Art von Inhalt angezeigt werden soll. Wenn wir the_excerpt() verwenden, wird nur ein Auszug des Inhalts angezeigt. Wenn wir the_content() verwenden, wird der gesamte Inhalt angezeigt (oder bis ein <--more--> im Inhalt erscheint). Auf einer Such- oder Archivseite ist es nicht wichtig, den vollständigen Artikel anzuzeigen - gerade genug, um das Wesentliche zu ermitteln -, daher verwenden wir the_excerpt().
Damit dieser Code funktioniert, müssen wir ihn mit Posts versorgen, und dazu müssen wir ihn in die Schleife einfügen. Unsere index.php-Datei sollte derzeit so aussehen.
1 |
<?php get_header(); ?>
|
2 |
|
3 |
<div class="post"> |
4 |
<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1> |
5 |
<div class="post-details"> |
6 |
<div class="post-details-left"> |
7 |
Posted on <strong><?php the_date(); ?></strong> by <span class="author"><?php the_author(); ?></span> under <span class="author"><?php the_category(', '); ?></span> |
8 |
</div>
|
9 |
<div class="post-details-right"> |
10 |
<?php edit_post_link('Edit', '<span class="comment-count"> ' , '</span>'); ?><span class="comment-count"><?php comments_popup_link('Leave a comment', '1 Comment', '% Comments'); ?></span> |
11 |
</div>
|
12 |
</div>
|
13 |
</div>
|
14 |
|
15 |
<?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
|
16 |
<?php the_excerpt(); ?>
|
17 |
<?php else : ?>
|
18 |
<?php the_content('Read More'); ?>
|
19 |
<?php endif; ?>
|
20 |
|
21 |
<div class="dots"></div> |
22 |
</div><!-- post --> |
23 |
|
24 |
<?php get_footer(); ?>
|
Fügen Sie diesen Code nach der Header-Funktion ein.
1 |
<?php if ( ! have_posts() ) : ?>
|
2 |
<h1>Not Found</h1> |
3 |
<p>Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post</p> |
4 |
<?php endif; ?>
|
5 |
|
6 |
<?php while ( have_posts() ) : the_post(); ?>
|
und dieser kurz vor der Fußzeilenfunktion;
1 |
<?php endwhile; ?>
|
Das Laden des WordPress-Blogs sollte jetzt ungefähr so aussehen.
Jetzt zeigt unser Thema eine Liste der WordPress-Beiträge an, je nachdem, wie viele angezeigt werden sollen (geändert unter den allgemeinen Einstellungen im Dashboard). Aber was ist, wenn es mehr Beiträge gibt? Was ist, wenn der Blog 6 Beiträge enthält, aber nur 5 anzeigt? Um dem entgegenzuwirken, müssen wir einfache nächste/vorherige oder neue/alte Links hinzufügen.
Natürlich macht es keinen Sinn, diese Links anzuzeigen, wenn es keine neueren oder älteren Beiträge gibt, zu denen man springen kann, da das irreführend ist. Daher verwenden wir nach der Schleife den folgenden Code.
1 |
<?php if ( $wp_query->max_num_pages > 1 ) : ?>
|
2 |
<div id="older-posts"><?php next_posts_link('Older Posts'); ?></div> |
3 |
<div id="newer-posts"><?php previous_posts_link('Newer Posts'); ?></div> |
4 |
<?php else: ?>
|
5 |
<div id="only-page">No newer/older posts</div> |
6 |
<?php endif; ?>
|
Der next_posts_link() und der vorherige_posts_link() werden nur angezeigt, wenn sie benötigt werden, wobei der im ersten Parameter angegebene Text verwendet wird. Natürlich ist es möglich, die if-Anweisung zu entfernen und nur die folgenden zwei Zeilen zu verwenden.
1 |
<div id="older-posts"><?php next_posts_link('Older Posts'); ?></div> |
2 |
<div id="newer-posts"><?php previous_posts_link('Newer Posts'); ?></div> |
Mit der obigen if-Anweisung haben wir jedoch die Möglichkeit, eine Nachricht anzuzeigen, wenn keine Seiten zum Überspringen vorhanden sind, was die Dinge für den Benutzer weniger verwirrend machen kann (was immer gut ist).
Unsere fertige index.php-Datei sollte folgendermaßen aussehen.
1 |
<?php get_header(); ?>
|
2 |
|
3 |
<?php /* If there are no posts to display, such as an empty archive page */ ?>
|
4 |
<?php if ( ! have_posts() ) : ?>
|
5 |
<h1>Not Found</h1> |
6 |
<p>Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post</p> |
7 |
<?php endif; ?>
|
8 |
|
9 |
<?php while ( have_posts() ) : the_post(); ?>
|
10 |
|
11 |
<div class="post"> |
12 |
<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1> |
13 |
<div class="post-details"> |
14 |
<div class="post-details-left"> |
15 |
Posted on <strong><?php the_date(); ?></strong> by <span class="author"><?php the_author(); ?></span> under <span class="author"><?php the_category(', '); ?></span> |
16 |
</div>
|
17 |
<div class="post-details-right"> |
18 |
<?php edit_post_link('Edit', '<span class="comment-count"> ' , '</span>'); ?><span class="comment-count"><?php comments_popup_link('Leave a comment', '1 Comment', '% Comments'); ?></span> |
19 |
</div>
|
20 |
</div>
|
21 |
|
22 |
<?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
|
23 |
<?php the_excerpt(); ?>
|
24 |
<?php else : ?>
|
25 |
<?php the_content('Read More'); ?>
|
26 |
<?php endif; ?>
|
27 |
|
28 |
<div class="dots"></div> |
29 |
</div><!-- post --> |
30 |
|
31 |
<?php endwhile; ?>
|
32 |
|
33 |
<?php if ( $wp_query->max_num_pages > 1 ) : ?>
|
34 |
<div id="older-posts"><?php next_posts_link('Older Posts'); ?></div> |
35 |
<div id="newer-posts"><?php previous_posts_link('Newer Posts'); ?></div> |
36 |
<?php else: ?>
|
37 |
<div id="only-page">No newer/older posts</div> |
38 |
<?php endif; ?>
|
39 |
|
40 |
<div class="spacer"></div> |
41 |
<?php get_footer(); ?>
|
Einzelne Beiträge
Wir haben jetzt einen Arbeitsindex, aber jetzt brauchen wir eine Möglichkeit, einzelne Beiträge anzuzeigen. Aufgrund der Einfachheit unseres Designs sind unsere single.php-Datei und index.php nahezu identisch. Der Unterschied besteht darin, dass wir keine einzelnen/vorherigen Links in single.php benötigen, aber Kommentare benötigen. Der Code für single.php lautet wie folgt;
1 |
<?php get_header(); ?>
|
2 |
|
3 |
<?php /* If there are no posts to display, such as an empty archive page */ ?>
|
4 |
<?php if ( ! have_posts() ) : ?>
|
5 |
<h1>Not Found</h1> |
6 |
<p>Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post</p> |
7 |
<?php endif; ?>
|
8 |
|
9 |
<?php while ( have_posts() ) : the_post(); ?>
|
10 |
|
11 |
<div class="post"> |
12 |
<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1> |
13 |
<div class="post-details"> |
14 |
<div class="post-details-left"> |
15 |
Posted on <strong><?php the_date(); ?></strong> by <span class="author"><?php the_author(); ?></span> under <span class="author"><?php the_category(', '); ?></span> |
16 |
</div>
|
17 |
<div class="post-details-right"> |
18 |
<?php edit_post_link('Edit', '<span class="comment-count"> ' , '</span>'); ?><span class="comment-count"><?php comments_popup_link('Leave a comment', '1 Comment', '% Comments'); ?></span> |
19 |
</div>
|
20 |
</div>
|
21 |
|
22 |
<?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
|
23 |
<?php the_excerpt(); ?>
|
24 |
<?php else : ?>
|
25 |
<?php the_content('Read More'); ?>
|
26 |
<?php endif; ?>
|
27 |
|
28 |
<div class="dots"></div> |
29 |
</div><!-- post --> |
30 |
|
31 |
<div class="spacer"></div> |
32 |
|
33 |
<?php comments_template( '', true ); ?>
|
34 |
|
35 |
<?php endwhile; ?>
|
36 |
|
37 |
<div class="spacer"></div> |
38 |
<?php get_footer(); ?>
|
Wie Sie sehen können, hat sich nur am Ende der Datei viel geändert. Wir haben einfach den Code für die Links entfernt und eine neue Funktion namens comment_template () hinzugefügt. Die Parameter für diese Funktion sind einfach die zu ladende Datei (comment.php, wenn leer oder standardmäßig) und ob Kommentare nach Typ sortiert werden sollen (standardmäßig false).
Wie Sie wahrscheinlich erraten haben, ist die Datei, die Kommentare verarbeitet, comment.php - sie wird in einer separaten Datei gespeichert, sodass wir sie sowohl für single.php als auch für page.php verwenden können.
Seite
Die Datei zum Anzeigen einer Seite ist fast identisch mit der einzelnen Beitragsdatei, mit der Ausnahme, dass Informationen zum Zeitpunkt des Beitrags, zum Autor usw. entfernt werden. Das bedeutet, dass die Auslagerungsdatei so aussieht.
1 |
<?php get_header(); ?>
|
2 |
|
3 |
<?php /* If there are no posts to display, such as an empty archive page */ ?>
|
4 |
<?php if ( ! have_posts() ) : ?>
|
5 |
<h1>Not Found</h1> |
6 |
<p>Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post</p> |
7 |
<?php endif; ?>
|
8 |
|
9 |
<?php while ( have_posts() ) : the_post(); ?>
|
10 |
|
11 |
<div class="post"> |
12 |
<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1> |
13 |
|
14 |
<?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
|
15 |
<?php the_excerpt(); ?>
|
16 |
<?php else : ?>
|
17 |
<?php the_content('Read More'); ?>
|
18 |
<?php endif; ?>
|
19 |
|
20 |
<div class="dots"></div> |
21 |
</div><!-- post --> |
22 |
|
23 |
<div class="spacer"></div> |
24 |
|
25 |
<?php comments_template( '', true ); ?>
|
26 |
|
27 |
<?php endwhile; ?>
|
28 |
|
29 |
<div class="spacer"></div> |
30 |
<?php get_footer(); ?>
|
Navigation
Der letzte Teil, den wir heute hinzufügen werden, ist die Navigation nach oben (weil es so einfach ist)! Öffnen Sie header.php und ersetzen Sie die Nav-Bar-Tile-Abteilung durch diese;
1 |
<div id="nav-bar-tile"> |
2 |
<?php wp_nav_menu(array( 'menu' => 'mainnav', 'menu_class' => 'nav-bar-content', 'menu_id' => 'navigation', 'container' => false, 'theme_location' => 'primary-menu', 'show_home' => '1')); ?>
|
3 |
</div><!-- nav-bar-tile --> |
Die Funktion wp_nav_menu spuckt eine Liste von Seiten aus, akzeptiert jedoch auch Argumente in Form eines Arrays. Die Argumente, die wir der Reihe nach geliefert haben, sind:
- menu - Das gewünschte Menü
- menu_class - Die zu verwendende CSS-Klasse
- menu_id - Die UL-Element-ID
- container - Gibt an, ob die Liste umbrochen werden soll oder nicht
- theme_location - Die Position des Menüs innerhalb des Themas (für mehrere Menüs)
- show_home - Gibt an, ob ein 'Home'-Link angezeigt werden soll
Das von uns verwendete CSS ist so codiert, dass es sich an die Art und Weise anpasst, wie WordPress eine Navigationsliste ausspuckt. Es ist wichtig zu berücksichtigen, wie eine Liste beim Codieren eines Designs von WordPress im Code ausgegeben wird.
Unsere WordPress-Installation sollte jetzt so aussehen.
Nächstes Mal...
Das nächste Mal werden wir eine funktionale Seitenleiste hinzufügen, die Widget-fähig ist, dynamische Beitragstypen, benutzerdefinierte Felder und die letzten Elemente des Themas zusammenfasst!
Wenn Sie sich in diesem Beitrag nicht sicher sind oder nur Fragen haben, können Sie unten einen Kommentar hinterlassen. Für diejenigen, die Fragen haben oder einfach nur mehr wissen möchten, ist der WordPress-Codex eine Goldmine an Informationen für alle Funktionen und so weiter, die WordPress verwendet.
