WordPressエディターに外部URLをコピペするだけで、どんなサイトでも「はてなブログカード」を表示させるカスタマイズ方法

昨日、どのサイトからでも「はてなブログカード」を利用する方法を紹介しました。

はてなサービスと、iframeを利用した外部ブログカードリンクの作り方です。

この方法を利用すれば、ブラウザの拡張から上記のような綺麗なブログカードタグをクリック一発で作成することができます。

ただ、これでも面倒くさいという方のために、WordpressエディターにURLを入力するだけで、ブログカードを表示させる方法も考えてみました。

今回は、そのWordpressカスタマイズ方法を紹介します。

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

主な手順

カスタマイズといっても大したことはなく、以下の2手順を行うだけです。

  • functions.phpに関数の貼り付け
  • style.cssにスタイルを貼り付ける

2ヶ所コピペするだけなので、それほど難しくないと思います。

カスタマイズ方法

ではカスタマイズ方法です。

functions.phpの編集

親テーマでも子テーマでも良いので、以下のコードをfunctions.phpに追記してください。

//本文中のURLをはてなブログカードタグに変更する
function url_to_hatena_blog_card($the_content) {
  if ( is_singular() ) {//投稿ページもしくは固定ページのとき
    //1行にURLのみが期待されている行(URL)を全て$mに取得
    $res = preg_match_all('/^(<p>)?(<a.+?>)?https?:\/\/[-_.!~*\'()a-zA-Z0-9;\/?:\@&=+\$,%#]+(<\/a>)?(<\/p>)?(<br ? \/>)?$/im', $the_content,$m);
    //マッチしたURL一つ一つをループしてカードを作成
    foreach ($m[0] as $match) {
      $url = strip_tags($match);//URL
      
//      //サイトの内部リンクは処理しない場合(Simplicity対策)
//      preg_match( '/https?:\/\/(.+?)\//i', admin_url(), $r );//自サイトのドメイン取得
//      if ( strpos( $url, $r[1] ) ) {
//        continue ;
//      }
      
      //取得した情報からブログカードのHTMLタグを作成
      $tag = '<iframe class="hatenablogcard" src="https://hatenablog-parts.com/embed?url='.$url.'" frameborder="0" scrolling="no"></iframe>';
      //本文中のURLをブログカードタグで置換
      $the_content = preg_replace('{'.preg_quote($match).'}', $tag , $the_content, 1);
    }
  }
  return $the_content;//置換後のコンテンツを返す
}
add_filter('the_content','url_to_hatena_blog_card');//本文表示をフック
修正:以前のコードは、SSL対応されていなかったのでhttpsサイトなどでは表示されない場合もありましたので修正しておきました。

以下のコメント部分は、内部リンクをはてなブログカードにしたくない場合は、コメントアウトしてください。

//      //サイトの内部リンクは処理しない場合(Simplicity対策)
//      preg_match( '/https?:\/\/(.+?)\//i', admin_url(), $r );//自サイトのドメイン取得
//      if ( strpos( $url, $r[1] ) ) {
//        continue ;
//      }

この関数を記入すると、例えば、Wordpressテキストエディターに以下のように入力すると、こういったURL書式だけブログカードに入れ替えます。

https://nelog.jp/hatenablogcard

<a href="https://nelog.jp/wordpress-blog-card">https://nelog.jp/wordpress-blog-card</a>

<p>http://www.pakutaso.com/</p>

 />

テキストエディターで以下のように入力して投稿すると、

言われるが変換される書式

この時点では、以下のように表示されます。

functions.phpを編集しただけのスタイル

あとはこれにスタイルを設定してやるだけです。

style.cssの編集

style.cssには以下のように追記します。(スタイルはサイトに合わせて変更してください。)

.hatenablogcard{
  clear:both;
  width:100%;
  height:155px;
  margin:10px 0;
  max-width:680px;
}

ブラウザをリロードすると、このように表示されるようになりました。

style.cssでスタイルを設定

実際に表示させてみると、以下のような感じになります。

まとめ

こんな感じで、小さな手間で綺麗なブログカードを表示させることができます。

入力も、Wordpressエディターなどに、URLをそのまま貼り付けるだけです。かなり簡単になったのではないかと思います。

