2015.11.16WordPressツイート3シェアはてブ10送るPocket11当サイトの記事ページにショートコードで関連記事を表示できるようにしてみました!その備忘録と参考にさせて頂いたサイト様をご紹介します。当サイトのように使い方などを紹介する場合、どうしても1記事で紹介しきれない場合があります。そんな時はサイト内の関連記事をリンクさせたりするのですが、ただのテキストリンクだとちょっと味気ない...。できればこんなことをしたいと思いました。記事IDで関連記事を呼び出したいアイキャッチ画像をつけたい日付も呼び出したい常に同じコードとスタイルを適用させたいこんな感じの要件を満たすためにどうしたらいいのか調べていると、どうやらショートコードを使うのが一番良さそうだ。1からショートコードをつくる知識も技術もない...というわけで、上記のような悩みを解決してくれる記事がないか探してみました!すると下記の記事を発見。失礼ながら今回はほとんど上記サイト様のコードを大部分使用させていただきました。$echo;}add_shortcode('article','articleFunc');17行目でサイトに出力させるコードが書かれています。この部分を自分のサイトにあうようにちょこっとカスタム。class="date">'.$date.'</span></div></a></div>'ここまでできたら記事内でショートコードを書いて関連記事を呼び出してみましょう。関連記事を呼び出すショートコード関連記事を呼び出すには下記のショートコードを使用します。この●の部分に記事IDを入力します。ページのリンクさせたい記事にマウスオーバーすればブラウザの左下にURLが表示され、...post=●...と書かれている部分の数字がIDとなります。(Chrome)ここまで完了したら確認してみます。すると下の写真のように、アイキャッチ画像・タイトル・投稿日が表示されました!やったー!あとはCSSを好きなように調整して完成です。最終的にはこんな感じ!ちなみにこのサイトで使用しているCSSは下記です。一応SAMPLEとして掲載。a:hover{color:#666;}このCSSは当サイトに合わせたものになりますので、コピーされる際はご注意下さい。複数の関連記事を掲載したい場合ここまでひとつだけの関連記事表示でしたが、複数掲載したい場合、ショートコードをたくさん書かないといけないのかというと、そんなことはありません。参考サイト様で確認してみると、記事IDをカンマ(,)区切りで記載してあげれば連続して複数の関連記事を表示できます。type="custom"]上記のように書いてあげると、複数連続して表示させることが可能!なんて便利なんでしょう!まとめ今回は関連記事をショートコードで呼び出すためのカスタマイズを行いました。出力されるコードを記事内に直接書いてもいいのですが、コードを間違ったり、タイトルが万が一変わってしまった場合など変更するのが面倒になります。その点このカスタマイズなら後々のメンテンナンスも楽なので今回実装させて頂きました。あとは表示速度にどのような影響が出るかですが、今のところさほど影響はなかったので、これが今後増えていったときにどうなるかというのは新調に見ておきたいと思います。このような素晴らしいコードを紹介してくれている参考サイト様に感謝です。ここで紹介したカスタマイズは環境により左右されますので、実装は自己責任でお願いします。SPONSORLINKWordPressカスタマイズこの記事をシェアツイート3シェアはてブ10送るPocket11FOLLOWFeedly新作!シンプルかつパワフルWPテーマ「スワロー」SWALLOWはシンプルな見た目と洗練された機能美が光るWordPressテーマです。「必要なものとは何か」を考え尽くして、無駄な機能やデザインを削ぎ落とした洗練されたWordPressテーマです。「新しいスマホビュー時代をつくろう」というのをコンセプトに、スマホでの見やすさ、操作しやすさにとことんこだわりました。US矢野ヨシキ香川県(うどん県)にてフリーランスWEBデザイナー/ディレクターとして活動。小規模なWEBサイト制作を得意とし、コンセプト設計からデザイン、コーディング、撮影にいたるまでのすべてをこなします。地方の良さを全国に広めていくお手伝いをしていきたいと思っています。WebSiteTwitterFacebookGoogle+HOMEWordPress[WordPress]関連記事をショートコードで呼び出すカスタマイズWPテーマ「スワロー」シンプル。このサイトで使っているWordPressテーマ、SWALLOWはシンプルな見た目と洗練された機能美が光るWordPressテーマです。