Erstellen Sie einen Abschnitt mit empfohlenen Beiträgen für WordPress

() translation by (you can also view the original English article)

WordPress ist großartig. Noch beeindruckender ist die Tatsache, dass es angepasst werden kann, um jede Art von Website zu betreiben, die Sie mögen! Hier erfahren Sie, wie Sie einen Abschnitt mit vorgestellten und "neuesten Beiträgen" erstellen - ein Muss für alle guten Nachrichten-/Magazinthemen. Wir werden auch die 'benutzerdefinierten Felder' in vollem Umfang nutzen.

Einführung

Dieses Tutorial behandelt den Prozess der Erstellung der Indexseite eines Magazins/News-Themas für WordPress. Die Hauptfunktionen dieser Seite sind:

Beliebte Beiträge
Neueste Beiträge.
Verwenden von PHP-Variablen zur einfachen Anpassung der oben genannten Variablen für Benutzer Ihres Themas, die mit PHP/WordPress nicht vertraut sind.
Abrufen eines Beitragsbilds aus dem Abschnitt "Benutzerdefinierte Felder" eines Beitrags.

Schritt 1 - Vorbereitung

Durchsuchen Sie in Ihrem WordPress-Installationsverzeichnis 'wp-content/theme' und erstellen Sie einen neuen Ordner. Nennen Sie es wie Sie möchten (ich verwende 'WordPress Times'). Als nächstes erstellen Sie 5 neue Dateien:

index.php
header.php
footer.php
style.css

This is the basic layout we’ll be going for:

Also ein 940px-Dokument mit zwei Abschnitten:
Inhalt bei 600 Pixel und Seitenleiste bei 300 Pixel - zwischen den beiden bleibt ein Abstand von 40 Pixel.

Schritt 2 - Header

Öffnen Sie Ihre Datei header.php und fügen Sie Folgendes ein:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>
<head>
	<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
	<meta name="description" content="<?php bloginfo('description'); ?>" />
	<meta name="keywords" content="<?php bloginfo('name'); ?>" />
	<meta name="author" content="<?php bloginfo('name'); ?>" />
	<meta name="generator" content="WordPress <?php bloginfo('version'); ?>" />
	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen, projection" />
	<link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
	<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
	<title><?php bloginfo('name'); ?> <?php wp_title('-'); ?></title>
    <?php wp_head(); ?>
</head>
<body>
<div class="container">
    	<h1 id="header"><?php bloginfo('name'); ?></h1>

In diesem Fall definieren wir zunächst den DOCType als XHTML 1.0 Transitional. Im Kopfbereich legen wir dann alle Meta-Tags, Stylesheets und Seitentitel fest, die aus WordPress abgerufen werden sollen. und wir fügen unsere 3 JavaScript-Dateien hinzu.
Schließlich öffnen wir eine Container-Abteilung und fügen den Namen unseres Blogs als Header-Titel ein.

Schritt 3 - 'Breaking News'-Beiträge

Wir werden eine benutzerdefinierte Anzahl von Posts aus der Kategorie 'Breaking News' oben auf unserer Seite einfügen. Öffnen Sie index.php und geben Sie Folgendes ein, keine Sorge, ich werde alles unten erklären:


<?php get_header(); ?>
<div id="content">

<?php global $more;
$more = 0; ?>

<?php

/* ID of your 'Breaking News' Category */
$breaking_cat = "83"; 

/* How many posts from above category to display? Default = 3 */
$breaking_num = "3"; 

/* Number of recent posts to display under the Breaking News */
$latest_num = "4";
 