ただし、この方法には以下の注意点があります。

  • はてなのサービスを利用しているので今後ははてな次第
  • 参照元(リファー)がはてなになる
  • 一旦使い出してしばらくして、使用をやめるとブログカードだった部分が、ただのテキストURL(もしくはURLリンク)になる

詳しくは以下の注意点に書いています。

参考 はてなブログカードのような美しい外部リンクをクリック一発で作成する方法

上記のような、注意点はあるものの、カードは綺麗ですし、利用も簡単なので、ブラウザ拡張を使用した方法よりは、記事を書くのがかなり楽になります。

このように、メリット・デメリットのある方法ですが、メリットが上回る場合は、ブログの編集時間が多少は短縮できるかもしれません。

WordPressテーマSimplicityには、既にこのカスタマイズが実装されています。ですので、Simplicityを利用している場合は、このカスタマイズは不要です。

『WordPressエディターに外部URLをコピペするだけで、どんなサイトでも「はてなブログカード」を表示させるカスタマイズ方法』へのコメント

  1. 名前:後藤 投稿日:2016/02/09(火) 19:55:19 ID:bba0bc31a

    内部リンクも外部リンク同様に表示させたいのですが、コードを貼り付けてもうまく行きません。どうすればいいのでしょうか?

    // //サイトの内部リンクは処理しない場合(Simplicity対策)
    // preg_match( ‘/https?:\/\/(.+?)\//i’, admin_url(), $r );//自サイトのドメイン取得
    // if ( strpos( $url, $r[1] ) ) {
    // continue ;
    // }

    上記をコメントアウトしていると「サイトタイトル」「サイトURL」だけのリンクカードが表示されます。

    上記のコメントアウトを外すとリンクカードそのものが表示されずURLだけになります。

    使っているテーマはtwentyfifteenです。

  2. 名前:わいひら 投稿日:2016/02/10(水) 18:25:52 ID:66d5fff58

    twentyfifteenにコピペして、試してみたのですが、うまくいくようです。

    もっと、より詳しいテスト内容がわからないと、原因はわからないかもしれません。
    もし、公開ページ等がありましたら、URLを掲載していただけると、何か分るかもしれません。(※見てもわからない可能性もあります)

  3. 名前:oshishou 投稿日:2016/07/31(日) 22:20:56 ID:2216807c8

    こんばんは。
    simplicityを過去に使わせていただいておりました。
    Storkに浮気をしてみたのですが、
    Simplicity標準のブログカードの存在を忘れており
    すべてのリンクが生で貼られた状態になっておりました。

    そこで、このページを参考にセットアップしてみたのですが
    http://oshishou.net/simplicity_to_stork/
    この中段のように、サイズが大きすぎて困っています。
    このページを参考にされた他のサイト様は、デフォルトでSimplicityのサイズになっているようで困惑しています。
    アドバイスを頂ければ幸いです。
    よろしくお願いいたします。

  4. 名前:わいひら 投稿日:2016/08/01(月) 16:31:43 ID:ff6225f81

    おそらく、Wordpress4.5.3のアップデートに起因する不具合かと思います。
    WordPress4.5.3から投稿にURLを挿入すると大きなブログカードが表示されてしまうのを無効にする方法
    【Simplicity2】WordPress4.5.3のブログカード仕様変更への対応方法
    ただ、上記の方法でうまくいかない場合は、僕は使ったことがないテーマなので、詳しい原因などはわからないです。

  5. 名前:oshishou 投稿日:2016/08/06(土) 20:00:32 ID:5b7dd59c0

    お返事ありがとうございました。

    oembedの削除まで試してみましたがうまくいきませせんでした。
    もう少し試行錯誤してみます。

  6. 名前:Sangyeol 投稿日:2017/04/12(水) 19:44:41 ID:2b6396339

    最高です!!
    あらゆるプラグインを試して見たのですが、それらは全て
    Post、Page、BBpressに限定してカードが表示されます。
    しかし、このコードはShortCodeが働く掲示板・ページならいかなるものであっても対応します。すばらしい。
    助かりました

  7. 名前:わいひら 投稿日:2017/04/12(水) 19:52:46 ID:4f1789d46

    記事がお役に立つだのであれば、嬉しいです。
    はてなのブログカードは、スッキリとしたデザインですし、はてな以外でのブログでも利用できてありがたいです。