【レンタルサーバ等の WordPress】テーマ「Twenty Fourteen」の固定ページにカテゴリー毎のサムネイル画像つきの記事リストを表示する

ここでは、WordPress の 2014 年デフォルトテーマ「Twenty Fourteen 」の固定ページに

AccessMenuBarApps-40
Twenty Fourteen

カテゴリー毎のサムネイル画像つきの記事リストを表示させる方法について覚書きしたいと思います。

このブログ自体は WordPress.com についての内容となっていますが、レンタルサーバ等にインストールして使うタイプの WordPress との違いを理解してもらうためにたまにそちらの方の視点からの記事も書くこととしており、この記事もそういった観点からのものです。

固定ページにショートコード「display-posts 」を貼る

レンタルサーバ等にインストールして使うタイプの WordPress では、php ファイルを修正したり、プラグイン「execPHP」等を使って、記事中に直接 php を入力したり、その他各種プラグインをインストールすることで、固定ページにさまざまな形式で記事一覧を表示させることができます。

また、私自身は WordPress.com について注力しているため WordPress 全体のトレンド等については疎いのですが、最近ではテーマ自体に記事リスト等を簡単に組み込めるタイプのテーマも多数、公開されているようです。

AccessMenuBarApps-41
Themify : Drag & Drop WordPress Themes

ここでは、WordPress.com とも互換性のあるショートコード「display-posts」を使って、記事リストを表示させることを考えます。

プラグイン「Display Posts Shortcode 」のインストール

まず、ショートコード「display- posts」を使えるようにプラグイン「Display Posts Shortcode」 1 をインストールし、有効化させます。

AccessMenuBarApps-42

固定ページにショートコードを含む記述を貼る

次に固定ページの方へショートコード「display-post」を含む記述を追加します。

例えば、以下のような記述を追加します。

以下の記述は CSS をこの部分にだけ効かすことができるようにするために追加しています。

この部分のクラス名を切り替えることによって、タイル状に並べるなどのレイアウト等の切り替えを行えます。

ショートコードで使われているパラメータについての使い方は以下のとおりです。

category

ここには、リストアップしたいカテゴリーのスラッグを入力します。カテゴリー名を変更してもスラッグを固定しておけば、ショートコード「display-posts」より生成される記事リストが入れ替わったり、削除することはありません。

AccessMenuBarApps-43

WordPress.com の場合には、「カテゴリーのスラッグ」と「カテゴリー」は同一のものが使用されますので、カテゴリーを変更した場合には、ショートコード「display-posts」のカテゴリーのパラメータの方も修正する必要があります。
image_size

サムネイル画像を生成します。「thumbnail」、「medium」、「large」といったパラメータを入力できます。これらは、「設定」→「メディア」の「サムネイルのサイズ」、「中サイズ」、「大サイズ」にそれぞれ対応しています。

AccessMenuBarApps-44

ここで設定されるのは「抽出される画像サイズ」であって、「表示される画像サイズ」ではありません。表示される画像のサイズは CSS の方で定義されます。

ですので、例えば、「image_size=”thumbnail”」と設定し、CSS の方で「width: 1000px; height: auto;」などと定義すると、画質の粗い大きなサムネイル画像が表示されることとなりますし、逆に「image_size=”large”」と設定し、CSS の方で「width: 100px; height:auto;」とすると、高画質の小さなサムネイル画像が表示されることとなります。高画質にすると、代わりに表示に時間がかかることになります。

そういうわけで、サムネイル画像に関する、このあたりの調整は使っているサーバの性能や閲覧者が使っているであろうパソコン等の性能を考慮し、個別に決めるのが理想かと思います。

include_excerpt=”true”

記事の概要を表示します。この記述を削除すると概要は表示されなくなります。

概要の文字数はプラグイン「WP Multibyte Patch」を使って制御できますが、このプラグインがバージョンアップして差し替えられると修正した部分も初期状態に戻りますので、概要の文字数を調整される方は、その点ご留意ください。(記事「WordPressで記事ごとにサムネイル表示するには | hbworks」参照)

通常、概要は記事本文から抽出されますが、「抜粋」機能を使うと、その部分に独自の文章や画像を表示させることもできます。

