So implementieren Sie eine Miniaturansicht des WordPress-Homepage-Protokolls

Es gibt mehrere Möglichkeiten, Miniaturansichten in WordPress zu implementieren. Die erste Möglichkeit ist die Verwendung eines Plug-Ins, was am einfachsten ist. Die zweite Möglichkeit ist die Verwendung von timthumb.php. Die dritte Möglichkeit ist das Hinzufügen von Code. Aiba verwendet die dritte Methode, die anpassbarer und weniger fehleranfällig ist.
Funktional wird das erste Bild im Dokument als Miniaturbild bezeichnet. Wenn kein Bild vorhanden ist, wird ein zufälliges Bild aufgerufen.
Hier sind die Methoden:
1. Code zu functions.php im Theme-Ordner hinzufügen

// Artikel-Thumbnail abrufen
Funktion dm_the_thumbnail() {
globaler $post;
wenn ( has_post_thumbnail() ) {
echo '<a href="'.get_permalink().'">';
$domsxe = simplexml_load_string(get_the_post_thumbnail());
$thumbnailsrc = $domsxe->attributes()->src;
echo '<img src="'.$thumbnailsrc.'" alt="'.trim(strip_tags( $post->post_title )).'" />';
echo '</a>';
} anders {
$Inhalt = $Post->Post_Inhalt;
preg_match_all('/<img.*?(?: |\\t|\\r|\\n)?src=[\'”]?(.+?)[\'”]?(?:(?: |\\t|\\r|\\n)+.*?)?>/sim', $content, $strResult, PREG_PATTERN_ORDER);
$n = Anzahl($strResult[1]);
$random = mt_rand(1, 5);
wenn($n > 0){
echo '<a href="'.get_permalink()."><img src="'.$strResult[1][0].'" alt="'.get_the_title()."" title="'.get_the_title().""/></a>';
}anders {
echo '<a href=”'.get_permalink().'”><img src=”'.get_bloginfo('template_url').'/images/random/oukan'.$random.'.jpg” alt=”'.get_the_title().'” title=”'.get_the_title().'”/></a>';
}
}
}
add_theme_support('Post-Thumbnails');
set_post_thumbnail_size(100, 140, wahr);

2. In den Theme-Dateien index.php; category.php; archive.php

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

Vorne hinzugefügt

<?php dm_the_thumbnail(); ?>

der_Inhalt kann auch der_Auszug sein.
3. Fügen Sie der Designdatei style.css den folgenden CSS-Code hinzu.

.post .intro img {
schweben: links;
Breite: 140px;
Höhe: 100px;
Rand: 12px 10px 8px 15px;
Polsterung: 4px;
Rand: 1px durchgezogen #ccc;
Position: relativ;
z-Index: 3;
}

Darunter ist .post das CSS des Protokolls und der zugehörigen Informationen und .intro das CSS des Inhalts.
Stellen Sie ein zufälliges Bild bereit (legen Sie es unter „Bilder“ in das Themenverzeichnis ein und denken Sie daran, den Code zu ändern, wenn Sie es woanders ablegen): random
Bilddemonstration: