Der gesamte Prozess der WordPress-Theme-Erstellung (8): Erstellen von index.php

Ich habe Ihnen „Der gesamte Prozess der WordPress-Theme-Erstellung (7): Sidebar.php erstellen“ vorgestellt. In diesem Artikel erfahren Sie, wie Sie index.php erstellen.~

Wir haben es bereits getan. Alle öffentlichen Seiten sidebar.php, footer.php und header.php wurden für den Blog erstellt. Ab heute werden wir separate Seiten erstellen. Was wir nun erstellen möchten, ist die Indexseite index.php. Hier können wir sie vorübergehend als Startseite verstehen, aber tatsächlich ist sie nicht so einfach wie die Startseite.

Die Hauptseite der Homepage ist die Artikelliste, die die Artikel in Ihrem Blog einzeln auflistet. Sie haben vielleicht bemerkt, dass der Stil jedes Artikels auf der Homepage gleich ist, aber die Textinhalte wie Titel, Zeit, Autor und Zusammenfassung sind unterschiedlich, nicht wahr? Wir benötigen nur den HTML-Code eines Artikels, um index.php zu erstellen. Wir müssen den HTML-Code nicht so vieler Artikel manuell schreiben. Wir benötigen nur eine Schleife, um alle Artikel auf der Homepage anzuzeigen. Eine Schleife besteht darin, wiederholt Artikel auszugeben. Wenn Sie zuvor eine Computerprogrammiersprache gelernt haben, ist es nicht schwer zu verstehen, was eine Schleife ist, und die Funktionen einer Schleife sind leicht zu verstehen, wie zum Beispiel while, for, foreach ...

Fügen Sie hier einen Satz ein: If Wenn Sie wirklich wissen möchten, wie man ein Thema erstellt, öffnen Sie bitte den Texteditor, folgen Sie mir Schritt für Schritt und ändern Sie es Schritt für Schritt. Aktualisieren Sie Ihr Blog jedes Mal, wenn Sie eine Änderung vornehmen, um zu sehen, welche Änderungen vorhanden sind Vertiefen Sie Ihr Wissen. Wenn Sie zu faul dazu sind, empfehle ich Ihnen, den folgenden Inhalt nicht zu lesen, da er Ihnen nicht viel weiterhilft.

Jetzt beginnen Sie mit der Erstellung von index.php. Zunächst gibt es drei Artikel in index.php. Wenn Sie index.php öffnen, können Sie die drei Tags des Artikels sehen: d699a3398de91626f8da48ef90fa2610. Belassen Sie einen Artikel und entfernen Sie die Zusammenfassung des Artikels. Der geänderte Code lautet wie folgt:

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
	7e289a154b156d7d8b381b9812fc24759e8f83f9df7fbb8d080845d182c4518b

Wie Sie dem obigen Code entnehmen können, lautet das HTML-Skelett eines Artikels:

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

Das HTML-Skelett von Artikeln zu verschiedenen Themen ist unterschiedlich. Wenn Sie mit HTML vertraut sind, können Sie es schnell identifizieren Das Artikelskelett. Das Obige ist das Skelett unseres Themas, basierend auf:

1 Fügen Sie den Artikeltitel hinzu:

c3606beab6681aa5853aec0b47ea0fb570e0cb0b1f9ab5693c68765caafc6b4cLoreum ipsium massa cras phasellus5db79b134e9f6b82c0b36e0489ee08ed39528cedfa926ea0c01e69ef5b2ea9b0

c3606beab6681aa5853aec0b47ea0fb51c81c5c4beb08a8ee9c9610b837ee9f2" rel="bookmark">7c451a7bd609eaed8c011cfb968e93295db79b134e9f6b82c0b36e0489ee08ed39528cedfa926ea0c01e69ef5b2ea9b0

Hier sind die Erklärungen zu diesen PHP-Funktionen:

be582d88f00d4e9080d24b7280839fbe Geben Sie den URL-Link des Artikels aus

2dc51b38c99501b394e46960b1866842 des Artikels

• 2. Artikel-Tags hinzufügen

Viele von uns fügen beim Schreiben von Artikeln gerne einige Tags hinzu, und wir haben auch eine „Tag-Wolke“ zur Seitenleiste hinzugefügt. Gefunden:

f1b3ba8846c179e65eb68da95b01a812News5db79b134e9f6b82c0b36e0489ee08ed, f1b3ba8846c179e65eb68da95b01a812Products5db79b134e9f6b82c0b36e0489ee08ed

geändert in:

987ba55c46b6e0200abe3b0119813994

Funktionsreferenz: the_tags

3. Hinzugefügtes Datum

Gefunden: 31. September 09 geändert in:

5bc7549643812eee01cfb2270039a293

Funktionsreferenz: the_time

Was das von Y n j in dieser Funktion erhaltene Datumsformat betrifft, können Sie sich auf das Dokument (Chinesisch) beziehen und das gewünschte Zeitformat auswählen: zh-cn: Benutzerdefinierte Uhrzeit und Datum

