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

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

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

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

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 rectangularclass=”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とともに子テーマにアップロードします。

カスタム用ファイルのアップロード

3つのファイルを編集してアップロード

ブラウザで「Ctrl」+「F5」などを使ってスタイルシートを更新させることにより、デザインが変更されたブログカードが表示されるようになります。

追加した2つのファイルについて

今回、子テーマへ追加作成したwp-embed-template.cssは、/wp-includes/css内にある同名のファイルに対して一部を補足または変更できるカスタム用のファイルです。

一方、embed-content.phpのほうは、既存のファイルに置き換えて動作させることになるのでシステムがアップデートされたときのために変更箇所をチェックしておいたほうが良いでしょう。

おすすめ記事

HTMLページにブログカード HTMLで作成したページに画像入りリンクカードを手動で実装する 記事ごとにアイキャッチの有無jを設定 WordPressでタイトル下のアイキャッチ表示をどう運用するか