/* IDs of any cats you dont want to include in Recent posts.
Start each ID with a 'minus' symbol Seperate by a comma.
EG: $latest_ignore = "7,-6,-8,-1";
Posts from the 'Breaking' category are automatically excluded. */
$latest_ignore = "-1"; 
?>

	<!-- Show x Posts from Breaking News -->
	<?php query_posts('showposts='.$breaking_num.'&cat='.$breaking_cat.''); 
	  while (have_posts()) : the_post();
	?>

    <div class="breaking">

    	<img src="<?php echo get_post_meta($post->ID, 'thumbnail',true) ?>" alt="Post Image" class="postimg" />
    	<h2><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>
    	<p class="datetime"><?php the_time('l, F j, Y G:i'); ?></p>
    	<?php the_content('Continue...'); ?>
    	<div class="postmeta">
            <p><?php the_category(', '); ?> - <a href="<?php the_permalink() ?>#commenting" title="View Comments">
	    <span class="comm"><?php comments_number('0 Comments','1 Comment','% Comments'); ?></span></a></p>
        </div><!--/postmeta-->
        
    </div><!--/breaking-->

    <?php endwhile; ?>

3.1 - Opening

1
2	<?php get_header(); ?>
3	<div id="content">

Die erste Zeile ist eine einfache WordPress-PHP-Funktion, die zuerst unsere Datei header.php enthält. Darunter öffnen wir unser 'Content'-Div, um alle Beiträge zusammenzufassen. Ich habe beim Schließen jedes div-Tags einen HTML-Kommentar eingefügt, der angibt, welches div geschlossen wird. Ich empfehle dringend, dass Sie dies in Ihren eigenen Projekten tun, wenn Sie das noch nicht getan haben, da dies dazu beiträgt, Ihren Code so gut wie möglich zu organisieren.

3.2 - Das $more tag

1
2	<?php global $more;
3	$more = 0; ?>

Mit diesem Code können wir nur einen Teil jedes Beitrags einschließen, bis der Autor das <--more-->-Tag eingefügt hat. Dadurch wird verhindert, dass der gesamte Text in langen Beiträgen auf der Startseite angezeigt wird.

3.3 - Kategorie-IDs


$breaking_cat = "83"; 
$breaking_num = "3"; 

$latest_num = "4"; 
$latest_ignore = "-1";

Um das Anpassen des Themas zu vereinfachen, fügen wir hier alle Optionen hinzu. Jede Zeile wird weiter kommentiert. Wir tun das, damit alle anderen Personen, die Ihr Thema verwenden, anstatt durch Ihren gesamten Code zu kriechen, um herauszufinden, wo ihre Kategorie-IDs abgelegt werden sollen, alle oben in der Datei leicht zugänglich sind. In diesem Tutorial werden wir diese Variablen in der WordPress-Schleife verwenden.

3.4 - Haben wir Beiträge?

1
2	<?php query_posts('showposts='.$breaking_num.'&cat='.$breaking_cat.'');
3	while (have_posts()) : the_post();
4	?>

Das ist eine Variation der WordPress-Schleife, die unsere Beiträge aus der Datenbank ausgibt. Wie Sie sehen können, verwenden wir die ersten beiden unserer Variablen aus dem obigen Abschnitt. Die Variablen ersetzen sich durch die ihnen zugeordnete Zeichenfolge. Wenn Sie beispielsweise den Standardcode verwenden, wird die Zeile automatisch zu:

1
2	query_posts('showposts=3&cat=83')

In der zweiten Zeile steht dann, wenn wir die Beiträge haben, fügen Sie sie in dem unten angegebenen Format in die Seite ein.

3.5 - Inhalt posten


<img src="<?php echo get_post_meta($post->ID, 'thumbnail',true) ?>" alt="Post Image" class="postimg" />

<h2><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h2>

<p class="datetime"><?php the_time('l, F j, Y G:i'); ?></p>

<?php the_content('Continue...'); ?>

Das ist nicht so unheimlich wie es aussieht, vertrauen Sie mir.

Bild - Auf unserer Homepage-Vorschau werden Sie feststellen, dass jeder Beitrag ein eigenes Bild hat. Dies ist beim Schreiben eines Beitrags im WordPress-Abschnitt "Benutzerdefinierte Felder" enthalten. Stellen Sie einfach den 'Schlüssel' auf Miniatur und fügen Sie den Link zum Bild ein:

