5. single.phpを編集して投稿ページを作る

こんにちは！フリーランスエンジニア兼ディレクターのショーヘー（@showheyohtaki）です。

この記事は、Web制作初心者のかた向けに『実務で使えるWordPressを使ったサイト制作手法』ついて解説していく連載です。

前回の記事はこちら↓

5thステップであるこの記事では、single.phpを編集し、投稿ページを作っていきます。

0. 目標物の確認

今日のsingle.phpの作成が最もボリュームがあります。

まずは、ページの中にどういうパーツがあるかを確認していきましょう。

複数のパーツの組み合わせで出来上がっていることが分かりますね。

これらを1つずつ上から作っていきましょう。

1. 確認用のテスト投稿を作成

投稿データを正しく表示できるか確認するため、テスト投稿を追加します。

これらを入力してください。

ダミーテキストの入力には、『ダミーテキストジェネレーター』を使うと便利です👍

2. 目次テーブル表示用のプラグイン『Table of Contents Plus』を入れる

記事の投稿ページでは、読者にまず記事の概要を伝えるため、目次を設置することが多いです。

ですので、目次表示用プラグイン『Table of Contents Plus』を入れましょう。

設定は自由で大丈夫ですが、参考までにキャプチャも貼っておきます。

これで目次を表示する準備ができました。

余談ですが、一般的に『WordPressにプラグインを入れすぎるのは良くない』と言われています。

確かに入れすぎは良くないんですが、テーマに機能を持たせすぎるのも良くないです。

SEO設定や重要な装飾機能をテーマ依存にしてしまうと、テーマ変更でそれら全ての機能が失われてしまうので、保守性が低いです。

僕はWordPressの基本設計に従い、保守性を優先したい機能（テーマを変更した時に消えると困る機能）は、出来るだけプラグインで管理し、テーマ側ではカスタム用のcssのみを用意するようにしています。

PHPのバージョンアップや機能に致命的な脆弱性が見つかった場合も、ビジュアル（テーマ）と機能（プラグイン）を分けて管理しておけば、リスクを分散させられます。

初心者のうちからはなかなか難しいですが、クライアントの為になるサイト設計を心がけましょう。

3. 共通パーツのループ部分を実装する

これまでindex.php、archive.phpを作ってきましたね。

single.phpでも途中まで作り方は一緒なので、まずその共通部分を実装しましょう。

single.htmlからsingle.phpにコードを移して共通部分（have_postsのループ部分まで）を実装してください。

コピー
<?php get_header(); ?>

<!-- content -->
<div id="content">
<div class="inner">

<!-- primary -->
<main id="primary">

<?php if ( function_exists( 'bcn_display' ) ) : ?>
<!-- breadcrumb -->
<div class="breadcrumb">
<?php bcn_display(); ?>
</div><!-- /breadcrumb -->
<?php endif; ?>

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

<!-- entry -->
<article class="entry">

・
次のステップでこの中に本文やタイトルを呼び出すコードを書いていきます！
・
</article> <!-- /entry -->

<?php
endwhile;
endif;
?>

</main><!-- /primary -->

<?php get_sidebar(); ?>

</div><!-- /inner -->
</div><!-- /content -->

<?php get_footer(); ?>

ここまではindex.phpやarchive.phpと一緒ですね！

3. コンテンツ部分を実装する

それでは、ループの中で表示するタイトルや本文のパーツを作っていきましょう！

先ほど作った共通パーツの <!– entry –> の中を動的なコードに置き換えていきます。

まずタイトル〜タグ一覧の手前までを作りましょう。

カテゴリ名・タイトル・アイキャッチなどは復習なので、自力で実装を頑張ってみてください👍

コピー

<!-- entry -->
<article <?php post_class( array( 'entry' ) ); ?>>

<!-- entry-header -->
<div class="entry-header">
<?php
// カテゴリー１つ目の名前を表示
$category = get_the_category();
if ( $category[0] ) : ?>
<div class="entry-label"><a href="<?php echo esc_url( get_category_link( $category[0]->term_id ) ); ?>"><?php echo $category[0]->cat_name; ?></a></div><!-- /entry-item-tag -->
<?php endif; ?>
<h1 class="entry-title"><?php the_title(); ?></h1><!-- /entry-title -->

<!-- entry-meta -->
<div class="entry-meta">
<time class="entry-published" datetime="<?php the_time( 'c' ); ?>">公開日 <?php the_time( 'Y/n/j' ); ?></time>
<?php if ( get_the_modified_time( 'Y-m-d' ) !== get_the_time( 'Y-m-d' ) ) : ?>
<time class="entry-updated" datetime="<?php the_modified_time( 'c' ); ?>">最終更新日 <?php the_modified_time( 'Y/n/j' ); ?></time>
<?php endif; ?>
</div><!-- /entry-meta -->

