コーポレートサイトにWordPressを採用している企業は増加傾向にあるかと思います。それに伴い、「制作会社からもらったマニュアルで最低限の運営作業はできるようになったけど、ちょっと変えたいところがあるんだよなあ。でもどうすればいいんだろう？」という担当者の方も増えているのではないでしょうか？
また、「HTMLとCSSの知識はあるけど、WordPressのコードは怖くて手が出せない」という方も多いかと思います。
そこで、ここから何回かに分けてWordPressテーマのファイルのコードを読みながら、その仕組みや構造を紹介していきます。解説はわかりやすさを優先するために細かい部分を省略したり、本来の意味と異なる説明を行う場合もありますがご了承ください。なお、サンプルには公式テーマであるTwentyNineteenを利用しています。
それでは、第三回、content.phpを取り上げていきます。
content.phpとは
TwentyNineteenでは、> template-parts > content > content.phpに設置されているファイルです。
content.phpは、実はWordPressのテンプレートファイルではなく、テンプレートパーツと呼ばれるタイプのものです。テンプレートパーツについては本コーナーの第一回index.phpを読み解く – WordPress公式テーマのコードを解読しよう！でも取り上げています。
get_template_part関数は、通常のテンプレート以外に利用したいファイルを呼び出す機能を提供してくれます。WordPressテーマの制作においては、どのページでも共通の内容をもつべきものが多くあります。
制作を進めているとテンプレートファイルは5個、10個と増えていくことがあるのですが、もし10個のテンプレートファイルに同じ記述があり、それを変更しなければならないとなった場合には10箇所を編集しなくてはなりません。しかし、この関数を利用して一つのファイルを10個のテンプレートから呼び出す構造にしておけば、変更は一箇所で全体に反映されます。
第一回で紹介したindex.phpでも、get_template_part関数を使ってこのcontent.phpを呼び出し、投稿の表示を行っています。
get_template_part( 'template-parts/content/content' );
全体像
それでは、早速全体像から見ていきましょう。まずはサイト上での見た目から。
続いてコードの方を見ていきます。
<?php
/**
* Template part for displaying posts
*
* @link https://developer.wordpress.org/themes/basics/template-hierarchy/
*
* @package WordPress
* @subpackage Twenty_Nineteen
* @since 1.0.0
*/
?>
<!--
the_ID()は、投稿やページに付与される番号です。
post_class()は、カテゴリやタグなどの情報がクラス名として出力されます。
-->
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<header class="entry-header">
<?php
/**
* is_sticky()は、アーカイブテンプレートなどで特定の投稿を一番上部に固定する機能が設定されているかを判別します。
* is_home()は現在表示中のページがブログのトップページを表示しているかを返します。
* is_paged()は、現在表示中のページが、複数にわたるページのうち、２ページ目以降であるかを返します。
*/
if ( is_sticky() && is_home() && ! is_paged() ) {
/**
* printf()はPHPがもつ関数で、二つ目の引数を特定の型でフォーマットし、出力します。
* _x()は、WordPressの関数で、翻訳されたテキストを返します。この場合は、Featuredが翻訳され、printfに記述のある%sと置き換わります。
*/
printf( '<span class="sticky-post">%s</span>', _x( 'Featured', 'post', 'twentynineteen' ) );
}
/**
* is_singular()は個別のページを表示中であるかを返します。
* 投稿、固定ページ、アタッチメントなどが該当します。
*/
if ( is_singular() ) :
/**
* the_title()は、表示中のページのタイトルを出力します。
* 引数は3つ取ることができ、一つ目はタイトル文字列の手前に挿入する文字列、二つ目はタイトル文字列の後に挿入する文字列を指定できます。
*/
the_title( '<h1 class="entry-title">', '</h1>' );
else :
the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' );
endif;
?>
</header><!-- .entry-header -->
<?php
/**
* 投稿に指定されたアイキャッチ画像を出力する関数です。
* WordPressにも同様の役割を持つthe_post_thumbnailなどの関数がありますが、テーマ独自の関数を呼び出して利用しています。
*/
twentynineteen_post_thumbnail(); ?>
<div class="entry-content">
<?php
/**
* the_contentは、表示中の投稿のコンテンツを表示する関数です。
* 投稿画面のエディタで入力したコンテンツが出力されます。
*/
the_content(
sprintf(
/**
* wp_ksesは、htmlをエスケープ（セキュリティ対策の一種です。）するための関数です。
* 一つ目の引数（ __(~~~)を、、二つ目の引数で指定したもの以外を全てエスケープします。
* この場合、spanタグとclass属性のみが許可されます。
*/
wp_kses(
/* translators: %s: Name of current post. Only visible to screen readers */
/**
* __( )はこのテーマ独自の関数です。翻訳テキストを返します。
*/
__( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentynineteen' ),
array(
'span' => array(
'class' => array(),
),
)
),
get_the_title()
)
);
/**
* wp_link_pagesは、一つの投稿をページ分割した際のリンク（次のページへ、など）を出力します。
* 引数は最大10個取ることができます。
* beforeはリンクの前のテキスト、afterはリンクの後のテキストです。
*/
wp_link_pages(
array(
'before' => '<div class="page-links">' . __( 'Pages:', 'twentynineteen' ),
'after' => '</div>',
)
);
?>
</div><!-- .entry-content -->
<footer class="entry-footer">
<?php
/**
* テーマ独自の関数です。
* 各投稿のカテゴリ情報や投稿日、投稿者などの情報が出力されます。
*
*/
twentynineteen_entry_footer();
?>
</footer><!-- .entry-footer -->
</article><!-- #post-<?php the_ID(); ?> -->
このコードで行っているのは、以下の4点です。
- ラップするHTMLへのクラス追加
- 投稿タイトルの表示
- アイキャッチと投稿の表示
- カテゴリ情報や投稿者情報などを表示
続いて、もう少し詳しく見ていきましょう。
ラップするHTMLへのクラス追加
WordPressでは、各投稿に対して様々な情報が付加されます。例えば、表示に利用されているテンプレートの名称や、表示中のページが投稿なのか固定ページなのか、投稿IDは何番なのか、付与されているカテゴリーは何か、などです。ここで利用されている関数the_ID()やpost_class()は、それらの情報をクラス名として出力する役目を持っています。
関数（HTML含む）
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
表示結果
<article id="post-378" class="post-378 post type-post status-publish format-standard hentry category-xxx-xxx category-uncategorized category-xxxxxxx entry">
ページやカテゴリ独自のカラーリングを行うときなどに、これらのクラスがあるととても便利です。
header部
header部で実際に行われていることはたった一つで、投稿のタイトルを表示することです。大量の記述がありますが、多くは条件分岐です。
詳細はコメントに書き込んでいます。
header部のphpコード
<header class="entry-header">
<?php
/**
* is_sticky()は、アーカイブテンプレートなどで特定の投稿を一番上部に固定する機能が設定されているかを判別します。
* is_home()は現在表示中のページがブログのトップページを表示しているかを返します。
* is_paged()は、現在表示中のページが、複数にわたるページのうち、２ページ目以降であるかを返します。
*/
if ( is_sticky() && is_home() && ! is_paged() ) {
/**
* printf()はPHPがもつ関数で、二つ目の引数を特定の型でフォーマットし、出力します。
* _x()は、WordPressの関数で、翻訳されたテキストを返します。この場合は、Featuredが翻訳され、printfに記述のある%sと置き換わります。
*/
printf( '<span class="sticky-post">%s</span>', _x( 'Featured', 'post', 'twentynineteen' ) );
}
/**
* is_singular()は個別のページを表示中であるかを返します。
* 投稿、固定ページ、アタッチメントなどが該当します。
*/
if ( is_singular() ) :
/**
* the_title()は、表示中のページのタイトルを出力します。
* 引数は3つ取ることができ、一つ目はタイトル文字列の手前に挿入する文字列、二つ目はタイトル文字列の後に挿入する文字列を指定できます。
*/
the_title( '<h1 class="entry-title">', '</h1>' );
else :
the_title( sprintf( '<h2 class="entry-title"><a href="%s" rel="bookmark">', esc_url( get_permalink() ) ), '</a></h2>' );
endif;
?>
</header><!-- .entry-header -->
表示結果
<header class="entry-header">
<h2 class="entry-title"><a href="http://vccw.test/archives/378" rel="bookmark">sample post 7</a></h2>
</header>
content部
content部では、投稿画面で設定されたアイキャッチを表示することと、エディタで作成されたコンテンツを表示を行っています。
content部のphpコード
<?php /** * 投稿に指定されたアイキャッチ画像を出力する関数です。 * WordPressにも同様の役割を持つthe_post_thumbnailなどの関数がありますが、テーマ独自の関数を呼び出して利用しています。 */ twentynineteen_post_thumbnail(); ?> <div class="entry-content"> <?php /** * the_contentは、表示中の投稿のコンテンツを表示する関数です。 * 投稿画面のエディタで入力したコンテンツが出力されます。 */ the_content( sprintf( /** * wp_ksesは、htmlをエスケープ（セキュリティ対策の一種です。）するための関数です。 * 一つ目の引数（ __(~~~)を、、二つ目の引数で指定したもの以外を全てエスケープします。 * この場合、spanタグとclass属性のみが許可されます。 */ wp_kses( /* translators: %s: Name of current post. Only visible to screen readers */ /** * __( )はこのテーマ独自の関数です。翻訳テキストを返します。 */ __( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'twentynineteen' ), array( 'span' => array( 'class' => array(), ), ) ), get_the_title() ) ); /** * wp_link_pagesは、一つの投稿をページ分割した際のリンク（次のページへ、など）を出力します。 * 引数は最大10個取ることができます。 * beforeはリンクの前のテキスト、afterはリンクの後のテキストです。 */ wp_link_pages( array( 'before' => '<div class="page-links">' . __( 'Pages:', 'twentynineteen' ), 'after' => '</div>', ) ); ?> </div><!-- .entry-content -->
表示結果
<figure class="post-thumbnail">
<a class="post-thumbnail-inner" href="http://vccw.test/archives/378" aria-hidden="true" tabindex="-1">
<img width="1280" height="853" src="http://vccw.test/wp-content/uploads/2020/03/shop-906722_1280.jpg" class="attachment-post-thumbnail size-post-thumbnail wp-post-image" alt="" srcset="http://vccw.test/wp-content/uploads/2020/03/shop-906722_1280.jpg 1280w, http://vccw.test/wp-content/uploads/2020/03/shop-906722_1280-300x200.jpg 300w, http://vccw.test/wp-content/uploads/2020/03/shop-906722_1280-1024x682.jpg 1024w, http://vccw.test/wp-content/uploads/2020/03/shop-906722_1280-768x512.jpg 768w" sizes="(max-width: 34.9rem) calc(100vw - 2rem), (max-width: 53rem) calc(8 * (100vw / 12)), (min-width: 53rem) calc(6 * (100vw / 12)), 100vw"> </a>
</figure>
<div class="entry-content">
<p>it is sample post</p>
</div>
footer部では、各投稿の情報のうち、投稿者、投稿日時、設定されているカテゴリなどが表示されます。
footer部のphpコード
<footer class="entry-footer"> <?php /** * テーマ独自の関数です。 * 各投稿のカテゴリ情報や投稿日、投稿者などの情報が出力されます。 * */ twentynineteen_entry_footer(); ?> </footer><!-- .entry-footer -->
表示結果（画像に関わるHTMLは削除しています。）
<footer class="entry-footer"> <span class="byline"> <span class="screen-reader-text">Posted by</span> <span class="author vcard"><a class="url fn n" href="http://vccw.test/archives/author/admin">admin</a></span> </span> <span class="posted-on"> <a href="http://vccw.test/archives/378" rel="bookmark"> <time class="entry-date published" datetime="2020-03-09T06:56:39+00:00">Mar 9th 2020</time> <time class="updated" datetime="2020-04-01T08:11:08+00:00">Apr 1st 2020</time> </a> </span> <span class="cat-links"> <span class="screen-reader-text">Posted in</span> <a href="http://vccw.test/archives/category/galk-blog" rel="category tag">sampleブログ</a>, <a href="http://vccw.test/archives/category/uncategorized" rel="category tag">Uncategorized</a>, <a href="http://vccw.test/archives/category/informations" rel="category tag">お知らせ</a> </span> <span class="comments-link"><img src="" alt=""> <a href="http://vccw.test/archives/378#respond">Leave a comment <span class="screen-reader-text"> on sample post 7</span> </a> </span> <span class="edit-link"> <a class="post-edit-link" href="http://vccw.test/wp-admin/post.php?post=378&action=edit">Edit <span class="screen-reader-text">sample post 7</span> </a> </span> </footer>
まとめ
content.phpはテーマファイルではなく、テンプレートパーツです。テンプレートパーツを用いることで効率的な制作が可能になります。
今回触れた関数や機能の詳細リスト
各リストは、参考サイトへのリンクとなっています。