search
HomeCMS TutorialWordPressThe whole process of WordPress theme creation (8): making index.php

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. ~

The whole process of WordPress theme creation (8): making index.php

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>
		<!-- Blog Post -->
		<div>
			<!-- Post Title -->
			<h3 id="a-Loreum-ipsium-massa-cras-phasellus-a"><a>Loreum ipsium massa cras phasellus</a></h3>
			<!-- Post Data -->
			<p><a>News</a>, <a>Products</a> • 31st Sep, 09 • <a>1 Comment</a></p>
			<div> </div>
			<!-- Post Image -->
			<img  class="thumb lazy" src="/static/imghwm/default1.png" data-src="<?php bloginfo('template_url'); ?>/images/610x150.gif" alt="The whole process of WordPress theme creation (8): making index.php" >
			<!-- Post Content -->
			
			<!-- Read More Button -->
			<p><a> Read More...</a></p>
		</div>
		<div> </div>
		
		<!-- Blog Navigation -->
		<p> <a> </a><a>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 id="a-nbsp-href-single-html-文章标题-a"><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 lazy"  src="/static/imghwm/default1.png"  data-src="<?php bloginfo(&#39;template_url&#39;); ? alt="The whole process of WordPress theme creation (8): making index.php" >/images/610x150.gif"   alt=""  />
	<!-- 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:

<h3 id="a-Loreum-ipsium-massa-cras-phasellus-a"><a>Loreum ipsium massa cras phasellus</a></h3>

Changed to:

<h3 id="a-rel-bookmark-gt-php-nbsp-the-title-nbsp-a"><a>" rel="bookmark"><?php  the_title(); ?></a></h3>

Here are the explanations of these php functions:

  • Output the URL link of the article
  • 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:

<a>News</a>, <a>Products</a>

Changed to:

<?php  the_tags(&#39;标签:&#39;, &#39;, &#39;, &#39;&#39;); ?>

Function reference: the_tags

3. Add date

Found: 31st Sep, 09

Changed to:

<?php  the_time(&#39;Y年n月j日&#39;) ?>

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:

##99-05-01 02:09:08

4、显示评论数

现在我们来添加评论数代码,查找代码:

<a>1 Comment</a>

改成:

<?php  comments_popup_link(&#39;0 条评论&#39;, &#39;1 条评论&#39;, &#39;% 条评论&#39;, &#39;&#39;, &#39;评论已关闭&#39;); ?>

该函数会根据文章的评论数量显示不同的文字链接,0 条评论、1 条评论等等,当然能你可以根据自己的爱好定制文字内容。该链接会直接打开对应的文章,并移动到文章的评论区.

函数参考:comments_popup_link

5、添加编辑按钮

如果文章作者已登录,我们将允许他在首页点击对应文章的编辑按钮,就可以直接修改文章,这个功能是可选的,你可以不添加。接上面的评论按钮,我们在其后面添加相应代码:

<?php  comments_popup_link(&#39;0 条评论&#39;, &#39;1 条评论&#39;, &#39;% 条评论&#39;, &#39;&#39;, &#39;评论已关闭&#39;); ?>

函数参考:edit_post_link

6、添加文章内容

可能有些人喜欢在首页输出全文,而有些人喜欢在首页输出文章摘要,这里提供两种方案,任君选择。查找:

将其改成:

<!-- Post Content -->
<?php  the_excerpt(); ?>

只要在写文章的时候在"摘要"框内填写摘要,在首页显示的就是摘要,如果不填就输出全文!以下是方案二,用于输出全文,除非你在文章中使用了,代码修改:

<!-- Post Content -->
<?php  the_content(&#39;阅读全文...&#39;); ?>

函数参考:

  • the_excerpt
  • the_content

7、阅读全文

这里给添加阅读全文链接,如果在6、添加文章内容中你选择了输出全文,本步骤可以忽略,查找代码:

<a> Read More...</a>

改成:

<a>" class="button right">阅读全文</a>

8、添加文章循环

到目前为止,你的首页还只能显示一篇文章,要想输出所有文章,需要我们之前提到的循环。查找代码:

改成:

<!-- Blog Post --><?php  if (have_posts()) : while (have_posts()) : the_post(); ?>

再查找:

<div> </div>

改成:

<div> </div>

再次查找:

改成:

<?php else : ?>
<h3 id="a-nbsp-href-nbsp-rel-bookmark-未找到-a"><a href="#" rel="bookmark">未找到</a></h3>
<p>没有找到任何文章!</p>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>

好了,现在查看你的主页,是不是可以显示多篇文章了呢?文章数量取决于你在后台设置每页可显示的文章数量。以上的循环可以简化为以下内容,这样看起来应该比较容易理解了,在endwhile之前不断地输出每篇文章,直至文章数量达到每页显示的最大文章数量;如果你的博客上一篇文章都没有,就会输入无文章提示。

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
文章html骨架
<?php endwhile; ?>
<?php else : ?>
输出找不到文章提示
<?php endif; ?>

9、添加文章分页

上面你已经看到,每页只能显示部分文章,要想看下一页,就得添加分页。现在查找代码:

<p> <a> </a><a>Newer Posts >></a> </p>

改成:

<p><?php  previous_posts_link(&#39;<< 查看新文章&#39;, 0); ?> <span><?php  next_posts_link(&#39;查看旧文章 >>', 0); ?></span></p>

参考函数:

  • previous_posts_link
  • next_posts_link

10、文章缩略图

对于大部分人来说,不太需要文章缩略图的功能,而且有很多插件可以实现这个功能。这里我们将首页的文章缩略图代码删除:

<!-- Post Image --><img  class="thumb lazy" src="/static/imghwm/default1.png" data-src="<?php bloginfo('template_url'); ?>/images/610x150.gif" alt="The whole process of WordPress theme creation (8): making index.php" >

另外,还有个存档页面的模板archive.php,跟index.php的制作过程完全一样,只不过需要在functions.php里添加一个函数,这里就不再罗嗦,下载自己看吧,注意:functions.php中的代码已经修改,要想让你的分类、标签等存档页能够正常显示,请下载最新的functions.php覆盖原来的。另外,标签页和分类页支持在该页面顶部显示介绍,前提是你在后台文章标签和分类处要填上了描述。

好了,到目前这个主题也像个样子了,不过还有很多要完善,后面我们将继续完善!

推荐学习:《WordPress教程

PHP code Output content
May 1, 1999
May 01, 1999
1999-05-01

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
This article is reproduced at:ludou. If there is any infringement, please contact admin@php.cn delete
wordpress后台乱码怎么办wordpress后台乱码怎么办Feb 03, 2023 pm 01:48 PM

wordpress后台乱码的解决办法:1、在wordpress的“wp-admin”文件夹下找到“admin.header.php”文件;2、将“charset”属性值设置为“UTF-8”格式即可恢复正常。

如何解决wordpress标签错误问题如何解决wordpress标签错误问题Feb 03, 2023 pm 02:03 PM

wordpress标签错误的解决办法:1、找到并打开wordpress的“wp-includes”目录下的“class-wp.php”文件;2、修改内容为“$pathinfo = isset( $_SERVER['PATH_INFO'] )?mb_convert_encoding($_SERVER['PATH_INFO'],'utf-8','GBK') : '';”即可。

WordPress设置独立的Description和KeywordsWordPress设置独立的Description和KeywordsFeb 21, 2023 am 11:14 AM

你下载的WordPress主题提供的keywords和description这两个meta标签一般都做得很差,或者根本就不提供,这样不利于SEO。本文将指导你如何给主页、分类、页面以及文章页添加单独的Description 和 Keywords。

wordpress乱码怎么办wordpress乱码怎么办Mar 09, 2023 am 09:13 AM

wordpress乱码的解决办法:1、修改“wp-config.php”文件里的“define(’DB_CHARSET’, ‘utf8′);”为“define(’DB_CHARSET’, ”);”;2、把新数据库的编码设置成“latin1_swedish_ci”;3、以uft8的格式导入备份的数据库文件即可。

wordpress进不去怎么办wordpress进不去怎么办Feb 23, 2023 am 09:41 AM

wordpress进不去的解决办法:1、把地址栏“wp-login.php”后面的参数删掉,然后重新输入密码登录;2、登录FTP,下载“pluggable.php”文件,然后找到“ADMIN_COOKIE_PATH”并将它替换为“SITECOOKIEPATH”即可。

wordpress是saas吗wordpress是saas吗Feb 21, 2023 am 10:40 AM

wordpress不是saas。SaaS是一种软件销售模式,它主要针对云端应用软件,而WordPress是一款CMS系统,它主要针对网站构建和管理。虽然WordPress可以作为SaaS提供服务,但它本质上不是一种SaaS应用。

2023年最新WordPress视频教程推荐2023年最新WordPress视频教程推荐Oct 25, 2019 pm 01:12 PM

本次PHP中文网整合了相关的视频教程,中文手册,以及相关的精选文章安利给大家,统统免费!!!通过我们分享的视频,可随时随地免费观看教程视频,也不需要迅雷或者百度网盘下载了。

wordpress是哪一年的wordpress是哪一年的Feb 01, 2023 am 10:26 AM

wordpress是2003年发布的;Matt于2003年5月27日宣布推出第一版WordPress,受到了社区的欢迎,它基于b2 Cafelog并有显著改进;WordPress的第一个版本包括全新的管理界面、模板、XHTML 1.1兼容模板、内容编辑器。

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
1 months agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

EditPlus Chinese cracked version

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

VSCode Windows 64-bit Download

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft