So erstellen Sie ein Banner in WordPress

Es gibt tatsächlich viele Möglichkeiten, Bannerwechseldiagramme für WordPress-Websites zu erstellen, einige davon werden über WordPress-Plug-ins erstellt. Aber für Anfänger, die Websites erstellen, ist es keine leichte Aufgabe, ein Banner-Umschaltdiagramm zu erstellen, das automatisch den Hintergrund-Website-Inhalt für die WordPress-Website aufruft.

Im Folgenden finden Sie eine Methode zum Erstellen eines WordPress-Banner-Umschaltdiagramms. Schauen wir uns zunächst die Wirkung an!

Verwandte Empfehlungen: „WordPress-Tutorial“

WordPress-Schritte zum Hinzufügen eines Bannerwechseldiagramms

Schritt 1: Laden Sie die Banner-Switching-Bild-Diashow-Datei herunter [Download-Adresse: http://pan.baidu.com/s/1bnsevr5]

Schritt 2: Entpacken Sie die heruntergeladene Datei und der JS-Ordner wird abgelegt unter dem Theme-Ordner.

Schritt 3: Platzieren Sie den folgenden js-Code im -Tag.

<script type="text/javascript" src="<?php bloginfo(&#39;template_directory&#39;); ?>/js/jquery-1.4a2.min.js" type="text
/javascript"></script>
<script type="text/javascript" src="<?php bloginfo(&#39;template_directory&#39;); ?>/js/jquery.KinSlideshow-1.2.1.min.js" 
type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#KinSlideshow").KinSlideshow();
})
</script>

Schritt 4: Fügen Sie den folgenden Code zur Funktionsdatei „functions.php“ der Website-Vorlage hinzu, um die Bilder im Artikel aufzurufen.

//缩略图
function get_first_image() {
global $post;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all(&#39;/<img .+src=[\&#39;"]([^\&#39;"]+)[\&#39;"].* alt="So erstellen Sie ein Banner in WordPress" >/i&#39;, $post->post_content, $matches);
$first_img = $matches [1] [0]; if(empty($first_img)){ //Defines a default image $first_img = bloginfo(&#39;template_url&#39;) 
. "/images/default.jpg";
};
return $first_img;
}

Schritt 5: Fügen Sie den folgenden Code in das DIV ein, das das Banner-Umschaltbild anzeigen muss, das verwendet wird, um die Bilder in den Artikeln unter einer bestimmten Kategorie im Hintergrund der Website aufzurufen [cat=5 , die Kategorienummer kann von Ihnen selbst geändert werden]

<div id="KinSlideshow" style="visibility:hidden;">
<?php if (have_posts()) : ?>
<?php query_posts(&#39;cat=5&#39; . $mcatID. &#39;&caller_get_posts=1&showposts=4&#39;); ?>
<?php while (have_posts()) : the_post(); ?>
<a href="<?php the_permalink(); ?>" target="_blank" title="<?php the_title(); ?>"><img src="<?php echo get_first_image
(); ?>" /></a>
<?php endwhile;?>
<?php endif; wp_reset_query(); ?>
</div>

Schritt 6: Platzieren Sie den folgenden CSS-Stil unten in style.css, um die Größe und den Stil des Bannerwechselbilds zu steuern.

/*幻灯片*/
#KinSlideshow {float:left;height:300px;background:#999; margin-top:5px; margin-bottom:5px; }
#KinSlideshow img {width:1008px;height:300px;}

Schritt 7: Erstellen Sie ein Kategorieverzeichnis im Hintergrund der Website, nennen Sie es „Diashow“, veröffentlichen Sie dann vier Artikel in dieser Kategorie und veröffentlichen Sie in jedem Artikel ein Bild Die Breite Ihrer Website ist konsistent. Ändern Sie dann die ID-Nummer im obigen Code [Schritt 5] in die ID-Nummer dieser Kategorie.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein Banner in WordPress. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!