サイドバーへアイキャッチ画像を背景にした新着投稿一覧を表示できるプラグイン「Elegant Posts Widget」
- 公開日：2017年9月12日
カテゴリー:コンテンツ追加
サイトのサイドバーウィジェットに必ずと言っていいほど表示する「新着記事」。
WordPressのテーマで新着記事の表示方法は「文字のみ」または「文字の左や右にアイキャッチ画像を入れる」の大きく２通りですね。
そのままでもいいけれど、同じテーマを使っている他のサイトと少しでも違う感じにしたい・・・そんなときにおすすめなのが新着記事のタイトルの背景をアイキャッチ画像にすることができる【Elegant Posts Widget】プラグインです。
ちなみにこんな感じの記事一覧が作成できます（公式サイトのスクリーンショットリンクです）
【Elegant Posts Widget】プラグインの基本的な機能・できること
- ウィジェットにアイキャッチ画像を背景にした記事一覧を表示
本記事を参考にWordPressサイトへプラグインの導入を検討される方へ
WordPressは古くから無料で配布されているサイト作成ツール（CMS）で、随時改良が加えられており、さまざまなバージョンが存在します。
さらにWordPressを動かすためのプログラムであるPHP、サイトのデータを保存しておくためのデータベースについても様々なバージョンがあります。
そしてWordPress本体同様にプラグインについてもさまざまなバージョンが存在します。
本記事を参考にプラグインの導入をお考えの方は、以下に留意の上でインストールするようにしてください。
- テスト環境での動作に基づいた紹介記事ですので、すべての環境で正常に動作するかどうかは不明です
※本記事の内容についてはページ内に記載しているプラグインバージョンのものになります。現在のバージョンと異なる場合、機能などが異なる場合があります。
※また、テスト環境、テストしたプラグインバージョン等の表示が本文内にない場合、ページタイトル下にある最終更新日当時の情報となりますので、現在のバージョンでは全く違う機能となっているかも知れません。 - プラグインに無料版と有料版（Pro版）がある場合、特に記載がなければ無料版の情報のみを紹介しています
- このページでプラグインを使用する際に必要なショートコードやコードなどは、コピーして使用することができますが、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。
- プラグイン本体の動作不具合や質問などは公式サイトのフォーラムなどで行ってください（ここでは質問にお答えすることはできません）
【Elegant Posts Widget】プラグインの設定画面や表示の日本語化と翻訳
【Elegant Posts Widget】プラグインは日本語化が可能な言語ファイルが同梱されていますので、翻訳を行えば日本語での使用が可能ですが、設定項目が少ないので特に必要ないと思います
【Elegant Posts Widget】プラグインのインストールと設定
インストール方法
インストールはプラグインの新規追加でプラグイン名を入力して検索してインストールするか、WordPressのプラグイン公式配布ページからダウンロード後、管理画面からアップロードインストールしてください（プラグインの公式ページは本ページ内記載のリンクをクリック、もしくは、WordPress公式サイトで検索してください）。
WordPressを使い始めて間もない方（初心者の方）は、より詳細なプラグインのインストール手順や、インストール時に起こる問題などへの対処方法をまとめた【WordPress】プラグインのインストール＆追加方法とエラー対処の方法も併せてご覧ください。
【Elegant Posts Widget】プラグインの基本的な使い方
通常のウィジェット一覧に【Elegant Posts Widget】というのが表示されるので、表示したい位置へ追加します。
簡単な単語ですので表示の設定は簡単にできると思います。ウィジェットを保存すれば公開完了です。
【Elegant Posts Widget】プラグインの便利な使い方・カスタマイズ方法など
より便利に使うカスタマイズ技やテストサイトで使用した結果や感想、WordPressのプラグイン公式配布ページには書かれていない事柄などを紹介します。
カスタム投稿タイプの記事を表示するには
標準では「投稿」と「固定ページ」の選択のみしかできないこのプラグインですが、ソースを少し改造すればカスタム投稿タイプでも使えるようになります。
大きく２つの方法がありますが、どちらもプラグイン編集で「class-templatebyte-epw-widget.php」を編集します。
開いたら、３３７行目あたりにある
'page' => esc_html__( 'Page', 'elegant-posts-widget'),という行をそのまま下へコピーし、貼りつけた行を編集します。
全部の投稿タイプを含めて表示する
複数のカスタム投稿がある場合にはこちらの方法が適当だと思います。投稿・固定ページ・カスタム投稿タイプのすべてが表示されるようになります
先程コピーした行を
'any' => esc_html__( 'any', 'elegant-posts-widget'),にすれば完了です（pageをanyにするだけ）
特定の投稿タイプを表示する
特定の投稿タイプだけのリストを作るには先程コピーした行を
'カスタム投稿タイプのスラグ' => esc_html__( 'カスタム投稿タイプのスラグ', 'elegant-posts-widget'),にします。
変更を保存したらウィジェットの設定に戻り、post typeを変更すれば完了です（ここで追加したメニューが追加されます）
プラグインのテスト環境＆個人的評価
最後に【Elegant Posts Widget】を動作確認した際の環境と個人的な評価を書いておきます。導入の検討や参考になれば幸いです。
テストした環境
- テストサーバー：カラフルボックス
- WordPressのバージョン：4.7.5
- PHPのバージョン：7.0
- テーマ：Simplicity2 バージョン2.3.0g
- プラグインのバージョン：本記事で紹介しているバージョン 0.1／最新バージョン 0.1
- 公式サイト（wordpress.org上）：https://wordpress.org/plugins/elegant-posts-widget/
- 公式サイト（作者サイト）：
個人的な評価・感想ほか
- 設定のしやすさ：★★★★★
- 使いやすさ：★★★☆☆
- おすすめ度：★★★☆☆
前述したようにカスタム投稿タイプを使用しているサイトで使うにはカスタマイズが必要なのでおすすめ度は３にしました。今後のアップデートで投稿タイプの選択ができるようになればと願っています。
いちばんやさしい WordPress 入門教室
(2021年11月29日 09:09 GMT +09:00 時点 - 追加情報商品価格と取扱状況は記載された日時の時点で正確で、また常に変動します。Amazon のサイトに表示された価格と取扱状況の情報は、この商品が購入されたその時のものが適用されます。)
サイトへの支援をお願いします
最後までお読みいただきありがとうございました。本記事の内容がお役に立てましたら幸いです。
今後もよりよい情報を提供し続けることができるよう、投げ銭によるサイトへの支援、およびSNSによる拡散をお願いします
作者: ひまあーと（管理人）
☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
年齢：40代 趣味／園芸・ペット・卓球
