ぽぽづれ。

「ただいま」の挨拶よりも電源スイッチONのが先な、そんな日常を綴る『ぽぽろんのパソコンつれづれ日記(ぽぽづれ)』へようこそ。

WordPress

[po-HBC][0.1]WordPressで「はてなブログカード」を利用するプラグインを作ってみた

2016/06/12

他サイトへのリンクを「はてなブログ」の「ブログカード」形式で表示するプラグインを作ってみました。(ver0.1)

[2015/08/09追記]設定画面も付いた「Pz-HatenaBlogCard」を公式プラグインディレクトリで公開中です。

pz-hatenablogcard-thumbnailWordPressで「はてなブログカード」を利用する Pz-HatenaBlogCard
外部リンクを「はてなブログカード」に置き換えて表示させるWordPressプラグイン「Pz-HatenaBlogCard」を公式プラグインディレクトリにて公開しています。※更新があった場合には投稿記事でお知らせするとともに、このページの使い方を更新していきます。外部リンクの...

みんなどうやっているんだろう?Σ(゚ロ゚)o゙

このブログでは、他サイトさんへのリンクを貼ったりする場合に、「WP-Note」を使用していました。

↓こういう感じの表示

「ただいま」の挨拶よりも電源スイッチONのが先な、そんな日常を綴る『ぽぽづれ』
http://poporon.poponet.jp

説明文も手入力なので、打ち間違えて無いかも心配。

ところで、いろいろなサイトを見ていると、サムネイルが付いているリンクを貼っているブログが沢山あります。

はてなブックマークの数が表示されているサイトもよく見かけます。

「はてなブログ」を使っている場合、「ブログカード」という形式でリンク挿入ができるようです。

ブログカード - はてなブログ ヘルプ
はてなブログで「リンク挿入」機能を利用する際に、さまざまなWebページを、タイトルや概要がコンパクトにまとまった ブログカード の形式で埋め込むことができます。「ブログカード」とは、ブログに掲載する記事のタイトルや概要、アイキャッチ画像などを読みやすく...
はてなブログの記事を紹介しやすくしました。URLを貼るだけで、コンパクトに整ったブログカードを貼り付けることができます【追記あり】 - はてなブログ開発ブログ
はてなブログでは、さまざまなコンテンツを貼り付けできる「リンク挿入」機能を強化し、はてなブログの記事を簡単に、きれいに整った体裁で貼り付けることができるようにしました。はてなブログで運営されているブログを紹介したり記事に言及する際に、この 記事貼り...

WordPressでこういうことが出来るプラグインが無いか探してみました。

サイトのスクリーンショットを取得するBrowser Shots

まず行きあったのが「Browser Shots」というプラグインです。

Browser Shots - サムネイル画像用のスクリーンショットを撮影できるWordPressプラグイン - ネタワン
Browser Shotsは、Webサイトのスクリーンショットを撮影してサムネイル画像として使用できるプラグインです。ショートコードにURLと画像の横幅を指定するだけで利用できます。
Browser Shotsの使い方ーWordPressプラグイン【初心者向け】
WordPressのプラグイン【Browser Shots】の使い方を初心者向けに解説した記事です。キャプチャを自動生成し、サイトに反映することができます。ショートコードで挿入するだけで表示できるので、やり方を紹介します。

どうやら、「Browser Shots」は、「サムネイル付リンクを設置するプラグイン」では無くて、「指定したサイトのスクリーンショットを取得するプラグイン」ということらしいです。

リンクやサイト名、説明文は書かないといけません。

WordPressブログカード

内部リンクをはてなブログカード風に表示するWordPressカスタマイズ方法がありました。

ぱっと見、はてなブログカードですΣ(゚ロ゚)o゙

URLを直書きすればブログカード風に表示してくれるようです。

理想通りではありましたが、内部リンクのみの対応でした。

URLを直書きするのは記述する時には手軽で良いのですが、あとで検索や置き換えをしたい場合に検索しづらいと感じました。

はてなブログカードっぽいブックマークレット

「えじの自由帳」さんのところに、「はてなブログカード風リンクを作成するブックマークレット」がありました。

【ブログカード風】シンプルに記事をシェアするブックマークレットを作りました
ブログを書くとき、記事へのリンクをどのように貼っていますか? べた書きですか? ShareHTMLですか? GetTabInfoなんて拡張機能を使っている人もいらっしゃるかもしれません。 最近よく見る

ブックマークバーに登録しておけば、リンク元サイトを表示して、ブックマークレットを開くだけで、はてなブログカード風のリンクになるHTMLタグを生成してくれます。

ブックマークレットはちょっと敬遠(食わず嫌い)していたところがあったのですが、思いの他使いやすかったです。

記事内に貼ればOKですが、WordPressのビジュアルエディターではHTMLタグをそのまま貼れないので、テキスト側に切り替える必要があります。

はてなブログカードのHTMLタグ生成ブックマークレット

はてなブログカードをiframeで表示する方法を書いている方がこちら。

はてなブログのブログカードがOGPに対応! はてなブログ以外もブログカードスタイルになるぞ
はてなブログのブログカードが拡張され、OGPにも対応しました。これによりOGPが設定されているサイトは、ブログカード形式でリンクを貼ることができるようになります。

そして、そのコードを生成するブックマークレットを書いている方がこちらです。

はてなブログ ブログカードをブックマークレット化してみたよ
開いた口が半開きになるブログ - はてなブログ ブログカードをブックマークレット化してみたよ

