Rumah > Tutorial CMS > WordTekan > teks badan

Keseluruhan proses penciptaan tema WordPress (8): membuat index.php

藏色散人
Lepaskan: 2023-02-21 10:17:29
ke hadapan
1866 orang telah melayarinya

Saya memperkenalkan anda kepada "Keseluruhan proses penghasilan tema WordPress (7): Membuat sidebar.php". sila lihat muka surat. Sekarang apa yang kita ingin buat ialah halaman indeks index.php Di sini kita boleh memahaminya buat sementara waktu sebagai halaman utama, tetapi sebenarnya ia tidak semudah laman utama.

Halaman utama di halaman utama ialah senarai artikel, yang menyenaraikan artikel di blog anda satu persatu. Anda mungkin perasan bahawa gaya setiap artikel di laman utama adalah sama, tetapi kandungan teks seperti tajuk, masa, pengarang dan abstrak adalah berbeza, huh! Kami hanya memerlukan kod HTML satu artikel untuk membuat index.php. Kami tidak perlu menulis HTML bagi banyak artikel Selain itu, ini bukan kandungan dinamik. Kami hanya memerlukan satu gelung untuk memaparkan semua artikel di halaman utama. Gelung adalah untuk melakukan sesuatu berulang kali. Jika anda pernah mempelajari mana-mana bahasa pengaturcaraan komputer sebelum ini, tidak sukar untuk memahami apa itu gelung, dan fungsi gelung boleh difahami dengan mudah, seperti sementara, untuk, foreach...Keseluruhan proses penciptaan tema WordPress (8): membuat index.php

Masukkan a ayat di sini, jika anda benar-benar ingin tahu cara membuat tema, sila buka editor teks, ikuti saya langkah demi langkah, ubah suai langkah demi langkah, refresh blog anda setiap kali anda membuat pengubahsuaian untuk melihat perubahan yang ada, dengan cara ini Barulah anda boleh mendalami pemahaman anda. Jika anda terlalu malas untuk melakukannya, saya cadangkan anda tidak membaca kandungan berikut, kerana ia tidak akan banyak membantu anda.

Sekarang mula membuat index.php. Pada mulanya, terdapat tiga artikel dalam index.php Apabila anda membuka index.php, anda boleh melihat tiga tag artikel . meninggalkan satu artikel dan mengeluarkan abstrak artikel. Kod yang diubah suai adalah seperti berikut:

Seperti yang dapat dilihat daripada kod di atas, rangka html artikel ialah:

Rangka html artikel mengenai topik berbeza adalah berbeza biasa dengan HTML, anda boleh dengan cepat mengenal pasti rangka artikel di atas adalah rangka tema kami, kami akan menambah kandungan dinamik pada indeks.php:

<?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(&#39;template_url&#39;); ?>/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(); ?>
Salin selepas log masuk
<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(&#39;template_url&#39;); ?>/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>
Salin selepas log masuk
1. Tambah tajuk artikel


Ditemui:

Tukar kepada:

<h3 class="title"><a href="single.html">Loreum ipsium massa cras phasellus</a></h3>
Salin selepas log masuk

Terangkan di sini Fungsi php ini:

<h3 class="title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h3>
Salin selepas log masuk
Keluarkan pautan URL artikel

Tajuk artikel

  • 2. Tambah tag artikel
Ramai di antara kita suka menambah beberapa tag semasa menulis artikel, dan kami juga telah menambah bar sisi "Tag Cloud", tema kami harus menyokong tag. Ditemui:

ditukar kepada:

<a href="#">News</a>, <a href="#">Products</a>
Salin selepas log masuk

Rujukan fungsi: the_tags

<?php the_tags(&#39;标签:&#39;, &#39;, &#39;, &#39;&#39;); ?>
Salin selepas log masuk
3. Tambah tarikh

ditemui: 31hb Sep, 09

ditukar kepada:

Rujukan fungsi: the_time

Mengenai format tarikh yang diperolehi oleh Y n j dalam fungsi ini, anda boleh merujuk kepada dokumen (Bahasa Cina) dan memilih format masa yang anda suka: zh-cn: Masa dan tarikh tersuai
<?php the_time(&#39;Y年n月j日&#39;) ?>
Salin selepas log masuk
Mungkin anda pernah membaca perkara di atas dengan syarat Dokumen masa dan tarikh masih mengelirukan Berikut adalah beberapa contoh, dan anda hampir boleh mengikutinya dan menentukan format masa dan tarikh kegemaran anda:

4、显示评论数

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

<a href="#">1 Comment</a>
Salin selepas log masuk

改成:

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

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

函数参考:comments_popup_link

5、添加编辑按钮

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

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

函数参考:edit_post_link

6、添加文章内容

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

将其改成:

<!-- Post Content -->
<?php the_excerpt(); ?>
Salin selepas log masuk

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

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

函数参考:

  • the_excerpt
  • the_content

7、阅读全文

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

<a href="single.html" class="button right"> Read More...</a>
Salin selepas log masuk

改成:

<a href="<?php the_permalink(); ?>" class="button right">阅读全文</a>
Salin selepas log masuk

8、添加文章循环

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

改成:

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

再查找:

<div class="hr clearfix"> </div>
Salin selepas log masuk

改成:

<div class="hr clearfix"> </div>
Salin selepas log masuk

再次查找:

</div><?php get_sidebar(); ?>
Salin selepas log masuk

改成:

<?php else : ?>
<h3 class="title"><a href="#" rel="bookmark">未找到</a></h3>
<p>没有找到任何文章!</p>
<?php endif; ?>
</div>
<?php get_sidebar(); ?>
Salin selepas log masuk

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

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

9、添加文章分页

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

<p class="clearfix"> <a href="#" class="button float"><< Previous Posts</a> <a href="#" class="button float right">Newer Posts >></a> </p>
Salin selepas log masuk

改成:

<p class="clearfix"><?php previous_posts_link(&#39;<< 查看新文章&#39;, 0); ?> <span class="float right"><?php next_posts_link(&#39;查看旧文章 >>&#39;, 0); ?></span></p>
Salin selepas log masuk

参考函数:

  • previous_posts_link
  • next_posts_link

10、文章缩略图

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

<!-- Post Image --><img class="thumb" alt="" src="<?php bloginfo(&#39;template_url&#39;); ?>/images/610x150.gif" />
Salin selepas log masuk

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

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

推荐学习:《WordPress教程

Atas ialah kandungan terperinci Keseluruhan proses penciptaan tema WordPress (8): membuat index.php. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:ludou.org
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan