URLを記入するだけ!WordPressに内部ブログカードを実装するカスタマイズ方法

サイバーマンデー
Amazonプライム会員限定の大セール「サイバーマンデー」開催中!プライム会員限定の大セール

9月にはてなブログがリリースしたブログカード、かっこいいですよね。

こんなやつ。

WordPressでも、はてなブログoEmbed APIというのを使っていて、以下の方法でブログカードを表示できます。

はてなブログの「ブログカード」をWordPressのoEmbedに対応させる方法

で、常々「はてなのブログカードみたいなのをWordpressの記事に対しても使えないかな?」と思っていたところ、Simplicityのフォーラムにブログカード機能リクエストをいただきました。良い機会なので、Wordpressでもブログカードが使えるようになるコードを書いてみました。

そしたら、何とか形にはなったので、その方法の紹介です。

スポンサーリンク
レクタングル(大)広告

作成したWordpressブログカード

今回作成したブログカードは、以下のようになります。(追記:はてブ数やサイトリンクは、後に機能追加されたもので以下の方法では表示されません。)

無料で使える会計ソフト「MFクラウド確定申告」は零細個人事業主にとっては神ツールなのではないか
確定申告、面倒くさいです。 ただでさえ面倒なのに、2014年の確定申告から、僕のような超零細個人事業主でも、記帳義務と保存義務が生じま...
Amazonプライムの損益分岐点。年会費を払うメリットがあるラインを探る。
最近、アマゾンで買い物をすると、もの凄く心苦しく感じていました。 と言うのも、最近我が家は不在がちで、なかなか荷物を受け取れず毎回、再...

サムネイルを左側にした以外は、はてなみたいな感じにしてみました。

これは、単に以下のようにエディターで書いたのみです。

WordPressブログカードの仕様

business-card-198888_1280

今回試しにカスタマイズしてみたブログカードの仕様は以下のようになっています。

  • 本文記事の1行にサイト内URLのみが記載されていたらブログカード化する
  • 1行にURL以外も記載されているとブログカード化しない
  • カード化されるのは「投稿ページ」「固定ページ」のみ
  • あくまで自サイトURLのみで他サイトのURLではカード化されない

WordPressエディターなどで編集していて、その本文中の1行を「サイト内URL」のみで使用していれば、URLがブログカードに置き換わるという仕様です。

WordPressデフォルトにあるテーマのTwenty Fourteenで動作確認もしました。

WordPressサイト内ブログカードの実装方法

このブログカードの実装方法を説明します。

とは言っても、実装はコードのコピペを2回するだけなので、それほど難しくはないと思います。

NO IMAGE画像の準備

まずは、記事にサムネイルがなかった場合の、画像を準備をします。

以下のような画像を、テーマフォルダの「images」フォルダ内にコピーをしてください。

no-image

functions.phpの編集

functions.phpは、編集を誤るとエラーが出てサイト表示されなくなるので、必ず編集前にバックアップを取っておいてください。

functions.phpには、以下のコードを追記します。(子テーマのfunctions.phpでもOK)

get_this_site_domain()で自分のサイトのドメインを取得し、自分のサイトの記事のみブログカード化します。

get_the_custom_excerpt()は、綺麗な抜粋を取得する関数です。Wordpress標準関数であるget_the_excerpt()みたいなもの($post->post_excerpt)で抜粋を取得しても良いのですが、ショートコードや特殊文字もそのまま表示されてしまうので、綺麗な抜粋文を作る関数を以前作成したのを流用しています。

詳しくは以下。

Wordpressで綺麗な本文抜粋を取得する方法(moreタグ対応、ショートコード、タグ、特殊文字削除)
Wordpressには本文を抜粋を取得する関数としてget_the_excerpt()というのがあります。 ただこの関数、ショートコー...

url_to_blog_card()は、今回の実装のメイン部分です。本文表示をフックして、記事内に含まれるサイト内URLを、ブログカードに置換しています。

style.cssの編集

style.cssには、以下のコードを貼り付けます。(子テーマのstyle.cssでもOK)

はてなのブログカードのように、サムネイルを右側に持っていたり、文字サイズを好みの大きさにしたりは、このCSSをちょこっと編集すればできると思います。

このカスタマイズの注意点

