プラグインなしで使えるWordpressのブログカード機能の見た目をカスタマイズする方法

やわなべです。

昨日「おひとりさま誕生日」みたいな記事を書いたんですが、文中に自サイトの過去記事へのリンクをいくつか挿入する必要がありました。

普通にテキストリンクでもいいんですが、はてなブログのようなアイキャッチと本文の抜粋をふくむ、いわゆる「ブログカード」様式だと見ばえがいいですよね。

このブログカード機能を実現するための外部スクリプトやプラグインもあるんですが、どうやらWordpress4.4からは、基本機能として実装するようになったようです。

使い方は簡単。挿入したい記事のURLをそのままはっつければOK。リンクタグもなにもなしで。

はっつけられたURLのサイトが例えばYoutubeであれば、

動画のプレビュー画面が埋め込まれますし、TwitterのURLをはっつければ、

ツィッターカードの表示になります。そして、自サイトの記事URLをはっつけた場合はどうなるかというと…

おかげさまで2周年、やわなべ.net 中の人振り返りインタビュー

このように、アイキャッチ画像、タイトル、本文抜粋のついたブログカード式の表示となるわけです。

この埋め込み機能はもともとあったようなんですが、記事中の裸のURLを勝手に変換するようになったのが4.4から、ということのようです。

で、非常に便利な埋め込みブログカードなんですが、ちょっと見た目を変えたいと思ったときにどのテンプレートを変えればいいのかがよくわかりません。意外と面倒だったので以下で解説してみます。

スポンサーリンク

ブログカードはiframeで表示される

この埋め込み機能、表示後のHTMLソースを見ると分かりますが、iframeタグを使って出力されてます。iframeてのは画面の中に枠を作って、その枠の中に他ページから読み込んだhtmlを埋め込んで表示するわけですね。Youtubeなんかはわかりやすいですが、自サイトのブログカードでも同じです。

ブログカードを使ってない人でも、実は各記事がその埋め込み用のページとして表示されるようになっています。どうやって埋め込みページを表示するかというと、各記事ページのURLに「/embed」という文字列をくっつけるだけ。「https://ywnb.net/p/201608/3088/embed」のように。

ためしに上で貼っつけたブログカードを、単体で表示させるとどうなるかというとこうなります。(下のリンククリックすると別ウィンドウで開きます)

(埋め込み表示)おかげさまで2周年、やわなべ.net 中の人振り返りインタビュー

WordPressのテーマをいじったことがある人なら、「この、テーマ内のどのファイルをいじったらいいの?」と思うはずですよね。

embed.phpをテーマフォルダにコピーしよう

結論から言うと、この埋め込み用ページのデフォルトのデザインテンプレートは、「Wordpressホーム/wp-includes/theme-compat/embed.php」を呼び出して表示しています。

カスタマイズをしたい場合は、自分の使ってるテーマフォルダの直下にembed.phpってのを用意するとそちらを優先して呼び出します。

が、デフォルトのembed.phpの中身を見るとHTMLタグは一切なくPHPのコードしかありません。実はここから派生する4つのファイルをさらに呼び出してHTMLを合成して作ってるんですね。

  • header-embed.php
  • embed-content.php
  • footer-embed.php
  • embed-404.php

ブログカードのメインは名前から類推できるように「embed-content.php」の中で記述されているので、表示内容を追加、削除したいというような場合は、このファイルをテーマフォルダ以下にコピーしていじればいいでしょう。

そうではなく、文字サイズや画像のサイズなどの見た目をいじりたいんだ、という場合はスタイルシートの編集でまかなえそうです。が、埋め込み用ページにテーマのスタイルシートを読み込むかどうかはテーマによるでしょう。テーマフォルダ以下の「headeer.php」に直にlinkタグで書いてる場合は読み込みされませんが、functions.phpの中で「wp_enqueue_style」関数などで読み込ませている場合は適用されるはず。

もし読み込んでない場合は、wp-include以下から 「header-embed.php」をテーマフォルダにコピーしてきて任意のCSSを読み込むよう書き換えるといいでしょう。

デフォルトのサイトアイコンの表示で問題発生

今回、冒頭の記事で初めて使ったんですが、ひとつ問題が発生。

ブログカードのフッター部分にサイト名とサイトのアイコン画像が表示されるんですが、特に設定してないと、サイトのアイコンとして、デフォルトのWordpressのマークが表示されます。

ss74894.png

こんな感じで。

たぶんfabiconのように、どこかで設定できるんだろうと思ったんですが、面倒なんで「まあいいや」とそのまま公開したら、スマホなどで見た場合に認証ダイアログが出てしまいました。

実はここに表示されるデフォルトの「サイトアイコン」の画像ファイルは「/wp-admin」以下、つまり管理領域の中にあるんですよね。

私はこのブログを置いてるレンタルサーバーの設定で、管理領域である「/wp-admin」以下にパスワード認証をかけるよう設定しているんで、マーク1個を表示するのに、見る人に認証を求めるようになってたようです。編集中はずっと管理者としてログインしてたんで気づきませんでした。

とりあえず応急処置として「embed-content.php」の中にあったサイト名表示の部分を取っぱらったんですが、あとで調べると、管理画面の「外観」「カスタマイズ」の画面から設定できるようでした。

ss72171.png

ここ。同画面を開いた左メニューにある「サイトアイコン」ってところで、任意の画像をアップロードすればいいようです。512×512のサイズを推奨ってありましたが、正方形であればもっと小さくても問題ありません。

あとひとつ気になるのは、これ、iframeで別に呼び出して埋め込んでるってことは、たとえば文中で3つ内部リンクを埋め込んだとしたら、サーバーへのアクセスは、埋め込み記事とあわせた4回行うんじゃないかな、ってこと。負荷の問題もありますし、アクセス解析上、1アクセスで4PV分を計上することになるんじゃないのかなーと。あんまり多用しないほうがいいかもしれませんね。