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. Heute erstellen wir unser Homepage-Layout.

Auch in dieser Serie erhältlich:

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

Springe zu einem Abschnitt

• Fertig machen
•   - Gliederung
• Header.php
•   -
•   - Farbschemas & Stylesheets
•   - div # head
•   - div # nav
• Styling der Kopfzeile
•   - Allgemeine Stile
•   - Header-Styling
•   - Navigations-Styling
•   - Etwas Farbe
• Portfolio-Beiträge
• Die Homepage
•   - Schönheitstherapy
• Widgetized Bereich
• Fußzeile
• Zusammenfassung

Fertig machen

In diesem Teil erstellen wir die Titelseite für unser Portfolio, nutzen unsere Optionsseite und behandeln benutzerdefinierte Felder in Beiträgen. Bevor Sie beginnen, erstellen Sie die folgenden Dateien und Ordner im Ordner / wp-content / themes /Innovation/ Ordner, den Sie zuvor erstellt haben:

• / inc /
  • /Zwischenspeicher/
• header.php
• footer.php
• sidebar.php

Speichern Sie dieses TimThumb PHP Image Resizer-Skript ebenfalls als thumb.php in der / inc / Mappe. TimThumb ist ein "intelligentes" PHP-Image-Resizer-Skript von Darren Hoyt.

Gliederung

Nachfolgend finden Sie eine Übersicht, wie unsere Startseite aussehen wird:

Unsere header.php Datei enthält die #Kopf und #nav Abschnitte - einschließlich der Eröffnungs-Tags für #wickeln, #Inhalt und .contentwrap.

footer.php wird dann das enthalten #Fußzeile Abschnitt und die schließenden Tags für #Inhalt und der letzte Abschnitt darüber (das könnte entweder sein .contentwrap, .extrawrap oder #Sidebar abhängig von der Seite).

Das .contentwrap area wird die zwei neuesten Beiträge aus unserer Portfolio-Kategorie enthalten, und .extrawrap wird ein Widget-bereiter Bereich sein, in dem Sie Widgets aus dem Dashboard platzieren können.

Header.php

An der Spitze der header.php Datei, fügen Sie den folgenden Code ein.

  >   

Wie Sie sehen, ist dies hauptsächlich der Code, den Sie am Anfang eines jeden xHTML Strict-Dokuments einfügen würden. Nur einige Abschnitte wurden durch eine WordPress-Funktion ersetzt, die je nach der von WordPress verwendeten Sprache den entsprechenden Code ausgibt

Am Ende des Codes befindet sich unser title-Tag, das wiederum WordPress-Funktionen verwendet, um den Namen der aktuellen Seite und den Namen der Site zu ermitteln.

Farbschemas & Stylesheets

Als nächstes schließen wir unsere ein style.css Datei mit WordPress bloginfo (); Funktion. Verwenden Sie diese Funktion, um das Haupt-Stylesheet einzubeziehen, anstatt den Dateipfad direkt einzugeben.

Dann ist der Code für das richtige Farbschema-Stylesheet, das aus den Optionen ausgewählt wurde, die wir im vorherigen Teil erstellt haben:

Die folgende Tabelle erläutert die Funktionsweise des obigen Codes:

Wir prüfen, ob unsere Farbschemaoption ($ ts_colourscheme) existiert auf der Optionsseite, und es wurde korrekt festgelegt (dh nicht als "Wählen Sie ein Farbschema:"). Wenn die Option nicht richtig eingestellt ist oder nicht vorhanden ist, wird standardmäßig die Option verwendet deepblue.css Farbschema; Andernfalls verwenden wir das Stylesheet, das auf der Optionsseite ausgewählt wurde.

Weiter machen wir unsere RSS- und Atom-Feeds und öffnen den Body-Tag:

#Kopf

Der nächste Code ist viel geradliniger als der vorherige Abschnitt. Wie im Bild oben gezeigt, werden wir weitere WordPress-Funktionen verwenden, um Informationen aus der WordPress-Datenbank abzurufen:

Das bloginfo ('name'); und bloginfo ('beschreibung'); Funktionen rufen die relevanten Einstellungen von der Seite 'Allgemeine Einstellungen' im WordPress-Dashboard ab:

#nav

Das Abrufen einer Liste von Seiten aus der Datenbank ist ebenfalls sehr einfach. Wir nehmen das wp_list_pages (); Funktion. Beachten Sie, dass wir auch eine title_li = Argumentation Dadurch wird verhindert, dass die Funktion vor dem Auflisten der Seiten ein zusätzliches Listenelement namens "Navigation:" erstellt.

Wir haben auch die relevanten Divs und Wrapper für den nächsten Abschnitt geöffnet.

Styling der Kopfzeile

Wenn Sie jetzt Ihre WordPress-Installation haben, sieht es ungefähr so ​​aus:

Denken Sie daran, dass wir alle Farbstile in das Bild einfügen deepblue.css So können wir später problemlos andere Farbschemata erstellen. Alles andere wird rein gehen style.css.

Allgemeine Stile

Das erste, was ich in meinem Stylesheet immer einsetze, ist das Zurücksetzen des Browsers, gefolgt von einigen grundlegenden Stilen für Absätze, Listen, Kopfzeilen und Links.

 * padding: 0; margin: 0; body Schriftfamilie: Arial, Helvetica, serifenlos;  p font-size: 0.9em; Zeilenhöhe: 1.5em; Rand unten: 10px;  ul, ol Marge: 0 0 10px 10px;  li font-size: 0.9em; Zeilenhöhe: 1.5em; Listenstil-Position: innen; Rand unten: 3px;  img border: keine;  h1, h2, h3, h4, h5, h6 font-weight: normal;  h3, h4 Marge: 15px 0 2px 0;  h4, h5, h6 font-weight: fett;  a: link, a: besuchte Textdekoration: keine;  a: hover, a: aktiv, a: focus Textdekoration: Unterstreichung; Umriss: keine; 

Dies sollte für jeden, der über Grundkenntnisse in HTML und CSS verfügt, sehr einfach aussehen. Wir haben die Ränder und den Abstand für alle (*) Elemente auf 0 gesetzt, um die Standardstile zu überschreiben, die jeder Browser auf eine Seite anwendet. Wir fügen dann neue Ränder, Schriftgrößen und Strichhöhen für die Hauptelemente hinzu, um die Lesbarkeit zu erhöhen.

Header-Styling

Als Nächstes erstellen wir ein wenig Layout:

#wrap margin: 0 auto; Breite: 980px;  #head margin: 25px 0; Überlauf versteckt;  #head h1 float: left; Rand links: 20px;  #head h3 font-family: Georgia, "Times New Roman", Times, serif; Schriftgröße: 0.8em; Schriftstil: kursiv; schweben rechts; Zeilenhöhe: 1.7em; Textausrichtung: rechts; Marge: 0 20px 0 0; Breite: 500px; 

Das #wickeln Element ist der Container, der alles enthält. Wir verwenden eine Breite von 980px (dies ist ungefähr so ​​hoch, wie wir können, wenngleich noch 1024x768 Auflösungen möglich sind). Und wir haben gebraucht Marge: 0 auto; um es im Browser zu zentrieren.

Titel und Taglines (h1 und h3 jeweils) zu beiden Seiten des Behälters schwimmen.

#Kopf hat eine Eigenschaft von Überlauf versteckt; damit die schwebenden Elemente korrekt gehalten werden. Normalerweise umwickelt ein div keine Float-Kinder (wie hier). Sehen Sie sich das Bild unten als Beispiel an (das Gelb steht für den zugewiesenen Rand.) #Kopf):

Navigations-Styling

 #nav Rand oben links Radius: 15px; Rand oben rechts Radius: 15px; -moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -webkit-border-top-left-radius: 15px; -webkit-border-top-right-radius: 15px; Rand unten: keine; Lösche beide; Polsterung: 0 20px; Breite: 939px; 

Werfen Sie einen Blick auf die Vorschaubilder oben im Tutorial und Sie werden feststellen, dass wir abgerundete Ecken oben im Navigationsbereich verwenden. Anstatt diesen Effekt durch eine Reihe von Bildern und zusätzlichen HTML-Tags zu erzielen, verwenden wir das neue CSS3 Grenzradius Diese Eigenschaft gibt den oberen Ecken einen Radius von 15px.