<!-- entry-img -->
<div class="entry-img">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail( 'large' );
}
?>
</div><!-- /entry-img -->
</div><!-- /entry-header -->

<!-- entry-body -->
<div class="entry-body">
<?php
//本文の表示
the_content(); ?>
<?php
//改ページを有効にするための記述
wp_link_pages(
array(
'before' => '<nav class="entry-links">',
'after' => '</nav>',
'link_before' => '',
'link_after' => '',
'next_or_number' => 'number',
'separator' => '',
)
);
?>
</div><!-- /entry-body -->

これでコンテンツ部分の実装が完成です❗️

4. タグを一覧表示する

次に、この投稿に紐づけられたタグを一覧表示していきます。

コピー
<!-- entry-tag-items -->
<?php $post_tags = get_the_tags(); ?>
<div class="entry-tag-items">
<div class="entry-tag-head">タグ</div><!-- /entry-tag-head -->
<?php if ( $post_tags ) : ?>
<?php foreach ( $post_tags as $tag ) : ?>
<div class="entry-tag-item"><a href="<?php echo esc_url( get_tag_link($tag->term_id) ); ?>"><?php echo esc_html( $tag->name ); ?></a></div><!-- /entry-tag-item -->
<?php endforeach; ?>
<?php endif; ?>
</div><!-- /entry-tag-items -->

もし何のための記述なのかわからなかったら、出てくる変数をそれぞれvar_dump()してみてください。

codexの説明と合わせて値を確認すれば、何をしたくてこう書いているのかが分かるはずです👍

5. シェアボタンエリアを表示する

TF-30では、標準でシェアボタンエリアを用意しています。

1. sns.jsをfunctions.phpから読み込む
2. footer.phpに「投稿の時のみ」シェアボタンエリアを表示するよう記述
3.  シェアボタンを動的にする

の順で実装していきましょう！

まずはjsフォルダにあるsns.jsをfunctions.phpに追記します。

functions.php

コピー

/**
* CSSとJavaScriptの読み込み
*
* 参考：https://wpdocs.osdn.jp/%E3%83%8A%E3%83%93%E3%82%B2%E3%83%BC%E3%82%B7%E3%83%A7%E3%83%B3%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC
*/
function my_script_init(){
wp_enqueue_style('fontawesome', 'https://use.fontawesome.com/releases/v5.8.2/css/all.css', array(), '5.8.2', 'all');
wp_enqueue_style('my', get_template_directory_uri() . '/css/style.css', array(), '1.0.0', 'all');
wp_enqueue_script('my', get_template_directory_uri() . '/js/script.js', array( 'jquery' ), '1.0.0', true);
//sns.jsを追記
if( is_single() ){
wp_enqueue_script('sns', get_template_directory_uri() . '/js/sns.js', array( 'jquery' ), '1.0.0', true);
}
}
add_action('wp_enqueue_scripts', 'my_script_init');

次にfooter.phpに『投稿ページ表示時のみ』シェアボタンエリアを表示するよう記述します。

コピー
<!-- footer -->
<footer id="footer">
<div class="inner">
<div class="copy">&copy; daily-trial WordPress theme All rights reserved.</div><!-- /copy -->
<div class="by">Presented by <a href="https://tokyofreelance.jp/" rel="noopener" target="_blank">東京フリーランス</a></div><!-- /by -->

</div><!-- /inner -->
</footer><!-- /footer -->

<!-- ここからが追記部分 -->
<?php if(is_single()): ?>
<!-- footer-sns -->
<div class="footer-sns">
<div class="inner">

<div class="footer-sns-head">この記事をシェアする</div><!-- /footer-sns-head -->

<nav class="footer-sns-buttons">
<ul>
<li><a class="m_twitter"
href="https://twitter.com/share?url=https://example.com/archive/123/&text=記事のタイトルが入ります" rel="nofollow"
target="_blank"><img src="<?php echo get_template_directory_uri() ?>/img/icon-twitter.png" alt=""></a>
</li>
<li><a class="m_facebook" href="https://www.facebook.com/share.php?u=https://example.com/archive/123/"
rel="nofollow" target="_blank"><img src="<?php echo get_template_directory_uri() ?>/img/icon-facebook.png"
alt=""></a></li>
<li><a class="m_hatena"
href="https://b.hatena.ne.jp/add?mode=confirm&url=https://example.com/archive/123/&title=記事のタイトルが入ります"
rel="nofollow" target="_blank"><img src="<?php echo get_template_directory_uri() ?>/img/icon-hatena.png"
alt=""></a></li>
<li><a class="m_line" href="https://social-plugins.line.me/lineit/share?url=https://example.com/archive/123/"
rel="nofollow" target="_blank"><img src="<?php echo get_template_directory_uri() ?>/img/icon-line.png"
alt=""></a></li>
<li><a class="m_pocket" href="https://getpocket.com/edit?url=https://example.com/archive/123/" rel="nofollow"
target="_blank"><img src="<?php echo get_template_directory_uri() ?>/img/icon-pocket.png" alt=""></a></li>
</ul>
</nav><!-- /footer-sns-buttons -->

