I introduced you to "The whole process of WordPress theme production (7): Making sidebar.php". This article continues to introduce to you how to make index.php. Let's take a look. ~
We have already created sidebar.php, footer.php and header.php for all public pages of the blog. Starting today, we will create separate pages. Now what we want to create is the index page index.php. Here we can temporarily understand it as the home page, but in fact it is not as simple as the home page.
The main page is the article list, which lists the articles on your blog one by one. You may have noticed that the style of each article on the homepage is the same, but the text content such as title, time, author, and abstract are different, huh! We only need the HTML code of one article to make index.php. We don't need to manually write the HTML of so many articles. Moreover, this is not dynamic content. We only need one loop to display all articles on the home page. A loop is to do something repeatedly. The loop here is to repeatedly output articles. If you have learned any computer programming language before, it is not difficult to understand what a loop is, and the functions of a loop can be easily understood, such as while, for, foreach...
在Insert a sentence here, if you really want to know how to make a theme, please open the text editor, follow me step by step, modify step by step, refresh your blog every time you make a modification to see what changes, so Only then can you deepen your understanding. If you're too lazy to do it, I suggest you don't read the following content, as it won't be of much help to you.
Now start making index.php. Initially, there are three articles in index.php. When you open index.php, you can see the three tags of the article d699a3398de91626f8da48ef90fa2610. Now we will delete the codes of the two articles, leaving one article and remove the article abstract. The modified code is like this:
578c83d58b4fb2f59eaf1658e68c7eb3 bf0a7784259ea2450e04ad73e4261b25 c816fb4c82c833170a1e3d36de6e495e b9dd13fe880cb5d97a29da82b97a7677 7f51ef8274e570298e54b11fdb1f5e16 ac3a27832e918005473c47c694ceca6a c3606beab6681aa5853aec0b47ea0fb570e0cb0b1f9ab5693c68765caafc6b4cLoreum ipsium massa cras phasellus5db79b134e9f6b82c0b36e0489ee08ed39528cedfa926ea0c01e69ef5b2ea9b0 3702578b6fd3101b3a82621ffd3e7b4c 40c373f4d56d7db9536913dd82742331f1b3ba8846c179e65eb68da95b01a812News5db79b134e9f6b82c0b36e0489ee08ed, f1b3ba8846c179e65eb68da95b01a812Products5db79b134e9f6b82c0b36e0489ee08ed • 31st Sep, 09 • f1b3ba8846c179e65eb68da95b01a8121 Comment5db79b134e9f6b82c0b36e0489ee08ed94b3e26ee717c64999d7867364b1b4a3 e972da4d548fe480c40c9a2f1227ca04 16b28748ea4df4d9c2150843fecfba68 c508d4854be103cfb4b7e0d9bcaf9372 d86cddf8d691fdd46d642e760c40e628/images/610x150.gif" /> e503568341a33083ea0ffa60142b17e3 afc9b62199be7498111d94fe3268e34b 2661fe612134550c8a43d6935cef3270528277898e8ea39ab50bce7f457fe13e Read More...5db79b134e9f6b82c0b36e0489ee08ed94b3e26ee717c64999d7867364b1b4a3 16b28748ea4df4d9c2150843fecfba68 1cc748e10901b6715fa9087abf370429 16b28748ea4df4d9c2150843fecfba68 3f3875c94b33407c2adf38370fe28f7b 2661fe612134550c8a43d6935cef3270 0c76242f8aa99df277e784671af8a1c1<< Previous Posts5db79b134e9f6b82c0b36e0489ee08ed f9076eaab5893c56dd7bd005bceb51f4Newer Posts >>5db79b134e9f6b82c0b36e0489ee08ed 94b3e26ee717c64999d7867364b1b4a3 16b28748ea4df4d9c2150843fecfba68 7e289a154b156d7d8b381b9812fc24759e8f83f9df7fbb8d080845d182c4518bAs you can see from the above code, the html skeleton of an article is:
<div class="post"> <!-- Post Title --> <h3 class="title"><a href="single.html">文章标题</a></h3> <!-- Post Data --> <p class="sub"><a href="#">标签1</a>, <a href="#">标签12</a> • 发布时间 • <a href="#">评论数</a></p> <div class="hr dotted clearfix"> </div> <!-- Post Image 文章的缩略图 --> <img class="thumb" alt="" src="<?php bloginfo('template_url'); ?>/images/610x150.gif" /> <!-- Post Content --> 文章内容 <!-- Read More Button --> <p class="clearfix"><a href="single.html" class="button right"> 阅读全文按钮</a></p> </div> <div class="hr clearfix"> </div>
The html skeleton of articles with different themes is different. If you are familiar with html, You can quickly identify the skeleton of the article. The above is the skeleton of our theme. Based on this, we will add dynamic content to index.php:
1. Add article title
Found:
c3606beab6681aa5853aec0b47ea0fb570e0cb0b1f9ab5693c68765caafc6b4cLoreum ipsium massa cras phasellus5db79b134e9f6b82c0b36e0489ee08ed39528cedfa926ea0c01e69ef5b2ea9b0
Changed to:
c3606beab6681aa5853aec0b47ea0fb51c81c5c4beb08a8ee9c9610b837ee9f2" rel="bookmark">7c451a7bd609eaed8c011cfb968e93295db79b134e9f6b82c0b36e0489ee08ed39528cedfa926ea0c01e69ef5b2ea9b0
Here are the explanations of these php functions:
- be582d88f00d4e9080d24b7280839fbe Output the URL link of the article
- 2dc51b38c99501b394e46960b1866842 Output the title of the article
2. Add article tags
Many of us like to add some tags when writing articles, and we have also added a "tag cloud" to the sidebar, our theme Tags should be supported. Found:
f1b3ba8846c179e65eb68da95b01a812News5db79b134e9f6b82c0b36e0489ee08ed, f1b3ba8846c179e65eb68da95b01a812Products5db79b134e9f6b82c0b36e0489ee08ed
Changed to:
987ba55c46b6e0200abe3b0119813994
Function reference: the_tags
3. Add date
Found: 31st Sep, 09
Changed to:
5bc7549643812eee01cfb2270039a293
Function reference: the_time
About Y in this function For the date format obtained by n j, you can refer to the document (Chinese) and choose the time format you like: zh-cn: Custom time and date
Maybe you have read the time and date documents provided above, or If you are confused, here are a few examples. You can almost follow the example and specify the time and date format you like:
PHP code | Output content |
91400d1358fa63cfdf75953fea959c64 | May 1, 1999 |
366fa87a03157247c8e919603be2b26e | May 01, 1999 |
a9ca9f1e62c36239d38c2a21850f950c | 1999-05-01 |
99-05-01 02:09:08 |