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

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

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

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

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

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

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

主な手順

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

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

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

カスタマイズ方法

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

functions.phpの編集

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

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

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

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

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

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

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

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

style.cssの編集

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

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

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の削除まで試してみましたがうまくいきませせんでした。
    もう少し試行錯誤してみます。