ただ、このカスタマイズには以下のような注意点があります。

  • <p>タグとURLを合わせて正規表現で判断しているので、pタグを除去するようなカスタマイズをしていると動作をしない
  • このカスタマイズを使用してしばらく使った後、カスタマイズやめると、ただ単にURLが表示されるだけになる
  • Simplicityに今回のカスタマイズをすると、関数名がかぶるのでエラーが出る
  • 未知の不具合があるかもしれない

Pタグを除去するカスタマイズをしている場合は、正規表現部分をちょこっといじれば対応できると思います。

Simplicityには、いずれ機能追加予定なのでしばらくお待ちください。(カスタマイズする場合は、エラーの出る関数を削除すればOKです。)

追記:Simplicityにもver20141027より今回紹介した機能+αを追加しました。

WordPress4.4の埋め込みカードを無効にする方法

WordPress4.4から内部リンク、もしくは他ブログの外部リンク(oEmbed対応)を埋め込み表示できるようになりました。

こんなのが表示されます。

Wordpress4.4_thumb.png

この新機能は、今回のカスタマイズと機能が競合して、記事にURLのみを記入した場合は、Wordpress標準の埋め込み機能が適用されてしまうことがあります。

これを回避するには、以下のように記事中にURLのみを記入するのではなく

以下のようなURLリンクを挿入することで回避することができます。

WordPress標準の埋め込みを無効にするコード

また、functions.phpに、以下のように記述すると、Wordpress標準の埋め込み動作を無効にすることも出来るようです。

上記のコードは、以下を参考にさせていただきました。

参考 WordPress 4.4に備えよ! ~WordPress4.4の新機能~ | ぴんくいろにっき

oEmbedの参照先を強制する

もし仮に、上記の方法で、うまくいかなかった場合は、以下のコードをfunctions.phpに挿入してみてください。

上記の方法は、僕も偶然発見したため、どうして上記のように書くと、Wordpress標準の見込みが動作しなくなるのか、よくわかってません。それとともに、はてなブログのURLを記事中に挿入すると、はてなブログの埋め込みカードは表示されるようになってしまいます。ご注意ください。

個人的には、ホワイトリスト形式ではてなブログカードのoembedを有効にしたことで、それ以外は無効になるのかなと思っています。(※詳細は確かめてません)

追記:コメントで、Hinaloeさんに教えていただきました。wp_oembed_oembed_add_provider は、(正規表現に一致する:すべての)oEmbedの参照先をはてなブログに強制させるという動作をしているようです。

(追記:2015年12月11日)

まとめ

以前からWordpressにもサイト内記事紹介用のブログカードを作りたいと思っていたんですけど、難しそうで手も付けていませんでした。

ただ、今回リクエストもらってやってみたら、何とか実装することができたので、何事もやってみるもんだなと思います。案ずるより産むが易しです。

一応、今回の方法の不具合確認はしましたが、もし変な動作をしたとしたら、連絡をいただければ修正します。

今回のブログカードの実装で、通常のリンクよりは、それなりに見た目が良くなったと思うので、「多少クリック率が上がって、サイト巡回率もよりよくなってくれるのでは?」と秘かに期待しています。

追記:外部URLで表示させるには、以下の方法がお勧めです。

Wordpressエディターに外部URLをコピペするだけで、どんなサイトでも「はてなブログカード」を表示させるカスタマイズ方法
昨日、どのサイトからでも「はてなブログカード」を利用する方法を紹介しました。 この方法を利用すれば、ブラウザの拡張から上記のような...
WordPressテーマSimplicityには、既にこのカスタマイズが実装されています。ですので、Simplicityを利用している場合は、このカスタマイズは不要です。

