So erstellen Sie ein Wordpress-Theme von Grund auf

Im Anschluss an den kürzlich erschienenen Artikel "PSD to HTML" wird in diesem Tutorial eine HTML / CSS-Vorlage verwendet, um daraus ein funktionierendes WordPress-Design zu erstellen. Es gibt so viel, was Sie tun können, wenn Sie ein eigenes Thema erstellen, das wir nicht annähernd abdecken könnten. Wir werden also untersuchen, wie Themen strukturiert sind, die Kerndateien erstellen und die index.html-Datei aufteilen.

Ausschau halten nach kostenloses WordPress-Theme um schnell loszulegen Wir haben einige tolle für Sie zur Auswahl!

Überblick - Die Struktur eines Themas

Die Struktur eines WordPress-Themas ist ziemlich einfach. Ich beginne gerne mit der CSS-Datei. Es enthält alles über das Thema, das WordPress verwenden kann. Sie haben dann index.php - Es ist einfach die Vorlagendatei, die Sie mit den enthaltenen PHP-Vorlagetags verwenden. Dazu gehört header.php & footer.php, Dateien, die auf der gesamten Site verwendet werden. Die meisten Designs verwenden jetzt nicht nur vier Dateien, und WordPress ermöglicht es Ihnen, mit Vorlagendateien unterschiedliche Inhalte zu gestalten. Es gibt die definierten Layoutdateien, wie z archives.php und single.php. Sie können jedoch auch eigene Seiten erstellen, wenn Sie eine Seite erstellen möchten, die ein völlig anderes Layout als die Standardeinstellung hat.

Da dies ein so großes Thema ist, teilen wir es in eine zweiteilige Serie auf. Dieser Teil macht aus einem Standard-HTML- und CSS-Template ein einfaches, aber funktionierendes Thema. Im zweiten Teil werden weitere erweiterte Funktionen hinzugefügt.

Ich werde daran arbeiten, die großartige Vorlage "Typography Paramount" von Six Shooter Media in ein einfaches WordPress-Theme umzuwandeln.

Schritt 1 - style.css

Das Stylesheet ist die definierende Datei des Designs für WordPress. Es gibt ein paar einfache Dinge, die Sie tun müssen. Die erste ist das Umbenennen der Hauptdatei (wenn Sie mehr als eine Datei haben) in style.css, Als nächstes müssen Sie der Datei ein wenig Kommentar hinzufügen.

/ * Name des Themas: Typografie Paramount Theme URI: http://www.sixshootermedia.com/ Beschreibung: Eine Vorlage ohne Bild, die sich auf Typografie konzentriert. Autor: Sam Parkinson Author URI: http://xseria.com Version: 1.0. Allgemeine Bemerkungen / Lizenzerklärung falls vorhanden… * /

Der obige Code ist alles in einem Kommentar enthalten und wirkt sich daher nicht auf die Stildefinitionen aus. Jetzt habe ich ein paar Details angegeben, diese werden von WordPress verwendet, um Admins die Details des Designs anzuzeigen. Stellen Sie sicher, dass Sie es oben in der Datei ohne Leerzeichen hinzufügen.

Ich habe die Stylesheet-Datei von der Vorlage umbenannt, sie wurde aufgerufen 1.css. Ich habe auch einen neuen Ordner namens gemacht Typografie-Vorrang Welches wird sein, was ich in den WordPress-Theme-Ordner hochlade. Legen Sie das Stylesheet in diesen Ordner, aber nicht in ein anderes Verzeichnis, sonst kann es von WordPress nicht gesehen werden.

Schritt 2 - Die Kopf- und Fußzeile

In diesem Schritt erstellen wir die beiden Dateien: header.php und footer.php. Obwohl sie optional sind, werden beide in den meisten Designs verwendet, aber sie sind auch nicht schwer zu benutzen.

header.php

Erstellen Sie mit dem Header eine neue Datei im Designordner header.php, dann öffne dich index.html aus der Vorlage und kopieren Sie die folgenden aus. Dies wird zur Kopfzeile und wird auf jeder Seite der Website angezeigt. Beachten Sie dies, wenn Sie andere Vorlagen erstellen.

   -        Eine bildlose Vorlage, die sich auf Typografie konzentriert. 
 Typografie Paramount
  Link hier
 Link hier
 Link hier
 Link hier
 Link hier