Der Code lautet im Wesentlichen "Nehmen Sie die Daten aus dem benutzerdefinierten Feld des Posts mit dem Namen 'Miniaturansicht' "und kleben Sie sie in ein IMG-Tag."
Titel - Hiermit wird unser Beitragstitel als Link zwischen h2-Tags eingefügt. the_permalink() ruft den Link des Posts ab und the_title() ruft den Titel ab. Ziemlich einfach, oder?
Datum & Uhrzeit - Hier erhalten wir die Uhrzeit, zu der der Beitrag erstellt wurde, im Format: l, F j, YG:i - oder in Englisch: Tag, Datum, Jahr Zeit (z. B. Samstag, 2. August 2008 14:27).
Inhalt - Ruft den Inhalt des Beitrags bis zum ab (dank des zuvor enthaltenen Codes). 'Weiter ...' ist der Text, der am Ende des Beitrags angezeigt wird. Passen Sie es an, wie Sie möchten.

3.6 - Post Meta


<div class="postmeta">

<p><?php the_category(', '); ?> - <a href="<?php the_permalink() ?>#commenting" title="View Comments">

<span class="comm"><?php comments_number('0 Comments','1 Comment','% Comments'); ?></span></a></p>

</div>

Dadurch werden die Kategorien abgerufen, aus denen der Beitrag stammt. Wenn es mehr als eine gibt, werden sie durch Kommas getrennt. Anschließend wird ein Link zum Kommentarbereich und die Anzahl der Kommentare im Artikel abgerufen.

1
2	</div> <!-- /breaking -->
3	<?php endwhile; ?>

Das schließt einfach das "div.breaking", in dem sich unser Beitrag befand; und schließt dann die Schleife, sobald es fertig ist.

Schritt 4 - Neueste Beiträge

Unter unseren drei 'Breaking News'-Postings finden Sie eine benutzerdefinierte Anzahl der neuesten Posts. Dabei werden alle Posts aus der Kategorie 'Breaking' und alle anderen benutzerdefinierten Kategorien, die ignoriert werden sollen, ignoriert. Wir werden am Ende unseres aktuellen Codes Folgendes hinzufügen:


<!-- Show x Latest Posts -->
<?php query_posts('showposts='.$latest_num.'&cat=-'.$breaking_cat.','.$latest_ignore.''); ?>
<?php while (have_posts()) : the_post(); ?>


<div class="recent">

    <img src="<?php echo get_post_meta($post->ID, 'thumbnail',true) ?>" alt="Post Image" class="postimg-s" />
    <h3><a href="<?php the_permalink() ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h3>
    <p class="datetime"><?php the_time('l, F j, Y G:i'); ?></p>
    <div class="postmeta">
        <p><?php the_category(', '); ?> - <a href="<?php the_permalink() ?>#commenting" title="View Comments">
	<span class="comm"><?php comments_number('0 Comments','1 Comment','% Comments'); ?></span></a></p>
    </div>

</div>


<?php endwhile; ?>

4.1 - Die Schleife

showposts ='.$ latest_num.' - Weist die Schleife an, nur die Anzahl der letzten Beiträge anzuzeigen, die der Benutzer in der Variablen '$latest_num' angegeben hat.
cat=-'.$breaking_cat.', '.$latest_ignore.' - Das weist die Schleife an, Beiträge in der Kategorie 'Brechen' zu ignorieren (beachten Sie das Minus-Symbol, das der Benutzer in den Variablen verwenden muss), um keine Beiträge zu duplizieren. und auch um Beiträge aus einer der Kategorien zu ignorieren, die der Benutzer in der Variablen '$latest_ignore' angibt.

