> 記事 > GITS関連 WordPress インターネット ウェブ制作 プログラミング マメ知識 > WordPressで「最近の投稿ウィジェット」を簡単に画像つきにする方法

WordPressで「最近の投稿ウィジェット」を簡単に画像つきにする方法

2016.12.28.(Wed)Masahiro Natori By.Masahiro Natori

こんにちは、masaです。

パースは12月だというのに肌寒いくらいの日が続いています。明日は最低気温が11度と「冬かよ!」といいたくなるくらいの冷え込みになるようです。かといえばその前は40度を越えるような暑い日もあり、寒暖の激しさになかなか体がついていけません。息子はクリスマス前から体調を崩していたのですが、ようやく回復してきました。

クリスマスといえば、パースを走るバスの行き先表示板が「Merry Christmas」になっているのを見かけました。ちゃんとクリスマスツリーまでついて、なんかかわいい感じです。肝心の行き先が見えないじゃないか、といわれそうですが、000番というのは「回送」なので特に問題はありません。

merrychristmas_transperth
さて、今日のテーマはWordPressのサイドバーについてです。

Sponsored Link

サイドバーに「最近の投稿」を表示


WordPressでは、コンテンツを表示する中央部分の左右にサイドバーというエリアを設けることができます。このブログでは、右側にサイドバーが出ています。(こちらにカテゴリーが出ていると思います → )このサイドバーという部分には最近の投稿や、カテゴリ情報などを表示することができます。ナビゲーションがわかりやすいWebサイトにしておいたほうが、ほかの記事なども見てもらえますので、サイトに合ったナビゲーションを作成されるとよいと思います。

サイドバーになにを表示するかは、基本的にはWordPressのウィジェットという部分で管理します。たとえば、ここの部分に「最近の投稿」を表示しようとする場合、

外観 → ウィジェット メニューを開き、左側に並んでいる「最近の投稿」というウィジェットを、右側のサイドバー部分にドラッグアンドドロップでもって行きます。

recentpostwidget
(この部分は、使用しているWordPressのテーマによって違う場合もあります)

さて、これを行って、出てきた最近の投稿は・・。

defaultrecentposts
確かに最近の投稿の一覧ではあるのですが、文字だけで、なんとも味気ない感じです。

そこで、この部分に記事ごとに設定可能な見出し画像(アイキャッチの画像)を出してみようと思います。

アイキャッチの出し方について


「最近の投稿」部分にアイキャッチ画像を出す方法ですが、やり方はいろいろあります。
技術がある方は、サイドバーウィジェットを表示する部分をフックする関数をfunction.phpに書いて、そこに自分の好みの最近の投稿をコーディングして、表示するという方法もあります。これならば、本当に自由自在に作ることができます。実際の例:【Widget】投稿数をリンクタグの中にいれたり最新の投稿にアイキャッチを追加 | 株式会社bridge 
しかし「ちょっとここまでは・・」という方や、「できるけど手間が・・」という方も多いと思いますので、簡単なやり方を紹介しようと思います。

最近の投稿のカスタマイズにプラグインを使う


その方法は、最近の投稿のカスタマイズにプラグインを使う、というものです。プラグインであれば、インストールして、アクティベート(有効化)するだけで、最近の投稿アイキャッチ画像つきにすることができます。

今回紹介しようと思っているのは、Newpost Catch — WordPress Plugins というプラグインと、
Recent Posts Widget Extended — WordPress Plugins というプラグインです。どちらも同じような機能ですが、設定できる部分が異なります。これ以外にも似たようなものがいろいろあるようですので、気になる方はチェックしてみてください。

Newpost Catchのインストール


WordPress左のメニューから、プラグイン → 新規追加 を選択します。
検索ウインドウが出ますので、Newpost Catch と入力すると以下のような画面になります。ここから、赤で示した今すぐインストールボタンを押します。

newpostcatchplugininstall
しばらく(10秒程度?)待つと、インストールが終了し、ボタンが「有効化」に変わります。

activatenewpostcatch
この有効化ボタンを押すと、インストールが終わり、プラグインが有効になります。

Newpost Catchを使ってみる


WordPressのメニューから外観 → ウィジェットを選択します。そうすると、使用できるウィジェットの中に、Newpost Catch という項目があるのがわかると思います。これが、サムネイル付きの「最近の投稿ウィジェット」になります。最初はこれまで使っていた「最近の投稿」ウィジェットが、サムネイルつきに変わるのかと思っていたのですが、そういうわけではなさそうです。

さっそく、ウィジェットをサイドバーに入れてみると、いろいろと設定を変えることができるようです。

