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

Warning: Undefined array key "post-date-style" in /home/popozure/popozure.xsrv.jp/public_html/develop/wp-content/plugins/pz-linkcard/pz-linkcard.php on line 1169

リンクをカード形式にするプラグイン「HatenaBlogCard」の内部リンクの挙動を変更しました。（ver0.25）

[2015/08/09追記]設定画面も付いた「Pz-HatenaBlogCard」を公式プラグインディレクトリで公開中です。
[link url=”https://popozure.info/pz-hatenablogcard”]

はてなブログカード形式のリンク
内部リンクの挙動
外部サイトは「はてなブログカード」をiframe表示
パラメータなど
ダウンロード・使用方法など
自分で色々直したい人向け
自サイトチェック
自記事チェック
記事抜粋
サムネイル取得
スタイルシートの読み込み
ショートコードを変更
手を付けると楽しい
1. 関連

はてなブログカード形式のリンク

色々なブログなどで、外部へのリンクを貼るときにカード形式のキレイなリンクが多いので、あれこれ模索したところ、「はてなブログカード」という形式があることが分かりました。

[link url=”http://staff.hatenablog.com/entry/2014/08/29/141633″]

この「はてなブログカード」形式は「はてなブログ」以外でも使用できるようになったらしく、HTMLコードを生成するブックマークレットを作っている方がいて、「これは便利！Σ(ﾟロﾟ)oﾞ」となりました。

[link url=”http://hayashikejinan.com/blog/1166/”]

HTMLコードだと、今後、別のサービスを利用したい場合などに過去の記事を書き換えないといけないため、前回、WordPressプラグインを作ってみました。

[link url=”https://popozure.info/20150221/6741″]

というところまでが前回のおはなし。

内部リンクの挙動

リンク先が外部でも内部でも、「はてなブログカード」形式で表示していたため、内部リンクでもクリックすると新しいウィンドウもしくは新しいタブで開いてしまいます。

このため、当ブログでは内部リンクの時には自前でカード形式表示するように公開版から修正したものを使っています。

コメントにて「タブを新しく開かないようにすることは可能でしょうか？」という質問をいただいたので、公開版も同様の修正をしてみました。

内部リンクの場合、カードの背景色がうっすら灰色になり、リンクを開いても新しいウィンドウやタブが開かないようになります。

外部サイトは「はてなブログカード」をiframe表示

外部サイトは前バージョン同様、「はてなブログカード」をそのまま表示します。

外部サイトも自前のカード形式にしたいのですが、キャッシュを作るのが面倒というのもありますが、はてなブログカード形式で見栄えは良いのでこのままで良い気もしています。

「はてなブログ以外で『はてなブログカード』を使用するのは禁止」みたいなことになったら考えようかと思います。

パラメータなど

記事内に「blogcard」というショートコードを書き込むことで、リンクをカード形式で表示できます。

「url」というパラメータでリンク先を指定します。

[blogcard url="https://popozure.info/20150301/6867"]

外部サイトを指定した場合は、「はてなブログカード」が表示されます。

自サイト内のリンクの場合は、うっすら灰色の「はてなブログカード」似のカード形式で表示されます。

また、ドメイン名のところに「（内部）」と表示されます。

気分や注目度でカードの色を変更したい場合、「bgcolor」を指定します。

[blogcard url="https://popozure.info/20150301/6867" bgcolor="#fcd"]

ダウンロード・使用方法など

[important]設定画面などを追加した「Pz-HatenaBlogCard」を公開しています。
よろしければ、そちらの最新版をご利用ください。
[link url=”https://popozure.info/pz-hatenablogcard”][/important]

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

WordPressのプラグイン作成とか、経験が浅いので試作品扱いでお願いします。

というか、「使い勝手の良いプラグインが見つかるまでの『つなぎ』として使っておく」というのがお勧めな使い方です。

~~下記リンクから「popo-HatenaBlogcards-20150411.zip」をダウンロードして、WordPress管理画面のプラグインから追加して、有効化してください。~~

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

詳しいインストール方法などは前回の記事を参照してみてください。

[link url=”https://popozure.info/20150221/6741″]

設定画面などは無いので、有効化したらあとは記事中にショートコードを書くだけです。

不具合などはこの記事のコメント欄に記入していただければ、なるべく対応したいと思います。

自分で色々直したい人向け

自分は基本的に「趣味グラマー」なので、このプラグインのほとんどは知的好奇心で出来ています。

以下にプログラム修正のポイントなどを書いておきます。

ほかの方への情報共有になれば幸いです。

が、PHPやWordPressプラグインの作成は完全初心者なので、もっと効率の良い方法、正しい方法があるかも知れません。

さて、当プラグインのファイル構成は以下のとおりです。

readme.txt　…　使い方などがざっと書いてあります。
popo-HatenaBlogcards.php　…　プラグイン本体です。
style.css　…　スタイルシートです。

自サイトチェック

まずは自サイトを判断するために、リンク先からドメイン名を抽出します。

[php title=”popo-HatenaBlogcards.php” start-line=”19″ decode=”true”] preg_match(‘{https?://(.+?)/}i’, $url.’/’,$m);
$domain_url = $m[0];
$domain = $m[1];
$domain_info = ”;[/php]

リンク先URLの最後に「/」を付け足す。
「http://」「https://」を外す。
「/」で分割する。

「‘{https?://」の部分を「{.*://」とかにすれば、「ftp://」とかでもカード形式になりそうですが、本文なども無いため、あまり意味は無いかも知れません。

次に自サイトのURLと比較して、内部リンクかどうか判断します。

[php title=”popo-HatenaBlogcards.php” start-line=”30″ decode=”true”] if (preg_match(‘{‘.home_url().’/.*?}’, $url.’/’)) {[/php]

「home_url()」で、ブログのホームURLを取得する。
ホームURLの最後に「/」を付け足す。
リンク先URLの最後に「/」を付け足す。
URLを比較して、ホームURLと一致したら自サイト。

「xxxxxxx.co」と「xxxxxxx.com」とかでもマッチしてしまうので、「/」を付けてから比較しています。

ホームURLが「http://poponet.jp/poporon/」のように、ディレクトリ配下だったりする場合にちゃんと判断できるかは確認していません。

内部リンクは背景色をうっすら灰色にしています。

真っ白が良い場合には、「$bgcolor = ‘#f8f8f8’;」の記述を「$bgcolor = ‘#fff’;」に直します。

[php title=”popo-HatenaBlogcards.php” start-line=”66″ mark=”5″] // 背景色の指定
if ($opt[‘bgcolor’] != ”) {
$bgcolor = $opt[‘bgcolor’];
} else {
$bgcolor = ‘#f8f8f8’;
}[/php]

もっと他の色が良い場合には、カラーコードを調べるとよいでしょう。

[link url=”http://www.colordic.org/”]

自記事チェック

内部リンクのときはドメイン名のところに「（内部）」と表示させていますが、自サイトのときは「（このサイト内の記事です）」と表示させて、自記事のときは「（この記事です）」と表示させたい場合は、記事URLと比較するとよいです。

実はコメントアウトしているので、58-64行目の「//」を外して、（ついでに51～55行目の先頭に「//」を付けると、）そんな感じになります。

[php title=”popo-HatenaBlogcards.php” start-line=”50″ mark=”2-8″ decode=”true”] // サイト表示
// if (strcmp(get_permalink(),$url) == 0) {
// $domain_info = ‘（この記事です）’;
// $bgcolor=’#ddd’;
// } else {
// $domain_info = ‘（このサイト内の記事です）’;
// $bgcolor=’#eee’;
// }[/php]

記事抜粋

記事抜粋のやり方はかなりテキトウです。

[php title=”popo-HatenaBlogcards.php” start-line=”73″ decode=”true”]// 記事抜粋
$excerpt = strip_shortcodes(strip_tags($excerpt));
if (mb_strlen($excerpt) > 110) {
$excerpt = mb_substr($excerpt),0,110).’…’;
}[/php]

strip_tags()で、HTMLタグ、PHPタグを外す。
strip_shortcodes()で、ショートコードを外す。
110文字を超えていたら、110文字に詰めて、最後に「…」を付け足す。

抜粋部分は「寝ログ」さんの「get_the_custom_excerpt」を使うようにするとmoreタグなども外してくれるので良さそうです。

[link url=”http://nelog.jp/get_the_custom_excerpt”]

strip_shortcodes()でショートコードを外しているつもりなのですが、wp_noteプラグインのショートコードが上手く外れません。

wp_noteプラグインは、「add_shortcode()」でショートコード追加を行っているわけでは無く、「the_excerpt」にフックを掛けて自前で置き換えをしているためでした。（疑似ショートコード？）

同様のプラグインを使っていて、抜粋にショートコードっぽいのが表示されてしまう場合、preg_replace()で「[…]」の組み合わせを取っ払う方が良さそうです。

[php title=”popo-HatenaBlogcards.php” start-line=”74″ decode=”true”] $excerpt = strip_tags(preg_replace(‘/[[^]]*]/’, ”, $excerpt));[/php]

サムネイル取得

「get_the_post_thumbnail」で「thumb100」（100px×100pxのサムネイル）を取得しています。

[php title=”popo-HatenaBlogcards.php” start-line=”43″ decode=”true”] // サムネイル取得
$thumbnail = get_the_post_thumbnail($id, ‘thumb100’, array(‘class’ => ‘linkcard-thumbnail-image’));
if ( !$thumbnail ) {
$thumbnail = ”;
// $thumbnail = ‘‘;
}[/php]

サムネイルが無いときの処理はコメントしてあるため、その場合は表示せず、抜粋文の領域が広がります。

サムネイルが無いときにも特定のイメージを表示したい場合には、47行目の先頭の「//」を外します。

親テーマディレクトリの「images」ディレクトリ配下の「no-img.png」を読むようにしています。（STINGER5の仕様に合わせるため）

子テーマディレクトリにしたい場合には、「get_template_directory_uri()」を「get_stylesheet_directory_uri() 」に直します。

スタイルシートの読み込み

ヘッダー処理にフックして「popo_LinkCard_act_style」を呼び出します。

[php title=”popo-HatenaBlogcards.php” start-line=”96″ decode=”true”]add_action(‘wp_head’, ‘popo_LinkCard_act_style’);[/php]

「popo_LinkCard_act_style」は、プラグインディレクトリの「style.css」を呼び出しているだけです。

ヘッダーを重くしたくない場合、「add_action」の「wp_head」を「wp_footer」にすることで、フッターで読み込むようになりますが、読み込みまで表示が崩れてしまいます。

[php title=”popo-HatenaBlogcards.php” start-line=”96″ decode=”true”]add_action(‘wp_footer’, ‘popo_LinkCard_act_style’);[/php]

ショートコードを変更

大文字で「[BLOGCARD …]」と、小文字での「

内部ヘッダー

ぽぽでぶ。

このサイト内

ぽぽでぶ。

~~https://popozure.xsrv.jp/develop/2015/04/11/post-7078/~~

【開発環境】ぽぽづれ。

内部続き

」が使用できるようにしています。

[php title=”popo-HatenaBlogcards.php” start-line=”94″ decode=”true”]add_shortcode( ‘BLOGCARD’ , ‘popo_LinkCard_ShortCode’);
add_shortcode( ‘blogcard’ , ‘popo_LinkCard_ShortCode’);[/php]

好きなショートコードで使用したい場合や、他のプラグインから変更してきた場合には、そのショートコードに合わせるとよいと思います。

「LINK」とかがお勧めでしょうか。

[php title=”popo-HatenaBlogcards.php” start-line=”94″ mark=”1-2″ decode=”true”]add_shortcode( ‘LINK’ , ‘popo_LinkCard_ShortCode’);
add_shortcode( ‘link’ , ‘popo_LinkCard_ShortCode’);[/php]

他のプラグインから乗り換えた場合には、そのショートコードにしてしまえば、記事内のショートコードを置き換えずに済みます。

記事内のショートコードを置き換えるなら、「Search Regex」プラグインとかが便利です。

[link url=”https://popozure.info/20150104/6017″]

手を付けると楽しい

「趣味グラマー」なので、私のプログラムの90％は「知的好奇心」から出来ています。

今、興味があるのは「設定画面」の作成。

こちらとかが参考になりそうです。

[link url=”http://www.webopixel.net/wordpress/631.html”]

WordPressプラグインの「お作法」とかがよく分かっていないので、もう少し勉強せねば。

[amzn-link asin=”4797373520″][amzn-link asin=”4883379299″][amzn-link asin=”B00QJMO3X8″][amzn-link asin=”B01MSMPCG6″][amzn-link asin=”B01N75WY4S”]