Aktuelle Browser unterstützen diese Eigenschaft jedoch noch nicht, Mozilla- und Webkit-basierte Browser verfügen jedoch über eigene Browser -Moz-Rand-Radius und -Webkit-Grenzradius Eigenschaften, die wir auch verwenden können, um die abgerundeten Ecken in Firefox 3, Safari und Chrome zum Laufen zu bringen. Internet Explorer und Opera verwenden einfach einen quadratischen Rand, bis sie unterstützt werden Grenzradius.

Hinweis: Wenn Sie diese herstellerspezifischen Eigenschaften in Ihrem CSS verwenden, wird die Überprüfung Ihres Stylesheets verhindert. Aber da es nur diese sind, die die Validierung stoppen - wen interessiert das schon??

Wenn Sie fortfahren, gestalten wir die Listenelemente in der Navigation so, dass sie inline (horizontal) angezeigt werden:

 #nav ul margin: 0;  #nav ul li display: inline; Schriftgröße: 1em; Zeilenhöhe: 1.3em; Rand rechts: 25px;  #nav ul li a: link, #nav ul li a: besuchte display: -moz-inline-stack; Anzeige: Inline-Block; Schriftdicke: fett; Textdekoration: keine; Polsterung: 20px 10px;  #nav ul li a: hover, #nav ul li a: aktiv, #nav ul li a: fokus gliederung: keine; 

Beachten Sie, dass wir verwenden Anzeige: -moz-Inline-Stack; auf den links. Dies gilt nur für Firefox 2 und darunter, die (aus irgendeinem Grund) nicht unterstützen Anzeige: Inline-Block; - sogar IE6 unterstützt es!
Wir geben den Links viel Padding, um den anklickbaren Bereich zu vergrößern (im Gegensatz zum Padding) li stattdessen).

Nun schauen Sie sich die Seite in Ihrem Browser an und sie sollte so aussehen. Besser, braucht jetzt etwas Farbe!

Etwas Farbe

Speichern Sie zunächst das folgende Bild in der / styles / tiefblau / Ordner als bg.jpg.

Und dieses Bild im selben Ordner wie trans.png (es ist eigentlich ein dunkles 1px halbtransparentes Bild).

Jetzt offen /styles/deepblue.css, und Typ:

 / * Standardstil für die Innovation - deepblue.css * / body background: url ("deepblue / bg.jpg") no-repeat # 101010 obere Mitte fest; Farbe: # 333;  a: link, a: besuchte color: # 5c6e80;  #head h1 color: #eee;  #head h3 color: #ddd;  #nav background: url ("deepblue / trans.png") repeat; Grenze: 1px fest # 111;  #nav ul li a: link, #nav ul li a: besuchte color: #ddd;  #nav ul li.current_page_item a: link, #nav ul li.current_page_item a: besuchte hintergrund: url ("deepblue / trans.png") repeat; Farbe: #eee;  #nav ul li a: hover, #nav ul li a: aktiv, #nav ul li a: focus color: #eee; 

Wir haben das große Hintergrundbild für den Körper festgelegt (und so korrigiert, dass es sich beim Scrollen nicht bewegt), das transparente Bild wird als Hintergrund für die Navigation verwendet, und wir legen einige Schriftfarben fest.
Vorschau, und Sie haben jetzt etwas wie:

Portfolio-Beiträge

Bevor wir den oberen Bereich unserer Homepage erstellen, an dem sich unsere beiden neuesten Portfolio-Elemente befinden, benötigen wir ein paar Einträge, um dies zu testen. Das Thema verwendet einige "Benutzerdefinierte Felder", um zusätzliche Informationen für die Portfolioelemente anzuzeigen:

• Datum (das Datum, an dem die Arbeit abgeschlossen wurde)
• Klient (für wen die Arbeit war)
• Verknüpfung (zu einer Live-Version Ihrer Arbeit)
• Vorschau (URL eines 930px breiten Bildes Ihrer Arbeit)
• Vorschau-voll (größere Version der Arbeit, wird in einer Lightbox angezeigt)

