MENU
Wordpress制作を学ぶためのブログ
Nino-Blog
Nino-Blog
  1. ホーム
  2. wordpress
  3. テーマ作り
  4. 【_s(underscores)】content.phpの内容を解説

【_s(underscores)】content.phpの内容を解説

2025 1/28
wordpress テーマ作り
2021年2月15日2025年1月28日

Wordressスターターテーマ_s(underscores)のindex.phpでは

  • get_template_parts( 'template-parts/content', get_post_type() );

というコードで記事を表示するエリアにcontent.phpの内容を表示しています。

今回の記事ではcontent.phpに書かれている内容について見ていきたいと思います。

\ NinoBlogのサービス紹介です! /

実績100件以上!集客できるホームページ制作します SEO対策とデザインで集客力UP!更新可能なホームページを!
目次

content.php

以下のコードがcontent.phpに書かれているコードです。

  1. <article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  2.     <header class="entry-header">
  3.         <?php
  4.         if ( is_singular() ) :
  5.             the_title( '<h1 class="entry-title">', '</h1>' );
  6.         else :
  7.             the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
  8.         endif;
  9.         if ( 'post' === get_post_type() ) :
  10.             ?>
  11.             <div class="entry-meta">
  12.                 <?php
  13.                 nino_challeng_posted_on();
  14.                 nino_challeng_posted_by();
  15.                 ?>
  16.             </div><!-- .entry-meta -->
  17.         <?php endif; ?>
  18.     </header><!-- .entry-header -->
  19.     <?php nino_challeng_post_thumbnail(); ?>
  20.     <div class="entry-content">
  21.         <?php
  22.         the_content(
  23.             sprintf(
  24.                 wp_kses(
  25.                     __( 'Continue reading<span class="screen-reader-text"> "%s"</span>', 'nino-challeng' ),
  26.                     array(
  27.                         'span' => array(
  28.                             'class' => array(),
  29.                         ),
  30.                     )
  31.                 ),
  32.                 wp_kses_post( get_the_title() )
  33.             )
  34.         );
  35.         wp_link_pages(
  36.             array(
  37.                 'before' => '<div class="page-links">' . esc_html__( 'Pages:', 'nino-challeng' ),
  38.                 'after' => '</div>',
  39.             )
  40.         );
  41.         ?>
  42.     </div><!-- .entry-content -->
  43.     <footer class="entry-footer">
  44.         <?php nino_challeng_entry_footer(); ?>
  45.     </footer><!-- .entry-footer -->
  46. </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行目)

  1. <header class="entry-header">
  2.         <?php
  3.         if ( is_singular() ) :
  4.             the_title( '<h1 class="entry-title">', '</h1>' );
  5.         else :
  6.             the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' );
  7.         endif;
  8.         if ( 'post' === get_post_type() ) :
  9.             ?>
  10.             <div class="entry-meta">
  11.                 <?php
  12.                 nino_challeng_posted_on();
  13.                 nino_challeng_posted_by();
  14.                 ?>
  15.             </div><!-- .entry-meta -->
  16.         <?php endif; ?>
  17.     </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は記事の表示部分のパーツファイルということです。

実際にこのファイルはトップページなど投稿を表示したいテンプレートのパーツとして記載されています。

Nino-BLOGのサービス紹介

実績100件以上!集客できるホームページ制作します SEO対策とデザインで集客力UP!更新可能なホームページを!
Wordpressの修正・カスタマイズを代行します 画像や文章の追加・修正・ページの追加・アップデートなど
wordpress テーマ作り
二宮 旬平
WEBデザイナー
はじめましてWEBデザイナーの二宮と申します。
このサイトでは、Wordpressについて実際に手を動かしながら学べるよう日々投稿を行なっております。
HP制作実績はこちらから
キーワード検索
人気記事
  • 【完全解説】WordPressでヘッダーを自作してみよう!(コーポレートサイト編)
    5417
  • 【コピペOK】ContactFrom7でお問い合わせフォームを設置する方法
    5126
  • 【超簡単】ContactForm7でお問い合わせ確認画面を設置してみよう
    4280
  • 【自作テーマ開発】_s(underscores)でオリジナルブログサイトを作ろう!
    2406
  • 【WordPress自作テーマ開発③】トップページを作ろう
    2310
カテゴリー
  • SEO対策
  • wordpress
    • テーマ作り
  • カスタマイズ
  • ニュース
  • ライティング
  • ライフハック
  • 副業
  • 未分類
  • 資格
アーカイブ
  • 2023年7月 (3)
  • 2023年2月 (3)
  • 2022年4月 (1)
  • 2022年2月 (1)
  • 2022年1月 (7)
  • 2021年10月 (1)
  • 2021年9月 (3)
  • 2021年8月 (8)
  • 2021年7月 (2)
  • 2021年2月 (9)
  • 2021年1月 (5)
↓Nino-blogのサービス紹介
実績100件以上!集客できるホームページ制作します SEO対策とデザインで集客力UP!更新可能なホームページを!
目次
  • HOME
  • プライバシーポリシー
  • 免責事項
  • お問い合わせ

© 2020 nino-blog

目次