WordPressテーマ「スワロー」に内部ブログカードを実装する方法

内部ブログカード ブログ

どうも、室井(@muroiwataru)です。
今回はブログカードについてお話ししていきます。

ブログカードっていうのはこういうやつです。

↓WordPress4.4から実装されたブログカード↓

【初心者向け】WordPressにフォームを設置する方法

過去記事のアイキャッチ、タイトル、概要を伝えられるため、PV増加につながります。

しかしWordPressのブログカードはダサい。
使っている人を見たことがない。ガチで。

もっとはてなブログみたいなシンプルなブログカードを使いたいですよね。

↓はてなブログのブログカード↓

はてなブログ

情報がコンパクトにまとまっていて非常に美しいですよね。
WordPressではてなブログのブログカードを利用する方法もありますが、今回は自作します。

WordPressテーマ「スワロー」はアイキャッチが16:9の長方形なので、サムネイルを長方形で取得したいからです。

自作といっても私にプログラミングの知識はないので、こちらのサイトを参考にします。

このサイトのコードを使うとこのようなブログカードになります。
functions.phpとstyle.cssにコードを追加してください。

↓「寝ログ」を参考にしたブログカード↓

デフォルトのブログカード

 

6/11追記

スワローには標準でブログカードを表示するショートコードが内蔵されていました。
よりシンプルなものを使いたい場合や、手間をかけたくない場合はこちらがおすすめです。

「スワロー」でブログカードを表示するショートコードの書き方

2018.06.11

 

ブログカードのカスタマイズ

サムネイルを長方形に表示するようにコードを書き換えましょう。
抜粋した本文の最後に「…」も表示するように変更します。

↓サムネイルと「…」をカスタマイズした例↓

QTTabBarアイキャッチ
Windowsのエクスプローラにはタブ機能がありません。 なので、3つのフォルダを開くとするとこうなってしまいます。 ↑Windows標準のエクスプローラ ゴチャゴチ…

コードをそのままコピーするのは問題があるので、変更する部位だけ記述します。

functions.phpの編集

サムネイルを作成するコードの書き換え

2行目のコードを

下記のコードに書き換えます。

「…」を挿入するコードの追加

20行目のコードに

” . …”を追加します。

サムネイルを取得するコードの書き換え

37行目のコードを

下記のコードに書き換えます。

サムネイルが存在しない場合のコードの書き換え

39行目のコードを

下記のコードに書き換えます。

style.cssの編集

19行目のコードを

下記のコードに書き換えます。

これでカスタマイズは終了です。

<a href=”記事URL”>記事URL</a> と入力するとブログカードが呼び出されます。

うまく反映されるか確かめてみましょう。
何も変わらない場合はブラウザのキャッシュを削除すると反映されます。

あとがき

今回参考にしたコードは、カスタマイズしやすいように書かれているので非常におすすめです。

ブログカードを追加するプラグインもありますが、使わずにすむならそれに越したことはありません。
プラグインを多用すると重くなる原因になるからです。

また、プラグインを利用していると互換性が切れた際に修正が非常に面倒です。

みなさんも自分で書きましょう。

直接テーマに記述しちゃダメですよ!
子テーマに記述してくださいね。