Erstellen Sie einen neuen Blogeintrag, wobei Titel der Name des Projekts ist (wie in der Abbildung oben), und geben Sie einen Inhalt über die Arbeit ein. Platzieren Sie den Beitrag in Ihrer Kategorie "Portfolio".

Scrollen Sie vor dem Speichern des Posts zum Abschnitt "Benutzerdefinierte Felder":

Geben Sie hier jedes der oben angegebenen benutzerdefinierten Felder ein. Nur der Vorschau Feld ist erforderlich. Sie können die folgenden Bilder für Ihre verwenden Vorschau Feld, falls Sie noch kein eigenes haben (Rechtsklick und Speichern):

Nachdem Sie die Felder ausgefüllt haben, können Sie den Beitrag veröffentlichen. Wiederholen Sie diesen Vorgang, bis Sie mindestens zwei Beiträge haben (vorzugsweise mehr)..

Die Homepage

Jetzt haben wir alle Voraussetzungen erfüllt, und wir können den Hauptteil der Homepage endlich kodieren. Im page-home.php, Geben Sie Folgendes ein:

 
Neueste Projekte
  
query_posts (); ist eine WordPress-Funktion zum Abrufen bestimmter Beiträge aus der Datenbank. Wie Sie in den Argumenten für die Funktion (die Teile in Klammern) sehen können, fordern wir WordPress auf, nur zwei Beiträge aus der Portfolio-Kategorie zu erhalten ($ ts_portfolio_cat erhält die Informationen von der von uns erstellten Optionsseite).
 
Mit während();, Wir haben die 'WordPress-Schleife' gestartet. Hier können wir WordPress mitteilen, welchen Teil wir in jedem Beitrag benötigen.
 
 $ counter ++; $ preview = get_post_meta ($ post-> ID, 'preview', true); $ date = get_post_meta ($ post-> ID, 'date', true); ?>
 
In der ersten Zeile haben wir einen Zähler hinzugefügt (wir werden diesen in Kürze verwenden). $ counter ++; ist eine kurze Hand zum Schreiben $ counter = $ counter + 1;
 
Wir benutzen dann die get_post_meta (); Funktionen zum Abrufen unserer benutzerdefinierten Felder "Vorschau" und "Datum" aus dem Beitrag - die in der $ Vorschau und $ date Variablen jeweils.
 
 ">
 
Oben haben wir ein Div mit einem erstellt Arbeit Klasse für den Portfolio-Artikel, der gehalten werden soll. Beachten Sie jedoch, dass wir auch prüfen, ob unsere $ counter gleich 2 (was bedeutet, dass dies das zweite Portfolioelement ist), fügen wir dem genannten div eine weitere Klasse hinzu zuletzt. Diese Klasse wird sich als nützlich erweisen, wenn wir diesen Abschnitt gestalten.
 
Als Nächstes geben wir das Vorschaubild aus:
 
 
 
Wenn ein Vorschaubild existiert, dann… 
 
 ">   
 
Das the_permalink (); Funktion wird verwendet, um den Link zum aktuellen Beitrag auszugeben.
 
Dann geben wir das Vorschaubild aus. Aber Wir führen es auch durch den TimThumb-Resizer, um das Bild auf 450px Breite und 210px Höhe zu skalieren (vom 930px-Bild ist es tatsächlich). Beachten Sie, wie wir es verwenden bloginfo ('template_directory'); um sicherzustellen, dass WordPress in unserem Theme-Ordner eincheckt (das entspricht dem TEMPLATEPATH wir haben im vorherigen Teil der Serie verwendet).
 
Wir müssen jetzt nur noch die Textzeile ausgeben, die unter dem Bild (Titel und Datum) liegt:
 
 
 ">   ($ date)";?> 
 
Dies ist relativ einfach. Wir gebrauchen the_permalink (); noch einmal, um den Link für den aktuellen Beitrag zu erhalten. der Titel(); wird verwendet, um den Titel des aktuellen Beitrags abzurufen.
 
Wir prüfen dann, ob ein benutzerdefiniertes Feld 'Datum' eingegeben wurde (in der $ date Variable) für diesen Beitrag. Wenn ja, geben wir es aus.