Through the operations of the previous lessons, we realized the dynamic code call for the homepage template of the wordpress theme trans, and the data on the front end of the website was formally linked to the data in the wordpress database. In the next lesson, we will also modify the article list page, article details page, search page, and so on of the trans topic. At this time, if you are careful enough, you will find a problem: the data in the head, right sidebar and bottom of these template pages of trans theme are the same. That is to say, every time we create a dynamic template, we need to re modify the code of these parts. At this time, we may think that since the code is the same, why can't we make these parts of the code into several public templates for other templates to call directly? This is the question we want to discuss today - split the dynamic template on the front page of the wordpress theme trans into several public templates: the head template, the right sidebar template, and the bottom template. Next, we will implement them one by one.
1、 Header template -- header.php.
From the display effect of all front pages, the header of the trans theme homepage template is from the top to the search box, as shown below:
We create a header.php in the trans theme directory, and then find all the codes in the header in the trans theme homepage dynamic template. The visualization code of the homepage header is contained in the<header></header>tag, which is not difficult to find. We also need to find the code in the header of the web page code<head></head>. To put it simply, cut and paste the code from the top of the web page code to the</header>end tag into the header.php file. The codes are as follows:
< ! DOCTYPE html>< html>< head>< meta charset="UTF-8">< title>< ? php echo get_bloginfo("name"); ?>< link rel="stylesheet" href="< ?php bloginfo("wpurl"); ?>
/wp-includes/css/dashicons.css"> < link rel="stylesheet" href="< ? php echo get_bloginfo("stylesheet_url"); ?> "></head><body><! -- Head --><header><div><div><ul><a href="<? php bloginfo("siteurl"); ?> ">< img src="< ? php echo get_option("logo_img") ?: bloginfo("template_url"). "/images/logo.png"; ?> "Alt=" "></a></ul><ul><? Php $menu=array (container=>false,//the outermost label name echo=>false,//direct output is not allowed, but a variable theme_location=>menu_top,//menu name depth=>0,//menu depth); echo strip_tags (wp_nav_menu ($menu),<a>);?></ul></div></div><div><div><ul><li id=" prev "><span class=" dashicons-before dashicons-arrow-left-alt"></span></li>< li id="next">< span class="dashicons-before dashicons-arrow-right-alt"></span></li>< li id="brush">< span class="dashicons-before dashicons-image-rotate"></span></li></ul>< ul>< form action="< ? php bloginfo("siteurl"); ?> "Method=" get "><input type=" search "name=" s "placeholder=" Search "><input type=" submit "value=" Search "></form></ul></div></div></header>
2、 Right sidebar template - sidebar.php
The right sidebar of the trans theme homepage template is shown in the following figure:
Create a sidebar.php file under the trans theme directory, and then find the code of the right sidebar from the code of the homepage template index.php. All codes in the right sidebar are contained in the<div></div>pair of divs. We cut all codes in the entire<div>and paste them into the sidebar.php file. The codes are as follows:
<div><div class="c_right_0 right_con"><ul><span class="dashicon before dashicon admin post">Latest articles<ul><? php query_posts(posts_per_page=10&caller_get_posts=1&orderby=new); while (have_posts()) : the_post(); echo ; echo get_the_title(); echo ; endwhile; wp_reset_query(); ?> < Div class="c_right_1 right_con"><ul><span class="dashicon before dashicon admin post">Popular Articles<? php query_posts(posts_per_page=8&caller_get_posts=1&orderby=comment_count); while (have_posts()) : the_post(); ?>< ul>< div>< a href="< ?php the_permalink(); ?>">< ? Php if (has_post_thumbnail()) {//If there is a featured image, call the featured image the_post_thumbnail (thumbnail, array (alt=>trim ($post ->post_title)), title=>trim (strip_tags ($post ->post_title)), class=>home thumb);} else {//Otherwise, call the first image of the article echo<img src=". catch_first_image()." alt=". $post ->post_title." width="150" height="150" />;}?>< div>< li>< a href="< ?php the_permalink(); ?>">< ? php the_title(); ?>< li>< span class="dashicons-before dashicons-calendar-alt">< ? Php the_time ("M/D/Y");?>< span class="dashicons-before dashicons-visibility">< ? php get_post_meta($post->ID,"views",true); ?> < ? php endwhile; wp_reset_query(); ?>< div class="c_right_2 right_con">< ul>< span class="dashicons-before
Dashicons welcome widgets menu "></span>Popular tags</ul><ul><? Php wp_tag_cloud (number=40&orderby=count&order=DESC&smallest=13&largest=13&unit=px);?></ul></div></div></div>
3、 Bottom template - footer.php
The bottom effect of the trans theme homepage template is shown in the following figure:
Create a footer.php file in the trans theme directory, and then find the code at the bottom in the home page index.php. The bottom is contained in the tag<footer></footer>. We start with<footer>, cut it to the end of the index.php template code, and paste it into the footer.php file. The code is as follows:
<!-- Bottom --><footer><div><ul><? Php if (is_home()) {//If it is the home page, call the friendship link wp_list_bookmarks (title_li=&before=&after=);} else {//Otherwise, call the bottom navigation $menu=array (container=>false,//the outermost tag name echo=>false,//instead of direct output, use a variable theme_location=>menu_bottom,//the menu name depth=>0,//the menu depth); echo strip_tags(wp_nav_menu( $menu ), <a> );}?></ ul></div>< div>< ul>< li> © <? php echo date("Y"); ?> <? php bloginfo("name"); ?> | <? php echo get_option("beian"); ?> | < A href="<? Php echo get_option (" map ");?>">Website map</a></li><li>Power by WordPress | Theme<? php echo wp_get_theme(); ?></ li></ul></div></footer></body></html>
4、 Import a public template.
Through the above three steps, we separate the header code, right sidebar code, and bottom code of the index.php template into public templates: header.php, sidebar.php, footer.php. In the index.php template, we cut out these parts, leaving only the body list on the left. At this time, we need to introduce these public templates into the index.php template.
Method 1: Use the function provided by wordpress to introduce.
Wordpress has provided us with the introduction methods of these public templates:
Head template introduction:<? php get_header(); ?>
Introduction of sidebar template:<? php get_sidebar(); ?>
Introduction of bottom template:<? php get_footer(); ?>
Method 2: Use the PHP native function include() to introduce.
Head template introduction:<? php include("header.php"); ?>
Introduction of sidebar template:<? php include("sidebar.php"); ?>
Introduction of bottom template:<? php include("footer.php"); ?>
The include () method can be used to import any PHP file, but these functions provided by wordpress are limited to importing PHP files with specified names.
With the above operations, we have finished cutting the wordpress theme trans homepage template into four templates: index.php homepage, header.php header template, sidebar.php sidebar template, and footer.php bottom template. This has the advantage that in the future, when we create other trans theme templates, we don't need to write the code at the head, side bar, and bottom, and it is more convenient to modify and maintain the code in the later stage.