newpost-catch_setting
ひとまず、そのままにした状態で、画面に反映させてみると・・

newpost-catch_default
うーん、サムネイルのサイズが小さすぎてお話にならないですね。大きさをサイドバーの上の方で使っている人気記事とフォーマットをあわせてみることにします。

このような場合は、画像を右クリックし「画像の情報を表示」を選択します。

picture_info
ダイアログには、画像の大きさが表示されています。今回調べていた画像は80×80であることがわかりました。

rapture_20161228011315
そこで、先ほどのウィジェットの設定で、サムネイルの大きさを80×80に変えてみます。

newpost-catch_setting_change
その結果は

newpost-catch_size_changed
このような感じでした。折り返して表示されてしまう点と、フォントが大きすぎるところが問題ですが、残念ながらこの辺りはメニューから変更することはできないみたいです。

プラグインで使用しているCSSを編集して、widthを105pxに減らして、font-sizeを13pxにしたところ、だいぶいい感じにはなりましたが、長いタイトルが入っている場合には、やはり途中できるような処理を入れないと、見た目はあまりよくない感じですね。
CSSは プラグイン → プラグイン編集 から編集し、このような感じにしておきました。

#npcatch .title {
    width: 105px;
    float: left;
    padding: 5px 5px 5px 0px;
    font-size: 13px;
}

また、タイトルの長さに関しては、途中で切るように、このようにコードを書き直しています。最初、$sub_title = the_title(); というようなコードを書いたところ、the_title()で得られるタイトルの内容が、$sub_title 変数に代入できてなくて、なかなか原因特定に苦労しました。代入したい場合には、$sub_title = the_title( ” , ” , false ); このように、3番目の引数にfalseを渡してあげる必要があるそうです。

<?php 
  $sub_title = the_title( '' , '' , false ); 
  if(mb_strlen($sub_title, 'UTF-8')>32){
    $title= mb_substr($sub_title, 0, 28, 'UTF-8');
    echo $title.'…'; 
  }else{ 
    echo $sub_title;
  }
?>

最終的には、このような感じになりました。

newpost_catch_result

Recent Posts Widget Extendedの紹介


Newpost Catchは日本人作成のプラグインだし、ということで紹介したのですが、タイトル文字列のカットに対応していなかったり、設定できる項目もそれほど多くないのが、ちょっと難点でした。それをすべてあっさりとクリアしてしまったプラグインが、Recent Posts Widget Extended です。

Recent Posts Widget Extended — WordPress Plugins

インストール部分は、Newpost Catchとほとんど同じ流れなので省略します。

recent-posts-widget-extended-install
こちらもNewpost Catchと同じように、プラグインをインストールすると、専用のウィジェットが表示できるようになりますが、設定画面が収まりきらないほど広く、ありとあらゆることが設定できるような雰囲気です。

recent-posts-widget-extended-setting
先ほど苦労したタイトルのカットも、Excerpt Length に設定すればプラグインのほうで処理してくれますし、表示する記事のカテゴリーを指定したい場合、Newpost Catchでは番号で指定する必要があったのですが、Recent Posts Widget Extendedでは、一覧からラジオボタンで選択できるようになっています。

設定画面から値をかえるだけで、ここまでの状態に出来ます。

recent-posts-widget-extended_image
ワタシとしては、現時点では Recent Posts Widget Extended の方をお勧めしたいと思います。

まとめ


WordPressのプラグインというと、BackWPup, All in one SEO Pack, Contact From 7 など、結構規模の大きいプログラムのイメージがあったのですが、今回紹介したものはウィジェットが一個加わるだけという、ずいぶんシンプルなものです。それでも、プログラムを書くのが難しい方にとっては大変便利で役に立つプラグインだと思いました。
WordPressはずいぶん便利になってきましたが、ちょっとしたカスタマイズがなかなか思い通りにならなかったりするので、そういうときにはプラグインを探してみると、解決の糸口が見つかるかもしれません。もちろん、ワタシにご相談いただくのも歓迎です。お問い合わせ より連絡いただければ、なるべく早く返答いたします。詳細な情報を記入していただけると助かります。

Masahiro Natori

Masahiro Natori
こんにちはMasaです。39歳の時に16年勤めた会社を辞め、2013年4月に家族で日本からパースに引っ越してきました。2013年6月よりGITSに勤務。2014年1月にGITSのサポートでProgrammerとして457ビザを取得。 趣味は音楽を聴くことと、部屋のレイアウトを変えること、ドライブすること。
    関連する記事は見当たりません。