Share
Themes sind ein großer Teil dessen, was WordPress so beliebt macht, wie es ist. In dieser dreiteiligen Serie werden wir Sie Schritt für Schritt durch den Prozess führen, der zu einem vollständig funktionierenden WordPress-Theme führt. Im zweiten Teil befassen wir uns mit der Kodierung des Hauptteils unseres Themas!
Auf der Suche nach einemkostenloses WordPress-Themeum schnell anzufangen? Wir haben einige tolle für Sie zur Auswahl!
Willkommen zu Teil zwei dieser dreiteiligen Serie zur Entwicklung eines WordPress-Themes von Grund auf. Letztes 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 mit dem ersten Thema beginnen.
Ich möchte betonen, dass Sie, wenn Sie Ihr eigenes Layout zum Arbeiten haben, es verwenden können - Sie werden wahrscheinlich durch das Experimentieren mehr lernen und ein Ergebnis haben, das auf Ihren Geschmack zugeschnitten ist. Wenn Sie nicht über ein Layout verfügen, mit dem Sie arbeiten können, stellen wir Ihnen ein einfaches persönliches Layout zur Verfügung.
Dieses Layout habe ich vor einiger Zeit als eines von vielen ungenutzten Designs für einen persönlichen Blog von Freunden erstellt. In der herunterladbaren ZIP-Datei, die diesem Tutorial beiliegt, finden Sie zwei Ordner. bftheme und bffiles. Im Ordner "bffiles" befindet sich das Layout im Zustand vor WordPress, der andere Ordner enthält das vollständige Design.
Öffnen Sie das Design in einem Browser, um eine Vorstellung davon zu bekommen, was wir vorhaben. Es sollte in etwa so aussehen:
Es ist zwar möglich, ein Thema mit nur einer Datei zu erstellen, es ist jedoch eine sehr schlechte Praxis und nichts, was Sie in der Wildnis überhaupt sehen werden. Es ist empfehlenswert, sich an die Standarddateistruktur zu halten, da dies die Änderung von Themen erleichtert und Sie die eingebauten WordPress-Funktionen verwenden können, um Dateien problemlos aufzunehmen (z. B. get_header ())..
Lassen Sie uns zunächst unseren Arbeitsbereich vorbereiten. Erstellen Sie im Themes-Verzeichnis Ihrer WordPress-Installation einen neuen Ordner mit dem Namen Blindfaith. Erstellen Sie in diesem Ordner die folgenden Dateien:
Jetzt haben wir unsere Stylesheets und Bilder sowie ein Theme-Skelett. Wir werden gleich einsteigen. Zuerst müssen wir unser Theme im WordPress-Dashboard erscheinen lassen - dazu müssen wir unsere style.css anpassen Datei.
WordPress sucht automatisch nach einer Datei namens style.css in einem Designverzeichnis, um Informationen zum Design zu extrahieren. Fügen Sie den folgenden Code oben in style.css ein:
/ * Themenname: Blind Faith Theme URI: http://www.danwalker.com/ Beschreibung: Ein minimalistisches, einfaches Theme für WordPress - unterstützt Widgets in der Sidebar, die alle Möglichkeiten der Post- / Seitenformatierung enthalten und leicht zu bedienen sind Stylesheet anpassen. Autor: Dan Walker Version: 1.0 Tags: minimalistisch, einfach, Widgets, Seitenleiste, elegant * /
Wenn wir jetzt WordPress überprüfen, sollte unser Design im Änderungsdesign-Teil des Dashboards angezeigt werden. Aktivieren Sie unser neues Design und laden Sie die Startseite von WordPress. Nichts sehen? Gut. Wenn WordPress erst einmal herausgefunden hat, welche Seite der Benutzer wünscht und die Ergebnisse vorbereitet hat, ruft er index.php aus unserem Designverzeichnis auf - außer jetzt ist die Datei leer.
Zunächst müssen wir unser HTML in vier Teile zerlegen. Kopfzeile, Körper, Seitenleiste, Fußzeile. Wenn Sie die mit diesem Tutorial gelieferte index.html öffnen, sollten Sie Folgendes sehen:
Blinder Glaube Blinder Glaube
Ein weiteres Thema von Dan Walker
- Zuhause
- Über
- Typografie
Hallo Welt!
Veröffentlicht am 6. Februar 2011 durch Dan unter Nicht kategorisiert1 KommentarLorem ipsum dolor sitzt amet, consectetur adipiscing elit. Etiam malesuada sem in orci ornare und porta nisi tristique. Integer sodales feugiat interdum. Nunc nec hendrerit velit. Praesent bei 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, vita 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 bei rhoncus vitae, porttitor bei nulla. Maecenas dignissim sagittis massa nicht ultrices. Cras eros quam, ultrices eu iaculis eu, egestas eget justo. Vivamus diam sapien, Volutpat und 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 belästigt.
Weiterlesen
Keine neueren / älteren BeiträgeUrheberrechte © ? 2011 Dan Walker
Stehlen Sie nichts uswEin bisschen über michLorem ipsum dolor sitzt amet, consectetur adipiscing elit. Etiam malesuada sem in orci ornare und porta nisi tristique. Integer sodales feugiat interdum. Nunc nec hendrerit velit. Praesent bei 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.
kürzliche Posts
- Hallo Welt!
Wenn wir diesen HTML-Code im Moment in einem Browser laden, wird das grundlegende Layout angezeigt. Bei diesem Layout 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. Dies kann beispielsweise index.php, page.php usw. sein. Die Seitenleiste enthält den gesamten Inhalt außerhalb des Inhaltsfelds rechts neben dem Layout. Die Fußzeile enthält lediglich die Copyright-Meldung. Unser Thema wird folgendermaßen aussehen:
Kopieren Sie also den Code aus index.html vom gesamten Doctype bis zur Content-Division und fügen Sie ihn in unsere Header-Datei ein. Wir sollten jetzt eine header.php-Datei haben, die folgendermaßen aussieht:
Blinder Glaube Blinder Glaube
Ein weiteres Thema von Dan Walker
- Zuhause
- Über
- Typografie
Im Moment überspringen wir den Inhaltsbereich, da dies der größte und komplexeste Teil ist (bestehend aus vielen verschiedenen Dateien), und gehen Sie direkt zur Fußzeile. Normalerweise ist eine Fußzeile in einem Layout die letzte. Da jedoch die Seitenleiste in unserem Code hinter der Fußzeile steht, rufen wir die Seitenleiste einfach nach der Fußzeile auf. Footer.php sollte daher folgenden Code enthalten:
Urheberrechte © ? Blind Faith von Dan Walker
Sie werden feststellen, dass wir oben unsere erste WordPress-Funktion verwenden. get_sidebar () ;. Diese Funktion entspricht in etwa der Anforderung (? Sidebar.php?); Da wir die Seitenleiste immer nach der Fußzeile benötigen, ist es sinnvoll, die Seitenleiste in der Fußzeilen-Datei am Ende aufzurufen.
Schließlich müssen wir die Seitenleiste einschließen. 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 restlichen Tags; Wrapper, Body und HTML)..
Ein bisschen über michLorem ipsum dolor sitzt amet, consectetur adipiscing elit. Etiam malesuada sem in orci ornare und porta nisi tristique. Integer sodales feugiat interdum. Nunc nec hendrerit velit. Praesent bei 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.
kürzliche Posts
- Hallo Welt!
Öffnen Sie zunächst die index.php und geben Sie Folgendes ein:
Wenn wir zu unserer Installation von WordPress navigieren, sollten wir so etwas bekommen
Momentan scheint der Inhalt der Website (oder was wir bisher gemacht haben) zu laden, die Stylesheets jedoch nicht. Dies liegt daran, dass die Aufrufe der Stylesheets in unserer Headerdatei jetzt einen Pfad verwenden, der nicht vorhanden ist. Sie befinden sich jetzt in / wp-content / themes / blindfaith /, aber es gibt eine einfachere Möglichkeit, das zu platzieren, wo immer sie benötigt wird - eine dynamischere Methode.
WordPress verfügt über eine integrierte Funktion namens bloginfo (), die sich hervorragend für das Abrufen aller nützlichen lokalen Informationen eignet, z. Blogname, Beschreibung, Stylesheet-URL, Stylesheet-Verzeichnis und mehr. Für weitere Informationen darüber, was wir mit bloginfo bekommen können, lesen Sie diese Seite im WordPress-Codex.
Lassen Sie uns unsere Header-Datei öffnen und einige Dinge ändern, um die dynamischen Informationen von WordPress zu verwenden, anstatt die statischen Informationen im Design. Unsere aktuelle Datei "header.php" sieht bis zu dem Nav-Bar-Kachel-Tag so aus:
Blinder Glaube Blinder Glaube
Ein weiteres Thema von Dan Walker
Zuallererst beheben wir die fehlenden Stylesheets. Wir verwenden zwei Werte von bloginfo. stylesheet_directory und stylesheet_url. Der URL-Wert ist eine direkte Verknüpfung zu style.css, während Verzeichnisse das Verzeichnis enthalten, in dem sich style.css befindet. Es ist wichtig zu wissen, dass WordPress-Funktionen wie diese keinen nachstehenden Schrägstrich an Werte anhängen.
Ersetzen Sie die Stylesheet-Zeilen durch Folgendes:
Unser Thema hat jetzt korrekt verknüpfte Stylesheets. Wenn wir uns in der Header-Datei befinden, ändern wir als Nächstes den Titel, den Slogan und den Link des Blogs.
Das
Dies erzeugt etwas in der Art von;
Lokaler Testblog >> Hallo Welt
Jetzt können wir einfach den Logo- / Titeltext, den Slogan und die URL mithilfe der folgenden bloginfo () - Eigenschaften ändern.
">
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. Natürlich kann jede dieser verschiedenen Listen variable Mengen an Beiträgen enthalten. Wir können damit arbeiten, indem Sie in WordPress etwas verwenden, das als "The Loop" bezeichnet wird..
WordPress ermittelt, welche Beiträge angezeigt werden sollen, bevor die Indexdatei ausgeführt wird. Schließlich erstellen wir ein Thema. Das Thema wird als letztes angezeigt, da es sich lediglich um eine Anzeige der Ausgabe handelt. Mit einigen eingebauten Funktionen können wir vermeiden, komplexe PHP-Schleifen mit ständigen Überprüfungen auf gültige Daten durchführen zu müssen. Dieser Aspekt der WordPress-Theme-Entwicklung macht den Prozess viel einfacher und verursacht weniger Kopfschmerzen.
Lassen Sie uns zunächst unsere Poststruktur betrachten.
Hallo Welt!
Veröffentlicht am 6. Februar 2011 durch Dan unter Nicht kategorisiert1 KommentarLorem ipsum dolor sitzt amet, consectetur adipiscing elit. Etiam malesuada sem in orci ornare und porta nisi tristique. Integer sodales feugiat interdum. Nunc nec hendrerit velit. Praesent bei 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, vita 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 bei rhoncus vitae, porttitor bei nulla. Maecenas dignissim sagittis massa nicht ultrices. Cras eros quam, ultrices eu iaculis eu, egestas eget justo. Vivamus diam sapien, Volutpat und 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 belästigt.
Weiterlesen
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 die tatsächlichen Post-Werte zurückgeben. Zu jedem Beitrag können mehrere Informationen angezeigt werden, z.
Wenn eine dieser Funktionen innerhalb der Schleife aufgerufen wird, zeigen sie die korrekten Informationen für den aktuellen durchgeschleiften Beitrag an.
Versuchen Sie, mithilfe des obigen Links (oder nur der Funktionen, die vor dem Link bereitgestellt wurden) den Dummy-Inhalt selbst durch die korrekten Austauschfunktionen zu ersetzen, bevor Sie fortfahren.
Der korrekte Code sollte so aussehen.
">
Veröffentlicht am durch unterяя ',''); ?>
Es gibt ein paar Dinge, die Sie vielleicht noch nicht gemacht haben. Lassen Sie uns sie betrachten.
Zunächst möchte WordPress beim Anzeigen von Kategorien einen Standardstil mithilfe einer Liste drucken. Um dies zu umgehen, können wir ein eigenes Trennzeichen verwenden, das in unserem Fall einfach ein Komma und ein Leerzeichen ist.
Um einen Bearbeitungslink anzuzeigen, gefolgt von der Anzahl der Kommentare, die ein Beitrag enthält, können wir eine Funktion verwenden, die den Link erstellt und drei verschiedene Zustände ausgeben kann. Keine Kommentare, einzelner Kommentar und mehrere Kommentare (wobei das Prozentzeichen der Platzhalter für die Anzahl der Kommentare ist).
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 Ausschnitt des Inhalts angezeigt. Wenn wir the_content () verwenden, wird der gesamte Inhalt angezeigt (oder bis a <--more--> erscheint im Inhalt). Auf einer Such- oder Archivseite ist es nicht wichtig, den gesamten Artikel zu zeigen - gerade genug, um den Kernpunkt zu ermitteln - also verwenden wir the_excerpt ()..
Damit dieser Code funktioniert, müssen wir ihn mit Posts versehen, und dazu müssen wir ihn in die Schleife einfügen. Unsere index.php-Datei sollte derzeit so aussehen.
">
Veröffentlicht am durch unterяя ',''); ?>
Fügen Sie diesen Code nach der Header-Funktion ein.
Nicht gefunden
Entschuldigung, aber es wurden keine Ergebnisse für das angeforderte Archiv gefunden. Vielleicht hilft die Suche, einen verwandten Beitrag zu finden
und dieses kurz vor der Fußzeilenfunktion;
Das Laden des WordPress-Blogs sollte jetzt ungefähr so aussehen.
Nun zeigt unser Theme eine Liste von WordPress-Beiträgen, je nachdem, wie viele angezeigt werden sollen (geändert unter den allgemeinen Einstellungen im Dashboard). Was aber, wenn es mehr Beiträge gibt? Was ist, wenn das Blog 6 Beiträge enthält, aber nur 5 anzeigt? Um dies zu bekämpfen, müssen wir einfache nächste / vorherige oder neue / alte Links hinzufügen.
Natürlich ist es sinnlos, diese Links anzuzeigen, wenn es keine neueren oder älteren Beiträge gibt, zu denen sie springen können, da sie irreführend sind. Daher verwenden wir den folgenden Code nach der Schleife.
max_num_pages> 1):?>Keine neueren / älteren Beiträge
Next_posts_link () und previous_posts_link () werden nur bei Bedarf angezeigt, 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.
Wenn Sie jedoch die obige Anweisung verwenden, haben Sie die Möglichkeit, eine Meldung anzuzeigen, wenn keine Seiten vorhanden sind, zu denen Sie springen können. Dies kann zu weniger Verwirrung für den Benutzer führen (was immer eine gute Sache ist)..
Unsere fertige index.php-Datei sollte so aussehen.
Nicht gefunden
Entschuldigung, aber es wurden keine Ergebnisse für das angeforderte Archiv gefunden. Vielleicht hilft die Suche, einen verwandten Beitrag zu finden
max_num_pages> 1):?>">
Veröffentlicht am durch unterяя ',''); ?>Keine neueren / älteren Beiträge
Wir haben jetzt einen funktionierenden Index, 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, mit dem Unterschied, dass wir keine nächsten / vorherigen Links in single.php benötigen, aber Kommentare. Der Code für single.php lautet wie folgt:
Nicht gefunden
Entschuldigung, aber es wurden keine Ergebnisse für das angeforderte Archiv gefunden. Vielleicht hilft die Suche, einen verwandten Beitrag zu finden
">
Veröffentlicht am durch unterяя ',''); ?>
Wie Sie sehen, hat sich nicht viel geändert, außer am unteren Rand der Datei. Wir haben einfach den Code für die Links entfernt und eine neue Funktion mit dem Namen comments_template () hinzugefügt. Die Parameter für diese Funktion sind einfach die zu ladende Datei (comments.php, wenn sie leer gelassen wird oder standardmäßig), und ob die Kommentare nach Typ sortiert werden sollen (Standardeinstellung ist false)..
Wie Sie wahrscheinlich bereits erraten haben, handelt es sich bei der Datei, die Kommentare verarbeitet, um die Datei comments.php. Diese wird in einer separaten Datei gespeichert, sodass wir sie sowohl für single.php als auch für page.php verwenden können.
Die Datei zum Anzeigen einer Seite ist fast identisch mit der einzelnen Post-Datei, mit der Ausnahme, dass Informationen zum Post-Zeitpunkt, Autor usw. entfernt werden. Dies bedeutet, dass die Seitendatei so aussieht.
Nicht gefunden
Entschuldigung, aber es wurden keine Ergebnisse für das angeforderte Archiv gefunden. Vielleicht hilft die Suche, einen verwandten Beitrag zu finden
">
Der letzte Teil, den wir heute hinzufügen werden, ist die Navigation oben (so einfach). Öffnen Sie die header.php und ersetzen Sie die Nav-Bar-Kachel-Division durch diese.
'mainnav', 'menu_class' => 'nav-bar-content', 'menu_id' => 'navigation', 'container' => false, 'theme_location' => 'primärmenü', 'show_home' => ' 1 ')); ?>
Die Funktion wp_nav_menu spuckt eine Liste von Seiten aus, nimmt jedoch auch Argumente in Form eines Arrays an. Die Argumente, die wir in der Reihenfolge geliefert haben, sind:
Das CSS, das wir verwenden, 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 von WordPress im Code ausgegeben wird, wenn ein Design codiert wird.
Unsere WordPress-Installation sollte jetzt so aussehen.
Beim nächsten Mal werden wir eine funktionelle Seitenleiste hinzufügen, die Widget-fähig ist, dynamische Beitragstypen, benutzerdefinierte Felder und die letzten Elemente des Designs!
Wenn Sie in diesem Beitrag etwas unsicher waren oder einfach 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 Fülle von Informationen für alle Funktionen usw., die WordPress verwendet.
Accentsconagua