Vielleicht haben Sie die bereitgestellten Zeit- und Datumsdokumente gelesen oben, immer noch verwirrt, hier sind ein paar Beispiele, Sie können dem Beispiel fast folgen und das gewünschte Zeit- und Datumsformat angeben:

PHP-CodeAusgabeinhalt1999-05-01 99-05-01 02 :09:08

	dbda8f9038946ce3f8376dc15a85d0ec
	544f08b5f7bed62de0016b577e6a10ae
	4、显示评论数 现在我们来添加评论数代码，查找代码： f1b3ba8846c179e65eb68da95b01a8121 Comment5db79b134e9f6b82c0b36e0489ee08ed 改成： ef508cf2b924fde2477e8c01cdd25031 该函数会根据文章的评论数量显示不同的文字链接，0 条评论、1 条评论等等，当然能你可以根据自己的爱好定制文字内容。该链接会直接打开对应的文章，并移动到文章的评论区. 函数参考：comments_popup_link 5、添加编辑按钮 如果文章作者已登录，我们将允许他在首页点击对应文章的编辑按钮，就可以直接修改文章，这个功能是可选的，你可以不添加。接上面的评论按钮，我们在其后面添加相应代码： ef508cf2b924fde2477e8c01cdd250310400cd0a04d7793670cf7e6c0900e9ae 函数参考：edit_post_link 6、添加文章内容 可能有些人喜欢在首页输出全文，而有些人喜欢在首页输出文章摘要，这里提供两种方案，任君选择。查找：50fe872d71b4a2762f68054588be4962 将其改成： e503568341a33083ea0ffa60142b17e3 dfe5ee8d7f498071d6bfae5e746ca35e 只要在写文章的时候在"摘要"框内填写摘要，在首页显示的就是摘要，如果不填就输出全文！以下是方案二，用于输出全文，除非你在文章中使用了95712e0b0bc62c64b1fddfac486f9cb8，代码修改： e503568341a33083ea0ffa60142b17e3 6ebeb6c2a8e770d3f84b91f0543c9ddf 函数参考: the_excerpt the_content 7、阅读全文 这里给添加阅读全文链接，如果在6、添加文章内容中你选择了输出全文，本步骤可以忽略，查找代码： 528277898e8ea39ab50bce7f457fe13e Read More...5db79b134e9f6b82c0b36e0489ee08ed 改成： 1c81c5c4beb08a8ee9c9610b837ee9f2" class="button right">阅读全文5db79b134e9f6b82c0b36e0489ee08ed 8、添加文章循环 到目前为止，你的首页还只能显示一篇文章，要想输出所有文章，需要我们之前提到的循环。查找代码： d699a3398de91626f8da48ef90fa2610 改成： b9dd13fe880cb5d97a29da82b97a7677f5fccccc1831b51a0cd3bd7d13525eb3 再查找： 1cc748e10901b6715fa9087abf370429 16b28748ea4df4d9c2150843fecfba68 改成： 1cc748e10901b6715fa9087abf370429 16b28748ea4df4d9c2150843fecfba68adb6314416ae9ef0e5a3270d39150de9 再次查找： 16b28748ea4df4d9c2150843fecfba687e289a154b156d7d8b381b9812fc2475 改成： <?php else : ?> <h3 class="title"><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、添加文章分页 上面你已经看到，每页只能显示部分文章，要想看下一页，就得添加分页。现在查找代码： 2661fe612134550c8a43d6935cef3270 0c76242f8aa99df277e784671af8a1c1<< Previous Posts5db79b134e9f6b82c0b36e0489ee08ed f9076eaab5893c56dd7bd005bceb51f4Newer Posts >>5db79b134e9f6b82c0b36e0489ee08ed 94b3e26ee717c64999d7867364b1b4a3 改成： 2661fe612134550c8a43d6935cef3270294e9457a6e2425c2758afc8200b6efa 6936de35a46d7dbf75038ddb2436e510dde75106bda5d6f031c7ad0837cfc772>', 0); ?>54bdf357c58b8a65c66d7c19c8e4d11494b3e26ee717c64999d7867364b1b4a3 参考函数： previous_posts_link next_posts_link 10、文章缩略图 对于大部分人来说，不太需要文章缩略图的功能，而且有很多插件可以实现这个功能。这里我们将首页的文章缩略图代码删除： c508d4854be103cfb4b7e0d9bcaf9372d86cddf8d691fdd46d642e760c40e628/images/610x150.gif" /> 另外，还有个存档页面的模板archive.php，跟index.php的制作过程完全一样，只不过需要在functions.php里添加一个函数，这里就不再罗嗦，下载自己看吧，注意：functions.php中的代码已经修改，要想让你的分类、标签等存档页能够正常显示，请下载最新的functions.php覆盖原来的。另外，标签页和分类页支持在该页面顶部显示介绍，前提是你在后台文章标签和分类处要填上了描述。 好了，到目前这个主题也像个样子了，不过还有很多要完善，后面我们将继续完善！ 推荐学习：《WordPress教程》

Das obige ist der detaillierte Inhalt vonDer gesamte Prozess der WordPress-Theme-Erstellung (8): Erstellen von index.php. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!