パソコン表示時のリンクカードを本文幅いっぱいに表示させる方法

TT2(Twenty Twenty-Two)テーマにはそもそもこれに関するスタイルコードは存在しないようなので、これはおそらくWordPressコアの問題だと思いますが、段落ブロックなどに外部or内部のページURLを入れると自動でカード化される際のデザインってちょっと微妙だと思いませんか？

左寄せ、右寄せ時は、幅の狭いカードが左または右に寄るのはまあいいとしても、通常のカード表示時は幅も微妙だし、妙に大きなカードだし．．。

巷（ネット上）では、テンプレートそのものを変えてしまうハードな方法から、書いてある通りにやってみたけどうまくいかない方法（フロントエンドのみ対応だったり．．）、果てはこの機能を無効にして他のプラグインで実装しちゃえというものまでいろいろと紹介されていますね。

• 左右寄せはそのまま有効になるようにしたい（文章の回り込み）
• パソコン表示時は本文幅いっぱい、左にアイキャッチ画像、右にタイトルと抜粋が表示されるようにしたい
• モバイル表示はデフォルトのまま（上から画像・タイトル・抜粋が並ぶ）でもよい
• 可能な限りブロックエディタ上でもきちんと表示されるようにしたい

そんな思いの中、時間を使っていろいろとやってみた中で、一番簡素にできた方法を、備忘録を兼ねて紹介しておきます。

ちなみに今回紹介する方法で実装すると、以下のような感じになります。

もう外部CSSを読み込ませる必要なし？wp_add_inline_styleが超便利！

Twenty Twenty-Twoテーマでのみチェックをしていますので、他のテーマではきちんと適用されない、さらに調整が必要となるかもしれませんがあしからず．．

標準のリンクカードをうまく表示させるようにする方法

テーマで実装する場合

テーマへ実装する場合と、自作テーマで実装する場合とで若干コードが違うので、まずはテーマ（子テーマ）へ導入する方法から紹介します。

まずは、パソコン上でファイル名を「embed-custom-style」、拡張子を「css」とした、「embed-custom-style.css」というファイルを作ります。

次に「embed-custom-style.css」を子テーマのstyle.cssがある場所へアップロードします。

管理画面の「ツール」→「テーマファイルエディター」を開いた後、「embed-custom-style.css」を開き、以下のスタイルコードをコピーします。

iframe.wp-embedded-content {
width: 100%;
height: auto;
min-height: 250px;
}

.wp-embed-featured-image {
margin-bottom: 20px;
width: 200px;
height: auto;
min-height: 100px;
margin-right:16px;
float:left;
}

.wp-embed{
padding-bottom:12px;
}

最後に、functions.phpを開き、以下のコードをコピーします。

/*** パソコンのembedをきれいににする ***/
function sample_embed_custom_styles(){
	if(!wp_is_mobile()){
    wp_enqueue_style( 'wp-embed-custom-style', get_stylesheet_directory_uri(). '/embed-custom-style.css' );
	}
}
add_filter( 'embed_head', 'sample_embed_custom_styles' );
add_action('wp_enqueue_scripts','sample_embed_custom_styles');
add_action( 'enqueue_block_editor_assets', 'sample_embed_custom_styles');

自作プラグインで実装する場合

テーマの場合と同じように、「embed-custom-style.css」を作成し、自作プラグインのフォルダ内へアップロードします。

「embed-custom-style.css」へ追加するスタイルコードもテーマの場合と同じです。

違うのは、プラグインのプログラムに追加する以下のコードです。テーマの場合とのコードの違いは．．プラグインを自作するレベルの方ならお分かりになろうかと思いますので、詳しくは割愛します。

function sample_embed_custom_styles(){
	if(!wp_is_mobile()){
    wp_enqueue_style( 'wp-embed-custom-style', plugin_dir_url( __FILE__ ) . 'embed-custom-style.css' );
	}
}
add_filter( 'embed_head', 'sample_embed_custom_styles' );
add_action('wp_enqueue_scripts','sample_embed_custom_styles');
add_action( 'enqueue_block_editor_assets', 'sample_embed_custom_styles');

コードの簡単な解説

ユーザー定義関数（今回のコードでは「sample_embed_custom_styles」）というユーザー定義関数を作って、子テーマのルートディレクトリまたはプラグインのルートディレクトリに配置した「embed-custom-style.css」を読み込ませる（エンキューする）という単純なものです。

リンク埋め込み（リンクカード）のコンテンツに対してデザインをカスタマイズする場合には、embed_headというフックを使うのですが、CSSの適用される場所が微妙でこのフックで適用される部分もあればそうでない部分もあるようです。

従って、同じCSSを読み込ませるユーザー定義関数に対して、以下の3通りのフックを通してできるだけすべての箇所に適用されるようにしています。

• embed_headフックで適用される場所
• wp_enqueue_scriptsフックで適用される場所（主にフロントエンド用）
• enqueue_block_editor_assetsフックで適用される場所（ブロックエディタ内）

フックが効く効かないは、それぞれのアクションフックをコメントアウトしてみる等して確認いただければと思います

なお、この3種のフックの中で、enqueue_block_editor_assetsフックは、ブロックエディタが導入されたWordPress 5.0以降でないとエラーが出ますのでご注意ください。

また、元に戻す場合はテーマまたはプラグインに追加したコードを削除、完全に削除するには「embed-custom-style.css」も削除すればOKです。

後述

今回のカスタマイズをしようといろいろ試行している中で、一番ハードなテンプレートを入れ替えてしまう方法もやってみました。

私的な結論としては、カード内へカスタムフィールドの値など特殊な表示項目を追加するのでなければ、本ページの方法で簡単にデザインを上書きしたほうがスマートかなと思います。

冒頭で書いたように、本ページを公開するにあたって、Twenty Twenty-Twoテーマでのみ動作・表示チェックを行っていますので、他のテーマでは、さらにスタイルの調整が必要となることがありますから、その点は了承の上コードを使用ください。