前回index.phpの投稿記事本文出力まで終わりました。 今回はその下、SNSリンクと関連記事を作っていきましょう。
1.SNSアイコンを表示させる
WordPressテーマ化したことでアイコンが表示されていません。
画像パス部分を修正して、戻通りにアイコンを表示させましょう。
テーマディレクトリのパスを呼び出すには以下のWordPressタグを使います。
<?php echo get_template_directory_uri(); ?>
src=""の中が「テーマディレクトリ>imgフォルダ>画像ファイルのパス」となるようにしたいので、下記のように書きます。
single.php
ブラウザで表示を確認。画像が表示されていれば成功です。
2.関連記事を表示させる
記事を読み終えたユーザーが他のページも見てくれるように、記事下に関連記事を表示させましょう。今回はプラグインを使って簡単に設定していきます。
①プラグインのインストール
関連記事を表示させるために「Yet Another Related Posts Plugin」というプラグインを使用します。早速、管理画面の方からプラグインのインストールと有効化を行ってください。
有効化出来たら、左メニューから設定>YARPPを開いてください。
②YARPPのテンプレートを作成
下図のような「関連記事 (YARPP) 設定」画面が開きました。
下にスクロールダウンしていってください。
ページ中ほどに「Automatically display Options」というボックスがあります。 Themeのところで「カスタム」にマウスを重ねて下さい。 吹き出しが表示されるので「テンプレートを移動」をクリックします。
↓
クリックすると画面がリロードされたようになり、また元の設定画面に戻るはずです。
管理画面は一旦そのままにしておいて、作成中のテーマディレクトリを見てみましょう。 yarpp-template-○○○というPHPファイルが沢山追加されています。
yarpp-template-thumbnail.phpをエディターで開いてみましょう。 ３行目にあるYARPP Template: Thumbnailsを、YARPP Template: myportfolioに変更します。
「名前を付けて保存（別名で保存）」でファイル名をyarpp-template-myportfolioにして保存してください。
管理画面、YARPPの編集画面をリロードしてください。 テーマを選ぶところでカスタムをクリックすると、プルダウンの選択肢が表示されます。
新しく作った「 myportfolio」を選択します。
ページ下部にある「変更を保存」ボタンで保存してください。 これで管理画面からの設定は終わりです。
③テンプレートの編集
yarpp-template-myportfolio.phpを書き換えていきましょう。
single.phpのblogセクション開始タグ～見出しを囲っているdivの閉じタグまでをコピー。 yarpp-template-myportfolio.phpのH3タグ部分と置き換えます。
single.php
yarpp-template-myportfolio.php
yarpp-template-myportfolio.phpの一番下に</div> と </section>タグを入れます。
yarpp-template-myportfolio.php
次にループ内を変更していきます。 関連記事が無かったら「No related photos.」を表示するという条件分岐が既に出来ていますので、変更するのはオレンジの点線箇所内です。
yarpp-template-myportfolio.php
【変更箇所】
<ol>と</ol>を削除- php if ~ endifまでをブログカードのコードに変更する
- whie文を挟む形で
<div class="row">とその閉じタグを挿入する。
（二枚目のカードは要らないのでコメントアウトもしくは削除して下さい。）
変更したyarpp-template-myportfolio.php
上記コードの３か所をWordPressタグに置き換えていきます。
- アイキャッチ
- 画像
- 抜粋文
ついでにリンクが設定されていなかったので、記事に行けるように<a>タグも加えましょう。
コードはindex.phpからコピーして張り付けると楽です。
yarpp-template-myportfolio.php
ファイルを上書き保存しておいてください。
④single.phpから関連記事を呼び出す
single.phpにYARPPから関連記事を出力するインクルードタグを入れて下さい。
<?php related_posts(); ?>
single.php
保存して、ブラウザで表示を確認します。
※表示されるカード数はカテゴリー等の設定によって変わります。
一枚も表示されない場合は、表示させている投稿と同じカテゴリーを別の投稿に設定してみて下さい。
関連記事が表示されていたらインクルードタグ以下、関連記事部分のコードを削除してしまいましょう。 それ以外にindex.phpから複製したコードのコメントアウトなども残っていれば削除してください。
今回作成したSNSリンク以下の部分は、下記のような形になりました。 （※htmlファイルの組み方によって若干変わる場合もあります）
single.php
新しく作ったyarpp-template-myportfolio.phpの中身もインデントを整え、不要なコード（コメントアウト箇所）を削除しておきましょう。
編集画面から自動で生成されたyarppのテンプレートファイル類は削除してしまって構いません。 使用しているyarpp-template-myportfolio.phpはテーマフォルダに残しておきましょう。
これでsingle.phpは完成です。
関連記事表示の注意点
①No related photos.になる
→表示している記事（投稿）と同じカテゴリーの投稿を作る。
②何も表示されない
→yarpp-template-myportfolio.phpの記述を確認する。
③表示箇所が違う/二箇所表示される
プラグインの設定ページを開き、下図の箇所が「どこにもチェックが入っていない」状態になっているかを確認。
確認用ファイルについて
ここまでのレッスン作成分までが入ったテーマディレクトリを「レッスン素材一覧」にアップロードしています。
画像フォルダは含まれておりませんので、WordPressでカテゴリーや記事を作成するのレッスンでダウンロードしたimgフォルダを移してご利用ください。