WordPress Anfänger zum Meister, Teil 2

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.

  >   <?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?>

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…

 "> <?php the_title(); ?>  

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.

 

Zum Schluss schließen wir den Strom Arbeit div, schließen Sie die WordPress-Schleife mit endtime; und schließe das contentwrap div, das im Header erstellt wurde.

Schönheitstherapy

Werfen Sie einen Blick auf die Startseite in Ihrem Browser, um dieses wunderbare Meisterwerk zu sehen:


Ok, vielleicht nicht; aber nichts CSS kann nicht repariert werden. Fügen Sie folgendes in hinzu style.css:

 #content -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; Rand unten links Radius: 5px; rechts unten rechts: 5px; Schwimmer: links; Polsterung: 19px 19px 30px 0; Rand unten: 5px; Überlauf versteckt; Breite: 960px;  .contentwrap padding-left: 19px; Überlauf versteckt;  #content h2 font-weight: fett; Buchstabenabstand: -1px; Rand unten: 10px; 

#Inhalt ist der Wrapper für den gesamten Inhalt. Wir haben abgerundete Rahmen am unteren Rand hinzugefügt, indem wir dieselbe Methode verwenden, die wir für die Navigation verwendet haben.

Innerhalb deepblue.css Fügen Sie Folgendes hinzu, um eine helle Hintergrundfarbe hinzuzufügen #Inhalt, sowie die Rahmenfarbe definieren:

 #content Hintergrundfarbe: # f9f9f3; Grenze: 1px fest # 111; Rand oben: keine; 

Natürlich müssen die Elemente inline (nebeneinander) angezeigt werden. Wir machen das, indem wir einfach einstellen Schwimmer: links; zu beiden zusammen mit einigen Rändern nach innen style.css:


 .Arbeit float: left; Marge: 0 20px 40px 0; Breite: 460px;  .work a Gliederung: keine;  .work p font-size: 0.9em; Schriftdicke: fett; Marge: 8px 0 10px 0;  .worksingle p font-weight: normal;  .arbeitsspanne font-size: 0.8em; Schriftgewicht: normal; 

Zeigen Sie eine Vorschau an, und Sie werden feststellen, dass die Elemente immer noch untereinander angezeigt werden. Ein kurzer Check mit Firebug zeigt, dass der zweite Gegenstand nicht genug Platz für den rechten Rand hat.
Dies ist der Punkt, an dem dieser Zähler hinzugefügt wird class = "last" zum zweiten Artikel kommt:

 .last margin-right: 0! wichtig; 

Wir sind noch nicht ganz fertig. Schauen Sie sich unser Image des Endprodukts genauer an, und Sie werden feststellen, dass wir auch einen Rahmen um das Portfolio-Image setzen müssen, das beim Schweben die Farbe ändert.
Fügen Sie die folgenden Farbstile hinzu deepblue.css:

 .work a: link img, .work a: besucht img border: 5px solid # e3e8ed;  .work a: hover img, .work a: aktiv img, .work a: focus img border: 5px solid # 5c6e80;  .work a: link, .work a: besuchte color: # 333; 


Widgetized Bereich

Das .extrawrap Der Bereich der Homepage ist Widget-fähig (3 Widgets max) - was bedeutet, dass Sie sie direkt über das WordPress-Dashboard hinzufügen und verwalten können - genau wie Sie es für eine bereitenbereite Seitenleiste tun würden:


Erstens müssen wir WordPress mitteilen, dass es einen neuen Widgetbereich mit dem erstellt register_sidebar () Funktion. Der folgende Code steht am Ende Ihres Functions.php Datei:

 if (function_exists ('register_sidebar')) register_sidebar (array ('name' => 'Homepage unten', 'before_widget' => '
',' after_widget '=>'
',' before_title '=>'

',' after_title '=>'

',));

Innerhalb register_sidebar () Wir übergeben ein Array mit einigen Informationen für unseren Widget-Bereich. Das Name wird verwendet, um es zu identifizieren, wenn wir mehrere Widget-Bereiche (oder Seitenleisten) haben. before_widget und after_widget ist der Code, mit dem jedes einzelne Widget umbrochen wird. Standardmäßig wäre dies ein Listenelement. Wir verwenden stattdessen ein Div.
vor_titel und after_title wird verwendet, um den Titel des einzelnen Widgets zu umbrechen.

Um dieses Widget in unsere Homepage aufzunehmen, fügen Sie Folgendes am Ende von hinzu page-home.php:

 
 

Wir öffnen zuerst unser Wrapping-Div und verwenden dann die dynamic_sidebar (); Funktion - durch die der Name des Widget-Bereichs übergeben wird, den wir zuvor verwendet haben, wenn der Bereich registriert wird. Schließlich schließen wir unsere ein footer.php Datei mit der get_footer () Funktion (genauso wie wir den Header eingefügt haben).

Fügen Sie dem Bereich drei Test-Widgets über Aussehen -> Widgets -> 'Homepage unten' hinzu..


Und schau es dir an:


Um sie alle inline anzuzeigen, verwenden Sie den folgenden Code in style.css:

 .extraswrap margin-top: 10px; Überlauf versteckt;  .extras float: left; Marge: 0 0 0 20px; Breite: 300px; 

Wir werden auch ein Flickr & Twitter-Plugin gestalten. Installieren Sie zunächst die Plugins FlickrRSS und Twitter für WordPress.

Geben Sie unter Einstellungen -> FlickrRSS Ihre Flickr-ID-Nummer mit den angegebenen Anweisungen ein (oder verwenden Sie meine: 31912870 @ N03), stellen Sie 9 quadratische Bilder ein; und für den HTML-Wrapper-Abschnitt verwenden Sie:
Vor dem Bild:


Nach Bild:

Dies ermöglicht es uns, die Bilder leicht zu gestalten und zu positionieren.

Gehen Sie voran und tauschen Sie im Widgetsbereich der Startseite zwei Widgets mit den Flickr- und Twitter-Widgets (geben Sie Ihre Twitter-Details im Widget unter "Bearbeiten" ein.).



Geben Sie das folgende Styling in ein style.css:

 / * style FlickrRSS-Widget * / .flickr display: inline;  .flickr a: link img, .flickr a: besuchte img margin: 0 10px 10px 9px;  / * Stil-Twitter-Widget * / ul.twitter margin: 0;  ul.twitter li.twitter-item -moz-border-radius: 10px; -webkit-border-radius: 10px; Grenzradius: 10px; Listenstil: keine; Rand unten: 20px; Polsterung: 8px 10px;  ul.twitter li.twitter-item span abbr border-bottom: keine; Bildschirmsperre; Schriftgröße: 0.8em; Schriftstil: kursiv; Rand oben: 3px; 

Im Flickr-Stil werden alle Bilder inline angezeigt, und die entsprechenden Ränder werden an drei Bilder pro Zeile angepasst. In den Twitter-Stilen haben wir einen Rand und ein Polster hinzugefügt, um jeden Tweet zu trennen, und wir haben ihn auch verwendet Grenzradius nochmal.

Fügen Sie auch Folgendes hinzu deepblue.css:

 .flickr a: link img, .flickr a: besuchte img border: 3px solid # e3e8ed;  .flickr a: hover img, .flickr a: aktiv img, .flick a: focus img border: 3px fest # 5c6e80;  ul.twitter li.twitter-item background-color: # f6f5ed; Grenze: 1px fest # eae9de; 

Jedes Flickr-Bild hat jetzt eine Grenze, über die wir schweben können, ähnlich wie bei den Portfolio-Bildern.



Fußzeile

Innerhalb footer.php fügen Sie den folgenden Code ein. Wir schließen die entsprechenden Tags und fügen einen Copyright-Hinweis hinzu. Fühlen Sie sich frei, die Erwähnung von mir und NETTUTS daraus zu entfernen, obwohl es uns sehr dankbar wäre, wenn Sie uns irgendwie einen Link zurückgeben würden. Wir fügen auch den Google Analytics-Code von der Optionsseite hinzu.

 

Copyright © . Design von Dan Harper für NETTUTS. Unterstützt von WordPress.

Fügen Sie Folgendes zu hinzu style.css:

 p.footer clear: beide; Schriftgröße: 0.7em; Schriftstil: kursiv; Polsterung: 5px 20px; 

Und zu deepblue.css:

 p.footer color: #ccc;  p.footer a: link, p.footer a: besuchte color: #ccc; Rand unten: 1px gestrichelt;  p.footer a: hover border-bottom: 1px solide; Textdekoration: keine; 

Zusammenfassung

Damit ist der zweite Tag der WordPress-Woche abgeschlossen und wir haben eine Menge getan! Morgen gehen wir zum Seitenlayout "Blog" über und lernen, wie "einzelne Beiträge" unterschiedlich gestaltet werden, abhängig von der Kategorie, in der sie sich befinden.

Teil 3 - Das Blog gestalten

Code