AccessMenuBarApps-45

rect3015

AccessMenuBarApps-46

posts_per_page

リストアップされる記事の表示数を設定できます。初期値は「10」です。

WordPress.com の方には「100」という上限値がありますが、プラグイン「Display Posts Shortcode」の方には特に設定されていないようです(WordPress 本体の方になんらかのしかけがある?)。

例えば、あるカテゴリーに記事数が 5 つあるところ、「posts_per_page=”10000”」と設定しても、無限ループにはまったり、表示に時間がかかったり、ということは経験則からないものと推測しています。

その他、ショートコード「display-posts」では、日時を表示させたり、特定の記事だけ指定して表示させたり、タグ毎の一覧を表示したり、「カテゴリー A の一覧を表示するけれどもタグ B をつけたものは表示させないようにする」、など、さまざまな設定が可能です(各パラメータの詳細についてはページ「Home · billerickson/display-posts-shortcode Wiki · GitHub」等参照)。

また、WordPress.com 上でのショートコード「display-post」の使い方については、以下のまとめページを作成してありますので、適宜、ご利用ください。プラグイン「Display Posts Shortcode」とほぼ同様の仕様となっています。

AccessMenuBarApps-47
記事をタイル状に表示したりすることのできるショートコード「display-posts」

CSS を追加する

プラグイン「Display Posts Shortcode」をインストール・有効化し、固定ページに上述したような記述を追加した状態では、以下のような感じの表示となります。サムネイル画像がない場合だと、それなりに表示されますが、画像が入るとレイアウトを調整する必要がある場合がほとんどだと認識しています。

AccessMenuBarApps-48

そこで、CSS を追加する必要が出てくるわけですが、CSS を追加する方法として、ここではプラグイン「My Custom CSS」を使った方法について紹介したいと思います。

プラグイン「My Custom CSS」のインストール

プラグイン「My Custom CSS」をインストールし、有効化するとダッシュボードに「My Custom CSS」というメニューが追加されます。

AccessMenuBarApps-49

このメニューをクリックすると、以下のような画面が表示されます。この欄内に任意の CSS を追加することになります。

AccessMenuBarApps-50

CSS の追加

以下の CSS をプラグイン「My Custom CSS」の欄内に貼りつけます。

/* サイドバー等に任意のカテゴリーのサムネイル画像つき記事リストを表示する */
.boxlist ul.display-posts-listing {
padding-left: 0 !important;
text-align: left;
margin-top: 20px;
margin-left: 0;
}
.boxlist ul.display-posts-listing > li {
width: 100%;
list-style: none;
display: inline-block;
vertical-align: top;
white-space: normal;
word-wrap: break-word;
font-size: 13px;
line-height: 1.2;
margin: 0;
padding: 7px 2px;
border-bottom: 1px dashed #ccc;
}
.boxlist ul.display-posts-listing li > a > img {
display: block !important;
border: 1px solid #d0a600 !important;
height: auto !important;
width: 80px !important;
max-width: inherit !important;
float: left !important;
margin: -2px 8px 4px 2px !important;
padding: 2px !important;
background-color: rgba(230,230,230,0.4) !important;
border-radius: 3px;
}
少々細かい話になりますが、レンタルサーバの種類によっては上記の CSS を保存しようとするとエラーが出る場合があります。その場合には一番上の「/* ~ */」の部分を削除してください。

「Save」ボタンをクリックすると、

AccessMenuBarApps-51

以下の記述で囲ってあるショートコード「display-posts」の部分の表示が

以下のように切り替わると思います。

AccessMenuBarApps-48

rect3015

AccessMenuBarApps-52

例えば、以下の CSS に差し替えると(width を 80px → 130px に変更)

/* サイドバー等に任意のカテゴリーのサムネイル画像つき記事リストを表示する(画像サイズ大きめ) */
.boxlist ul.display-posts-listing {
padding-left: 0 !important;
text-align: left;
margin-top: 20px;
margin-left: 0;
}
.boxlist ul.display-posts-listing > li {
width: 100%;
list-style: none;
display: inline-block;
vertical-align: top;
white-space: normal;
word-wrap: break-word;
font-size: 13px;
line-height: 1.2;
margin: 0;
padding: 7px 2px;
border-bottom: 1px dashed #ccc;
}
.boxlist ul.display-posts-listing li > a > img {
display: block !important;
border: 1px solid #d0a600 !important;
height: auto !important;
width: 130px !important;
max-width: inherit !important;
float: left !important;
margin: -2px 8px 4px 2px !important;
padding: 2px !important;
background-color: rgba(230,230,230,0.4) !important;
border-radius: 3px;
}

以下のようにサムネイル画像を大きくすることができます。

AccessMenuBarApps-53

上記の CSS の例では縦横比の方は「設定」→「メディア」の方で変えることになりますが、たぶん、CSS の方だけでもできます(「a img」で枠を設定して、overflow:hidden で「img」のはみ出た部分を隠す感じ)。

AccessMenuBarApps-54

特定のテンプレートだけで CSS を効かせる

ほとんどのテーマがこのようなしくみだと思うのですが、少なくともテーマ「Twenty Fourteen」の場合、固定ページにテンプレート「デフォルト」を指定してあると、body 要素のクラスに「page-template-default」が追加され、

AccessMenuBarApps-55

一方、テンプレート「全幅ページ」を指定するとクラスに「page-template-page-templatesfull-width-php」が追加されますので、

AccessMenuBarApps-56

たとえば、以下のような CSS に差し替えると、テンプレートを「デフォルト」に指定した固定ページにだけ CSS を適用させることができます。

/* サイドバー等に任意のカテゴリーのサムネイル画像つき記事リストを表示する(テーマ「Twenty Fourteen」のテンプレート「デフォルト」専用) */
.page-template-default .boxlist ul.display-posts-listing {
padding-left: 0 !important;
text-align: left;
margin-top: 20px;
margin-left: 0;
}

.page-template-default .boxlist ul.display-posts-listing > li {
width: 100%;
list-style: none;
display: inline-block;
vertical-align: top;
white-space: normal;
word-wrap: break-word;
font-size: 13px;
line-height: 1.2;
margin: 0;
padding: 7px 2px;
border-bottom: 1px dashed #ccc;
}

.page-template-default .boxlist ul.display-posts-listing li > a > img {
display: block !important;
border: 1px solid #d0a600 !important;
height: auto !important;
width: 80px !important;
max-width: inherit !important;
float: left !important;
margin: -2px 8px 4px 2px !important;
padding: 2px !important;
background-color: rgba(230,230,230,0.4) !important;
border-radius: 3px;
}

各テンプレートでどのようなクラスが使われているかについて調べる方法として、私自身は Firefox の「Firebug」というアドオンを使っていますが、画面上で右クリックすれば、「要素の詳細を表示」であるとか(mac の Safari の例)、

AccessMenuBarApps-57

「要素を検証」であるとか(windows の Google Chrome)、といった感じのメニューが出てくるので、そこから使われているクラスを確認することができると思います。

AccessMenuBarApps-58

特定の記事だけで CSS を効かせる

特定の記事にだけ CSS を適用させたい場合には、プラグイン「Custom CSS and JavaScript 」等を使えば OK かと思います。

AccessMenuBarApps-59


以上、説明した手法はおおむね、ほとんどの WordPress テーマで適用可能だとは思いましたが、最近、WordPress.com の方に知的エネルギーを集中しており、いわゆる例外規定にまでフォローしきれていないため、あえて、WordPress.org のテーマ「Twenty Fourteen」限定ということで説明させて頂きました。


  1. 2015-10-27現在、プラグインの名称自体は「Lightbox」に変更されております。このプラグインの制作者は Bill Erickson 氏ですので、そこの部分で識別できると思います。 

2件のコメント

  1. comemoさん、有難うございます。
    「やりたい事」「変更したい箇所」が、この記事で解決しました。
    また、最新の”Twenty Fourteen”で実証されているので超初心者の私には心強いバイブルです。

    いいね

    1. お役に立てたみたいでよかったです。わかりにくいところや不足している内容などございましたら、またご連絡下さい。

      いいね

 

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト /  変更 )

Google フォト

Google アカウントを使ってコメントしています。 ログアウト /  変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト /  変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト /  変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。