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.

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('//i', $post->post_content, $matches); $first_img = $matches [1] [0]; if(empty($first_img)){ //Defines a default image $first_img = bloginfo('template_url') . "/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]

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!