【适合初学者】制作自己的WordPress主题［archive.php］［category.php］［taxonomy.php］

在这篇文章中，我介绍了有关自制WordPress（以下简称WP）主题的基本部分，例如文件结构和说明等。

如果你想了解index.php的代码，请点击这里
【适合初学者】自制WordPress主题[index.php]

如果你想了解header.php的代码，请点击这里
【适合初学者】自制WordPress主题[header.php]

如果你想了解footer.php的代码，请点击这里
【适合初学者】自制WordPress主题[footer.php]

如果你想了解singular.php、single.php和page.php的代码，请点击这里
【适合初学者】自制WordPress主题［singular.php］［single.php］［page.php］暂时不需要解释，只需看下面的代码。

代碼（HTML和PHP）

<?php /*
==========================================
Theme Name: Archive + Category
==========================================
*/
get_header(); ?>
<div class="wrap">
<main id="archive">
<div class="breadcrumb-area">
    <?php output_breadcrumb(); ?>
</div><!--//class="breadcrumb-area"-->
<?php
//先頭辞を非表示
add_filter( 'get_the_archive_title_prefix', function($prefix) {
    $prefix = ''; //空文字代入
    return $prefix;
});
$archtitle = get_the_archive_title();
echo '<h1 class="en-txt under-line">' .$archtitle. '</h1>';
?>
<?php
	if(have_posts()) :
?>
    <div class="archive-frame">
<?php
		while (have_posts()) : the_post();
?>
    <section class="archive-box">
	<a href="<?php the_permalink(); ?>">
		<?php
		if(has_post_thumbnail()){
			echo '<figure class="thumb-img4">' .get_the_post_thumbnail(). '</figure>';
		} else {
			echo '<figure class="thumb-img4"><img src="' .get_template_directory_uri(). '/images/noimages.png"></figure>';
		}
		?>
		<h4><?php the_title(); ?><span class="moddate en-txt"><?php the_modified_date('Y/m/d') ?></span></h4>
        <?php
        //本文を文字数制限表示
        if(mb_strlen($post->post_content,'UTF-8')>50){
            $content= str_replace('\n', '', mb_substr(strip_tags($post-> post_content), 0, 50,'UTF-8'));
            echo '<div class="txt-box">' .$content.'……'. '</div>';
        }else{
            echo '<div class="txt-box">' .str_replace('\n', '', strip_tags($post->post_content)). '</div>';
        }
         ?>
	</a>
	</section><!--//class="archive-box"-->
<?php
		endwhile;
?>
    </div><!--//class="archive-frame"-->
    <?php
    //ページネーション
    the_posts_pagination(array(
        'prev_text' => 'PREV',
        'next_text' => 'NEXT'
    ));
    ?>
<?php
	endif;
?>
</main>
<?php get_sidebar(); ?>
    </div><!--// class="wrap"-->
<?php
get_footer(); ?>

最初，「档案馆」（Archive）是什么？
当搜索“存档”一词时，可以获得“把数据集中保存起来”的意思。在WP中，当提到“存档”时，是指“文章列表”的意思。

例如，在企业网站上经常会将最新信息以列表形式显示，或者在需要列出特定类别时称之为“存档”。

解释

archive.php是什么？這是制作自定義 WP 主題時的必備文件。
根據不同分類的 category.php、不同分類法的 taxonomy.php、不同用戶的 author.php、不同日期的 date.php，以及不同標籤的 date.php，如果存在存檔顯示，則 archive.php 就不是必需的。
這意味著上述文件都可以在 archive.php 中兼容使用。
必備模板已經在官方 Codex 中列出，請確認。

 

別記事でも書いていますが、私はテーマファイルは最小構成にしたいと考えており、デザインがシンプルであるなら、兼用できるものは兼用してしまおう、数行の条件分岐で済むなら1ファイルにまとめてしまおうと考えています。
ですので、タイトルにはarchive.php category.php taxonomy.phpと3種類のテンプレート名を入れています。この3つは上述したことを踏まえた上で、archive.phpに集約することができます。

请参考我之前写的一篇文章，其中介绍了简单且最小的文件结构。

 

