なるべくなら記事に目を惹くアイキャッチ画像を表示させたい。
フリー素材もたくさんあるし。
とWordpressでやっていると、いつの間にかメディアライブラリに画像がたまってしまう。
しかもサイズ違いで3枚とか5枚とか。
これを回避できるのがプラグインFeatured Image From URL である。
当サイトでも利用しているが、この度別サイトでも導入してみた。
テーマはVirtueフリー版である。
Virtueで特に画像を表示させたいのは、フロントページの最近の投稿リストのサムネールである。Theme Options > Home Layout > Homepage Layout Manager で Latest Blog Posts を → Enabled にスライドした場合、フロントページにサムネールと日付、及び概要がタイル状に8記事分表示される。が、以前Featured Image From URLを試したときはこのリストにサムネールが表示されなかった。
テーマファイルのどこかを修正すれば可能になるのだろうが、Virtueは高機能ゆえかやたらにファイルが多く、構造も複雑で、どこをどういじればいいのか探す気力がわかない。
あきらめていたのだが、ふと思いついた。Virtueのフロント（HOME）ページ（Homepage Layout Manager 項目のPage Content）はデフォルトの固定ページで作成する。ここに自由に画像やテキストやショートコードを記入できる。ならば、Latest Blog Posts のかわりに、プラグインの List Category Post を使って固定ページに最新記事をサムネールつきで取得すればいいのではないか。
結果、あっさりとできることがわかった。ただ、Latest Blog Postsと同じような表示にするには、プラグインファイルとCSSのカスタマイズに少し手間ヒマをかける必要はあった。が、おかげでこれまで以上にList Category Postのすごさもわかった。
テーマファイルを触らずにトライしてみたいという方は、プラグインの新規追加で上記二つのプラグインを検索し、有効化しておこう。
テスト環境で試す
といってもおおげさなことではなくて、いきなりフロントページ用固定ページを修正するではなく、新規に固定ページを作成し、そちらで試してみるというだけの話である。公開してもとりあえず表には出ないので。もちろん、ローカルに環境を作ってあればそちらでのほうで。
List Category Post の設定
このプラグインはファンも多く、日本語の解説記事もたくさんある。
List category posts — WordPress プラグイン
the documentation
固定ページで新着情報やカテゴリー記事を一覧する方法
① FTPでサーバーに接続し、wp-content/plugins/list-category-posts/templates/にあるdefault.phpをPCにダウンロードし、わかりやすい名前にリネームしておく。たとえばhomelist.phpとか。このファイルはコピーして（名前を変えて）複数設置でき、複数のカスタマイズを個別のコードに適用させることができる。
② FTPで wp-content/thems/使用中のテーマ（子テーマ）に、list-category-posts というディレクトリを作成し、そこに①で作ったhomelist.phpをアップロードする。
③ WPダッシュボードの外観＞テーマの編集でhomelist.phpを選択し、以下のような表示になるように編集していく。
1）以下のように、サムネール、日付、タイトルの順番を入れ替える。また、日付データにdivクラスを追加する（コメントなど不要なものは削除しても良い）。
//Post Thumbnail$lcp_display_output .= $this->get_thumbnail($post);//Show date:$lcp_display_output .= ' ' . $this->get_date($post, 'div', 'lcp_date');//Show the title and link to the post:$lcp_display_output .= $this->get_post_title($post, 'h3', 'lcp_post');
2）テスト用に作成した固定ページに、以下のショートコードを記入する。
［catlist numberposts='6' date='yes' excerpt='yes' thumbnail='yes' catlist template='homelist'］（［］は半角にしてね）catlist numberposts・・・表示させたい記事数
date・・・日付表示
excerpt・・・概要
catlist template・・・①で作成したテンプレートファイルの名前
※catlist 以降に id や nameでカテゴリを指定すればカテゴリ別の一覧が表示される。何も指定しなければ全記事が対象となる。
Featured Image From URL でアイキャッチ画像を取り込む
①ダッシュボード左サイドメニュー＞Featured Image From URL＞設定画面で、Featured Image in Content をオンにする**。
②記事編集画面、右サイドまんなかあたりの External Featured Image＞URLに、外部サイト（他のサーバー、Flickr、Googleフォト、30days Albumなど*）にアップロードした画像のアドレスを入力する。
※サーバーは基本的に料金がかかるが、オンラインストレージは制限付き無料プランがある。おすすめはFlickr。他のサーバーやオンラインストレージを利用する場合は、あらかじめ記事ページにアイキャッチとして表示させたいサイズにリサイズしてアップしておく必要があるが、Flickrでは複数サイズの画像が自動生成されるので、適当なサイズ（ここでは幅が500pxかそれ以上が良い）の画像アドレスを選ぶだけで済む。
※オンラインストレージでの画像アドレスの取得は、基本的に、画像のみを表示させ（Flickrは画像＞ダウンロード＞View all sizes ＞好みの画像を選択し）、画像上で右クリック、「画像アドレスをコピー（Chrome)」、「画像のURLをコピー（Firefox）」する。
※※VirtueのPortfolioは、オンにしなくても外部サイトの画像がアイキャッチとして表示され、ONにすると二重表示となってしまう。よってPortfolioを利用する場合はOFFのままとし、記事中に表示させたいアイキャッチは外部サイトから同じ画像をaタグで読み込むようにすると良い（ひと手間余分にかかってしまうが）。
③【重要】概要の文字数を制限するには…
欧文だと概要の値がデフォルトで30に設定されていて、ボリュームもコードで制御できるようだけれど、日本語だと記事の全文が表示されてしまう。これを回避するには、記事編集の際［抜粋］に、表示させたいだけの文字を入力するか、あるいは冒頭から何行かをコピーする。
もしくは、CSSで制御することも可能。
文章を省略表示する８つのCSSスタイル(webkit）
CSSの設定
外観＞CSS編集（またはThema Options＞Custom CSS Box）にCSSを追加していく。プロパティの値は参考まで。
1）リスト
ul.lcp_catlist {margin: 0 -20px 30px -20px !important;display: block;clear: both;overflow:hidden;height:100%;}ul.lcp_catlist li {list-style:none;float: left;background-color: #f9f9f9;border-bottom: 1px solid #eee;margin: 0px 24px 30px 0;width: 407px;height: 580px;}
2）タイトル
h3.lcp_post {font-size: 24px;line-height: 1.2em;padding:5px 5px 10px 15px}
4）日付と概要
あらかじめ、設定＞一般＞日付のフォーマットを m/d Y としておく。
.lcp_date {height: 5em;width: 5em;display: inline-block;float: right;background-color: #ececec;font-size: 14px;text-align: center;line-height: 1.5em;margin: 10px 0 0 10px;padding: 1.1em 0.7em;word-break:break-all; word-wrap:break-word;}.lcp_excerpt {padding: 0px 15px;}
5）レスポンシブ対応（テーマがレスポンシブの場合）以下を追記
@media screen and ( max-width:600px ) {ul.lcp_catlist {margin: 0 0 30px -20px;display: block;clear: both;overflow:hidden;height:100%;}ul.lcp_catlist li {width: 100%;margin: 0 10px 30px 0;}}
サーバー設定とテーマの相性
Featured Image From URL の設定画面を見ると、プラグインの/adimin/menu.phpに「shell_exec() has been disabled for security reasons in…」というワーニングが三行出る。これはwpXサーバーの仕様によるもので、サーバー管理画面で設定を変えることで回避はできる。ただ、セキュリティー上の理由でとあるから、特に問題がなければそのままで利用するほうがいいかもしれない。
またこのプラグインは、テーマによってもうまく作動しない機能が（または全く作動しない場合も）あるので、特に有料のPremium版は注意が必要。
コメント