WordPress Anfänger zum Meister, Teil 1

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.

Am ersten Tag erledigen wir die Vorbereitungs- und Administrationsabschnitte, indem wir unsere Seite Optionen erstellen.

Auch in dieser Serie erhältlich:

WordPress: Anfänger zum Meister, Teil 1
WordPress: Anfänger zum Meister, Teil 2
WordPress: Anfänger zum Meister, Teil 3
WordPress: Anfänger zum Meister, Teil 4
WordPress: Anfänger zum Meister, Teil 5
WordPress: Anfänger zum Meister, Teil 6

Überblick

Am Ende dieser Serie werden wir erstellt haben Innovation - eine hochwertige WordPress-Vorlage, die sich perfekt für die Präsentation eines Portfolios und das Hosting eines Blogs eignet; komplett mit den folgenden Funktionen:

Optionsseite zur Handhabung der erweiterten Natur der Vorlage, ohne dass Dateien manuell bearbeitet werden müssen.
3 eingebaute Farbschemata - mit leichtem Wechsel zwischen ihnen.
Homepage- und Portfolio-Seitenvorlagen mit einer Widget-bereiten Fußzeile und Seitenleiste.
Kompatibilität mit WordPress 2.5+.
Unterstützung für gefädelte und ausgelagerte Kommentare für WordPress 2.7.
Ein benutzerdefiniertes Widget zum Anzeigen Ihrer neuesten Beiträge mit einem Vorschaubild auf Ihrer Startseite.

Das Design enthält drei integrierte Stile, DeepBlue, RedSpace und SoftLight. Sie können jedoch problemlos eigene Farbschemata hinzufügen:

Der Plan für jeden Tag:

Seite mit den Vorbereitungs- und Verwaltungsoptionen.
Layout der Homepage Erstellen einer benutzerdefinierten WordPress-Schleife. Widget-Bereiche verwenden Fußzeile.
Blogposts-Schleife. Seitenleiste Einzel-Blog-Layout.
Portfolio-Seite Trennung von "einzelnen" Seiten nach Kategorie. Einzelne Portfolio-Seite.
Kommentar-Layout Archiv. Suche.
Facelifting - das alternative Farbschema „RedSpace“. Benutzerdefiniertes Widget erstellen.

Welche Vorkenntnisse brauche ich??
Erfahrung mit xHTML & CSS ist ein Muss (da ich nicht viel von diesem Code im Detail besprechen werde).
Es ist auch sehr nützlich, ein grundlegendes Verständnis von PHP zu haben (z. B. Verwendung von Variablen, Arrays, bedingten Anweisungen und 'foreach' - und 'while'-Schleifen). Schauen Sie sich Jeffreys exzellente Screencast-Serie "Tauchen in PHP" an.

Wenn Sie sich mit WordPress auskennen (selbst wenn Sie sich nur im Dashboard auskennen!), Würde dies definitiv Ihre Erfahrung verbessern. Schauen Sie sich Drews "WordPress for Designers" Screencast-Serie an.

Springe zu einem Abschnitt

Fertig machen
- Dateien vorbereiten
- Kategorien & Seiten
- WordPress zu einem CMS machen
Optionen Seite
- Kategorien Dropdown
- Seiten Dropdown
- Stylesheet Dropdown-Liste
- Das Options-Array
- Optionen Backend
Optionen abrufen
Zusammenfassung

Fertig machen

Heute werden wir den Kern-Back-End-Code behandeln, auf den sich der Rest des Themas verlassen wird. Sie benötigen zunächst eine Neuinstallation von WordPress, vorzugsweise die neueste Version (2,7 zum Zeitpunkt des Schreibens). Die Vorlage funktioniert jedoch mit jeder Version über 2.5. In der / wp-content / themes / Ordner erstellen, legen Sie neue Ordner und Dateien mit folgender Struktur an:

/Innovation/
- / Stile /
  - /tiefes Blau/
  - deepblue.css
- Functions.php
- index.php
- page.php
- page-home.php
- page-portfolio.php
- style.css
- var.php

Functions.php enthält Code für unsere Optionsseite und Widgets, unter anderem.
index.php wird zur Anzeige der neuesten Beiträge verwendet.
page.php wird die Vorlage für die meisten Einzelseiten verwendet.
page-home.php wird unsere Frontpage-Vorlage sein.
page-portfolio.php wird unsere Portfolio-Seite sein.
var.php wird verwendet, um unsere Optionen aus der Datenbank abzurufen.
style.css wird den größten Teil unseres Stylings enthalten.
/styles/deepblue.css enthält das Styling für unser erstes Farbschema.

