【针对初学者】制作自己的WordPress主题［singular.php］［single.php］［page.php］

在这篇文章中，我们介绍了自制WordPress（以下简称为WP）主题时所需的基础知识，例如文件结构和解释等。

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

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

如果你想了解footer.php的代码，请点击这里：
【初学者指南】自制WordPress主题[footer.php]先不解释了，直接给你代码的部分，请看以下内容。

代码（HTML和PHP）

<?php /*
==========================================
Theme Name: Single + Page
==========================================
*/
get_header(); ?>
<div class="wrap">
    <main id="singular">
        <div class="breadcrumb-area">
            <?php output_breadcrumb(); ?>
        </div><!--//class="breadcrumb-area"-->
        <section class="content-area">
        <?php
        if(have_posts()) :
            while(have_posts()) : the_post();
        ?>
        <h2 class="sub-title"><?php the_title(); ?></h2>
        <div class="date-area">
            <span>Release</span><?php the_time('Y/m/d');?>
            <span>LastUp</span><?php the_modified_date('Y/m/d'); ?>
        </div><!--//class="date-area"-->
        <?php
        if(has_post_thumbnail()){
            echo '<figure class="thumb-img">' .get_the_post_thumbnail(). '</figure>' ;
        }
        ?>
        <div class="content-txt">
            <?php the_content();?>
        </div><!--//class="content-txt"-->
        </section><!--//class="content-area"-->
        <?php
            endwhile;
        endif;
        ?>
        </section><!--//class="content"-->
    </main>
    <?php get_sidebar(); ?>
</div><!--//class="wrap"-->
<?php
get_footer(); ?>

解释

singular.php是什么？
自制WP主题时的必备文件。但是，如果已经有single.php和page.php文件时，并不需要singular.php文件。（并不说它是必须的）

 

从WP4.3开始实施的功能，从index.php加载后的主题文件中，可以在此文件中同时使用单个页面（single）和固定页面（page）。
如果设计简单，不需要在单个页面和固定页面之间进行细分条件分支，那么只需要这个文件就可以了，可以减少工作量，这很好。
不过，并不一定非要称之为singular.php，如果您认为”single.php”和”page.php”都有比较好，我也可以接受。
对于我来说，我希望尽量减少服务器使用量，并且更注重维护性，所以我选择了singular.php。
因此，在代码中的Theme Name中是Single + Page。

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

 

必须的代码 de加载头部get_header()，加载底部get_footer()，如果没有循环，则无法开始。不要忘记使用来结束循环。

代码的说明我正在使用自己编写的函数来加载下面的部分中的“面包屑导航”列表。

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

请参考我在这里将代码整理成的文章。

 

循环的开始这段代码是在php中用于动态获取和显示数据的必要代码，它会循环执行直到出现投稿（post）。几乎所有的主题文件都会使用这段代码，所以我认为只需”不知道是什么，但一定要加上”这样描述就可以了。

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

有些模板标签只有放在循环内才能正常工作，请注意。

标题这部分是获取并显示文章标题的代码。
这一段是用于提取并展示文章标题的程序。

<h2 class="sub-title"><?php the_title(); ?></h2>

发布日期和更新日期 rì hé rì)
この部分は、該当の投稿を公開した日をthe_time(‘Y/m/d’)で表示し、更新日をthe_modified_date(‘Y/m/d’)で表示しています。
内容によっては、固定ページではいらないので、このコード部分をif( !is_page()) {（固定ページじゃなかったら表示）もしくはif(is_single()) {で囲んでも良いかと思います。

<div class="date-area">
    <span>Release</span><?php the_time('Y/m/d');?>
    <span>LastUp</span><?php the_modified_date('Y/m/d'); ?>
</div><!--//class="date-area"-->

如果不是固定页面，则不会显示。

<?php if( !is_page()) { ?>
<div class="date-area">
    <span>Release</span><?php the_time('Y/m/d');?>
    <span>LastUp</span><?php the_modified_date('Y/m/d'); ?>
</div><!--//class="date-area"-->
<?php } ?>

如果是单独的页面，会显示。

<?php if(is_single()) { ?>
<div class="date-area">
    <span>Release</span><?php the_time('Y/m/d');?>
    <span>LastUp</span><?php the_modified_date('Y/m/d'); ?>
</div><!--//class="date-area"-->
<?php } ?>

有一个函数可以显示公开日期the_date()，但是我们不使用它。
以前我们使用the_date()，但是当我们发布多篇文章在同一天时，它无法为每篇文章获取各自的公开日期，因此我们不再使用它。在Codex（WordPress开发者手册）中也明确说明，如果同一天有多篇文章，只会在第一篇文章与日期一起输出。所以这似乎是它的设计规则。

 

the_date()と似たようなのでget_the_date()がありますが、echoを使って出力しなくてはならないのと、なんとなくgetがついている関数は、 変数に値を入れる時に使うもの と私の中でルール化しているので、変数に公開日情報を入れる必要がある場合だけ使います。

 

我认为WordPress的模板标签有很多相似的文本内容，但用法等方面有很大差异，所以最好在需要时经常在Codex上进行确认。

显示一个引人入胜的开始画面
ここではアイキャッチを表示します。
if(has_post_thumbnail())としているのはアイキャッチ画像があったら表示するです。

<?php
if(has_post_thumbnail()){
    echo '<figure class="thumb-img">' .get_the_post_thumbnail(). '</figure>' ;
}
?>

然而，如果没有设置眼球捕捉图像，将不会显示任何内容。

<?php
if(has_post_thumbnail()){
    echo '<figure class="thumb-img">' .get_the_post_thumbnail(). '</figure>' ;
} else {
    echo '<figure class="thumb-img"><img src="' .get_template_directory_uri(). '/images/noimages.png"></figure>';
}
?>

也许可以考虑这样做，这样设计不会失真。
请务必准备一个名为noimages.png的图像放在images文件夹中。

显示投稿内容在投稿页面使用 the_content() 函数输入的内容将被完全显示，包括图片。
然而，在这里无法控制文字的颜色和大小，无法使文本环绕图片，也无法给图片添加标题等设计方面的部分。
我们需要在 CSS 文件中添加 WP 的自定义类，并使用专用样式进行设计。
这可能会成为另一个机会来撰写文章。

<div class="content-txt">
    <?php the_content();?>
</div><!--//class="content-txt"-->

循环的结束千万不要忘记写下这个，否则循环就无法停止，会一直重复处理直到出错。

<?php
    endwhile;
endif;
?>

总结基本上，单篇（single）页面和固定页面（page）执行的操作相似，所以我将它们合并在singular.php文件中。然而，正如前面所提到的，如果您认为将single.php和page.php分开更好，或者希望在每个页面上进行各种条件分支操作，那么可以将它们分开。将此处代码复制粘贴到各自的文件中也可以正常运行。

他記事でも書いていますが、私は汎用性の高い、シンプルなファイル構成を目指しているので、兼用できる部分や少しの条件分岐を書くだけで済むのであれば、まとめてしまいたいです。
カスタム投稿を使い始めると、ついついtaxonomy-***.phpと言うファイルを増やしがちになってしまうのですが、ファイルを増やす前に、条件分岐で何とかならないかな？と常に考えて手を動かす様にしています。

我已经使用WordPress制作网站超过10年了，但由于自学，可能存在各种错误之处，请指出并不胜感激。

#技术文章