Comment faire une bannière dans WordPress

Il existe en fait de nombreuses façons de créer des diagrammes de changement de bannière pour les sites Web WordPress, dont certains sont créés via des plug-ins WordPress. Mais pour les novices qui créent des sites Web, ce n’est pas une tâche facile de créer un diagramme de changement de bannière qui appelle automatiquement le contenu d’arrière-plan du site Web WordPress.

Ce qui suit partagera une méthode de création de WordPress pour ajouter un diagramme de changement de bannière. Voyons d’abord l’effet !

Recommandations associées : "Tutoriel WordPress"

étapes WordPress pour ajouter un diagramme de changement de bannière

Étape 1 : Téléchargez le fichier de diaporama d'image de changement de bannière [Adresse de téléchargement : http://pan.baidu.com/s/1bnsevr5]

Étape 2 : Décompressez le fichier téléchargé et le dossier JS est placé sous le dossier du thème.

Étape 3 : placez le code js suivant dans la balise

<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>

Étape 4 : ajoutez le code suivant au fichier de fonctions du modèle de site Web, fonctions.php pour appeler les images de l'article.

//缩略图
function get_first_image() {
global $post;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all(&#39;/<img .+src=[\&#39;"]([^\&#39;"]+)[\&#39;"].* alt="Comment faire une bannière dans 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;
}

Étape 5 : Mettez le code suivant dans le DIV qui doit afficher l'image de changement de bannière, qui est utilisée pour appeler les images dans les articles sous une certaine catégorie en arrière-plan du site Web [cat=5 , le numéro de catégorie peut être modifié par vous-même]

<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>

Étape 6 : placez le style CSS suivant au bas de style.css pour contrôler la taille et le style de l'image de changement de bannière.

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

Étape 7 : Créez un répertoire de catégories en arrière-plan du site Web, nommez-le « Diaporama », puis publiez quatre articles dans cette catégorie et publiez une image dans chaque article. La taille de l'image doit être appliquée. La largeur de votre site Web est cohérente. Remplacez ensuite le numéro d'identification dans le code ci-dessus [Étape 5] par le numéro d'identification de cette catégorie.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!