Wir haben unsere Site entworfen und in den beiden vorherigen Tutorials in eine statische HTML-Datei umgewandelt. Im letzten Teil dieser Serie werden wir WordPress als CMS einrichten und unsere HTML-Datei in eine WordPress-kompatible Vorlage konvertieren.
Dieses Tutorial enthält einen Screencast für Tuts + Premium-Mitglieder.
Gehen Sie zu WordPress.org und laden Sie die neueste Version von WordPress herunter.
Entpacken Sie das Archiv und verschieben Sie alle Dateien im WordPress-Ordner auf Ihren lokalen oder Webserver.
Erstellen Sie eine leere MySQL-Datenbank, und merken Sie sich alle Anmeldedaten. Sie benötigen sie in etwa 3 Sekunden.
Öffnen Sie Ihren Browser und gehen Sie zu dem Ordner mit Ihrer gesamten WordPress-Datei. Sie werden aufgefordert, eine Konfigurationsdatei zu erstellen. Klicken Konfigurationsdatei erstellen
Nun müssen wir in unserer MySQL-Datenbank Informationen eingeben und die Installation ausführen.
Wenn bei der Installation alles gut gelaufen ist, wird Ihnen Ihr neues Login angezeigt. Kopieren Sie Ihr neues Passwort und melden Sie sich im WordPress-Backend an. Sobald Sie sich beim Backend angemeldet haben, wird Ihnen vorgeschlagen, Ihr Passwort zu ändern. Mach das jetzt!
Jetzt, da wir mit unserem neuen Benutzer eingerichtet sind, können wir WordPress als CMS einrichten. Zuerst werden wir Permalinks ermöglichen, damit unsere Wege gut aussehen. Schweben über die Einstellungen Klicken Sie auf den Pfeil rechts, um weitere Optionen anzuzeigen, und klicken Sie auf Permalinks.
Wir werden die Optionen Tag und Name verwenden. Wählen Sie diese Option aus und klicken Sie auf Änderungen speichern.
WordPress bietet uns einen Dummy-Beitrag sowie eine Dummy-Seite, so dass wir diese löschen und alle Seiten hinzufügen, die wir benötigen.
Schweben Sie auf Beiträge und klicken Sie auf den Pfeil, um die Optionen anzuzeigen. Klicke auf Bearbeiten. Wenn Sie über Hello World schweben! Einige weitere Postoptionen werden angezeigt. Klicken Sie einfach auf Löschen und bestätigen Sie die Aktion.
Hinweis: Dieser Schritt ist nicht notwendig, ich halte einfach alles ordentlich und aufgeräumt.
Erweitere die Seiten Optionen und klicken Sie auf Bearbeiten, dann löschen Sie die Über Seite.
In dem Seiten Linke Seitenleiste klicken Sie auf Neue hinzufügen So können wir unsere Seiten hinzufügen.
Füllen Sie den Titel und den gewünschten Inhalt auf Ihrer Seite aus und drücken Sie anschließend die Taste Veröffentlichen auf der rechten Seite der Seite.
Wenn Sie nicht möchten, dass die Seite sichtbar ist, können Sie auf klicken Entwurf speichern später daran arbeiten.
Wir möchten einige untergeordnete Seiten von Pricing & Signup erstellen. Wenn Sie also die Seiten dafür erstellen, müssen wir eine Option auf der Seiten-Editorseite ändern.
In der Abbildung oben habe ich die Option hervorgehoben, die geändert werden muss. Wir möchten, dass Cheap Plan eine untergeordnete Seite für Preise und Anmeldungen ist, und wir werden WordPress mitteilen, dass Preise und Anmeldung das übergeordnete Element von Cheap Plan sind. Dies ermöglicht uns, eine spezifische Navigation für unser Thema zu erstellen.
Nachdem Sie alle Ihre Seiten erstellt haben, sollte der Abschnitt Bearbeiten unter Seiten wie in der Abbildung unten aussehen.
Alles, was wir jetzt noch einrichten müssen, wurde eingerichtet, sodass wir jetzt mit dem Konvertieren unserer HTML-Datei in eine WordPress-Vorlage beginnen können.
Öffnen Sie Ihren Editor und navigieren Sie zu Ihrem WordPress-Stammverzeichnis.
Wir möchten zu wp-content> themen navigieren.
Wir werden das klassische Thema löschen. Auch dies ist nur, um alle unsere Ordner sauber und ordentlich zu halten. Löschen Sie also den klassischen und doppelten Standard. Benennen Sie den Standardwert in wordpress_cms um.
Gehen Sie in den Ordner wordpress_cms und löschen Sie rtl.css und den Ordner images.
Als nächstes aufmachen style.css und löschen Sie alles außer dem Hauptkommentarabschnitt oben in der Datei.
Wir haben unser eigenes geschaffen style.css Datei, die sich in einem Ordner befindet. Diese style.css Datei erzählt WordPress einige Informationen über unsere Vorlage, obwohl wir unsere eigene haben style.css Datei, wir müssen diese noch behalten.
Bearbeiten Sie die style.css Datei, um etwas ähnlich dem folgenden Code zu sehen. Ändern Sie meine Informationen, um sie an Ihre Informationen anzupassen!
/ * Name des Themas: WordPress CMS Theme URI: http://Ihr-Site.com Beschreibung: Verwendung von WordPress als CMS. NetTuts + Tutorial! Version: 1 Autor: Matt Vickers Autor URI: http://envexlabs.com/ * /
Speichern Sie diese Datei und kehren Sie zu Ihrem Browser zurück. Erweitere die Aussehen Seitenleiste und klicken Sie auf Themes. Sie sollten unser WordPress-CMS-Design als Option anzeigen. Klicken aktivieren Sie Damit WordPress unser neues Design verwendet.
WordPress ist jetzt bereit, unsere vorcodierte Site zu akzeptieren!
Wenn Sie in Ihrem Browser zum WordPress-Stammverzeichnis navigieren, sollte die Hauptseite von WordPress ohne Stile angezeigt werden.
Kopieren Sie die Ordner inc und img sowie den gesamten Inhalt in WordPress_cms.
Wir müssen WordPress mitteilen, dass wir unsere Stylesheets anstelle der alten verwenden möchten, also öffnen Sie sich header.php
Wir werden unnötigen Code löschen. Ich habe die Bereiche, die Sie löschen müssen, auskommentiert, so dass Sie sich auf den nachstehenden Code beziehen.
>> / ">
Sie können auch löschen von der Körpermarke. Wir sollten jetzt eine ziemlich einfache Header-Datei haben, also fügen wir unsere 2 CSS-Dateien in unser Theme ein.
Direkt unter dem Titel-Tag verwenden wir das normale Link-Tag.
Sie werden feststellen, dass wir eine aufgerufene Funktion verwenden bloginfo (). Mit dieser Funktion können Sie Informationen zu Ihrem aktuellen Blog abrufen. Wir werden möglicherweise Server verschieben oder die Ordnerstruktur in der Zukunft verschieben, sodass wir keine harten Pfade zu unseren Stylesheets hinzufügen möchten. Daher übergeben wir einen Wert von template_url, der den Pfad unserer aktuellen Vorlage zurückgibt. Dies ist sehr nützlich, wenn Sie planen, eine Vorlage zu erstellen, die von anderen Personen verwendet wird, weil Sie nicht wissen, wie WordPress eingerichtet wird.
Wenn Sie die Site laden, sollten Sie feststellen, dass einige unserer Standardstile aus unserem Stylesheet auf die Site angewendet werden.
Als nächstes aufmachen footer.php und löschen Sie alles zwischen den Kommentaren und wp_footer ().
Öffne dich auch sidebar.php und lösche alles nach den Kommentaren. Wir können jetzt unsere HTML-Container in unsere WordPress-Dateien kopieren.
Öffne die index.html Datei aus unserem vorherigen Tutorial und kopieren Sie alles dazwischen
Stichworte. Fügen Sie diesen Code in die header.php ein.Zur Vereinfachung löschen wir alle Tags und Inhalte in jedem Container, sodass nur die Container-Divs übrig bleiben.
Hier kann es etwas knifflig werden. Wir müssen diesen Code auf 4 Dateien verteilen. Ich habe auskommentiert, wo jedes Stück gehen muss, also kopiere und füge jeden Abschnitt in die Datei ein, in die er gehört.
Um sicherzugehen, dass alles so funktioniert, wie es soll, können wir überprüfen, ob jede Datei mit dem richtigen Inhalt gefüllt ist. Ihre Dateien sollten wie in den folgenden Beispielen aussehen.
header.php
>sidebar.php
footer.php
Wenn Ihre Seiten gut aussehen, machen wir weiter. Wenn dies nicht der Fall ist, lassen Sie sie wie in den obigen Beispielen aussehen.
Wenn Sie zu Ihrem Browser zurückkehren und ungefähr bis zum Ende der Adresse hinzufügen, drücken Sie die Eingabetaste. Dies sollte Sie zu Ihrer Info-Seite führen.
Wir beginnen mit dem Erstellen unserer Kopf- und Navigationselemente. Wenn Sie also noch nicht geöffnet haben, öffnen Sie sich header.php
In header_container müssen wir unser h1 # -Logo-Tag hinzufügen.
Wir benutzen die bloginfo () funktionieren wieder, aber dieses Mal greifen wir den Namen unseres Blogs an.
Wenn Sie sich erneuern, sollten Sie unser fantastisches Logo sehen! Jetzt müssen wir unsere Navigation hinzufügen.
Anstelle einer harten Kodierung in unseren Navigationselementen werden wir eine eingebaute WordPress-Funktion verwenden wp_list_pages (). Auf diese Weise können wir steuern, welche Seitenelemente wir anzeigen möchten, und Links zu jeder dieser Seiten erstellen.
Wir übergeben einige Optionen an die Funktion, damit WordPress die Seiten genau so anzeigen lässt, wie wir es möchten.
Die erste Option, die wir senden, ist title_li. Standardmäßig erzeugt WordPress ein Titelsymbol, das Pages anzeigt. Wir wollen das nicht, also schicken wir einfach einen leeren Wert damit.
Die zweite Option ist Tiefe. Standardmäßig rendert WordPress standardmäßig eine Liste aller Seiten, die eingeschlossen werden, einschließlich untergeordneter Seiten. Wir möchten nicht, dass dies geschieht. Daher übergeben wir eine Variable von 1, sodass WordPress nur Seiten der obersten Ebene anzeigt.
Der Endwert ist include. Wir möchten nicht jede Seite, die wir erstellt haben, anzeigen, sondern nur Info, Preise & Registrierung und Kontakt. Wir übergeben die IDs jeder Seite, die wir anzeigen möchten. Die IDs aus dem Beispiel stimmen nicht mit den IDs Ihrer Seite überein
Um die ID der Seiten zu erhalten, navigieren Sie zum Abschnitt zum Bearbeiten der Seite. Wenn Sie mit der Maus über den Seitenlink fahren, finden Sie die ID im Link. d.h .: wp-admin / page.php? action = edit & post = 15
Alle verfügbaren Optionen finden Sie unter http://codex.WordPress.org/Template_Tags/wp_list_pages
Wenn Sie die Seite aktualisieren, sollten wir eine gutaussehende Navigation haben.
Wir haben Glück, wir können diese exakte Funktion verwenden, um unsere Seitenleiste sowie die Fußzeilennavigation zu verwalten. Wir müssen nur ein paar Änderungen an den Optionen vornehmen, die wir für jeden Bedarf senden.
Aufmachen sidebar.php und schreiben Sie etwas Code in unseren Sidebar_container.
post_parent) wp_list_pages ('title_li = & child_of ='. $ post-> post_parent); ?>
Wir möchten unsere Sidebar-Navigation nur anzeigen, wenn die aktuelle Seite eine untergeordnete Seite ist. Wir überprüfen dies, um zu sehen, ob die aktuelle Seite einen Wert hat, der post_parent zugewiesen ist. Wenn die Seite kein Kind ist, ist dieser Wert 0.
Informationen zu den Beiträgen und Seiten finden Sie im $ post Variable. Wenn Sie print_r ($ post) verwenden, können Sie alle Informationen zu dem Beitrag sehen, der Ihnen zur Verfügung steht.
Jetzt, wo wir nach einem Elternteil suchen, müssen wir alle Kinder unseres Elternteils auflisten. Dazu übergeben wir eine Variable von child_of und übergeben die aktuelle post_parent-ID.
Wenn unsere Eltern-ID 5 ist, sagen wir wp_list_pages () um jede Seite mit einer post_parent-ID von 5 aufzulisten. Dies ist sehr nützlich, wenn Sie mit der Navigation auf mehreren Ebenen arbeiten.
Als Nächstes werden wir unsere Fußzeile schnell zusammenstellen und dann einige Inhalte auf unseren Seiten anzeigen. Dadurch wird die gesamte Site zusammengeführt und wir können damit beginnen, unsere neue, von WordPress betriebene Site zu finalisieren.
Aufmachen footer.php und zum letzten mal das hinzufügen wp_list_pages () Funktion.
Copyright Gear'd © 2009
Diese Funktion entspricht genau unserer Kopfnavigation, aber anstelle von include verwenden wir exclude, um alle aktuellen Hauptnavigationselemente aus der Fußnavigation zu entfernen.
Die IDs aus dem Beispiel stimmen nicht mit den IDs Ihrer Seite überein
Eine letzte Vorlagendatei, die angepasst werden muss, bevor wir fertig sind. Aufmachen post.php und alles dazwischen löschen get_header () und get_sidebar ().
Hier fügen wir unseren content_container hinzu
Bei der Anzeige Ihres Post- und Seiteninhalts verwendet WordPress einen speziellen Funktionssatz namens The Loop. Kurz gesagt, es nimmt Ihren Inhalt und formatiert ihn und bereitet ihn so auf, dass er dem Endbenutzer angezeigt wird.
In unserem Inhaltscontainer fügen wir eine if-Anweisung und eine while-Schleife ein.
Zuerst prüfen wir, ob wir irgendwelche Posts haben, ob wir die einzelnen Posts durchlaufen und verschiedene Funktionen einrichten, mit denen wir den Inhalt anzeigen können.
In unserer while-Schleife fügen wir alle übrigen Inhalte hinzu.
post_parent):?>post_parent); ?>
Wir verwenden einige neue Funktionen, um den Inhalt unserer Seite anzuzeigen. Das Schöne an WordPress ist, dass viele Funktionen für die Namenskonventionen einfach Englisch verwenden.
Wir brauchten den Titel der Seite, damit wir sie verwenden können der Titel() um es anzuzeigen. Wir können auch den Titel eines Beitrags oder einer Seite verwenden, indem Sie verwenden get_the_title ($ post_id) und die Post-ID übergeben, da sie nur variabel ist.
Wir möchten die zweite Überschrift nur anzeigen, wenn wir uns auf einer untergeordneten Seite befinden, also verwenden wir die if ($ post-> post_parent) noch einmal, um zu überprüfen, ob wir uns auf einer untergeordneten Seite befinden, und wenn dies der Fall ist, erhalten wir den Titel dieses übergeordneten Elements get_the_title ().
Zu guter Letzt verwenden wir der Inhalt() um den Inhalt der Seite anzuzeigen.
Warten Sie, unsere Seitenleiste scheint auf der Seite an der falschen Stelle zu sein, also nehmen Sie get_sidebar () und verschiebe es unter get_header (). Nun steht unsere Sidebar vor unserem Inhalt.
Lose Enden binden
Wenn Sie das Root Ihrer WordPress-Installation in Ihrem Browser laden, sollten Sie mit dem Fehler "Nicht gefunden" begrüßt werden.
Dies liegt daran, dass standardmäßig die Hauptseite von WordPress eine Liste aller Ihrer Beiträge ist. Wir verwenden WordPress nicht zum Bloggen, daher müssen wir WordPress anweisen, stattdessen eine unserer Seiten zu verwenden.
Gehen Sie zurück zu Ihrem WordPress-Backend und laden Sie das lesen Seite in die Einstellungen. Die erste Option ist die Anzeige der Vorderseite, und die ausgewählte Option sollte Ihre letzte Beiträge sein. Wir möchten eine statische Seite auswählen und mithilfe der Dropdown-Liste unsere Titelseite in den gewünschten Beitrag ändern. Für dieses Beispiel verweise ich auf unsere Info-Seite.
Speichern Sie die Änderungen und laden Sie die Hauptseite unserer WordPress-Installation erneut. Es sollte Sie auf die Info-Seite umleiten.
Als Nächstes werden Sie feststellen, dass unsere Navigation nicht mehr aktiv ist, obwohl wir auf der richtigen Seite sind. Dies liegt daran, dass wir für unsere statische Seite eine aktive Klasse verwendet haben. wp_list_pages () weist für aktive Zustände einen anderen Wert zu, so dass wir nur einige Klassen zu unseren Stylesheets hinzufügen müssen. Die 2 Klassen, die wir hinzufügen werden, sind .current_page_item und .current_page_parent.
ul.nav li.active a, ul.nav li.current_page_item a, ul.nav li.current_page_parent a #sidebar_container ul li.active a, #sidebar_container ul li.current_page_item aVerwenden Sie den obigen Code, um die Klassen sowohl zur oberen als auch zur seitlichen Navigation hinzuzufügen. Aktualisieren Sie die Seite und Sie sollten einen aktiven Status für die aktuelle Seite haben, auf der Sie sich gerade befinden.
Zwei weitere Änderungen und wir können dies abschließen.
Unsere Seite "Preise & Anmeldungen" ist eigentlich nur ein Titel für die untergeordneten Seiten, aber WordPress behandelt sie als eigene Seite. Wir möchten den Benutzer auf die Seite "Kostenloser Plan" umleiten, wenn er auf "Preise & Registrierung" klickt.
Eine der vielen großartigen Eigenschaften von WordPress ist die Plugin-Funktion. Es gibt 1000 Plugins, die für WordPress geschrieben wurden und endlose Funktionen hinzufügen, die nicht standardmäßig verfügbar sind. Wir werden ein Weiterleitungs-Plugin installieren, mit dem wir den Benutzer umleiten können.
Das Plugin, das wir verwenden werden, kann hier heruntergeladen werden: http://WordPress.org/extend/plugins/redirect/. Laden Sie das Plugin herunter und verschieben Sie den Umleitungsordner in "wp-content / plugins".
Jetzt müssen wir das Plugin im WordPress-Backend aktivieren, damit wir es verwenden können. Klicken Sie in Ihrem Backend auf Plugins und Sie sollten auf eine Seite mit allen verfügbaren Plugins umgeleitet werden.
Finden Sie unser Redirect-Plugin und klicken Sie auf aktivieren Sie. Unser Plugin ist jetzt aktiviert.
Jedes Plugin funktioniert anders, also lesen Sie die Anweisungen für jedes Plugin, bevor Sie es verwenden. Unser Redirect-Plugin verwendet benutzerdefinierte Felder, um WordPress mitzuteilen, welcher Beitrag wo und wo weitergeleitet werden soll. Gehe zu Seiten Klicken Sie unter unserer Seite "Preise & Anmeldung" auf "Bearbeiten".
Direkt unter dem Textfeld des Editors befindet sich der Abschnitt Benutzerdefinierte Felder. Bei der ersten Eingabe geben wir einen Umleitungswert an. WordPress weiß also, dass wir eine Umleitung durchführen möchten, und die zweite Eingabe wird die Adresse unserer Free Plan-Seite sein. Sobald Sie fertig sind, schlagen Sie ein Benutzerdefiniertes Feld hinzufügen und sicher sein Seite aktualisieren oben rechts.
Wenn Sie zu Ihrem Browser zurückkehren und auf Preise & Registrierung klicken, werden Sie auf die Seite Free Plan weitergeleitet.
Alle sortieren
Unsere Navigation für Preise und Anmeldungen scheint etwas nicht in Ordnung zu sein. Unser kostenloser Plan befindet sich zuletzt, wenn er oben sein sollte. Wir können die Postreihenfolge direkt im Hintergrund festlegen. Laden Sie also Ihren Hauptseitenbereich hoch und bewegen Sie den Mauszeiger über Free Plan. Klicken Sie dann auf Quick Edit.
Das Feld, das wir aktualisieren möchten, ist Order. Ändern Sie den Wert von 0 in 1 und klicken Sie auf Seite aktualisieren. Machen Sie dasselbe für Cheap (order 2) und Expensive (order 3), um die Bestellung entsprechend zu aktualisieren.
Aktualisieren Sie unseren Browser, um die neuen Updates anzuzeigen.
Dies gilt auch für unsere Kopf- und Fußzeilennavigation. Wenn Ihnen die Reihenfolge nicht gefällt, können Sie diese gerne ändern.
Ich mag benutzerdefinierte Dinge
Benutzerdefinierte Felder sind großartig. Sie lassen uns spezifische Informationen für jeden Beitrag weitergeben. Wir können Bilder mit dem Media Uploader zu unserem Beitrag hinzufügen. In diesem Beispiel werden wir jedoch benutzerdefinierte Felder verwenden, um Informationen an unsere page.php-Datei zu übergeben.
Öffnen Sie Ihre About-Seite im WordPress-Seiten-Editor.
Wir werden den Media Uploader verwenden, um ein Bild hochzuladen, das direkt nebenan für unseren Header verwendet werden kann Hochladen / Einfügen Klicken Sie auf das Bildsymbol.
Ich werde jetzt das banner.gif hochladen, das wir zuvor benutzt hatten, also klicken Dateien auswählen und finden Sie es auf Ihrem Computer.
Sobald Ihre Datei hochgeladen wurde, sollten Sie einige Informationen zu Ihrem Bild erhalten. Am unteren Rand dieses modalen Fensters sollten Sie eine Eingabe mit dem Namen Link-URL und den Pfad zu Ihrem Bild sehen. Wir möchten diese URL kopieren. Wenn diese Eingabe leer ist, können Sie auf die Schaltfläche Datei-URL rechts unten klicken und die Eingabe wird aktualisiert.
Wenn Sie diesen Pfad kopiert haben, können Sie dieses Fenster schließen und zum Abschnitt Benutzerdefinierte Felder wechseln. Die erste Eingabe, die wir verwenden werden, ist header_image und der zweite Wert ist der Pfad zu unserer Datei.
Fügen Sie Ihr benutzerdefiniertes Feld hinzu, indem Sie drücken Benutzerdefiniertes Feld hinzufügen und Seite aktualisieren in der oberen rechten Ecke.
Aufmachen page.php und finde das header_image div.
Wir möchten prüfen, ob ein Bild angezeigt werden muss, und wenn dies der Fall ist, greifen wir den Pfad und zeigen das Bild an.
ID, 'header_image', true); if ($ image):?>Zuerst benutzen wir get_post_meta () um den Pfad unseres Bildes der Variablen zuzuweisen $ image.
Das erste Argument, an das wir uns wenden get_post_meta () ist die ID der Seite, auf der wir uns befinden. Der zweite Wert ist der Name des benutzerdefinierten Felds, das in unserem Fall header_image ist. Das letzte Argument sagt WordPress, dass wir nur ein benutzerdefiniertes Feld zurückgeben möchten.
Dann prüfen wir, ob $ image ist leer. Wenn es kein benutzerdefiniertes Feld namens header_image gibt, wird das Bild nicht angezeigt. Andernfalls zeigen wir das header_image div sowie das Bild darin an.
Wir geben den Wert von $ image als Bildquelle aus, um unser Bild anzuzeigen.
Aktualisieren Sie Ihren Browser und zeigen Sie das an Kontakt Seite. Sie sollten keine Bilder sehen. Wenn Sie die Info-Seite laden, sollten Sie sowohl unser Bild als auch das blaue, runde Kästchen sehen, in dem es gespeichert ist.
Das ist es. Wir haben es geschafft! Nehmen Sie sich einen Moment Zeit, um sich zu beglückwünschen, dass Sie das gesamte Tutorial durchlaufen und mit meinem hoffentlich anständigen Unterrichtsstil umgegangen sind.
Wir haben die Oberfläche von WordPress nur knapp verschrottet, aber ich habe Ihnen eine solide Grundlage gegeben, um tiefer in WordPress einzusteigen.
Wenn Sie wissen möchten, welche Funktionen WordPress bietet, schlage ich einen Blick auf den WordPress-Codex.
Wenn Sie auf Probleme stoßen oder versuchen, etwas zu erreichen, das WordPress nicht bietet, geben Sie dem Internet eine schnelle Suche. Die Wahrscheinlichkeit, dass jemand auf das gleiche Problem gestoßen ist, ist in 99% der Fälle mit einem Plugin behoben!
Nochmals vielen Dank für das Lesen des Tutorials! Ich hoffe, Sie haben viel gelernt und können nun Ihren Kunden ein solides CMS anbieten, um Ihnen und Ihrem Leben das Leben leichter zu machen.