WordPress Anfänger zum Meister, Teil 3

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 werden wir unsere Blogbeiträge gestalten und "Einzelbeiträge" nach Kategorien gestalten.

Heute konzentrieren wir uns auf den Blog-Teil des Themas. Wir codieren die Hauptansicht "Blog", erstellen die Seitenleiste und enden mit der Ansicht für einzelne Posts.

---

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

• Der Blog
•   - Die WordPress-Schleife
•   - Styling
• Seitenleiste
•   - Sidebar registrieren
•   - Zeigen Sie die Seitenleiste an
•   - Die Seitenleiste gestalten
•   - Farbe der Seitenleiste
• Einzelbeitragsanzeige
•   - Überprüfen Sie die Kategorie für den Beitrag
•   - Layout eines einzelnen Blogposts
• Zusammenfassung

---

Der Blog

Der Code für die Hauptansicht des Blogs wird darin enthalten index.php. Auf dieser Seite werden alle unsere Blogbeiträge mit Links zu ihrer Haupt- / Einzelansicht angezeigt, auf der Sie normalerweise den Beitrag fortsetzen und den Benutzern die Möglichkeit geben, einen Kommentar abzugeben.

Nachfolgend sehen Sie eine Vorschau des Layouts für alle Blog-Bereiche mit der Seitenleiste auf der rechten Seite:

Lass uns anfangen. Im index.php Geben Sie den folgenden Code ein. Wir fangen damit an, unsere Header-Seite einzuschließen und erstellen dann unsere div # mainarea die, wie Sie im ersten Bild sehen können, die Blogbeiträge halten wird (mit der Sidebar nach rechts).

Fügen Sie Folgendes zu hinzu style.css zu setzen #Hauptbereich mit den richtigen stilen:

 #mainarea float: left; Polsterung rechts: 30px; Breite: 690px; 

Die WordPress-Schleife

Als Nächstes starten wir eine WordPress-Schleife mit einigen benutzerdefinierten Kriterien:

In der ersten Zeile können wir die Paginierung in der WordPress-Schleife verwenden. Wenn Sie der Schleife mitteilen, dass sie nur x-Posts enthalten soll, zeigen Sie einen Link "Neuere Posts" an das nächste Los. Der Code prüft, ob die aktuelle Seite eine bestimmte Paginierungsseite anfordert, wenn nicht, wird die erste Seite angezeigt.

Innerhalb query_posts () wir geben an, die Paginierung zu verwenden; und auch die Schleife anweisen, Beiträge aus unserer Portfolio-Kategorie auszuschließen (Minuszeichen beachten).