Der Rest ist selbsterklärend und entspricht der Funktion Breaking News. Ein paar Unterschiede sind das Fehlen des Abschnitts 'Inhalt' in jedem Beitrag, und auch das Beitragsbild erhält stattdessen die Klasse 'postimg-s'. Auf diese Weise benötigen wir nur ein Miniaturbild, das wir dann in unserem CSS von 200 x 200 auf 50 x 50 verkleinern.

4.2 - Schließen der Seite

Um die aktuelle Seite zu beenden, müssen wir den div#content schließen und unsere Fußzeile einfügen:

1
2	</div><!--/content-->
3	<?php get_footer(); ?>

4.3 - Footer.php

Schließen Sie in dieser Datei einfach die Tags #container, body und html:

1
2	</div><!--/container-->
3	</body>
4	</html>

Step 5 - CSS Styling

Wenn Sie jetzt einige Posts erstellt haben, sollte Ihr Design ungefähr so aussehen:

Ziemlich hässlich, oder? Naja nicht mehr lange.

5.1 - Notwendigkeiten

Öffnen Sie Ihre style.css-Datei und fügen Sie den folgenden Code ein:

1
2	/*------------------------------------------------------------------------
3	Theme Name: WordPress Times
4	Theme URI: http://www.vivawp.com/
5	Description: A tutorial for NETTUTS.com by Dan Harper
6	Version: 1.00
7	Author: Dan Harper
8	Author URI: http://danharper.me
9	------------------------------------------------------------------------*/

Das ist oben in dieser Datei erforderlich, da der Theme Manager in WordPress einige Informationen zu Ihrem Theme enthält. Füllen Sie die Abschnitte nach Belieben aus.

5.2 - Styling

Unten finden Sie den gesamten CSS-Code, der zum Gestalten des Dokuments verwendet wird. Es ist unten dokumentiert.


* {margin:0;padding:0;}

body {
background-color: #faf9f5;
color: #3d3d3d;
font-size:75%;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#container {
width: 940px;
margin: 15px auto;
}

h1, h2, h3, h4, h5, h6 {
font-family: Georgia, "Times New Roman", Times, serif;
}

/* BLUEPRINT CSS TYPOGRAPHY */
h1, h2, h3, h4, h5, h6 {font-weight:normal;color:#111;}
h1 {font-size:3em;line-height:1;margin-bottom:0.5em;}
h2 {font-size:2em;margin-bottom:0.75em;}
h3 {font-size:1.5em;line-height:1;margin-bottom:1em;}
h4 {font-size:1.2em;line-height:1.25;margin-bottom:1.25em;height:1.25em;}
h5 {font-size:1em;font-weight:bold;margin-bottom:1.5em;}
h6 {font-size:1em;font-weight:bold;}
h1 img, h2 img, h3 img, h4 img, h5 img, h6 img {margin:0;}
p {margin:0 0 1.5em;}
li ul, li ol {margin:0 1.5em;}
ul, ol {margin:0 1.5em 1.5em 1.5em;}
/* /BLUEPRINT CSS TYPOGRAPHY */

h1#header {
margin-bottom: 20px;
}

#content {
width: 600px;
float: left;
}

.breaking, .recent {
padding: 10px;
border: 1px solid #3d3d3d;
margin-bottom: 15px;
}

.postimg {
float: right;
width: 200px;
height: 200px;
padding-bottom: 10px;
}

.postimg-s {
float: right;
width: 50px;
height: 50px;
padding-bottom: 10px;
}

.breaking h2 {
font-size: 2.5em;
line-height: 1em;
margin-bottom: 0px;
}

    .breaking h2 a, .recent h3 a {
    text-decoration: none;
    color: #3d3d3d;
    }
    
    .breaking h2 a:hover, .recent h3 a:hover {
    text-decoration: underline;
    }

p.datetime {
font-style: italic;
font-size: 0.9em;
}

