どうも、室井（@muroiwataru）です。
今回はブログカードについてお話ししていきます。
ブログカードっていうのはこういうやつです。
↓WordPress4.4から実装されたブログカード↓
過去記事のアイキャッチ、タイトル、概要を伝えられるため、PV増加につながります。
しかしWordPressのブログカードはダサい。
使っている人を見たことがない。ガチで。
もっとはてなブログみたいなシンプルなブログカードを使いたいですよね。
↓はてなブログのブログカード↓
情報がコンパクトにまとまっていて非常に美しいですよね。
WordPressではてなブログのブログカードを利用する方法もありますが、今回は自作します。
WordPressテーマ「スワロー」はアイキャッチが16:9の長方形なので、サムネイルを長方形で取得したいからです。
自作といっても私にプログラミングの知識はないので、こちらのサイトを参考にします。
このサイトのコードを使うとこのようなブログカードになります。
functions.phpとstyle.cssにコードを追加してください。
↓「寝ログ」を参考にしたブログカード↓
6/11追記
スワローには標準でブログカードを表示するショートコードが内蔵されていました。
よりシンプルなものを使いたい場合や、手間をかけたくない場合はこちらがおすすめです。
ブログカードのカスタマイズ
サムネイルを長方形に表示するようにコードを書き換えましょう。
抜粋した本文の最後に「…」も表示するように変更します。
↓サムネイルと「…」をカスタマイズした例↓
コードをそのままコピーするのは問題があるので、変更する部位だけ記述します。
functions.phpの編集
サムネイルを作成するコードの書き換え
２行目のコードを
//100×100pxのサムネイルを作成
add_image_size('thumb100', 100, 100, true);下記のコードに書き換えます。
//180×100pxのサムネイルを作成
add_image_size('thumb180', 180, 100, true);「…」を挿入するコードの追加
２０行目のコードに
return $content;
” . …”を追加します。
return $content . …;
サムネイルを取得するコードの書き換え
３７行目のコードを
$thumbnail = get_the_post_thumbnail($id, 'thumb100', array('style' => 'width:100px;height:100px;', 'class' => 'blog-card-thumb-image'));//サムネイルの取得（要100×100のサムネイル設定）下記のコードに書き換えます。
$thumbnail = get_the_post_thumbnail($id, 'thumb180', array('style' => 'width:180px;height:100px;', 'class' => 'blog-card-thumb-image'));//サムネイルの取得（要180×100のサムネイル設定）サムネイルが存在しない場合のコードの書き換え
３９行目のコードを
$thumbnail = '<img src="'.get_template_directory_uri().'/images/no-image.png" style="width:100px;height:100px;" />';
下記のコードに書き換えます。
$thumbnail = '<img src="'.get_template_directory_uri().'/images/no-image.png" style="width:180px;height:100px;" />';
style.cssの編集
19行目のコードを
margin-left:110px;
下記のコードに書き換えます。
margin-left:190px;
これでカスタマイズは終了です。
<a href=”記事URL”>記事URL</a> と入力するとブログカードが呼び出されます。
うまく反映されるか確かめてみましょう。
何も変わらない場合はブラウザのキャッシュを削除すると反映されます。
あとがき
今回参考にしたコードは、カスタマイズしやすいように書かれているので非常におすすめです。
ブログカードを追加するプラグインもありますが、使わずにすむならそれに越したことはありません。
プラグインを多用すると重くなる原因になるからです。
また、プラグインを利用していると互換性が切れた際に修正が非常に面倒です。
みなさんも自分で書きましょう。
直接テーマに記述しちゃダメですよ！
子テーマに記述してくださいね。
