Monkeyのテーマには、別のサイトやページのタイトルや詳細をリッチにリンク表示する為のブログカードと言う仕組みがあります。今回は、そのブログカードのカスタマイズについて解説を行います。Monkeyプラグインを使用してブログカードの表示を変更する方法を解説します。v7現在、テーマフックでは出来ない部分をご紹介します。ブログカードとは?WordPressにはEmbedという機能があり、リンク先URLがoEmbedというプロトコルに準拠している場合には自動的にカード表示に変換される仕様になっています。その変換されたカード表示部分のことをブログカードと呼んでいます。今回の記事...not-wiz.netテネーブル正常に表示されるブログカードには5つほど要素があります。Monkey公式サイトのマニュアルページを参考にしてみてください。ブログカード次のようなブログカードを表示させることができます。設置方法はとても簡単。貼り付けるだけです...snow-monkey.2inc.orgテネーブルブロックエディターの場合は「埋め込み」カテゴリーの「埋め込み」ブロックでURLを埋め込むと、ブログカードに変換されます。エディター内では表示がおかしくなる場合もありますが、実際の記事画面では正しくブログカードに変換されていると思います。ルミェール段落ブロックでもURLだけ書けば、通常は埋め込まれるよ!ただ、ブロックエディターのバージョンによっては正しく動作しない場合があるんだ...。Monkeyのカード表示についてWordPressの標準機能のままでは、リンク先URLが外部の場合は正しくブログカードになりません。Cardと言うライブラリを使用され、外部のリンク先URLでもoEmbedプロトコルに準拠している場合はカード表示に変換されるようになっています。Cardライブラリで表示しているブログカード部分はテンプレートの置換などではカスタマイズ出来ないみたい。Card)では、下記の3つのパターンがあります。取得前、取得時(リンク先URLのoEmbedを取得する前、取得中)取得失敗時(通常リンク表示)取得成功時(ブログカード表示)3パターンの表示HTMLについて取得前、取得時ロード中の場合、ブログカード中のURLは下記のHTMLに変換されます。target="_selfまたは_blank">リンク先URL</a></div>target要素は、リンク先URLが同一のサイトであれば_self、それ以外は_blankとなります。テネーブルこのようなHTML記述をカスタムHTMLブロック等で記述した場合でも自然にブログカードに変換されます。通常のリンクとして下記のようなHTMLに変換されます。ブログカードとして下記のようなHTMLに変換されます。alt="">リンク先のドメイン</div></div></a></div>target要素は、リンク先URLが同一のサイトであれば_self、それ以外は_blankとなります。サムネイル画像が存在しない場合はwp-oembed-blog-card__figureクラスのdivタグは出力されません。ファビコンが存在しない場合はwp-oembed-blog-card__faviconクラスのimgタグは出力されません。v8以降では仕様が変更になりましたので、各フックの名前が変更されています。各フック名は置き換えてお読みください。Monkey公式サイトのv8リリースのお知らせ記事内の「ブログカードカスタマイズ用のフックを追加」をご確認ください。メジャーアップデートは後方互換性に問題がでる可能性があるた...snow-monkey.2inc.orgテンプレート置換ではない表示カスタマイズルミェールテンプレート置換でカスタマイズする場合、対象のテンプレートに対するフックを使用して書き換えるんだけど、ブログカードは何処にでも貼る事が出来るんだ。テンプレート置換をしようとしても凄く大変になるよね。テネーブル表示パターンも3つありますからね...。ブログカードの表示カスタマイズは、ライブラリで用意されているフックを使用してカスタマイズが可能です!取得前、取得時の表示をカスタマイズする為にはwp_oembed_blog_card_loading_templateと言うフックが用意されています。渡される引数はHTMLとURLとなり、返却値にはHTMLを渡します。標準のブログ表示HTMLであれば、下記のような形になります。));},100,2);このコードをベースにカスタマイズをすると良いでしょう。テネーブルしかし、js-wp-oembed-blog-cardなどのclass部分は変更してはいけないようです。oEmbed情報が正しく取得された状態に、ブログカード表示に正常に切り替わらなくなってしまう場合があります。カスタマイズする場合は、class名を追加する等のカスタマイズに留めておく必要があるでしょう。ないと正しく動作しない場合があるので注意してください。」と記載されているよ!取得失敗時の表示をカスタマイズする為にはwp_oembed_blog_card_url_templateと言うフックが用意されています。渡される引数はHTMLとURLとなり、返却値にはHTMLを渡します。標準のブログ表示HTMLであれば、下記のような形になります。));},100,2);このコードをベースにカスタマイズをすると良いでしょう。ルミェールwp-oembed-blog-card-url-templateのclass部分は変更しない方が良いみたい。取得成功時の表示をカスタマイズする為にはwp_oembed_blog_card_blog_card_templateと言うフックが用意されています。渡される引数はHTMLと取得されたEmbed情報配列となり、返却値にはHTMLを渡します。標準のブログ表示HTMLであれば、下記のような形になります。ob_get_clean();},100,2);このコードをベースにカスタマイズをすると良いでしょう。Monkeyのテーマでは前述のフックを利用し、classの文字置換が行われています。wp-oembed-blog-card"に置換されます。wp-oembed-blog-card"に置換されます。その理由から前述したフック例は優先度を100とし、classの置換処理より前に処理を行うように設定しています。Monkeyでスタイルを設定する場合は、wp-oembed-blog-cardと言うclassも付与されると言うのも考慮しよう!記事以外にブログカードを直接使用する方法ルミェール例えば404ページに、ページが見つからない代わりにブログカードを使ってオススメ記事を表示するとかの場合。PHPで直接ブログカードを呼び出す方法もあるんだ。PHPで使用する場合は、下記のように記述を行います。Cardを使用する為に名前空間のInc2734\WP_OEmbed_Blog_Cardを使用するように設定するんだ。WP_OEmbed_Blog_Card\Bootstrap()はブログカードのクラスだよ。_embed_html_for_no_oembedは、第一引数が出力、第二引数がリンク先URLになるんだ。引数は基本的にnullでも問題ないよ!実行した場合、取得成功時または取得失敗時のHTMLが返却されるんだ。実行されていない場合に備えて返却される変数にはaタグで初期化しておくと良いかも。テネーブル_embed_html_for_no_oembedは、以前は_wp_embed_handlerと言うメソッドが使用されていましたが、現在のバージョンには存在しなくなりました。Monkeyミートアップで作者のキタジマさんから「ソースコードを整理してると、メソッド名が変わるのはライブラリでは度々あるので、メソッド存在チェック(method_exists)は書いておいた方が良いです」との事!現在はメソッド名の変更も無くなってきているけど、メソッドの存在チェックは、可能な限り行う事を推奨されてるみたい。テネーブルWordPressのEmbed機能の仕様変更に合わせてライブラリの仕様も変更される可能性もありますので、ブログカードに関しましてはメソッド存在チェックなどは行う方が良いですね。Monkeyテーマの何処に格納されているのかを見てみましょう。Cardライブラリが格納されています。assetsディレクトリには、ブログカードに使用されるスクリプトやスタイルシートが格納されています。ブログカードの動作や表示スタイルを変更する場合には、このディレクトリ内のリソースを参考にすると良いでしょう。テネーブルPHPに理解のある方であれば、このディレクトリを参照すればブログカードの仕組みを理解できると思います。テーマの標準動作に影響を及ぼす場合もある為、良く解らない場合はvendorディレクトリ内の下位リソースは上書きしないようにしましょう。第5回の記事を振り返って記事アンケート(第5回の記事を振り返って)第5回の記事はどうでしたか?回答いただき、ありがとうございました!回答結果は、次回の記事制作の参考にさせていただきます。