Als nächstes ist der Code in der Schleife. Wie an Tag 2 erwähnt, wird alles, was sich in der Schleife befindet, für jeden verfügbaren Beitrag ausgeführt.

 
 
 "title =" Weiterlesen """> 
 
 
 
#kommentare "> 
 
 
  

Wir fangen damit an, jeden Beitrag in seinem eigenen Div einzuschließen. Wir gebrauchen die ID() um jedem Div eine eindeutige ID zu geben (in der Regel müssen Sie einen bestimmten Beitrag anders gestalten); und wir haben jedem auch eine Klasse gegeben Blogeintrag damit es gestylt wird.

Als nächstes wird der Beitragstitel mit ausgegeben der Titel() und the_permalink () wird verwendet, um den Link zum vollständigen Beitrag hinzuzufügen.

Innerhalb ul.meta ist einige zusätzliche Informationen für die Post. die Kategorie() wird verwendet, um die Namen der Kategorien auszugeben, denen der Beitrag zugeordnet ist (getrennt durch ein Komma).

Wir verknüpfen dann die Kommentare für den Beitrag erneut mit the_permalink (), und comments_number () wird verwendet, um die Anzahl der Kommentare für den Beitrag auszugeben.

die Zeit() gibt das Datum an, an dem der Beitrag veröffentlicht wurde. F jS ist ein PHP-Datumscode für 'Month Name' (J); 'Date' (j) und das Date-Suffix (dh 'st', 'nd', 'rd' oder 'th') (S).
Zum Beispiel würde dies 31. Januar ausgeben. Sie könnten auch hinzufügen Y bis zum Ende, um das Jahr auszugeben. Weitere Informationen finden Sie im Handbuch PHP: date ().

Schließlich wird der tatsächliche Inhalt des Beitrags für den Beitrag mit ausgegeben der Inhalt(). Ein "Weiterlesen" -Link wird bei Bedarf automatisch an den Beitrag angehängt.

Als nächstes schließen wir die Schleife mit Ende, und fügen Sie die Paginierungs-Schaltflächen ein, um ältere / neuere Beiträge zu durchsuchen (wo unsere $ paged Code kommt nützlich mit) next_posts_link () und previous_posts_link () Funktionen:

Wir haben auch unsere aufgenommen sidebar.php und footer.php Dateien.

Styling

Zeigen Sie eine Vorschau der Blogseite in Ihrem Browser an. Ich habe bereits einen zusätzlichen Beitrag mit einigen Beispieldaten hinzugefügt. Das Bild unten zeigt, was wir ändern müssen:

Werfen Sie das Folgende in style.css. Wir fügen zwischen jedem Blogbeitrag eine Trennung hinzu (.Blogeintrag) und stellen Sie das ein ul.meta Elemente, die inline angezeigt werden sollen. Das .linksbündig, .rechts ausrichten und .im Zentrum anordnen Es werden auch Klassen festgelegt - diese Klassen werden von WordPress zum Ausrichten von Bildern verwendet und auch für unsere Seitenumbrüche verwendet.

 .Blogpost klar: beide; Rand unten: 45px; Polsterung unten: 40px; Überlauf versteckt;  .singleblog overflow: hidden; ul.meta margin: 0 0 25px 0;  ul.meta li display: inline; Schriftfamilie: Verdana, Arial, Helvetica, Serifenlos; Schriftgröße: 0.7em; Zeilenhöhe: 1.3em; Rand rechts: 10px; Polsterung links: 12px; Text-Transformation: Großbuchstaben;  ul.meta li: first-child border: keine; Polsterung links: 0;  .alignleft float: left; Marge: 0 10px 8px 0;  .alignright float: right; Marge: 0 0 8px 10px;  .aligncenter margin: 10px auto; 

Im deepblue.css Fügen Sie zwischen jedem Blogeintrag eine dünne, helle Grenze hinzu, eine Grenze, um jeden Meta-Listeneintrag zu trennen, und setzen Sie den H2 auf # 333:

 .blogpost, .worksearch border-bottom: 1px solid # e8e3c8;  h2 a: link, h2 a: besuchte color: # 333;  ul.meta li border-left: 1px solid # e3e8ed; 

---

Seitenleiste

Die Seitenleiste sieht wie folgt aus und wird auf der gesamten Website verwendet, mit Ausnahme der Front- und Portfolio-Seiten:

Sidebar registrieren

Zuerst müssen wir den Sidebar-Widgetbereich registrieren. Dies geschieht auf dieselbe Weise wie der Bereich auf der Startseite. Innerhalb Functions.php und den folgenden Code in den Klammern für if (function_exists ('register_sidebar')) nach dem Homepage-Array:

 register_sidebar (array ('name' => 'Sidebar', 'before_widget' => ')
',' after_widget '=>'
',' before_title '=>'
',' after_title '=>'
',));

Mit anderen Worten sollte es wie folgt aussehen:

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

Zeigen Sie die Seitenleiste an

Als nächstes rendern Sie die Seitenleiste, indem Sie Folgendes zu hinzufügen sidebar.php:

 #sidebar float: left; Breite: 220px;  #sidebar ul margin: 0;  #sidebar ul li list-style: none; Rand links: 0; Rand unten: 25px; 

 li h3 font-size: 1.3em; Zeilenhöhe: 1.4em; Marge: 5px 0 5px 0;  / * Seitenleiste Suchformular * / #sidebar ul li # search margin-bottom: 25px;  .hidden display: none; #sidebar ul li # Suchformular #s padding: 7px 29px 7px 7px; Breite: 182px;  #sidebar ul li # Suchformular #searchsubmit display: none;  / * Seitenleistenlisten (z. B. Meta, Archive, Kategorien) * / #sidebar ul li ul padding: 15px 5px 15px 8px;  #sidebar ul li ul li list-style-position: outside; Marge: 0 0 5px 20px; 

 #sidebar ul li # Suchformular #s background: url ("deepblue / search.png") no-repeat right # f6f6ec; Grenze: 1px fest # E8E3C8;  #sidebar ul li # Suchformular #s: focus border: 1px solid # dad4b6;  #sidebar ul li ul Hintergrundfarbe: # f6f6ec; Grenze: 1px fest # E8E3C8;  #sidebar ul li ul li list-style: url ("deepblue / bullet.gif");  #sidebar ul li a: link, #sidebar ul li a: besuchte color: # 333; 

 Post; if (in_category ("$ ts_portfolio_cat")) / * Ist ein Portfolio-Element * / required ('single-portfolio.php');  else / * Ist ein Blogbeitrag * / requir ('single-blog.php'); ?>

  
  
 
 
 
 
#kommentare ">