/* POST META */
.postmeta {
margin: -10px;
padding: 4px;
background-color: #dedbd1;
clear: both;
}

    .postmeta p {
    margin: 0;
    padding-left: 6px;
    text-transform: uppercase;
    font-weight: bold;
    }
    
    .postmeta span.comm {
    font-weight: normal;
    }
    
    .postmeta a:link, .postmeta a:visited {
    color: #3d3d3d;
    text-decoration: none;
    }
    
    .postmeta a:hover, .postmeta a:active {
    text-decoration: underline;
    }

#sidebar {
width: 300px;
margin-left: 620px;
}

5.3 - Prüfung des CSS

* - Entfernt unerwünschte Ränder und Auffüllungen von allen Elementen, die Browser selbst einfügen.
body - Grundlegendes Seiten-Styling von Farben und Schriftarten.
#container - Legt die Seitenbreite auf 940px fest. 15px Rand oben und unten und zentriert ihn im Fenster.
h1, h2, h3, h4, h5, h6 - Überschriften nach Georgia, Times New Roman, Times oder einer anderen Serifenschrift.
Tags zwischen Blueprint-Kommentaren - Grundlegendes Typografie-Styling aus dem Blueprint CSS Framework. Spart viel Ärger, wenn Text schön aussieht.

h1#header - Fügt eine gewisse Trennung vom Blognamen und dem Rest des Dokuments hinzu.
#content - Alle unsere Inhalte sind links in 600px verpackt. Der verbleibende Speicherplatz kann als Seitenleiste verwendet werden.
.breaking, .recent - Beinhaltet Breaking und Recent Posts in einer Box mit 10px-Polsterung. 15px Lücke zwischen jedem.
.postimg - Formatiert das Bild des Posts zum Brechen von Artikeln. Die Bildgröße ist auf 200 Pixel begrenzt und schwebt nach rechts.
.postimg-s - Wie oben, jedoch für die neuesten Artikel und die Bildgröße wird auf 50 Pixel geändert.
.breaking h2 - Verkleinert den Titel von Breaking-Artikeln ohne unteren Rand.
.breaking h2 a, .recent h3 a - Grundlegendes Styling für Titel von Artikeln, wobei der Standard-Linkstil ausgeblendet wird.
.breaking h2 a:hover, .recent h3 a:hover - Fügt dem Titellink eine Unterstreichung hinzu, wenn der Mauszeiger darüber bewegt wird, um dem Benutzer anzuzeigen, dass es sich tatsächlich um einen Link handelt.
p.datetime - Zeichenfolge für Datum und Uhrzeit für Artikel, die etwas kleiner und kursiv dargestellt wurden.

.postmeta - Erstellt ein Feld mit den Post-Meta-Details (Kategorien und Kommentare). Der Rand -10px stellt sicher, dass der gesamte Postfachbereich ausgefüllt wird.
.postmeta p - Text in postmeta div wird in Großbuchstaben und fett gedruckt.
.postmeta span.comm - Entfernt das fette Styling für den Text "x Kommentare".
.postmeta a - Link-Styling zum Entfernen der Standard-Link-Farbe.
.postmeta a:hover - Fügt Links zum Hover eine Unterstreichung hinzu.

#sidebar - Erstellt einen Bereich für eine Seitenleiste auf der rechten Seite.

Die Seite sieht nun so aus. Viel sauberer!

Schlussfolgerung

Glückwunsch. Sie haben erfolgreich die Grundlagen für die Startseite eines Nachrichtenthemas für WordPress erstellt, einschließlich eines Bereichs für empfohlene Beiträge - 'ein Muss', wenn es um Nachrichtenthemen geht. Mit den einfachen Anpassungsoptionen mithilfe der PHP-Variablen können Sie sich auch von der Konkurrenz abheben.

Achten Sie auf den Start von vivaWP - einer neuen Familie von Premium WordPress-Themes, die Mitte August erscheinen wird. Unser erstes Thema, CocoaNews, enthält einige der grundlegenden Codes, die in diesem Tutorial gezeigt werden.