Dies sind nicht alle Dateien, die wir benötigen. Wir werden die anderen erstellen, während Sie weitergehen, damit Sie verstehen können, wozu jeder dient.

Dateien vorbereiten

Die Zwei Seite- Dateien sind benutzerdefinierte Seitenvorlagen, sodass wir Inhalte auf Seiten, denen diese Vorlagen zugewiesen sind, anders gestalten können. Damit WordPress sie erkennen kann page-home.php Gebe folgendes ein:

Ebenso innen page-portfolio.php eingeben:

Der Vorlagenname ist der Name, den WordPress bei der Auswahl einer Seitenvorlage verwendet. get_header (); ist eine WordPress-Funktion zum Laden der header.php Datei (die wir später erstellen werden).

Und füge folgendes zu page.php. Wir müssen dieser Datei keinen Vorlagennamen geben, da dies die Standardvorlage ist.

Wir müssen auch einige Details wie Name, Beschreibung und Autor für unser Thema vergeben. Dies geschieht in einem Kommentarblock am oberen Rand von style.css:

 / * Themenname: Innovation Theme URI: http://www.danharper.me/innovation Beschreibung: Ein fortschrittliches Portfolio- und Blogthema, das von Dan Harper als Teil einer Tutorialserie für NETTUTS.com Version: 1.0 erstellt wurde. Autor: Dan Harper Author URI: http://www.danharper.me * /

Kategorien & Seiten

Um später Zeit zu sparen, erstellen wir die relevanten Kategorien und Seiten, die wir jetzt benötigen. Aktivieren Sie in Ihrem WordPress-Dashboard das Design (es wird der Name verwendet, den wir zuvor in CSS definiert haben). Machen Sie sich keine Sorgen, dass das Design leer ist. Wir gehen später darauf über.

Erstellen Sie jetzt drei neue Seiten. Einer heißt "Home" und der andere "Portfolio". Wählen Sie jeweils die Seitenvorlage als "Homepage" und "Portfolio" aus. Benennen Sie die letzte Seite als "Blog" und verwenden Sie die Standardseitenvorlage.

Erstellen Sie auch eine neue Kategorie mit dem Namen "Portfolio". Dies ist, was wir verwenden werden, um Portfolio-Elemente zu veröffentlichen.

WordPress zu einem CMS machen

Gehen Sie in Ihrem Dashboard zu Einstellungen -> Lesen. Setzen Sie für "Front Page Display" die Seite Front auf die von Ihnen erstellte Startseite und die Seite "Posts" auf "Blog":

Optionen Seite

Dies erscheint wahrscheinlich ein wenig rückwärts, aber wir werden eine Optionsseite für unser Thema erstellen, bevor wir am eigentlichen Frontend arbeiten. Dies liegt daran, dass das gesamte Thema von den Optionen auf der Seite abhängt, und es wäre nicht sinnvoll, diese anderen Teile zuerst auszuführen.

Für diejenigen, die es nicht wissen, ist die Optionsseite eine zusätzliche Seite im hinzugefügten WordPress-Dashboard, die eine Reihe von Optionen für unser Thema enthält. Diese sind:

Farbschema
Portfolio-Kategorie
Blog-Seite
Google Analytics-Code

