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 . Now we will delete the codes of the two articles, leaving one article and remove the article abstract. The modified code is like this:
<?php get_header(); ?>
<!-- Column 1 /Content -->
<div class="grid_8">
<!-- Blog Post -->
<div class="post">
<!-- Post Title -->
<h3 class="title"><a href="single.html">Loreum?ipsium?massa?cras?phasellus</a></h3>
<!-- Post Data -->
<p class="sub"><a href="#">News</a>,?<a href="#">Products</a>???31st?Sep,?09???<a href="#">1?Comment</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">?Read?More...</a></p>
</div>
<div class="hr clearfix">?</div>
<!-- Blog Navigation -->
<p class="clearfix">?<a href="#" class="button float"><<?Previous?Posts</a>?<a href="#" class="button float right">Newer?Posts?>></a>?</p>
</div>
<?php get_sidebar(); ?><?php get_footer(); ?>
As 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">文章標(biāo)題</a></h3>
<!-- Post Data -->
<p class="sub"><a href="#">標(biāo)簽1</a>, <a href="#">標(biāo)簽12</a> ? 發(fā)布時(shí)間 ? <a href="#">評(píng)論數(shù)</a></p>
<div class="hr dotted clearfix"> </div>
<!-- Post Image 文章的縮略圖 -->
<img class="thumb" alt="" src="<?php bloginfo('template_url'); ?>/images/610x150.gif" />
<!-- Post Content -->
文章內(nèi)容
<!-- 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:
<h3 class="title"><a href="single.html">Loreum ipsium massa cras phasellus</a></h3>
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:
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:
The above is the detailed content of The whole process of WordPress theme creation (8): making index.php. For more information, please follow other related articles on the PHP Chinese website!
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
There are four ways to adjust the WordPress article list: use theme options, use plugins (such as Post Types Order, WP Post List, Boxy Stuff), use code (add settings in the functions.php file), or modify the WordPress database directly.
Web development design is a promising career field. However, this industry also faces many challenges. As more businesses and brands turn to the online marketplace, web developers have the opportunity to demonstrate their skills and succeed in their careers. However, as demand for web development continues to grow, the number of developers is also increasing, resulting in increasingly fierce competition. But it’s exciting that if you have the talent and will, you can always find new ways to create unique designs and ideas. As a web developer, you may need to keep looking for new tools and resources. These new tools and resources not only make your job more convenient, but also improve the quality of your work, thus helping you win more business and customers. The trends of web development are constantly changing.
Importing WordPress source code requires the following steps: Create a sub-theme for theme modification. Import the source code and overwrite the files in the sub-topic. Activate the sub-theme to make it effective. Test the changes to make sure everything works.
To build a website using WordPress hosting, you need to: select a reliable hosting provider. Buy a domain name. Set up a WordPress hosting account. Select a topic. Add pages and articles. Install the plug-in. Customize your website. Publish your website.
Do you want to connect your website to Yandex Webmaster Tools? Webmaster tools such as Google Search Console, Bing and Yandex can help you optimize your website, monitor traffic, manage robots.txt, check for website errors, and more. In this article, we will share how to add your WordPress website to the Yandex Webmaster Tool to monitor your search engine traffic. What is Yandex? Yandex is a popular search engine based in Russia, similar to Google and Bing. You can excel in Yandex
Do you want to know how to use cookies on your WordPress website? Cookies are useful tools for storing temporary information in users’ browsers. You can use this information to enhance the user experience through personalization and behavioral targeting. In this ultimate guide, we will show you how to set, get, and delete WordPresscookies like a professional. Note: This is an advanced tutorial. It requires you to be proficient in HTML, CSS, WordPress websites and PHP. What are cookies? Cookies are created and stored when users visit websites.
To create an account on WordPress, simply visit its website, select the registration option, fill in the registration form, and verify your email address. Other ways to register include using a Google account or Apple ID. The benefits of signing up include creating a website, gaining features, joining the community, and gaining support.
Do you need to fix HTTP image upload errors in WordPress? This error can be particularly frustrating when you create content in WordPress. This usually happens when you upload images or other files to your CMS using the built-in WordPress media library. In this article, we will show you how to easily fix HTTP image upload errors in WordPress. What is the reason for HTTP errors during WordPress media uploading? When you try to upload files to Wo using WordPress media uploader
