WordPress標準ブログカードのスタイルをカスタムして整える方法

WordPressでは記事中にURLを直接入力することでブログカードを表示させる機能が備わっています。

この標準で使えるembedカードが実装されてからずいぶん経ちますが、デフォルトテーマ以外に良くあるブログカードに比べデザイン性が今一つなためカスタマイズしてみることにしました。

目次非表示

ブログカードのデザイン修正の概要
embed-content.phpファイルの編集
スタイルシートの追加
- wp-embed-template.cssの作成
- 子テーマのfunctions.phpへ追記
追加した2つのファイルについて

ブログカードのデザイン修正の概要

WordPress標準の機能で使えるブログカードのデザイン修正のために行った作業の概要は、子テーマへのphpファイルの設置とスタイルシートの追加です。

作成したブログカード

Webサイトを作成するために知っておきたい基本的な知識

今回のブログカードのカスタムにあたっては次のサイトを参考にさせていただいています。

【プラグイン不要！】WordPressでembed-content.phpを修正してブログカード表示をカスタマイズする方法｜ウェブスタジオTANI

phpファイルの編集もそうですが、子テーマへのスタイルシート追加も従来通りのstyle.css内への追記という小手先のテクニックだけでは足りませんでした。

embed-content.phpファイルの編集

最初に、画像サイズとフロート処理を調整するためwp-includes内にあるembed-content.phpファイル（場所：/wp-includes/theme-compat/embed-content.php）に変更を加え子テーマにアップロードします。

FTP接続などで該当ファイルをダウンロードしエディターで次の部分を編集します。

80行目付近にあるclass=”wp-embed-featured-image rectangular”をclass=”wp-embed-featured-image square”に書き換えます。

編集前

<div class="wp-embed-featured-image rectangular">

編集後

<div class="wp-embed-featured-image square">

エディターでrectangularを検索するとファイル内に5か所ほどありますが、squareに書き換えるのはそれらのうち一番下に記述されている1か所だけです。

編集が済んだら子テーマのディレクトリ（直下でOK）へアップロードします。

スタイルシートの追加

embed-content.phpファイルを子テーマにアップロードすることで、画像に対しての文字の回り込みなどを変更できましたが、スタイルシートを調整することでさらにデザインを整えることにします。

wp-embed-template.cssの作成

ブログカードのスタイルシートは従来からある子テーマのstyle.cssへ記述するだけでは適用されないため専用のファイルを作成します。

内容を次の通り記述したファイルを作成しファイル名をwp-embed-template.cssとします。

wp-embed-template.css

.wp-embed a:hover {
	color: #ababab;
	text-decoration: underline;
}
.wp-embed {
  padding: 12px;
  background: #f5f5f5;
  max-width: 550px;
}
.wp-embed-featured-image img {
  object-fit: cover;
  width: 120px;
  height:80px;
}
p.wp-embed-heading {
  font-size: 16px;
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
.wp-embed-site-icon {
  width: 18px;
  height: 18px;
}
.wp-embed-site-title a {
  padding-left: 20px;
  font-size: 12px;
}
.wp-embed-excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.wp-embed-footer {
  margin-top: 5px;
}

このwp-embed-template.cssファイルは、子テーマ内に新たにcssディレクトリ（cssという名前のフォルダ）を作成しそこへ保存します。

子テーマのfunctions.phpへ追記

新しく作成したwp-embed-template.cssファイルは、このままではWordPressで読み込まれないため、子テーマのfunctions.phpに次の通り追記します。

子テーマのfunctions.php

function custom_embed_style() {
    wp_enqueue_style('wp-embed-template-org', get_stylesheet_directory_uri() . '/css/wp-embed-template.css');
}
add_filter('embed_head', 'custom_embed_style');

functions.phpの編集が終わったら、cssディレクトリ内のwp-embed-template.cssとともに子テーマにアップロードします。