Innerhalb Functions.php Beginnen Sie mit dem Folgenden. Das $ themename Variable definiert den Namen des Designs, das für den Seitentitel im Dashboard (Innovation) verwendet wird. Und $ shortname wird verwendet, um unsere Optionen einzigartig zu machen - wenn Sie dies ändern, müssen Sie mehrere Instanzen im gesamten Code ändern (ändern Sie sie also nicht;)).

  Kategorien Drop-Down
 Als Nächstes erstellen wir den Code, mit dem alle Kategorien in der Dropdown-Option "Portfolio" verwendet werden:
  / * Kategorien in eine Dropdown-Liste holen * / $ categories_list = get_categories ('hide_empty = 0 & orderby = name'); $ getcat = array (); foreach ($ categories_list als $ acategory) $ getcat [$ acategory-> cat_ID] = $ acategory-> cat_name;  $ category_dropdown = array_unshift ($ getcat, "Wählen Sie eine Kategorie:");
 Dieser Code verwendet WordPress ' get_categories (); Funktion zum Abrufen einer Liste aller Kategorienamen und Verwenden einer für jeden(); Schleife, um jeden Namen und jede ID in ein Array mit dem Namen "add" aufzunehmen $ getcat zur späteren Verwendung im Code. Zum Schluss verwenden wir array_unshift Einfügen von "Wählen Sie eine Kategorie:" am oberen Rand des Arrays.
 Seiten Dropdown
 Weiter ist eine weitere ähnliche Dropdown-Option, die einen Seitennamen auswählt. Der Code dafür ist dem vorherigen sehr ähnlich:
  / * Seiten in eine Dropdown-Liste laden * / $ pages_list = get_pages (); $ getpag = array (); foreach ($ pages_list als $ apage) $ getpag [$ apage-> ID] = $ apage-> post_title;  $ page_dropdown = array_unshift ($ getpag, "Seite auswählen:");
 Wie beim Abrufen der Kategorien verwenden wir WordPress ' get_pages (); Funktion, um eine Liste aller Seitennamen zu erhalten, und das Ergebnis wird in der $ getpag Array zur späteren Verwendung.
 Stylesheet-Auswahlliste
 Es gibt auch eine Dropdown-Option zum Auswählen eines Stylesheets. Dieser Code ist etwas komplizierter:
  / * Holen Sie sich Stylesheets in eine Dropdown-Liste * / $ styles = array (); if (is_dir (TEMPLATEPATH. "/ styles /")) if ($ open_dirs = opendir (TEMPLATEPATH. "/ styles /")) while (($ style = readdir ($ open_dirs))! == false) wenn (stristr ($ style, ".css")! == false) $ styles [] = $ style;  $ style_dropdown = array_unshift ($ styles, "Wählen Sie ein Farbschema:");
 Der obige Code verwendet PHP opendir (); Funktion, gefolgt von readdir (); um unsere zu öffnen / Stile / Ordner und erhalten Sie eine Liste aller darin enthaltenen Dateien.
 Wir benutzen dann stristr (); um die Liste nur auf die .css Dateien (um zu verhindern, dass die Ordner ebenfalls ausgegeben werden), und die Ergebnisse werden an das Verzeichnis übergeben $ Styles Array.
 Das Options-Array
 Alle unsere Optionen werden in ihren eigenen Arrays gespeichert, damit wir sie später im Code in Massen verarbeiten können:
  / * Die Optionen * / $ options = array (array ("name" => "General", "type" => "title"), array ("type" => "open"), array ("name" = > "Farbschema", "desc" => "Welches Farbschema möchten Sie haben?", "Id" => $ shortname. "_ Colorscheme", "type" => "select", "std" => "Wählen Sie ein Farbschema: "," options "=> $ styles), array (" name "=>" Portfolio-Kategorie "," desc "=>" Wählen Sie die Kategorie aus, in der die Artikel des Portfolios gebucht werden. "," id "=> $ Kurzname. "_ portfolio_cat", "type" => "select", "std" => "Kategorie wählen:", "options" => $ getcat), array ("name" => "Blog-Seite", "desc.) "=>" Wählen Sie die Seite aus, die als Blog (Posts) verwendet wird. "," Id "=> $ shortname." _ Blogpage "," type "=>" select "," std "=>" Wählen Sie eine Seite: " , "options" => $ getpag), array ("name" => "Google Analytics", "desc" => "Geben Sie Ihren (oder anderen) Google Analytics-Code hier ein.", "id" => $ shortname. " _analytics_code "," type "=>" textarea "), array (" type "=>" close "));
 Jedes Array ist eine Option und enthält Name, desc, Ich würde und Art Parameter. Die ID ist sehr wichtig und wird später im Code verwendet, um auf die Option zu verweisen. Um beispielsweise die Portfolio-Kategorie zu erhalten, würden wir das prüfen $ ts_portfolio_cat (ts ist der Kurzname, auf den wir oben im Dokument verwiesen haben.)
 Optionen Backend
 Mit dem folgenden Code wird die Seite mit den Optionen im Dashboard angezeigt (in WordPress 2.6 oder niedriger), und die Optionen werden in der Datenbank gespeichert.
  
  function mytheme_add_admin () globaler $ Themenname, $ Kurzname, $ Optionen; if ($ _GET ['page'] == Basisname (__ FILE__)) if ('save' == $ _REQUEST ['action']) foreach ($ options als $ value) update_option ($ value ['id') ], $ _REQUEST [$ value ['id']]);  foreach ($ options as $ value) if (isset ($ _REQUEST [$ value ['id']])) update_option ($ value ['id'], $ _REQUEST [$ value ['id']]) ;  else delete_option ($ value ['id']);  header ("Location: themes.php? page = functions.php & gespeichert = true"); sterben;  else if ('reset' == $ _REQUEST ['action']) foreach ($ options als $ value) delete_option ($ value ['id']);  header ("Location: themes.php? page = functions.php & reset = true"); sterben;  if (! function_exists ('wp_list_comments')) add_theme_page ($ themename. "Options", $ themename, 'edit_themes', Basisname (__ FILE__), 'mytheme_admin');  else add_menu_page ($ themename. "Options", $ themename, 'edit_themes', Basisname (__ FILE__), 'mytheme_admin');  function mytheme_admin () globaler $ themenname, $ shortname, $ options; if ($ _REQUEST ['gespeichert']) echo ''. $ Themenname.' Einstellungen gespeichert.
