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: . Belassen Sie einen Artikel und entfernen Sie die Zusammenfassung des Artikels. Der geänderte Code lautet wie folgt:

<?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(); ?>

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

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

<h3 class="title"><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></h3>

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

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

<a href="#">News</a>, <a href="#">Products</a>

geändert in:

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

Funktionsreferenz: the_tags

Gefunden: 31. September 09 geändert in:

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

Funktionsreferenz: the_time

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:

<a href="#">1 Comment</a>

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

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

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

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

<a href="single.html" class="button right"> Read More...</a>

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

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

<div class="hr clearfix"> </div>

<div class="hr clearfix"> </div>

</div><?php get_sidebar(); ?>

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

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

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

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

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