</div><!-- /inner -->
</div><!-- /footer-sns -->
<?php endif; ?>

<div class="floating">
<a href="#"><i class="fas fa-chevron-up"></i></a>
</div>

他のページでも表示させたい場合は、ifの条件文の部分を好きに変更してください。

演習課題1: シェアボタンエリアのシェアボタンを動的にする

シェアボタンエリアの表示まで完了したので、ボタンを動的に動作させるための実装をしてみてください。

ベースのhtmlを参考に、どこに何を書けばいいか考えてみてください（そんなに難しくないです❗️)

解答例のコード

コピー
<nav class="footer-sns-buttons">
<ul>
<li><a class="m_twitter" href="https://twitter.com/share?url=<?php the_permalink(); ?>&text=<?php the_title(); ?>" rel="nofollow" target="_blank"><img src="<?php echo esc_url( get_template_directory_uri() . '/img/icon-twitter.png' ); ?>" alt=""></a></li>
<li><a class="m_facebook" href="https://www.facebook.com/share.php?u=<?php the_permalink(); ?>" rel="nofollow" target="_blank"><img src="<?php echo esc_url( get_template_directory_uri() . '/img/icon-facebook.png' ); ?>" alt=""></a></li>
<li><a class="m_hatena" href="https://b.hatena.ne.jp/add?mode=confirm&url=<?php the_permalink(); ?>&title=<?php the_title(); ?>" rel="nofollow" target="_blank"><img src="<?php echo esc_url( get_template_directory_uri() . '/img/icon-hatena.png' ); ?>" alt=""></a></li>
<li><a class="m_line" href="https://social-plugins.line.me/lineit/share?url=<?php the_permalink(); ?>" rel="nofollow" target="_blank"><img src="<?php echo esc_url( get_template_directory_uri() . '/img/icon-line.png' ); ?>" alt=""></a></li>
<li><a class="m_pocket" href="https://getpocket.com/edit?url=<?php the_permalink(); ?>" rel="nofollow" target="_blank"><img src="<?php echo esc_url( get_template_directory_uri() . '/img/icon-pocket.png' ); ?>" alt=""></a></li>
</ul>
</nav><!-- /footer-sns-buttons -->

演習課題2: single.phpに関連記事を表示させる

関連記事を表示させるためのプラグインもたくさんありますが、ここでは演習課題として、プラグインなしで実装してみましょう❗️

「実装すればできるけど、保守性のためにプラグインを使う」のと、「実装できないからプラグインを使う」のは別物ですからねw

自力で実装する練習です。

実装条件は以下の通り。

実装のヒントは、ググればたくさん出てくるはずです👍

解答例のコード

コピー
<!-- entry-related -->
<div class="entry-related">
<div class="related-title">関連記事</div>

<?php if( has_category() ) {
$post_cats = get_the_category();
$cat_ids = array();
//所属カテゴリーのIDリストを作っておく
foreach($post_cats as $cat) {
$cat_ids[] = $cat->term_id;
}
}

$myposts = get_posts( array(
'post_type' => 'post', // 投稿タイプ
'posts_per_page' => '8', // ８件を取得
'post__not_in' => array( $post->ID ),// 表示中の投稿を除外
'category__in' => $cat_ids, // この投稿と同じカテゴリーに属する投稿の中から
'orderby' => 'rand' // ランダムに
) );
if( $myposts ): ?>
<div class="related-items">
<?php foreach($myposts as $post): setup_postdata($post);?>
<a class="related-item" href="<?php the_permalink(); ?>">
<div class="related-item-img">
<?php
if (has_post_thumbnail() ) {
// アイキャッチ画像が設定されてればミディアムサイズで表示
the_post_thumbnail('medium');
} else {
// なければnoimage画像をデフォルトで表示
echo '<img src="' . esc_url(get_template_directory_uri()) . '/img/noimg.png" alt="">';
}
?>
</div>
<div class="related-item-title"><?php the_title(); ?></div><!-- /related-item-title -->
</a><!-- /related-item -->
<?php endforeach; wp_reset_postdata(); ?>
</div><!-- /related-items -->
<?php endif; ?>
</div><!-- /entry-related -->

解答例のコードは、必ず自分で実装した後の答え合わせとして使ってくださいね！

お疲れ様でした☺️