『URLを記入するだけ!WordPressに内部ブログカードを実装するカスタマイズ方法』へのコメント

  1. 名前:aso 投稿日:2015/02/01(日) 18:58:24 ID:6048fc5c3

    こちら動きませんでした。
    固定ページで試してみましたが、ダメだった用です。
    もし可能でしたら導入をご教授いただきたいです。

  2. わいひら 名前:わいひら 投稿日:2015/02/01(日) 19:58:37 ID:9a3a5e7f2

    asoさんこんにちは。

    どのようにダメだったのか、詳しくわからないと、何ともお答えできないです。
    やり方は、上に書いてある通りなので。

  3. 名前:ema 投稿日:2015/03/06(金) 10:40:07 ID:817c1086c

    お世話になります。
    昨夜simplicityフォーラムで返答いただいたので早速挿入してみました。

    外観/テーマの編集/テーマのための関数(functions.php)一番下にコード挿入
    外観/テーマの編集/style.cssの一番下にコードを挿入

    下記エラー表示になります。
    Fatal error: Cannot redeclare get_the_custom_excerpt() (previously declared in /home/users/0/moo.jp-bloomingdays/web/wp-content/themes/simplicity/functions.php:423) in /home/users/0/moo.jp-bloomingdays/web/wp-content/themes/simplicity/functions.php on line 903

    何がいけないのか全くわかりません。。。
    よろしくお願い致します。

  4. わいひら 名前:わいひら 投稿日:2015/03/06(金) 17:12:54 ID:a70fdb77d

    get_the_custom_excerpt()関数が重複しているとエラーが出ています。

    というか、Simplicityトピックでも以下のように書きました。

    他のテーマで利用するには、こちらのカスタマイズをする必要があります。

    トピック: 記事の途中に過去の記事を表示

    Simplicityには、以下で実装されているのでカスタマイズは不要ですよ。
    simplicity20141027公開。検索・ブログカード機能変更、広告機能・スキン追加。

  5. 名前:ema 投稿日:2015/03/06(金) 17:21:08 ID:817c1086c

    WordPressエディターにURLをコピペするだけで、どんなサイトでも「はてなブログカード」を表示させるカスタマイズ方法の記事に書かれているコードを追記したら
    できました。ありがとうございます。

  6. 名前:hiro 投稿日:2015/03/07(土) 10:55:18 ID:3ab5e4bcc

    割り込みで申し訳ございません。
    ブログカード風なんですがSimplicityでも違うテーマでも表示はされるものの
    右下にサイトロゴ及びタイトルが出てこないのですがどうしてでしょうか?

    Simplicity1.5.4を使っています。
    他のテーマーは上に載ってるソースをそのまま貼り付けました。
    どうか教えてください。

  7. わいひら 名前:わいひら 投稿日:2015/03/07(土) 11:52:15 ID:7bd157da8

    Simplicityで表示されない場合は、テーマカスタマイザーから、設定がされていないのだと思います。(Internet Explorerだとicoファイルは表示されないので、アイコンは表示されないようになっている)

    他のテーマに、カスタマイズした場合は、そもそもここに紹介しているものは、サンプルコードだからです。ですので細かな作り込みはしておらず、各自で実装していただく必要があります。

  8. 名前:hiro 投稿日:2015/03/07(土) 12:31:59 ID:3ab5e4bcc

    Simplicityに関しては管理画面のカスタマイズからの設定項目で問題解決しました。
    初歩的な事でスミマセンでした。

    他のテーマの件も了解致しました。
    ほんとうにありがとうございました。

  9. 名前:raopi 投稿日:2015/03/16(月) 10:00:38 ID:875b5ef9b

    まさに最強記事をありがとうございました。

    ちなみに日本語ドメインでは、記事にurlを張り付けると、表示がURLそのままされただけでしたので、

    もしよろしければお時間ある時に、ご対応よろしくお願いいたします。

  10. わいひら 名前:わいひら 投稿日:2015/03/16(月) 13:50:45 ID:26f4c6449

    日本語込みのURLも含めるとなると、以下のように、ほとんどの文字を受け入れることになりますので、サンプルコードとしては、あまり載せたい感じではありません。

    URLを抽出する正規表現はどう書くべきか – すたら日記

    なので、上記を参考に、正規表現部分を書き換えてください。

    もしくは、日本語を含むURLは、以下のようなツールを使って変換した後で貼り付けてください。
    日本語URL変換ツール ~ ピュニコード(Punycode)・UTF-8などのエンコードに

  11. 名前:raopi 投稿日:2015/03/16(月) 14:48:50 ID:875b5ef9b

    ドメイン自体が日本語でした。
    変換も試しましたができなかったのです。
    でも他のアルファベットでのブログはできたので十分です。ありがとうございました。

  12. わいひら 名前:わいひら 投稿日:2015/03/16(月) 22:55:42 ID:26f4c6449

    僕も、日本語ドメインで試してみてうまくいったので、ツールを紹介したのですが、変換できないやつもあるんですかね。
    日本語ドメインは、まだ実際に使ったことはないので、いまいち仕様がわからないです。

  13. 名前:raopi 投稿日:2015/04/24(金) 12:10:25 ID:0b1a1a200

    たびたびすいません。ワードプレスバージョン更新したらURLだけの記載となってしまいました。ご教授お願いいたします

  14. 名前:raopi 投稿日:2015/04/24(金) 12:13:05 ID:0b1a1a200

    4.2への更新です

  15. わいひら 名前:わいひら 投稿日:2015/04/24(金) 12:55:06 ID:f938dd5fc

    当サイトもWordpress4.2にアップデートしましたが、正常に表示されています。

    思いつくとしたら以下の部分。

    この部分を以下のようにすると良いのかもしれません。

    これで直らなかったら、ちょっと原因はわからないです。

  16. 名前:raopi 投稿日:2015/04/24(金) 13:37:05 ID:0b1a1a200

    ありがとうございました。治りました

  17. 名前:raopi 投稿日:2015/04/24(金) 13:39:59 ID:0b1a1a200

    もう一点もうしわけないのですが、h3の上に楽天アフィリなど貼ると崩れてしまいます。
    http://sikakunowa.com/suits/

    です。解決策をご教授お願いいたします。

  18. わいひら 名前:わいひら 投稿日:2015/04/24(金) 17:23:14 ID:f938dd5fc

    楽天タグのラッパー要素に回り込み(float)が入っているようです。
    それを取り除いてください。

  19. 名前:raopi 投稿日:2015/04/24(金) 18:23:36 ID:7bba8d5fb

    ありがとうございました。たびたび申し訳ありません

  20. 名前:sanasuke 投稿日:2015/07/02(木) 01:35:17 ID:1def4f074

    はじめまして。
    こちらの記事を参考にしまして「functions.php」と「style.css」コピペしましたが、反映されません。

    http://newageinglog.com/chromehearts-aandg

    URLだけの表示となってしまいます。
    ご教示ください。
    よろしくお願いします。

  21. わいひら 名前:わいひら 投稿日:2015/07/02(木) 12:53:17 ID:d1357243a

    はじめまして。

    この記事本文のブログカード仕様に以下のように書いてあります。

    • 本文記事の1行にサイト内URLのみが記載されていたらブログカード化する
    • 1行にURL以外も記載されているとブログカード化しない
    • カード化されるのは「投稿ページ」「固定ページ」のみ
    • あくまで自サイトURLのみで他サイトのURLではカード化されない

    この方法では、内部リンクのみしか動作しません。

    提示されたページに載っているURLは、外部URLかと思われます。

  22. 名前:sanasuke 投稿日:2015/07/02(木) 13:34:23 ID:f4e0910b9

    こんにちは。
    お恥ずかしい限りです。

    いま会社で読んでいて気が付きました。
    別の方法で試してみます。
    お時間を取らせて申し訳ございませんでした。

  23. わいひら 名前:わいひら 投稿日:2015/07/02(木) 15:19:58 ID:d1357243a

    いえいえ、外部リンクで同様のことを実装したい場合は、以下のカスタマイズのほうがいいかもしれません。
    WordPressエディターにURLをコピペするだけで、どんなサイトでも「はてなブログカード」を表示させるカスタマイズ方法

  24. 名前:sanasuke 投稿日:2015/07/02(木) 23:44:04 ID:1def4f074

    こんばんは。
    ご返答ありがとうございました。
    いまブログカードを設置し終えました!
    http://newageinglog.com/chromehearts-aandg

    非常に助かりました!
    これからも見させていただきます。

  25. わいひら 名前:わいひら 投稿日:2015/07/02(木) 23:51:11 ID:d1357243a

    こんばんは。
    うまくいったようで、よかったです。
    一応他テーマでも使えるように書いているつもりですが、実際にうまくいくことがわかって僕も嬉しいです。

  26. 名前:Hinaloe 投稿日:2015/12/12(土) 00:39:53 ID:9ec6f2ee3

    wp_oembed_oembed_add_provider を使うのは(正規表現に一致する:すべての)oEmbedの参照先をはてブロに強制させてるだけなので、embedの自動巡回を停止するならば

    を使用したほうがいいかと思います。(逆にこれを__return_trueにすれば以前のWPでも自動巡回ができるのですが。)

  27. わいひら 名前:わいひら 投稿日:2015/12/12(土) 14:07:41 ID:9b2d25622

    ありがとうございます。
    実は、この問題が出たときに、検索したらHinaloeさんのサイトの以下のページが上位表示されたので、
    WordPress 4.4に備えよ! ~WordPress4.4の新機能~ | ぴんくいろにっき
    以下の方法は結構何度も試させていただいたのですが、うまく動作しませんでした;

    //oembed無効
    add_filter( 'embed_oembed_discover', '__return_false' );
    //Embeds
    remove_action( 'parse_query', 'wp_oembed_parse_query' );
    remove_action( 'wp_head', 'wp_oembed_remove_discovery_links' );
    remove_action( 'wp_head', 'wp_oembed_remove_host_js' );

    なので、この記事に書いたように書きました。

    ただ、今もう一度試してみたところ、うまくいっているようです;
    慌てていたので、僕の編集方法に、何かおかしなところがあったのかもしれません。
    記事の方も、修正しておこうと思います。

  28. 名前:Hinaloe 投稿日:2015/12/12(土) 15:57:53 ID:9ec6f2ee3

    このフィルター、betaからリリースまでに何度か名前が変わってるんですよね。
    で、いま確認してみたらどうやら記事に書いてたのは既に古くなっているようでremove_actionの方が機能していないかと思います。 (参考code)

    ところで、Simplicityを利用しているサイトでlink[rel="alternate"][type="application/json+oembed"]が見当たらないのですがなにか心当たりありますか?(wp_oembed_remove_discovery_linksが(現在のwp_oembed_add_discovery_linksが)出力する部分ですが、これが無ければ他のWPがembedプロバイダを検出できません。)

    あとついでに気になったのですが(ここではオフトピですがついでに)バージョン比較はversion_compare辺りで比較(-src対策が必要になりますが)とか使うべきで、そもそもタイトルタグのWP4.1未満対応はMakeブログにあるのがいい気がする…

  29. 名前:Hinaloe 投稿日:2015/12/12(土) 16:53:55 ID:9ec6f2ee3

    (よく見たら置換時にミスって置換してはいけないところまで置換しちゃってたっぽいです。今回の件で1つ気付けましたありがとうございます。)

  30. わいひら 名前:わいひら 投稿日:2015/12/12(土) 18:55:28 ID:9b2d25622

    ありがとうございます。

    remove_actionの方が機能していないかと思います。

    ということは、以下のコードだけでOKということでしょうか。
    add_filter( 'embed_oembed_discover', '__return_false' );

    ところで、Simplicityを利用しているサイトでlink[rel=”alternate”][type=”application/json+oembed”]が見当たらないのですがなにか心当たりありますか?

    これに関しては、特に僕が今回何かしたわけではなく、ちょっと心当たりがないです。

    タイトルタグのWP4.1未満対応

    そんな方法もあるのですね。
    ただ、これに関しては、バージョン2.0以上になったら、そのうち4.1未満の対応はやめようと考えています。

  31. 名前:nao 投稿日:2016/03/13(日) 20:29:42 ID:65f972d76

    素人です。
    これから書く内容に不備が沢山あると思いますがご了承ください。

    Simplicityを利用させてもらっているのに本日、間違えて上記の内容を挿入してしまい、重複しているエラーになってしまいました。ちなみにこちらです。
    Fatal error: Cannot redeclare get_the_custom_excerpt() (previously declared in /home/users/2/main.jp-nao-miyahara/web/precious/wp-content/themes/simplicity/functions.php:107) in /home/users/2/main.jp-nao-miyahara/web/precious/wp-content/themes/simplicity/functions.php on line 747

    ログインも出来ないこのような経験が初めてでまず何から手をつければいいのか分かりません。

    色々調べてFTPなどを使うのが良いなどを見てやろうとしているのですがなかなかうまくくいきません。
    まずなにをするべきなのか直し方などを教えていただけると幸いです。

  32. 名前:nao 投稿日:2016/03/13(日) 21:25:16 ID:65f972d76

    質問させていただいたのですが何とか戻りました!!
    本当にお騒がせしてしまい申し訳ございませんでした!!
    これからブログカードしっかり使わせていただきます。

  33. わいひら 名前:わいひら 投稿日:2016/03/14(月) 13:06:15 ID:f6a7cdd73

    一応、同様の現象が起こった方のために解決方法を書いておくと、カスタマイズで貼り付けたPHPコードをすべて削除すれば元に戻ります。
    Simplicityにこのカスタマイズを行うと、関数名が衝突するためこういったエラーが起きます。
    Simplicityを利用する場合は、このカスタマイズは不要です。

    とりあえず、問題が解決したようでよかったです!

  34. 名前:nao 投稿日:2016/03/15(火) 08:06:44 ID:9ac5967a2

    丁寧にありがとうございます。
    いつもわかりやすい記事で色々参考にさせともらっていたのですが、今回はちゃんと理解せずに良さそうな機能だったのですぐやってみたく失敗しました。
    ご迷惑おかけして申し訳ございません。
    これからもよろしくお願いします!

  35. 名前:fk 投稿日:2016/08/18(木) 12:45:30 ID:fb795b7fc

    いつもわかりやすい記事をありがとうございます。

    当方、simplicityver2.1.7をカスタマイズして使っております。

    先日、新たに記事を更新したところ、function.php(lib/blog-card.phpも)を特に触っていないにもかかわらず、突然ブログカード機能が動作しなくなってしまいました。

    症状としては、ワードプレスの元々の機能の方のブログカード化が動作するようになってしまいます。

    ワードプレスのアップデート(現在4.6に更新済み)と関係があるのでしょうか?
    他に何らか考えられる原因は思い当たりますでしょうか。

    ご教授いただければ幸いです。

  36. わいひら 名前:わいひら 投稿日:2016/08/19(金) 11:53:24 ID:d358b77f0

    その症状については、以前記事に書いたので以下のエントリーなどを参照してみてください。
    WP4.5.3以降、記事をポストしたら、やたらでかいブログカードが表示されてしまった時の対処法まとめ
    WordPress4.5.3から投稿にURLを挿入すると大きなブログカードが表示されてしまうのを無効にする方法

  37. 名前:fk 投稿日:2016/08/20(土) 02:01:28 ID:8281de04b

    解決しました!
    よく調べず質問してしまい失礼いたしました。
    ご回答ありがとうございます。

  38. 名前:riri 投稿日:2016/09/24(土) 20:13:50 ID:c47219cf9

    はじめまして。
    ブログカードを設置したいと検索してこちらの記事に辿り着きました。
    記事を参考に「functions.php」と「style.css」コピペさせて頂きましたが、私の環境ではサムネイル画像の縦横比が崩れてしまうようです。
    また、記事抜粋文が途切れてしまう点(?)を→「抜粋文…続きを読む(←リンク)」という形に変更出来たらと思うのですが、ご教示頂けたら幸いです。
    初心者で申し訳ありませんが、よろしくお願いします。

  39. わいひら 名前:わいひら 投稿日:2016/09/25(日) 20:57:07 ID:f3325ce85

    functions.phpに以下を追加して、

    画像の再生成を行う必要があるかもしれません。
    https://wp-simplicity.com/regenerate-thumbnails/

    抜粋部分は、以下の部分を

    以下のようにするといけるかもしれません。

    ※実際に動作確認はしていません

  40. 名前:riri 投稿日:2016/09/27(火) 23:39:18 ID:f99217067

    こんばんは。
    プラグインを導入→画像の再生成の後、コードを追記してみたところ、サムネイル画像・記事抜粋文とも思っていた通りの形に実装できました!
    丁寧にお教え頂き、ありがとうございます。
    他の記事も読ませて頂きましたが、とてもためになる記事ばかりでこちらに辿り着けて良かったです。これからもよろしくお願いします。

  41. わいひら 名前:わいひら 投稿日:2016/09/28(水) 17:48:23 ID:d2b9048f9

    こんにちは。
    うまくいったようでよかったです!