【現在2000名】無料のフリーランスコミュニティ『東フリサロン』はこちらからどうぞ!

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

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

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

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

前回の記事はこちら↓

4. フックを使ったカスタマイズを覚える+アーカイブページを作る

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

 

0. 目標物の確認

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

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

  

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

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

 

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

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

入力するもの

  • タイトル
  • h2~h4までの見出し
  • 本文のダミーテキスト
  • 改ページ
  • アイキャッチ
  • カテゴリー
  • タグ2つ以上
  • 抜粋

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

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

 

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にコピペして共通部分を実装してください。

コピー
<?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. コンテンツ部分を実装する

それでは、まずタイトル〜タグ一覧の手前までのコンテンツ部分を作っていきましょう!

キーワード

  • post_class()
  • get_the_category()
  • get_category_link()
  • get_the_modified_time()
  • the_content()
  • wp_link_pages()

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

コピー

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

<!-- entry-header -->
<div class="entry-header">
<?php
// カテゴリー1つ目の名前を表示
$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. タグを一覧表示する

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

キーワード

  • get_the_tags()
  • get_tag_link()

コピー
<!-- 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に追記します。

キーワード

  • is_single()

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');&nbsp;

次に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

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

実装条件は以下の通り。

実装条件

  • 表示中の投稿と同じカテゴリーに所属する投稿を
  • 表示中の投稿を除いて
  • ランダムに
  • サブクエリを使って
  • 8件表示してください

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

解答例のコード

コピー
<!-- 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', // 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 -->

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

お疲れ様でした☺️

30DAYSトライアルのコンテンツは、皆様からのサポートで運営しています。

今後も良質なコンテンツを作成していきますので、よろしければサポートをお願いいたします。

サポート特典として、【コーディング練習用デザインカンプ】をメールアドレスにお送りします。


LINE@にて限定情報公開中!

CTA-IMAGE 『転職したい!』 『理想的なライフスタイルを実現したい!』 『フリーランスになりたい!』 そういう要望を持っている方向けに、週に1度リアルなお役立ち情報を配信しています。 登録すれば、LINE@限定「最短でプログラマーになるための転職ロードマップ」も確認できます!

WordPressカテゴリの最新記事