然而，并不是“集约”总是好的，所以请根据情况将文件分开使用。
特别是自定义投稿类型归档和自定义分类法归档，初次见面可能会让人感到困惑。
WordPress的好处是，只要准备好想要显示的专用模板，只要不犯代码错误或错误命名文件，就可以轻松地显示出来。我认为重要的是理解在哪些条件下显示哪个模板，并加以利用。

必须的代码 de读取页眉：get_header(); 读取页脚：get_footer(); 循环的 是必须的。别忘了用 结束循环。

如果您已经浏览过这些适用于初学者的WordPress主题的［singular.php］［single.php］［page.php］，我认为您已经注意到了首先列出的代码循环位置的不同之处。下面将详细解释包括这一点在内的代码。

代码的解释下記の部分は、プラグインなしの自作「パンくずリスト」を独自の関数で読み込んでいます。

<div class="breadcrumb-area">
    <?php output_breadcrumb(); ?>
</div><!--//class="breadcrumb-area"-->

プラグインだと、更新されないとセキュリティホールになったり、余計な機能が付いていてサーバの容量を圧迫したり、自分の思った挙動にならなかったりと面倒なことが起きがちですが、自分で書いたシンプルなコードであれば、テーマファイルを読み込んだタイミングで有効化され、カスタマイズも簡単にできます。

コードはこちらで記事にしていますので参考にどうぞ。

 

在开始循环之前WPのテンプレートと言えば「とにかく何を置いてもloopを書く」だと思うのですが、アーカイブのタイトルは記事名ではなく、カテゴリ名やタクソノミー名なので、それらを取得し表示します。

<?php
//先頭辞を非表示
add_filter( 'get_the_archive_title_prefix', function($prefix) {
    $prefix = ''; //空文字代入
    return $prefix;
});
$archtitle = get_the_archive_title();
echo '<h1 class="en-txt under-line">' .$archtitle. '</h1>';
?>

本来アーカイブで表示するタイトルはthe_archive_title();という関数で表示しますが、この関数で表示すると名称の先頭に「 カテゴリー：」や「 タグ： 」と言う文言が自動で付与されます。
閲覧する方々には、カテゴリーとタグを区別する必要性はないかなという事で私はadd_filterを使って表示しないようにしています。

add_filter( 'get_the_archive_title_prefix', function($prefix) {
    $prefix = ''; //空文字代入
    return $prefix;
});

只需要一个选项：隐藏前缀。

$archtitle = get_the_archive_title();
echo '<h1 class="en-txt under-line">' .$archtitle. '</h1>';

将通过add_filter将隐藏前缀的标题存入变量$archtitle，并通过echo显示。
因为这是存档页面的标题，所以我们将其用h1标签包围起来。
在这里我们将其存储在一个变量中，但也可以选择不存储在变量中。

echo '<h1 class="en-txt under-line">' .get_the_archive_title(). '</h1>';

即使不带前缀，也会显示。

Codexにもある様に、 get_the_archive_title();は、タクソノミーやタームのアーカイブでもタイトルを取得できるので、もしテンプレートをtaxonomy.phpとして分ける場合でもそのまま使えます。

 

循环的开始
要说循环的起源，

<?php
if(have_posts()) :
    while(have_posts()) : the_post();
?>

不过，在archive.php中，我会稍微变换一下写法。

<?php
	if(have_posts()) :
?>
    <div class="archive-frame">
<?php
		while (have_posts()) : the_post();
?>

<?php
if(have_posts()) :
    while(have_posts()) : the_post();
?>
    <div class="archive-frame">

とwhile (have_posts()) : the_post();の下にdivを書いてしまう事です。
そうすると、

は大枠なのに、while (have_posts()) : the_post();の下にあるので、繰り返し処理の対象となり繰り返し表示されてしまいます。
繰り返し処理をするのは、下図でいう所の青枠の部分、コードでいうと

    <section class="archive-box">
        ......
	</section><!--//class="archive-box"-->

如果有文章的时候，在显示下方添加

，并重复执行 while (have_posts()) : the_post();。
如果有文章 = 如果(have_posts()) : 在这里重复执行文章 = (have_posts()) : the_post(); 可以避免写错。

