Willkommen bei der neuesten Version von Mobile WordPress Theming. Letzte Woche haben wir die HTML-Version des WordPress-Themes erstellt, das wir in diesem Lernprogramm erstellen werden. Am Ende dieses Tutorials haben wir ein grundlegendes WordPress-Theme, das auf jede vorhandene WordPress-Site angewendet werden kann. Nächste Woche werden wir es verpacken und fertig stellen. Kommen wir gleich auf den Punkt!

WordPress Theming Mindset

Für Leser, die nicht mit dem Erstellen von WordPress-Themes vertraut sind, müssen Sie einige grundlegende Prinzipien der Funktionsweise von WordPress kennen, bevor Sie mit dem Thema beginnen. WordPress ist ein Bloggerahmen. Es ist darauf ausgelegt, dem Benutzer Inhalte auf möglichst flexible Weise bereitzustellen. WordPress speichert Ihre Inhalte und stellt Ihnen die Tools zur Verfügung, die Sie nach Ihren Wünschen bedienen können. Durch das "Enthäuten" der Daten, die WordPress bereitstellt, einem Vorgang, der auch als "Theming" bezeichnet wird, können Sie das Erscheinungsbild Ihres Blogs unterscheiden. Wann immer Sie eine WordPress-Site ändern oder verbessern möchten, sollten Sie entweder ein Plugin schreiben oder ein Design erstellen. Plugins sind geeignet, wenn Sie grundlegende WordPress-Funktionen ändern oder hinzufügen. Wenn Sie jedoch den Stil von WordPresss ändern möchten, können Sie entweder ein Design bearbeiten oder erstellen. Bearbeiten Sie nicht einfach den wichtigsten WordPress-Code direkt. Dies führt wahrscheinlich zu einer Verwirrung von WordPress, insbesondere wenn Sie später Versionen aktualisieren müssen.

Nackt starten

Wenn Sie nicht extrem innovativ und einzigartig sind, haben fast alle WordPress-Themen dieselbe Grundlage. Sie alle benötigen eine Kopfzeile, einen Körper, eine Fußzeile, ein grundlegendes Styling usw. Anstatt das Rad neu zu erfinden, verwenden wir ein 'nacktes Thema'. Wie der Name vermuten lässt, sind die meisten Barebones ein nacktes Thema. Im Allgemeinen gibt es ein sehr kleines Styling neben Resets und gelegentlich nützlichen Ausschnitten, die Sie wahrscheinlich in Ihrem Projekt verwenden werden. Es gibt viele verschiedene nackte Themen im Netz. Je nach Projekt entscheiden Sie sich möglicherweise für ein anderes Projekt. Es gibt kein bestes nacktes Thema. Für dieses Projekt habe ich mich für WordPress-naked entschieden. Sie können eine Kopie auf der Google-Codeseite abrufen. Für eine großartige Sammlung nackter Themen können Sie auch den Artikel von speckboy.com besuchen.

WordPress installieren

Nun brauchen wir eine WordPress-Installation zum Thema. Sie können entweder einen Server auf Ihrem Server installieren oder ihn lokal installieren.

Server

Wenn Sie lokal installieren, stellen Sie sicher, dass Sie über einen lokalen Testserver verfügen. Für Windows sind WAMP oder EasyPHP eine gute Wahl. Wenn Sie Linux verwenden, sehen Sie sich XAMP an. Wenn Sie einen Mac verwenden, sehen Sie sich MAMP an. Für dieses Tutorial führen wir MAMP aus.

WordPress

Gehen Sie einfach zu WordPress.org, um die neueste Version von WordPress herunterzuladen.

Installieren Sie WordPress auf dem Server

Kopieren Sie das WordPress-Verzeichnis in Ihr Serververzeichnis und installieren Sie es. Dies ist kein Tutorial zum Installieren von WordPress. Es gibt viele Tutorials, die das schon so machen.

Nachdem Sie WordPress installiert haben, kopieren Sie das Naked-Theme-Verzeichnis in das WP-Inhalt / Themen Verzeichnis. Melden Sie sich dann bei WordPress an, gehen Sie zu Aussehen> Themen und wähle die nackten aus.

"Bekleide das Thema"

Nachdem wir das Thema aktiviert haben, können wir Änderungen daran vornehmen und es sofort sehen. Ändern Sie zunächst die Informationen zum Thema, die sich oben in style.css befinden. Hier deklarieren Sie den Namen des Themas, den Autor usw. In diesem Fall habe ich ihn wie folgt geändert:

 / ** Themenname: MyTouch Theme URI: http://www.connorzwick.com Version: .9 Autor: Connor Zwick Autor URI: http://www.connorzwick.com Tags: einfach, mobil, jqtouch, ajax Lizenz: GPL-Beschreibung: Ein Thema, das mit Blick auf die Flexibilität erstellt wurde. Erlaubt jedem, als mobiles Design zu wählen. * /

Header

WordPress betrachtet zunächst die Datei index.php im Designverzeichnis. In dieser Datei werden die restlichen Designdateien eingebunden. Wenn Sie es betrachten, werden Sie zunächst den gesamten Inhalt aus der Kopfzeile holen. Hier müssen wir anfangen. Löschen Sie zunächst alles vom Doctype bis zum Tag und Einfügen im Folgenden:

Dies ist direkt aus dem Kopf von dem, was wir letzte Woche gemacht haben, abgesehen von zwei Dingen kopiert. Sie werden feststellen, dass alle Links zu JS-, CSS- oder Image-Dateien vom PHP-Snippet der Vorlagen-URL vorangestellt wurden. Dies ist eine WordPress-Funktion, die die URL der Vorlagendatei ausgibt. Dies hilft bei der Behebung von Problemen, die wir beim Verknüpfen mit statischen Dateien hätten, da wir jetzt dynamisch mit ihnen verlinkt haben. Zweitens werden Sie feststellen, dass wir mit einem Stylesheet verbunden sind, anstatt unser gesamtes Styling direkt in unsere Kopfzeile zu setzen. Dies ist nur der Übersichtlichkeit halber. Wenn Sie jedoch Ihre eigenen Dateien mitverfolgen, stellen Sie sicher, dass Sie den Stil kopieren und in style.css einfügen

Wie Sie sehen, wird jQTouch bereits durch das Hinzufügen der Kopfzeilenverknüpfungen seine Magie entfalten.

Styling

Wie bereits erwähnt, haben wir das gesamte Styling in ein Stylesheet geschrieben. Wir können auch die Voreinstellungen entfernen, mit denen das nackte Thema geliefert wurde. Wenn alles gesagt und getan ist, sollte das Stylesheet ungefähr so ​​aussehen:

 / ** Themenname: MyTouch Theme URI: http://www.connorzwick.com Version: .9 Autor: Connor Zwick Autor URI: http://www.connorzwick.com Tags: einfach, mobil, jqtouch, ajax Lizenz: GPL-Beschreibung: Ein Thema, das mit Blick auf die Flexibilität erstellt wurde. Erlaubt jedem, als mobiles Design zu wählen. * / body.fullscreen #home .info display: none;  #about padding: 100px 10px 40px; Text-Schatten: rgba (255, 255, 255, 0.3) 0px -1px 0; Schriftgröße: 13px; Text ausrichten: Mitte; Hintergrund: # 161618;  #about p margin-bottom: 8px;  #über eine color: #fff; Schriftdicke: fett; Textdekoration: keine;  / * Beginnen Sie die Anpassung hier * / .blog-title border-bottom: 1px solid # 333333;  span.blog-title color: #fff; Breite: 100%; Bildschirmsperre; Polsterung unten: 10px;  .post-description, .post-author font-size: 12px; Rand links: 75px;  .post-description min-height: 75px;  .post-author margin-bottom: 3px;  .post, .page-author Schriftgröße: 13px; Farbe: #fff; Rand unten: 5px;  #blog .rounded li position: relative;  .month position: absolut; Breite: 70px; Text ausrichten: Mitte; Hintergrund: # aa3939; Farbe: # f5f2f2; Zeilenhöhe: 28px; Polsterung unten: 5px; Rand oben links Radius: 4px; Rand oben rechts Radius: 4px;  .date position: absolut; Breite: 70px; Rand oben: 25px; Schriftgröße: 40px; Text ausrichten: Mitte; Hintergrund: # f5f2f2; Rand unten links Radius: 4px; Rahmen unten rechts: 4px; 

Das ist fast genau das, was wir letzte Woche erstellt haben. Wenn Sie weitere Anpassungen benötigen, werden wir hier das Styling hinzufügen.

Index.php

Auch hier ist index.php die Datei, die die restlichen Themendateien enthält. Wir müssen also zuerst die Datei header.php aufrufen. Es ist ziemlich einfach:

Jetzt können wir wieder mit den Ausschnitten der letzten Woche beginnen. Wir werden mit dem Körper beginnen:

  
 
 
WordPress-Site
 Über 
  

Wir hielten vor dem Menüeintrag des Blogs aus einem bestimmten Grund an. Wir möchten nicht, dass der Blogeintrag eine Option ist, wenn wir keine Beiträge haben. Daher müssen wir hier noch mehr WordPress-PHP einführen:

  
Blog-Artikel 12
   

Grundsätzlich prüfen wir, ob wir Beiträge mit der Funktion have_posts () haben und ob wir den Menüpunkt anzeigen. Wenn wir dies nicht tun, zeigen wir nichts an. Wir könnten wahrscheinlich auch wegkommen, indem wir einfach den else-Tag weglassen, aber ich möchte zeigen, dass wenn Sie etwas wie "Keine Blogeinträge jetzt" dort einfügen möchten, Sie dies tun könnten. Dann beenden wir einfach die IF-Anweisung

Jetzt können wir noch mehr Inhalt der letzten Woche einfügen:

 
Seiten 2
  
Externe Links
 
 
Abonnieren
 
Twitter
 
Desktop-Seite
 
 
 
Email
 
Spenden
 
 
 
Fügen Sie diese Seite Ihrem Startbildschirm hinzu, um das benutzerdefinierte Symbol, den Startbildschirm und den Vollbildmodus anzuzeigen.