はてなブログカードを貼る、という目的ならばこれで十分な気がします。

しかし結局HTMLタグを貼る手間はなくならず。

なら、プラグインにしてしまおう

oEmbed(メディア埋め込み機能)を使えば、URLを直書きしたのをブログカードにしてくれるようになるみたいですが、直書きだとWordPress管理画面の投稿一覧などから検索したり、「Search Regex」で検索したりが難しいです。

ショートコードならば「角括弧」込みでショートコードを検索することが出来るので、他のプラグインに乗り換えるときなどに置き換えがラクそうです。

ビジュアルエディタからでもそのまま入力できるのも良いですね。

そんなこんなでfunctions.phpに記述を追加してみました。

追加する箇所は、

と書いてある、この行の直前でしょうか。

インストールするタイプのプラグインも用意してみた

設定画面などを追加した「Pz-HatenaBlogCard」を公開しています。
よろしければ、そちらの最新版をご利用ください。
pz-hatenablogcard-thumbnailWordPressで「はてなブログカード」を利用する Pz-HatenaBlogCard
外部リンクを「はてなブログカード」に置き換えて表示させるWordPressプラグイン「Pz-HatenaBlogCard」を公式プラグインディレクトリにて公開しています。※更新があった場合には投稿記事でお知らせするとともに、このページの使い方を更新していきます。外部リンクの...

↓敢えて旧バージョンを利用される方のために、「popo-HatenaBlogCards ver 0.1」のリンクも残しておきます。

functions.phpは修正を間違えると、「WordPress全体が動かなくなって管理者画面にも入れない!Σ(゚ロ゚)o゙」とかなりがちです。

一応、インストールファイルも用意してみました。

WordPressプラグインとかまともに作っていないので、試作品扱いでお願いします。

↓ZIPファイルダウンロード
サイトからのダウンロードは終了しました。プラグインディレクトリからのインストールをお願いします。
※ver0.1は最新版ではありません。記事先頭から最新版へのリンクをたどってください。

<WordPressへのインストール手順>

  1. 上記のリンクから、「popo-HatenaBlogcards-20150221.zip」をダウンロードする。
  2. WordPress管理画面の「プラグイン」→「新規追加」を開く。
  3. [プラグインのアップロード]ボタンを押す。
    plugin-upload
  4. 「ファイルを選択」を押す。
    plugin-upload-select-button
  5. ダウンロードしたZIPファイルを選んで、[開く]を押す。
    plugin-upload-file
  6. [今すぐインストール]を押す。
    install-now
  7. インストールが終わったら、「プラグインを有効化」を押す。
    plugin-enable
  8. 「インストール済みプラグイン」の一覧で有効化になっていることを確認する。
    HatenaBlogcards

あとは、記事中にショートコードを記述するだけです。

↓結果

ブログカードだと「新しいウィンドウで開く」になっているので、サイト内リンクの場合にもウィンドウが開いてしまいます。

[2015/04/11 追記]→内部リンクの挙動を変更したバージョンを公開しました

[po-HBC][0.25]WordPressで「はてなブログカード」を利用するプラグインを直してみた
リンクをカード形式にするプラグイン「HatenaBlogCard」の内部リンクの挙動を変更しました。(ver0.25)設定画面も付いた「Pz-HatenaBlogCard」を公式プラグインディレクトリで公開中です。はてなブログカード形式のリンク色々なブログなどで、外部へのリンクを貼る...

その内、自前のリンクカードにしたい

iframeでブログカードを表示するのが規約的に大丈夫なのか今ひとつ分からなかったものの、oEmbedに対応していたりして、結局同じことをやっているのでは無いかと思うので大丈夫と判断してみました。

当ブログに使っているのは更に、自サイト内や自記事の場合、ブログカード風の表示に切り替えたりするように直したプラグインを使用していたりします。

d-magazinedマガジンを試してみた(ふたたび)→継続決定
月額400円(税込432円)で100詩以上の雑誌が読み放題のNTT docomoの「dマガジン」。「前回試したとき」は「ちょっと思ってたのと違う(^-^;」という感じで継続に至らずでした。あれからしばらく経ったのと、7インチタブレットNEXUS 7(2013)-LTEを購入したのもあって、...
link-plugin-thumb[po-HBC][0.1]WordPressで「はてなブログカード」を利用するプラグインを作ってみた
他サイトへのリンクを「はてなブログ」の「ブログカード」形式で表示するプラグインを作ってみました。(ver0.1)設定画面も付いた「Pz-HatenaBlogCard」を公式プラグインディレクトリで公開中です。みんなどうやっているんだろう?Σ(゚ロ゚)o゙このブログでは、他サイ...

blogcard-internal-link

↑サイト内の場合、青っぽく、表示中の記事の場合、暗い青にしてみました。

サイト内の場合、get_post関数とかget_post_thumbnail関数とか使ったり、「寝ログ」さんのget_the_custom_excerpt関数で本文抜粋したりしてます。

WordPressで綺麗な本文抜粋を取得する方法(moreタグ対応、ショートコード、タグ、特殊文字削除)
Wordpressには本文を抜粋を取得する関数としてget_the_excerpt()というのがあります。ただこの関数、ショートコードや特殊文字が取り除かれなかったり、メインループ内で使用すると動作が変わってしまったりし

その内、ソースがキレイになって、管理画面とか作って、選択ができるようになったらアップするかも…。(いつまでもアップ出来ないフラグ)

レイアウトとかもオリジナルのものにしたいなぁ…。

-WordPress
-, , ,