Wir werden jetzt die WordPress-Vorlagen-Tags hinzufügen header.php, Diese sagen WordPress, wo die verschiedenen Inhalte in das Design eingefügt werden sollen. Denken Sie auch daran, diesen Link zum Stylesheet zu ändern.

 >  <?php bloginfo('name'); ?> <?php wp_title(); ?>        
 / ">

Es wurde eine Menge hinzugefügt, aber alles ist ziemlich einfach, wenn Sie es durchsehen. Alle oben genannten Tags sind im WordPress-Codex gut dokumentiert. Ich werde nur die Funktionen der einzelnen Funktionen durchgehen.

Sprachattribute () - Druckt den Sprachtyp für
Etikett.
bloginfo () - Dient zum Drucken von Informationen über die Site und der Parameter
Wenn der Codex verfügbar ist, gibt 'name' den Titel des Blogs zurück.
wp_title () - Gibt einfach den Titel der Seite zurück.
wp_head () - Druckt die Javascript-Links und andere Kopfzeilen.
get_option () - Ruft einen Wert aus der Optionsdatenbank ab.
wp_list_pages () - Listet Links zu den Seiten der Website auf und sortiert die Parameter
die Seiten korrekt und stoppen WordPress auch das Drucken eines Standardtitels.

footer.php

Erstellen Sie die Datei footer.php und kopiere alles in der Vorlage aus

nach unten und schieben Sie es in die neue Datei. Eine dynamische Fußzeile, die das richtige Jahr, den Site-Titel und einen Feed-Link anzeigt, ist in Themes ein üblicher Ort.

  Template-Design von Six Shooter Media
  ©  
 "> Nimm den Feed

< ?php wp_footer(); ?>

Ich habe die Fußzeile so geändert, dass das Copyright-Symbol angezeigt wird, gefolgt vom aktuellen Jahr () und der Name der Site () Setzen Sie dann in einer neuen Zeile einen Link zum RSS-Feed ().

wp_footer () ist das, was WordPress verwendet, um Dinge an der Unterseite des
öfter als von Websites verwendet, die nicht von Plugins verwendet werden, um beispielsweise Site-Tracking-Code hinzuzufügen.

Schritt 3 - Die Kerndatei

Wir werden jetzt schaffen index.php

index.php

Dies ist eine der zwei erforderlichen Dateien für ein WordPress-Design (die andere Form) style.css), Also lasst uns anfangen. Erstellen Sie die Datei und legen Sie sie zusammen mit dem Rest hinzu. Fügen Sie dann Folgendes hinzu.

Dies sagt WordPress einfach, wo die eingebunden werden soll header.php und footer.php Dateien. Da dies eine zweiteilige Serie ist, werden wir die Erstellung der Seitenleiste in den nächsten Artikel aufnehmen. Sie können entweder div als statische HTML-Datei belassen oder einfach weglassen, was ich auch tun werde. Fügen Sie zwischen den beiden vorherigen Tags Folgendes hinzu.

  ">
   beim  |  | 
  Woops… 
 Es wurden leider keine Beiträge gefunden.

Dies ist, was WordPress die WordPress-Schleife nennt. Die erste Zeile von PHP startet diese Schleife, Ende ist das Ende davon. WordPress füllt die Schleife für jeden Artikel auf der Website aus, und wenn es keinen gibt, wird der Inhalt "Woops ..." angezeigt. Ich habe auch einen Navigations-Link hinzugefügt, der Links zu weiteren Artikeln enthält, sodass Besucher ältere Inhalte ohne Archiv betrachten können.

Im nächsten Artikel werden wir aufschreiben single.php, Dies ist das, was angezeigt wird, wenn ein Besucher auf den Titel eines Beitrags klickt. Im Gegensatz dazu wird es das Kommentierungssystem enthalten index.php.

Review - Funktioniert es??

Wir haben jetzt vier Dateien im Out-Theme, vorausgesetzt, Sie haben nicht vergessen, Sie zu aktualisieren index.php Datei (doh!) sollte es als einfaches aber funktionales Thema funktionieren.

Testen Sie es in diesem neuen Theme-Previewer, der in der neuesten Version von WordPress enthalten ist. Nachdem Sie sich umgesehen haben, scheint es nur ein Problem mit langen Titeln zu geben #inhalt h2 im Stylesheet.

Zeilenhöhe: 30px;

Fahren Sie mit Teil 2 fort.

Code