Wordressスターターテーマ_s(underscores)のindex.phpでは
- get_template_parts( 'template-parts/content', get_post_type() );
というコードで記事を表示するエリアにcontent.phpの内容を表示しています。
今回の記事ではcontent.phpに書かれている内容について見ていきたいと思います。
content.php
以下のコードがcontent.phpに書かれているコードです。
- <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
- <header class="entry-header">
- <?php
- if ( is_singular() ) :
- the_title( '<h1 class="entry-title">', '</h1>' );
- else :
- the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
- endif;
- if ( 'post' === get_post_type() ) :
- ?>
- <div class="entry-meta">
- <?php
- nino_challeng_posted_on();
- nino_challeng_posted_by();
- ?>
- </div><!-- .entry-meta -->
- <?php endif; ?>
- </header><!-- .entry-header -->
- <?php nino_challeng_post_thumbnail(); ?>
- <div class="entry-content">
- <?php
- the_content(
- sprintf(
- wp_kses(
- __( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'nino-challeng' ),
- array(
- 'span' => array(
- 'class' => array(),
- ),
- )
- ),
- wp_kses_post( get_the_title() )
- )
- );
- wp_link_pages(
- array(
- 'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'nino-challeng' ),
- 'after' => '</div>',
- )
- );
- ?>
- </div><!-- .entry-content -->
- <footer class="entry-footer">
- <?php nino_challeng_entry_footer(); ?>
- </footer><!-- .entry-footer -->
- </article><!-- #post-<?php the_ID(); ?> -->
このコードでどの部分を表示しているのかは以下の画像を見てください
背景色がついた部分がcontent.phpで出力されている部分です。
現在は設定で投稿を一件しか表示していませんが複数の記事があった場合は背景色がついた部分が繰り返し表示されます。
(index.phpのループ内にこのcontent.phpが呼び出されているためです。)
ではコードを見ていきましょう。
コードの説明
1行目
- <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
the_ID();
現在の投稿IDを出力する関数です。
post_class();
これはwordpress側が用意しているクラスの適応をします。
また、カッコ内に任意の単語などを入れるとクラスの追加もできます。
投稿header(2行目〜19行目)
- <header class="entry-header">
- <?php
- if ( is_singular() ) :
- the_title( '<h1 class="entry-title">', '</h1>' );
- else :
- the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
- endif;
- if ( 'post' === get_post_type() ) :
- ?>
- <div class="entry-meta">
- <?php
- nino_challeng_posted_on();
- nino_challeng_posted_by();
- ?>
- </div><!-- .entry-meta -->
- <?php endif; ?>
- </header>
2行目から19行目は投稿のヘッダー部分のコードを出力しています。
以下の画像が出力されたヘッダー部分です。
4行目〜8行目
- if ( is_singular() ) :
- the_title( '<h1 class="entry-title">', '</h1>' );
- else :
- the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
- endif;
if文です。
is_singular():
個別投稿を表示している場合は true、それ以外は falseとなります。
tureの場合
the_title( ‘<h1 class=”entry-title”>’, ‘</h1>’ );
h1見出しで記事のタイトルを出力します。
falseの場合
the_title( ‘<h2 class=”entry-title”><a href=”‘ . esc_url( get_permalink() ) . ‘” rel=”bookmark”>’, ‘</a></h2>’ );
h2見出しで記事タイトルを出力しリンクを設置します。
the_title();
記事のタイトルを出力する関数です。
esc_url()
これはテキストや属性などのURLをエンコードする関数です。
get_permalink()
記事のURLを出力する関数です。
10行目から17行目
- if ( 'post' === get_post_type() ) :
- ?>
- <div class="entry-meta">
- <?php
- nino_challeng_posted_on();
- nino_challeng_posted_by();
- ?>
- </div><!-- .entry-meta -->
- <?php endif; ?>
if ( ‘post’ === get_post_type() ) :
if文です。
===(イコール×3)これは厳密等価演算子というものです。
左辺と右辺が全く同じであればtureとなります。
今回は’post’つまり投稿
get_post_type()は現在の投稿の、投稿タイプを取得します。
この二つが一致したならば<div class=”entry-meta”>からを出力するということです。
ではtrueの場合
- <?php
- nino_challeng_posted_on();
- nino_challeng_posted_by();
- ?>
上記のコードを実行します。
この関数は独自関数というもので_s(underscores)がテーマ作成時に用意しているものです。
しかもテーマダウンロードの際に入力した名前が設定されています。
(粋な計らいですね!)
上記の関数はinc/template-tags.php(10行目〜53行目)で設定されfunctions.php(162行目)で読み込まれcontent.phpで呼び出されています。
nino_challeng_posted_on();
投稿年月日を出力します。
nino_challeng_posted_by();
投稿著者を出力します。
内容を変更したい場合はinc/template-tags.phpを編集するのも一つですが他にもwordpressには投稿著者や投稿日時を出力する関数がありますので確認してもいいかもしれません。
画像部分(21行目)
- <?php nino_challeng_post_thumbnail(); ?>
21行目
nino_challeng_post_thumbnail();
記事のサムネイルを表示する関数です。(nino_challengの部分はダウンロード時に設定した名前が自動でついています。)
コンテンツ部分(23行目〜46行目)
- <div class="entry-content">
- <?php
- the_content(
- sprintf(
- wp_kses(
- __( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'nino-challeng' ),
- array(
- 'span' => array(
- 'class' => array(),
- ),
- )
- ),
- wp_kses_post( get_the_title() )
- )
- );
- wp_link_pages(
- array(
- 'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'nino-challeng' ),
- 'after' => '</div>',
- )
- );
- ?>
- </div><!-- .entry-content -->
25行目〜37行目
the_content(
現在の投稿の本文を出力します。
sprintf(
この関数はカッコ内で指定された文字列を返す役割があります。
カッコ内は
wp_kses()
これは特定のタグを除去したくない場合に使う関数です。
コンテンツ部分を編集する場合はthe_content();のみの記述だけでも同じ様に動作します。
(コードは意味を持って書かれているものしかありませんので消す際は意味をある程度理解してからがいいかと思います。)
38行目
- wp_link_pages(
この関数は記事に以下のnextpageの記述があった際にぺージネーションを出力するものです。
<!--nextpage-->
39行目〜41行目はこのページネーションで出力する内容が書かれたコードです。
投稿footer部分(48行目〜50行目)
- <footer class="entry-footer">
- <?php nino_challeng_entry_footer(); ?>
- </footer><!-- .entry-footer -->
49行目
nino_challeng_entry_footer();
これはinc/template-tags.php(10行目〜53行目)で設定されfunctions.php(162行目)で読み込まれcontent.phpで呼び出されているものです。
出力の内容としては以下の画像の「Posted in UncategorizedLeave a Commenton test3Edit」の部分を出力しています。
まとめ
content.phpは記事の表示部分のパーツファイルということです。
実際にこのファイルはトップページなど投稿を表示したいテンプレートのパーツとして記載されています。