新闻的显示
在存档页面上，将显示文章的特色图片、标题和部分内容，并添加链接，使得点击任何地方都可以跳转到对应的文章页面。
除了特色图片外，还可以将文章中的图片作为特色图片显示。但是，由于特色图片未设置时显示了“NoImages”和无特色图片的图像，客户会检查，并要求进行设置，所以相比于实施该功能，我在if(has_post_thumbnail())中用else来显示写有“NoImages”的图像更好，根据我的经验。
首先，如果没有将“必须在文章中插入图片”这一规则确立下来，最终还是要显示“NoImages”，只会增加条件分支…。

    <section class="archive-box">
	<a href="<?php the_permalink(); ?>">
		<?php
		if(has_post_thumbnail()){
			echo '<figure class="thumb-img4">' .get_the_post_thumbnail(). '</figure>';
		} else {
			echo '<figure class="thumb-img4"><img src="' .get_template_directory_uri(). '/images/noimages.png"></figure>';
		}
		?>
		<h4><?php the_title(); ?><span class="moddate en-txt"><?php the_modified_date('Y/m/d'); ?></span></h4>
        <?php
        //本文を文字数制限表示
        if(mb_strlen($post->post_content,'UTF-8')>50){
            $content = str_replace('\n', '', mb_substr(strip_tags($post-> post_content), 0, 50,'UTF-8'));
            echo '<div class="txt-box">' .$content.'……'. '</div>';
        }else{
            echo '<div class="txt-box">' .str_replace('\n', '', strip_tags($post->post_content)). '</div>';
        }
         ?>
	</a>
	</section><!--//class="archive-box"-->

如果您想显示发布日期，可以使用the_time(‘Y/m/d’)，因为the_modified_date(‘Y/m/d’)是用于显示更新日期的。
虽然我在另一篇文章中也写到了the_date()，但是根据Codex的说明，如果同一天有多篇文章，the_date()只会获取第一篇文章的发布日期。因此，在存档页面使用the_date()会导致不准确的结果，所以请务必使用the_time(‘Y/m/d’)。

 

档案中，我们想要对多篇文章进行排列，并使它们在高度和宽度上保持一致，因此我们通过指定文字数来部分展示正文内容。

if(mb_strlen($post->post_content,'UTF-8')>50){

当字符超过50个时，将根据条件分支仅显示部分内容。由于「50个字符」是指半角（即1字节字符）的字符数，大致相当于25个日语字符。

$content = mb_substr(strip_tags($post->post_content), 0, 50);
$content = str_replace(” “, “\n”, $content);
if (strlen($post->post_content) > 50) {
$content .= ‘……’;
}
if (strpos($post->post_content, ”
“) !== false) {
$content .= mb_substr(strip_tags($post->post_content, ”
“));
}
echo $content;

循环的结束
请确保在最后加上 “endwhile;” 和 “endif;”。此外，不要忘记在存档页面中添加显示页码的函数，称为“分页”。

<?php
		endwhile;
?>
    </div><!--//class="archive-frame"-->
    <?php
    //ページネーション
    the_posts_pagination(array(
        'prev_text' => 'PREV',
        'next_text' => 'NEXT'
    ));
    ?>
<?php
	endif;
?>

'prev_text' => 'PREV',
'next_text' => 'NEXT'

只需在“的部分，您可以输入您喜欢的文字。”以前，必须使用插件或自定义才能显示分页，但现在（从WP4.1.0开始实施），只需使用此函数就可以轻松实现。

 

请根据下列代码的输出，实现上述代码并应用相应的CSS。

<nav class="navigation pagination" area-label="投稿">
<h2 class="screen-reader-text">投稿ナビゲーション</h2>
    <div class="nav-links">
        <span area-current="page" class="page-numbers current">1</span>
        <a class="page-numbers" href="******">2</a>
        <a class="next page-numbers" href="*****">NEXT</a>
    </div>
</nav>

总结如上所述，archive.php是一个可以同时兼容category.php和taxonomy.php的文件，因此，我在其中编写的代码尽量考虑到了它的广泛适用性。即使将category.php和taxonomy.php分别保存为不同的文件，代码仍然可以直接使用。只要在循环部分注意使用条件分支，应该并不太难。

我在日常编码时，将文件和代码保持简洁，以便自己和他人在查看时都能理解正在进行的操作。虽然我已经使用WordPress进行网站制作超过10年，但由于是自学，可能存在一些错误的地方。如果您能指出，我将非常感激。

#技术文章