【WordPress】 内部リンクをキレイに見せる 埋め込み記事カスタマイズ

WordPress埋め込み記事(embed)のデザインカスタマイズを紹介します。

埋め込み記事のスタイル範囲って分かりづらいんですが、今回紹介するのは自サイトのスタイルです。TwitterやYoutubeを埋め込んだときに表示されるレイアウトではありません。(これらはそれぞれのサイトで設定されたembedスタイルが適用されています)

どこで使われるかというと、主に自サイト内で内部リンクを設置する時などですね。

この内部リンクを強化することで、ユーザーの回遊率が高まり、検索上位化が見込めるようになります。

これら内部リンクのユーザビリティー向上を目指し、デフォルトデザインをカスタマイズしていきます。

埋め込み記事のデフォルトデザイン

WordPress埋め込み記事のデフォルトデザイン

これでも良いのですが、自分のサイトデザインに合わせてもう少し調整したいですよね?
また、シェアボタン、コメントなどあまり必要ではない要素もあるので、このあたりもカスタマイズしたい。

カスタマイズ方法は大きく分けて2つ

カスタマイズする範囲によっていくつか方法があります。
1.現状の構成要素を生かして、CSSのみデザインを変更する場合
2.HTML、CSS共にオリジナルデザインを使用する場合

1.CSSのみカスタマイズする

作業するファイルはCSSのみとなります。
まず、embedにあてているCSSファイルの参照先を変更します。

下記場所にあるwp-embed-template.cssを自分のthemeフォルダ内にコピーします。(場所は任意)

wp-includes
└css
 └wp-embed-template.css

次にCSSファイルの参照先を変更します。

functions.phpに下記を追記。

// embed css読み込み
add_filter('embed_head', 'embed_style');
function embed_style() {
  wp_enqueue_style('wp-embed-template-org', get_stylesheet_directory_uri() . '/embed-template.css');  // ←ディレクトリはお好きなところに
}
// デフォルトのembed cssを読み込まない
remove_action('embed_head', 'print_embed_styles');

※直接wp-includesディレクトリのCSSを修正しても良いのですが、WordPressのバージョンアップなどでリセットされてしまう恐れがあるので、自分のtheme内にコピーしてしまったほうが運用しやすい。

あとはコピーしたwp-embed-template.cssをベースに(もちろん一度まっさらにして書き直してもOK)修正を加えてください。

2.HTML・CSS両方カスタマイズする

先程のCSS読み込みと合わせて、embed-content.phpを変更します。

下記場所にあるembed-content.phpを自分のthemeフォルダ直下にコピーします。

wp-includes
└theme-compat
 └embed-content.php

embedファイルの読み込みは、themeフォルダ内にembed-content.phpがあればそちらが優先されます。ディレクトリの読み込み先変更などは不要です。

CSSと同様、embed-content.phpをベースに修正してください。

まとめ

私は「2.HTML・CSS両方カスタマイズする」の方法で修正してみました。

こんな感じです。

スッキリして見やすくなったかな〜と思いますがどうでしょう?

ちなみにダークモードも用意してあります。
ダークモード対応についてはこちらの記事をご覧ください。

以上が埋め込み記事のデザインカスタマイズ方法です。
内部リンクって結構使いますよね。せっかくならブログ全体の雰囲気にあったものを使いたいですよね。

ということで埋め込み記事のカスタマイズ方法でした!

最新記事