In dieser sechsteiligen Einsteiger-zu-Master-Serie werden wir die erweiterten Funktionen von WordPress verwenden, um ein eigenes Portfolio und einen eigenen Blog zu erstellen, der eine Optionsseite, mehrere Stile und Unterstützung für die neuen Funktionen von WordPress 2.7 enthält. Heute beschäftigen wir uns mit den Kommentaren, der Suche und dem Archiv.
In diesem Teil geht es hauptsächlich darum, die zusätzlichen Teile zu reparieren, zu denen wir noch nicht gekommen sind. Im ersten Abschnitt erstellen wir die Kommentarvorlage - mit Unterstützung für die neuen Funktionen in WP 2.7, aber auch für ältere Versionen.
Im zweiten Abschnitt erstellen wir die Archiv- und Suchvorlagen.
In WordPress 2.7 wurden einige neue Funktionen für den Kommentarbereich eingeführt Kommentare, Kommentare zu Seiten, abwechselnde Stile und optimierten Code. Diese Funktionen funktionieren jedoch in älteren WordPress-Versionen nicht richtig. Um dies zu bekämpfen, verwenden wir einen WordPress-Filter, so dass ältere Versionen eine Kommentardatei und neuere Versionen eine andere verwenden.
Fügen Sie den folgenden Code am Ende von hinzu Functions.php
:
// Bei Verwendung von 2.6 oder darunter Legacy-Kommentare verwenden display add_filter ('comments_template', 'legacy_comments'); Funktion legacy_comments ($ file) if (! function_exists ('wp_list_comments')) $ file = TEMPLATEPATH. '/comments.legacy.php'; $ file zurückgeben;
Das wp_list_comments ()
Funktion ist eine neue Ergänzung zu WordPress 2.7; Wir prüfen also, ob es existiert function_exists ()
PHP-Funktion. Wenn dies nicht der Fall ist, wird ein WordPress-Filter hinzugefügt, der zu der Weiterleitung führt comments.legacy.php
Datei, wenn die Kommentarvorlage angefordert wird.
Alle neueren WordPress-Versionen werden somit weiterhin verwendet comments.php
(da sie die enthalten wp_list_comments ()
Funktion.)
Erstellen Sie eine neue Datei mit dem Namen comments.php
. Beginnen Sie mit:
Wenn dem aktuellen Beitrag Kommentare zugewiesen wurden, wird die Anzahl der Kommentare mithilfe von in ein Titel-Tag ausgegeben comments_number ()
Funktion. Die Kommentare werden dann in einer geordneten Liste mit der neuen angezeigt wp_list_comments ()
Funktion.
Jeder Kommentar wird mit einer integrierten Vorlage angezeigt, die auf verschiedene Weise einfach zu gestalten ist. Wenn Sie jedoch mehr Kontrolle über das Aussehen jedes Kommentars benötigen, lesen Sie diese Seite im WordPress-Codex.
Die Kommentarnavigation-Tags sind ebenfalls neu in Version 2.7 und ermöglichen eine "Paginierung" zwischen einer festgelegten Anzahl von Kommentaren (genau wie bei Blog-Posts)..
Im nächsten Code wird eine Nachricht angezeigt, wenn Kommentare für den Beitrag geschlossen sind:
comment_status): // Wenn Kommentare geöffnet sind, aber keine Kommentare vorhanden sind. sonst: echo "Kommentare sind für diesen Beitrag geschlossen.
"; endif; endif;?>
Die nächste Aufgabe besteht darin, das eigentliche Kommentarformular anzuzeigen:
comment_status):?>Sie müssen /wp-login.php?redirect_to= sein"> angemeldet um einen Kommentar zu schreiben.
Wenn Kommentare als geöffnet angezeigt werden, wird der Titel "Hinterlassen Sie eine Antwort" angezeigt
comment_form_title ()
Funktion. Wenn der Benutzer auf einen Kommentar antwortet, wird der% s
in 'Hinterlasse eine Antwort zu% s' wird durch den Autorennamen des Kommentars ersetzt, auf den sie antworten.
Ein Link zum Abbrechen der Antwort wird auch angezeigt, wenn dies eine Antwort mit istcancel_comment_reply_link ()
.
Wenn nur angemeldete Benutzer einen Kommentar abgeben können (und der Benutzer nicht angemeldet ist), wird eine Fehlermeldung angezeigt, die auf die Anmeldeseite verweist.Wenn keine Registrierung erforderlich ist (oder wenn der Benutzer angemeldet ist):
comment_id_fields ()
gibt die ID des aktuellen Beitrags in einem ausgeblendeten Feld aus. In WP 2.6- mussten Sie dies manuell vornehmen, aber jetzt müssen Sie diese Funktion verwenden.
Gehen Sie im Dashboard zu Einstellungen -> Diskussion und markieren Sie die Optionen "Threaded-Kommentare aktivieren" und "Kommentare in Seiten aufteilen". Dann können Sie eine Vorschau der Kommentarvorlage anzeigen, indem Sie einen beliebigen Blogbeitrag aufrufen:
Hinzufügen style.css
:
/ * Kommentare * / h4 # comments clear: both; Marge: 45px 0 5px 0; .com-Liste li font-size: erben; .com-Liste li .avatar float: right; .com-Liste zitieren font-weight: fett; font-style: normal; Schriftgröße: 0,95 em; .com-Liste p font-size: 0.8em; Schriftgewicht: normal; Zeilenhöhe: 1.5em; Marge: 10px 5px 10px 0; Text-Transformation: keine; .commentmetadata display: block; Schriftgröße: 0.8em; Schriftgewicht: normal; Zeilenhöhe: 1.1em; Marge: 0; .commentlist .reply font-size: 0.8em; Schriftdicke: fett; .commentlist margin: 0 0 20px 0; .com-Liste li margin: 15px 0 10px; Polsterung: 10px; Listenstil: keine; .commentlist li ul li margin-right: -5px; Rand links: 10px; .comms-navigation, .navigation clear: both; Bildschirmsperre; Rand unten: 20px; Überlauf versteckt; .children padding: 0; .nocomments text-align: center; Marge: 0; Polsterung: 0; / * Kommentarformular * / #respond h4 clear: both; Marge: 45px 0 10px 0; form p padding-bottom: 10px; Marge: 5px 0; form p label Anzeige: Inline-Block; Rand rechts: 10px; Textausrichtung: rechts; Breite: 5em; form p label [für = "Kommentar"] vertical-align: top; input, textarea padding: 3px; textarea font-family: Arial, Helvetica, serifenlos; Schriftgröße: 0.9em; Überlauf: Auto; input # submit padding: 5px 3px;
Und das Folgende in deepblue.css
:
/ * Kommentarliste * / .commentlist li .avatar border: 2px solid # f2e9ea; .com-Liste zitieren a: link, .com-Liste zitieren a: besucht color: # 333; .commentlist .commentmetadata a: link: first-child, .commentlist .commentmetadata a: besucht: first-child color: # 333; .thread-alt Hintergrundfarbe: # F6F6EC; .thread-even Hintergrundfarbe: # F9F9F3; .depth-1 border: 1px fest # E8E3C8; .even, .alt border-left: 1px solid # E8E3C8; Eingabe, Textbereich Hintergrundfarbe: # F6F6EC; Grenze: 1px fest # E8E3C8; input: focus, textarea: focus border: 1px fest # dad4b6;
Beachten Sie, dass 2.7 automatisch spezielle Klassennamen wie hinzufügt alt
, sogar
, Kinder
, bypostauthor
, Thread-Alt
, fadengleich
usw., wenn nötig, um jedem Kommentar eine andere Farbe zu geben, um die Lesbarkeit in langen Threads zu erhöhen. Weitere Informationen hierzu finden Sie im WordPress-Codex.
Innerhalb header.php
, direkt vor einfügen:
Dadurch wird eine integrierte Javascript-Datei geladen, die das Kommentarformular "verschieben" kann, wenn Sie auf einen Antwort-Link klicken. Daher muss die Seite nicht erneut geladen werden:
Klicken Sie auf "Antworten" und das Formular wird an Ihre aktuelle Position verschoben:
Ich werde diesen Code nicht erklären, da er veraltet ist und nur für die wenigen Leute gilt, die WP 2.7 nicht verwenden. Aber ich habe ein hinzugefügt $ counter
So können abwechselnde Kommentare wie in 2.7 anders gestaltet werden.
Erstellen Sie eine neue Datei mit dem Namen comments.legacy.php
und in den folgenden Code kopieren. Wenn Sie WP 2.6 verwenden, entspricht das Layout genau dem in 2.7, wenn die Thread-Kommentare deaktiviert sind.
post_password)) // Wenn es ein Passwort gibt, wenn ($ _COOKIE ['wp-postpass_'. COOKIEHASH]! = $ post-> post_password) // und es passt nicht zum Cookie?>Dieser Beitrag ist passwortgeschützt. Geben Sie das Passwort ein, um die Kommentare anzuzeigen.
comment_status):?>
sagt:#Kommentar-">comment_approved == '0'): echo 'Ihr Beitrag wartet auf die Moderation.'; endif; ?>Kommentarfunktion ist geschlossen.
comment_status):?>Hinterlasse eine Antwort
Sie müssen /wp-login.php?redirect_to= sein"> angemeldet um einen Kommentar zu schreiben.
Laden Sie die Quelldateien für diesen Beitrag herunter, wenn Sie möchten, dass diese Datei richtig angeordnet und formatiert ist, um die Bearbeitung zu erleichtern.
Hinweis: Wenn Sie mehr über die alte Kommentarschleife erfahren möchten, besuchen Sie "Die Geheimnisse der WordPress-Datei" Comments.php-Datei "von Gilles Maes.
Das Archiv.php
Die Vorlage wird verwendet, um ein beliebiges Archiv für das Blog anzuzeigen - z. Kategorien, Monate, Tags etc.
Erstellen Sie eine neue Datei mit dem Namen Archiv.php
und fange mit dem folgenden an:
'; ?>
Wie Sie sehen, wird die Seite bei einem Archiv für die Portfolio-Kategorie geladen page-portfolio.php
Vorlage. Ausfahrt;
Stellt sicher, dass nach dieser Zeile kein Code mehr ausgeführt wird, wenn die Portfolio-Vorlage verwendet wird.
Nächster:
Archiv für die' Kategorie
Mit Tags gekennzeichnete Beiträge’
Archiv für
Archiv für
Archiv für
Autoren-Archiv
Blog Archiv
In jedem Abschnitt wird ein anderer Titel angezeigt, je nachdem, wozu das Archiv dient. Wenn es sich beispielsweise um ein Archiv für die Kategorie "Allgemein" handelt, würde der Titel "Archiv für die Kategorie" Allgemein "lauten. oder ein monatliches Archiv für Januar 2009 wäre "Archiv für Januar 2008".
In der letzten Zeile ist die Schleife geöffnet.
Nächster:
"title =" Weiterlesen """>
- #kommentare ">
Der obige Code ist der normale Code für einen Blogeintrag (wie wir ihn auf der Blogseite mehrfach verwendet haben, einzelne Seiten usw.). In der letzten Zeile ist die Schleife geschlossen.
Wenn das Archiv nicht existiert:# Archiv existiert nicht: else: get_header (); ?>Nicht gefunden
Ein einfacher "Nicht gefunden" -Header wird angezeigt
searchform.php
Datei ist enthalten (die wir als Nächstes erstellen). Sie sollten wahrscheinlich weitere Informationen auf dieser Seite angeben, um sie benutzerfreundlicher zu gestalten.Fügen Sie schließlich die Seitenumbrüche, die Seitenleiste und die Fußzeile hinzu:
Probieren Sie Ihre Archivseite jetzt aus, indem Sie auf einen der Links in einem Kategorie / Archiv / Tags-Widget klicken. Wenn Sie jedoch zu einem Archiv gehen, das nicht vorhanden ist (z. B. eine Kategorie-ID, die nicht vorhanden ist), werden Sie mit der folgenden Fehlerseite begrüßt, da die
searchform.php
Datei existiert nicht.
Suchformular
Diese Datei könnte wirklich nicht einfacher sein - nur ein Suchformular. Fügen Sie der neuen Datei den folgenden Namen hinzu
searchform.php
:Gehen Sie erneut zu einem nicht vorhandenen Archiv, und das Suchformular wird angezeigt. Es verwendet dasselbe Styling wie das Suchformular der Seitenleiste, sodass kein zusätzliches Styling erforderlich ist.
Suchergebnisseite
Die endgültige erforderliche Vorlagendatei ist
search.php
welche die Ergebnisse einer Suche anzeigt. Meist handelt es sich hierbei um eine gewöhnliche Schleife. Da Portfolio-Elemente jedoch in den Ergebnissen angezeigt werden können, müssen sie anders dargestellt werden als Blogbeiträge.
Erstellen Sie die
search.php
Datei und fange mit dem folgenden an:Suchergebnisse
Die Schleife wird geöffnet und ist dann eine
ob
Anweisung zum Anzeigen eines Portfolioelements:ID, "Vorschau", wahr); $ date = get_post_meta ($ post-> ID, 'date', true); $ client = get_post_meta ($ post-> ID, 'client', true); $ link = get_post_meta ($ post-> ID, 'link', true); ?>">"> ($ date)";?>
Wenn der abgerufene Beitrag aus der Portfolio-Kategorie stammt, wird der Beitrag mit dem obigen Layout angezeigt, damit er wie die Portfolioelemente angezeigt wird. Andernfalls…
"title =" Weiterlesen """>
- #kommentare ">
Es wird das normale Layout eines Blogposts verwendet.
Schließlich wird eine Fehlermeldung mit einem Suchformular angezeigt, wenn keine Ergebnisse zurückgegeben wurden, die Paginierungs-Tags verwendet werden und die Seitenleisten- und Fußzeilendateien enthalten sind:Keine Einträge gefunden. Versuchen Sie eine andere Suche?
Fügen Sie einfach das folgende CSS hinzu
style.css
und wir sind hier fertig:.Worksearch clear: beide; Marge: 0 0 45px 0; Auffüllen: 0 0 40px 0; Breite: 690px;
Zusammenfassung
Morgen ist der letzte Tag der Serie. (Teil 6) Wir werden einige Fehler mit dem Teufel (IE6) ausbügeln und die Serie beenden, indem wir die RedSpace Farbschema für Innovation!!