WordPress 테마 생성 전체 과정(8): index.php 만들기

"워드프레스 테마 제작 전 과정(7): sidebar.php 만들기"에 대해 소개해 드렸습니다. 이번 글에서는 계속해서 index.php 만드는 방법을 소개해드리겠습니다~

이미 블로그에 대한 모든 공개 페이지인 sidebar.php, footer.php 및 header.php가 생성되었습니다. 오늘부터 별도의 페이지를 생성하겠습니다. 이제 우리가 만들고자 하는 것은 index.php라는 인덱스 페이지입니다. 여기서는 일시적으로 홈 페이지로 이해할 수 있지만 실제로는 홈 페이지만큼 간단하지 않습니다.

홈페이지의 메인 페이지는 블로그의 글을 하나씩 나열하는 글 목록입니다. 홈페이지에 있는 각 기사의 스타일은 동일하지만 제목, 시간, 저자, 초록 등 텍스트 내용이 다르다는 것을 눈치채셨을 것입니다. index.php를 만들려면 기사 하나의 HTML 코드만 있으면 됩니다. 게다가, 이는 동적 콘텐츠가 아닙니다. 홈페이지의 모든 기사를 표시하려면 루프가 하나만 필요합니다. 여기서 루프는 기사를 반복적으로 출력하는 것입니다. 이전에 컴퓨터 프로그래밍 언어를 배운 적이 있다면 루프가 무엇인지 이해하는 것도 어렵지 않고, while, for, foreach...

여기에 문장을 삽입하면, 루프의 기능도 이해하기 쉽습니다. 테마를 만드는 방법을 정말로 알고 싶다면 텍스트 편집기를 열고 저를 따라 단계별로 수정해 보세요. 수정할 때마다 블로그를 새로 고쳐서 어떤 변경 사항이 있는지 확인하세요. 지식을 깊게 하세요. 너무 게으르다면 다음 내용을 읽지 않는 것이 좋습니다. 별로 도움이 되지 않기 때문입니다.

이제 index.php 만들기를 시작해 보세요. index.php에는 처음에 3개의 기사가 있습니다. index.php를 열면 기사의 3개 태그가 보입니다. 이제 두 기사의 코드를 삭제하겠습니다. 하나의 기사를 남기고 기사 초록을 제거하십시오. 수정된 코드는 다음과 같습니다.

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

다양한 주제의 기사의 html 스켈레톤은 다릅니다. html에 익숙하다면 빠르게 식별할 수 있습니다. 위 내용은 테마의 뼈대입니다. 이를 기반으로 index.php에 동적 콘텐츠를 추가합니다.

1. 기사 제목

을 추가합니다. 찾기:

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

다음은 이러한 PHP 함수에 대한 설명입니다.

• 기사 제목

많은 사람들이 기사를 작성할 때 태그를 추가하는 것을 좋아하며, 사이드바에 "태그 클라우드"도 추가했습니다. 발견:

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

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

발견: 9월 31일, 09

변경됨:

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

이 함수에서 Y n j가 얻은 날짜 형식과 관련하여 문서(중국어)를 참조하고 원하는 시간 형식을 선택할 수 있습니다. zh-cn: 사용자 정의 시간 및 날짜

제공된 시간 및 날짜 문서를 읽었을 수도 있습니다. 여전히 혼란스럽습니다. 여기에 몇 가지 예가 있습니다. 예를 거의 따르면서 원하는 시간과 날짜 형식을 지정할 수 있습니다:

4、显示评论数

现在我们来添加评论数代码，查找代码：

<a href="#">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 href="single.html" class="button right"> Read More...</a>

改成：

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

8、添加文章循环

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

改成：

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

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

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

9、添加文章分页

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

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

参考函数：

• previous_posts_link
• next_posts_link

10、文章缩略图

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

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

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

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

推荐学习：《WordPress教程》

위 내용은 WordPress 테마 생성 전체 과정(8): index.php 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!