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

公開日:2022(令和4)年11月25日/最終更新日:

,
Twenty Twenty-Two Theme Customize

【景品表示法に基づく表記】ページ内のコンテンツには、商品プロモーションが含まれています



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

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

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

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

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

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

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

本ページで掲載しているコードは、以下に了承した上で使用ください

  • コードは商用・非商用問わず自由に使っていただいて構いませんが、コード追加による不具合やトラブルが発生しても当方では一切責任を負いません
  • コードは有効化しているテーマのfunctions.php、style.cssなどへ追加することで機能します。それらのファイルへの変更を行うことに不安のある方は使用しないでください
  • コードは本ページの公開日時点で私の環境において動作したものです。WordPressバージョン他環境の違いによって動作しないことがあります
  • コードは、セキュリティ、コードの正確さなどにおいて完全なものではありません。中には紹介するコードを簡略化するために省略している部分があるものもありますので、ご自身でコードを十分に検証し、必要な部分の編集を行った上で使用するようにしてください
  • 掲載しているのは参考コードです。自身の環境に合わせるための編集はご自身で対応いただく必要があります(コメント欄等から質問いただいても基本回答は致しません)
  • 掲載しているコードの転載を禁じます(SNSで紹介いただいたり、本ページへのリンクを張っていただくことは大歓迎です)

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

テーマで実装する場合

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

まずは、パソコン上でファイル名を「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通りのフックを通してできるだけすべての箇所に適用されるようにしています。

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

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

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

QA Analytics QA Analytics

後述

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

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

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



Lolipop ServerMoshimo Ad x-serverMoshimo Ad

WordPressブロックテーマのカスタマイズ方法画像
ブロックテーマでサイトの背景画像を設定する5つの方法