How to make a banner in wordpress

There are actually many ways to create banner switching diagrams for wordpress websites, some of which are made through wordpress plug-ins. But for novices who make websites, it is not an easy task to create a banner switching diagram that automatically calls the background website content for the WordPress website.

Let’s share a method of making WordPress to add banner switching diagram. Let’s take a look at the effect first!

Related recommendations: "WordPress Tutorial"

wordpress steps to add banner switching diagram

Step 1: Download the banner switching chart slide file [Download address: http://pan.baidu.com/s/1bnsevr5]

Step 2: Unzip the downloaded file and The JS folder is placed under the theme folder.

Step 3: Place the following js code inside the 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>

Step 4: Add the following code to the website template function file functions.php to call the pictures in the 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="How to make a 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;
}

Step 5: Put the following code into the DIV that needs to display the banner switching image, which is used to call the pictures in the articles under a certain category in the background of the website [cat=5, the category number can be modified by yourself]

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

Step 6: Place the following CSS style at the bottom of style.css to control the size and style of the banner switching image.

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

Step 7: Create a category directory in the background of the website, name it "Slideshow", and then publish four articles in this category, and post a picture in each article, and the image size should be applied The width of your website is consistent. Then change the ID number in the code above [Step 5] to the ID number of this category.

The above is the detailed content of How to make a banner in wordpress. For more information, please follow other related articles on the PHP Chinese website!