WordPress template making, transformation, design

How to define index.php and how to derive other files, in the index.php file, within the BODY element, create a new structured markup element with a different id attribute for each element:<div id= "page" ><div id= "header" ></div><div id= "content" ></div><div id= "sidebar" ></div><div id= "Footer" ></div></div>these different attributes, respectively, represent different areas, so that people can see what the meaning of, the following we focus on the construction of the header,content,sidebar,footer part. (i). Building the header<div id= "Header" ></div>Enter the following code between the two tags of the element:this uses the WP built-in bloginfo function to generate the content, where: bloginfo (' URL ') returns the site homepage link, bloginfo (' name ') returns the site title; Bloginfo (' description ') returns the site description. Save the index.php file, and then press F5 in the browser to refresh the page and see what you can see? Then through "View Source file", check the information generated by WP's Bloginfo () function. (b). Build content in<div id= "Content" ></div>, we want to cycle through the posts, including the title, author, publication date, and other relevant information for each post. And, you can display the blog post (depending on the settings of the WP background). First, in<div id= "Content" > and </div>Enter the following code between:<?php while(Have_posts ()): The_post ();?> <divclass= "POST" id= "post-<?php the_id ()?>" ><!– blog title and links –>class= "Post-date" ><spanclass= "Post-month" ><?php the_time (' M ')? ></span><spanclass= "Post-day" ><?php the_time (' d ')? ></span></div><!– author –><spanclass= "Post-author" ><?php _e (' author ');? >:<?php The_author (', ')? ></span><!– category –><spanclass= "Post-cat" ><?php _e (' Categories ');? >:<?php the_category (', ')? ></span><!– comment –><spanclass= "Post-comments" ><?php comments_popup_link (' No comments? ', '1Comment? ', '% Comments? '); ? ></span><!– content –><divclass= "Entry" ><?php the_content (' more content? '); ? ></div><!– other meta Data –><divclass= "Post-meta" ><?php edit_post_link (' edit ', ' | ', ');?></div> </div><?php endwhile;? ><divclass= "Navigation" ><spanclass= "Previous-entries" ><?php next_posts_link (' last article ')?></span> <spanclass= "Next-entries" ><?php previous_posts_link (' latter post ')? ></span></div><?phpElse:? ><divclass= "POST" >it seems complicated. First:<?php while(Have_posts ()): The_post (); ><?php endwhile;?>These two lines, is in WP's whileCycle. which whileThe Have_posts statement determines whether the The_post () function is called by testing the (). If the test have_posts () returnstrue, the The_post () function is called to initialize the built-in variables associated with the blog post. In the whileInside the loop, the first thing to notice is the nested formula semantic structure defined by the three elements of Div, H2, span, and the corresponding elementclassand the id attribute (where only theclassAn id attribute is defined for the DIV element of post--post-<?php the_id ()?>). This is the key to using CSS to control appearances in the future. In this div element, the following WP functions are called to display information about the blog post: the_id (): Back to post Id;the_permalink (): Back to post Permalink Url;the_title (): Return to post title; The_time (' M ') : Returns the month of the publication date; The_time (' d '): Returns the day of the publication date; The_author (): Returns the post author; the_category (): Returns the category of the blog post, The_content (): Returns the contents of the post, where the parameters represent the "More content" of the link text, the above functions are beginning with the_, and the following function name is not only quite self-explanatory taste, but also reminiscent of Thiskey word. In addition, the _e () function is a wrapper function, which is used primarily for language conversions, and if the function is called and passed standard WP terminology, such as: Author or Categories, the translations in your corresponding language pack are returned, respectively, in the Chinese package "author" and "category". Of course, it's not possible. But will lose some adaptability. Also, Omments_popup_link () and Edit_post_link () two functions, which show comments and edit links, do not say much here. In addition, the<?php Endwhile;?> the pager link is displayed after the function called Next_posts_link () and Previous_posts_link (). At this point, if your total number of posts is less than the maximum number of WP background settings, such as: You set the maximum display in the background5Article, and you haveTenPost, it will be paginated; otherwise, if your post is less than or equal to5page navigation links are not visible in the article. Finally, don't leave the<?phpElse:?>The following statement:<divclass= "POST" >Obviously, this is a false hint message. (iii). Building Sidebarsidebar content is of course<div id= "sidebar" ></div>elements are built. Sidebar, Chinese is called the sidebar, which can contain a lot of content. For example: Categories, pages, links, calendars and so on navigation and related information. In WP, the content in sidebar is output in the form of unordered (UL) or ordered (OL) lists. Therefore, it is necessary to<div id= "sidebar" ></div>, enter the following markup:<ul><?phpif(!function_exists (' Dynamic_sidebar ') | |!dynamic_sidebar ()):? ><li id= "Search" ><?php include ( TemplatePath. ' /searchform.php ');?></li> <li id= "Calendar" >class= "Catnav" >1&hierarchical=0);? ></ul></li><liclass= "Archivesnav" >class= "Blogrollnav" >1' <li> ', ' </li> ', ' <br/> ', false, ' id ', false, false,-1, FALSE);? ></ul></li><liclass= "Meta" >The above code starts with the third line, displaying the search form by including searchform.php, calling the Get_calendar () function to display the calendar, calling the Wp_list_pages () function to display the page navigation; calling Wp_list_cats () The function displays the category navigation; call the Wp_get_archives () function to display the archive navigation; call the Get_links () function to display the link navigation. When building the sidebar, create a new searchform.php file for the build search box with the following contents:<form method= "Get"Id=" Searchform "action=" <?php bloginfo (' home ');? >/"><div><input type=" text "value=" <?php Echo Wp_specialchars ($s,1);?> "Name=" S "id=" s "size=" the″/&GT;&LT;BR/><input type= "Submit" id= "Searchsubmit" value= "Search"/></div></form>save it in the MyTheme folder and include it through the include statement. Note that the template path is saved in the constant TemplatePath. Finally, explain the second and penultimate lines of the above code. Obviously this is aifStatement block. Then thisifWhat is the purpose of the statement block containing sidebar? This is the need for the widget sidebar, which is to make the sidebar fit widget plugin (WP2.0Built-in widgets, so you don't have to install them anymore. If you want to use widget plug-ins, you must sidebar the widgets. This way, you can use the Widget plugin in the WP background to easily define the components of the sidebar using drag. Part of the sidebar, in addition to the UL element inside put thisifstatement, you must also create a file functions.php in the MyTheme folder with the following contents:<?PHPif(function_exists (' Register_sidebar ')) Register_sidebar (Array (' Before_widget ')= ' <li id= '%1$s "class= "Widget%2$s ">' , ' After_widget '= ' </li>' , ' Before_title '= ' class= "Sidebartitle" >' , ' After_title '= ' ',));?>(d). Component Footerfooter generally have some copyright information and less important links. So can be in<div id= "Footer" ></div>element, simply put the following code:<p>copyright? -<?php bloginfo (' name ');?></p>at this point, the core index.php file is done! Next, you split the index.php and derive the child template files based on index.php. Create a new header.php, sidebar.php, and footer.php three files in the MyTheme folder. Put the index.php in the<div id= "Header" ></div>, <div id= "sidebar" ></div> and <div id= "Footer" ></div> The three structured elements and their contents are transferred (cut) to these three new files, respectively. Then, in <div id= "header" ></div>Enter the code at the original location:<?php Get_header ();? >in the<div id= "sidebar" ></div>Enter the code at the original location:<?php Get_sidebar ();? >in the<div id= "Footer" ></div>Enter the code at the original location:<?php get_footer ();? >as I said earlier, these threeGetThe function is WP specifically defined for the containing structured file. Your index.php file should now look like this:<! DOCTYPE HTML PUBLIC "-// the//DTD XHTML 1.0 Transitional//EN ""HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-TRANSITIONAL.DTD">//www.w3.org/1999/xhtml ">HTTP://GMPG.ORG/XFN/11"><meta http-equiv= "Content-type" content= "<?php bloginfo (' Html_type ');?>; charset=<?php bloginfo (' CharSet ');?> "/><title><?php bloginfo (' name ');?> <?phpif(Is_single ()) {?>? Blog Archive <?php}?> <?php wp_title ();? ></title><meta name= "generator" content= "WordPress <? PHP bloginfo (' version ');?> "/> <!–leave This  forStats–><link rel= "stylesheet" href= "<?php bloginfo (' Stylesheet_url ');?>" type= "Text/css" media= "all"/ ><link rel= "stylesheet" href= "<?php bloginfo (' stylesheet_directory ');? >/print.css" Type= "Text/css" Media= "print"/><link rel= "alternate" type= "Application/rss+xml" title= "<?php bloginfo (' name ');?> RSS Feed "href=" <?php bloginfo (' Rss2_url ');?> "/><link rel=" Pingback "href=" <?php bloginfo (' Pingback_url ') );?> "/><?php wp_head (); >if(Have_posts ()):? ><?php while(Have_posts ()): The_post ();?> <divclass= "POST" id= "post-<?php the_id ()?>" ><!– blog title and links –>class= "Post-date" ><spanclass= "Post-month" ><?php the_time (' M ')? ></span><spanclass= "Post-day" ><?php the_time (' d ')? ></span></div><!– author –><spanclass= "Post-author" ><?php _e (' author ');? >:<?php The_author (', ')? ></span><!– category –><spanclass= "Post-cat" ><?php _e (' Categories ');? >:<?php the_category (', ')? ></span><!– comment –><spanclass= "Post-comments" ><?php comments_popup_link (' No comments? ', '1Comment? ', '% Comments? '); ? ></span><!– content –><divclass= "Entry" ><?php the_content (' more content? '); ? ></div><!– other meta Data –><divclass= "Post-meta" ><?php edit_post_link (' edit ', ' | ', ');?></div> </div><?php endwhile;?> <divclass= "Navigation" ><spanclass= "Previous-entries" ><?php next_posts_link (' last article ')?></span> <spanclass= "Next-entries" ><?php previous_posts_link (' latter post ')? ></span></div><?phpElse:? ><divclass= "POST" >then, the child template file is derived. Save this "modular" index.php file as single.php, page.php, archive.php, search.php, and category.php. Of course, they are all saved in the MyTheme folder. In this way, WP will call the corresponding paging file when the page is displayed. For example, when displaying the details of a blog post, single.php is called and page.php is called when the page content is displayed.　　Finally, the job is to customize these child template files. 

WordPress template production, transformation, design