'; if ($ _REQUEST ['reset']) echo ''. $ Themenname.' Einstellungen zurücksetzen.
'; ?>  
  die Einstellungen
 
 Wir werden den Code nicht durchgehen, da dies dieses Tutorial zu weit führen würde. Kopieren Sie es einfach und fügen Sie es als magischer Code aus den WordPress-Göttern ein, wodurch Ihr Thema funktioniert.
 Dieser nächste Code überprüft jede unserer Optionen auf ihre Art Attribut und formatiert sie in eine Tabelle. Also Optionen mit "type" => "select" würde als Dropdown-Box ausgeben oder "type" => "textarea" würde als Textbereich ausgeben.
    

    
  
 
   "/>          <?php if ( get_settings( $value['id'] ) != "")  echo stripslashes(get_settings( $value['id'] ));  else  echo $value['std'];  ?>                      />            
      
 
  Zum Schluss am Ende der Datei einfügen:
  erfordern (TEMPLATEPATH. "/var.php");
 Wir benötigen() unsere var.php Datei, die Code zum Abrufen unserer Optionen enthält.
Beachten Sie, dass wir verwenden müssen TEMPLATEPATH im benötigen() oder umfassen() Tags, so dass es zu unserem Design-Verzeichnis und nicht zum Stammverzeichnis von WordPress navigiert.
 Diese Optionen abrufen
 Diese Optionen befinden sich nun im Dashboard. Wir müssen sie in unserem Thema verwenden können. Fügen Sie den folgenden Code in ein var.php:
  get_var ("SELECT term_id FROM $ wpdb-> terms". "WHERE name =" $ ts_portfolio_cat ""); / * Blogseiten-ID vom Namen abrufen * / $ ts_blogpage = $ wpdb-> get_var ("SELECT 'ID' FROM $ wpdb-> posts". "WHERE post_title =" $ ts_blogpage "UND post_type =" page "LIMIT 1" ); ?>
 Der erste Abschnitt des Codes ruft alle unsere Optionen aus der Datenbank ab. Wir haben jedoch ein Problem: Unsere Kategorie- und Seitenoptionen senden den Namen der Kategorie oder Seite zurück. Wir bevorzugen jedoch die ID, da sie in WordPress-Funktionen einfacher zu verwenden ist.
 Die nächsten zwei Teile des Codes machen genau das. Wir führen eine SQL-Abfrage aus, um die entsprechende ID zu erhalten. Diese Optionen sind jetzt im gespeichert $ ts_portfolio_cat und $ ts_blogpage Variablen.
 Jetzt haben wir die Administratorseite fertig, loggen Sie sich in Ihr Dashboard ein und legen Sie die entsprechenden Einstellungen für jede der Optionen fest. Wählen deepblue.css für das Farbschema vorerst.
  
 Zusammenfassung
 Damit ist der erste Tag der WordPress-Woche abgeschlossen. Morgen werden wir unser Homepage-Layout erstellen, eine benutzerdefinierte WordPress-Schleife erstellen und Widgetbereiche bearbeiten.
 Teil 2 - Loops und Widgets.



		
			
	   
	




Code