➡ ENDOO VLOGで紹介したものはコチラ ⬅

自サイト他サイトの新着情報を取得して好きなところに表示させてみる

プラグインを使わずに固定ページやサイドバーに新着情報を表示させる方法を紹介。他サイトの新着情報もいけます。

これ系の解説記事はたくさんあるので、もっとちゃんとした人の記事を読むことをオススメします(笑)これは自分のメモ用で。

固定ページに新着情報を表示させたい

プラグインを使って新着情報を表示させるのが一番簡単なんですが、何でもかんでもプラグインに頼ってしまうと、気づいたらプラグインが何十個も…ってことになりかねません。現に僕の場合はプラグインまみれです。あかん。

やりたいことはシンプルです。

固定ページやサイドバーに新着情報を表示させるっていう。僕の場合は、自分のサイトだけではなく、他のサイト(RSS対応)も表示させたかったので、そのへんをトライ!

phpファイルを呼び出すショートコードの作成

下準備

まずはfunction.phpに下記を追加します。

自サイト編

FTPソフトでfunction.phpと同じ階層にphpフォルダを作成します。中身はこんな感じです。「ファイル名.php」で保存してください。

今回は日付・カテゴリー・タイトル・最新の記事には「NEW」のマークを付けるって感じでいきます。リストをクラスで括ってるのは、後から装飾したいためです。不要ならクラスは省いてください。

NEWマークのところも装飾しやすいようにしてます。細かい数字は変更してください。

参考 WordPressで新着記事にNEWマークをつける簡単な方法–FIT BLOG-フィットブログFIT-フィット

続いて、CSSの記述です。下記のスタイルはけっこうシンプルなので、自由に変更してください。

これで準備完了です。下記のショートコードをお好きな固定ページやウィジェットに貼り付けてみてください。「ファイル名」の部分は先程のphpファイルの名前です。

他サイト編

他サイトの場合は、rssを利用します。記事を取得したいサイトのrssを下記のサイトで調べてください。rssのURLが分かると思います。

参考 フィード(RSS)を取得・検出しますberss.com

っていっても、使うのは後なので…どこかにメモっておいてください。

自サイト編と同じようにショートコード化する(これはどっちでもいいです)。

記事を5つまで表示させて、最後に記事一覧のURLを入れてます。NEWマーク・リストにクラスはつけてません。つけるなら、全体をボックス系のcssで囲うくらいですかね。

※余談:上記のコードの場合、記事のループが数個ずつではなく、1記事ずつ取得されます。つまり、リストになっていても、1つのリストに記事が数個入っているのではなく、1記事しかないリストが数個取得されてしまいます。なので、リストのCSSを適応させた場合、記事全体で1つのリストCSSが適応されるのではなく、各記事ずつにリストCSSが適応されます。(なんだかなー)

これで準備完了です。下記のショートコードをお好きな固定ページやウィジェットに貼り付けてみてください。「ファイル名」の部分は先程のphpファイルの名前です。

ちなみに…管理画面編

クライアント用に管理画面(ダッシュボードとか)に新着情報を表示させたい場合は、「include」を使ってphpファイルを呼び出します。

ダッシュボードに表示させるなら下記の通りです。ダッシュボード用にcssを書き込んでみるのもいいかもしれませんね。「index.php」っていうのが、ダッシュボードのあるページのことです。

以上です。

おまけ:改行問題

新着情報を表示させる場合、スマホだとタイトルが長くて変な感じになってしまいます。なので、スマホ・タブで見た時だけ日付とカテゴリー<改行>タイトルって感じにします。

参考 PCのみ改行・SPのみ改行をCSSで実装する方法【レスポンシブデザイン】 | カケウェブ|HTML・CSS・jQuery・CMSなどカケウェブ|HTML・CSS・jQuery・CMSなど

brをdivで括って、切り替えるだけですね。シンプル!