ブログの途中で過去記事へのリンクが紹介されているとき、画像やテキストが整ったデザインだとわかりやすいですよね。
他ブログサイトのように、わかりやすいデザインの過去記事リンクを貼る方法を探していたらじつはデフォルトで実装されていてびっくりしました。
そのままだとサイトのデザインと合わず使いにくかったのでカスタマイズしたのですが、PHPのプログラミングがほとんどいらない簡単な方法なのでメモします。
Embedカード（ブログカード）とは
よくブログの途中にある下のような記事リンクです。
Embedカードやブログカードと呼ばれているそうで、Wordpressのver4.4以降はデフォルトで実装されています。リンクを入れるだけで自動で挿入されます。
記事リンクの他にもInstagramやTwitter、youtubeなども埋め込むと自動でデザインが生成されます。
Instagramの埋め込みはこちらの記事↓でやりました。
デフォルトはサイズが大きい
上のリンクはカスタマイズ済みですが、デフォルトのEmbedカードは画像もテキストも大きいです。
ちょっと広告っぽくも見えてしまうのでコンパクトにしたいなと思いました。
けっこう大きいですよね？
カスタマイズの方法
Embedカードをカスタマイズする方法はいくつかあるようです。
- プラグインにする
- 自作する
- embed-content.phpをテーマ内で編集する
- Embedカードに追加のcssを読み込む
プラグイン→重くなってしまう。
自作→手間がかかる。せっかく機能があるし。
embed-content.phpを編集→テーマの更新があったときに競合する可能性も。後々手間がかかるリスクあり。
ということで私はリスクも手間も少ないcssの追加をすることにしました。
Embedカードに追加のcssを読み込む方法
Embedカードはiframeで生成されます。このiframe内にcssを読み込むことでデザインの編集ができるようになります。
cssの読み込みはfunctions.phpに以下の記述を書くだけです。
function my_embed_style() {
wp_enqueue_style('wp-embed-template-org', get_stylesheet_directory_uri() . '/css/add_wp-embed-template.css');
}
add_filter('embed_head', 'my_embed_style');
/css/add_wp-embed-template.cssの部分はテーマ内のディレクトリに合わせて書き、このcss内にEmbedカードのベースのcssを上書きする記述を書きます。
私はデスクトップ時は画像とテキストが横並び、スマートフォン時は縦並びはそのままでテキストを小さくしました。
だいぶすっきりしました。スマートフォンはもう少し小さくするか悩みましたが、これで様子を見てみます。
デフォルトのcssを削除して、丸ごとカスタマイズする方法もあるようですがこれくらいで十分ではないでしょうか。
まとめ
EmbedカードをPHPやプラグインをほぼ使わずにcssでカスタマイズする方法のメモでした。過去記事へのリンクがかなりわかりやすくなって満足です。
