リンクをカード形式にするプラグイン「HatenaBlogCard」の内部リンクの挙動を変更しました。（ver0.25）
[2015/08/09追記]設定画面も付いた「Pz-HatenaBlogCard」を公式プラグインディレクトリで公開中です。
はてなブログカード形式のリンク
色々なブログなどで、外部へのリンクを貼るときにカード形式のキレイなリンクが多いので、あれこれ模索したところ、「はてなブログカード」という形式があることが分かりました。
この「はてなブログカード」形式は「はてなブログ」以外でも使用できるようになったらしく、HTMLコードを生成するブックマークレットを作っている方がいて、「これは便利！Σ(ﾟロﾟ)oﾞ」となりました。
HTMLコードだと、今後、別のサービスを利用したい場合などに過去の記事を書き換えないといけないため、前回、WordPressプラグインを作ってみました。
というところまでが前回のおはなし。
内部リンクの挙動
リンク先が外部でも内部でも、「はてなブログカード」形式で表示していたため、内部リンクでもクリックすると新しいウィンドウもしくは新しいタブで開いてしまいます。
このため、当ブログでは内部リンクの時には自前でカード形式表示するように公開版から修正したものを使っています。
コメントにて「タブを新しく開かないようにすることは可能でしょうか？」という質問をいただいたので、公開版も同様の修正をしてみました。
内部リンクの場合、カードの背景色がうっすら灰色になり、リンクを開いても新しいウィンドウやタブが開かないようになります。
外部サイトは「はてなブログカード」をiframe表示
外部サイトは前バージョン同様、「はてなブログカード」をそのまま表示します。
外部サイトも自前のカード形式にしたいのですが、キャッシュを作るのが面倒というのもありますが、はてなブログカード形式で見栄えは良いのでこのままで良い気もしています。
「はてなブログ以外で『はてなブログカード』を使用するのは禁止」みたいなことになったら考えようかと思います。
パラメータなど
記事内に「blogcard」というショートコードを書き込むことで、リンクをカード形式で表示できます。
「url」というパラメータでリンク先を指定します。
[blogcard url="https://popozure.info/20150301/6867"]
外部サイトを指定した場合は、「はてなブログカード」が表示されます。
自サイト内のリンクの場合は、うっすら灰色の「はてなブログカード」似のカード形式で表示されます。
また、ドメイン名のところに「（内部）」と表示されます。
気分や注目度でカードの色を変更したい場合、「bgcolor」を指定します。
[blogcard url="https://popozure.info/20150301/6867" bgcolor="#fcd"]
ダウンロード・使用方法など
↓敢えて旧バージョンを利用される方のために、「popo-HatenaBlogCards ver 0.25」のリンクも残しておきます。
WordPressのプラグイン作成とか、経験が浅いので試作品扱いでお願いします。
というか、「使い勝手の良いプラグインが見つかるまでの『つなぎ』として使っておく」というのがお勧めな使い方です。
下記リンクから「popo-HatenaBlogcards-20150411.zip」をダウンロードして、WordPress管理画面のプラグインから追加して、有効化してください。
↓ZIPファイルダウンロード
サイトからのダウンロードは終了しました。プラグインディレクトリからのインストールをお願いします。
※ver0.25は最新版ではありません。記事先頭から最新版へのリンクをたどってください。
詳しいインストール方法などは前回の記事を参照してみてください。
設定画面などは無いので、有効化したらあとは記事中にショートコードを書くだけです。
不具合などはこの記事のコメント欄に記入していただければ、なるべく対応したいと思います。
自分で色々直したい人向け
自分は基本的に「趣味グラマー」なので、このプラグインのほとんどは知的好奇心で出来ています。
以下にプログラム修正のポイントなどを書いておきます。
ほかの方への情報共有になれば幸いです。
が、PHPやWordPressプラグインの作成は完全初心者なので、もっと効率の良い方法、正しい方法があるかも知れません。
さて、当プラグインのファイル構成は以下のとおりです。
- readme.txt … 使い方などがざっと書いてあります。
- popo-HatenaBlogcards.php … プラグイン本体です。
- style.css … スタイルシートです。
自サイトチェック
まずは自サイトを判断するために、リンク先からドメイン名を抽出します。
preg_match('{https?://(.+?)/}i', $url.'/',$m);
$domain_url = $m[0];
$domain = $m[1];
$domain_info = '';
- リンク先URLの最後に「/」を付け足す。
- 「http://」「https://」を外す。
- 「/」で分割する。
「‘{https?://」の部分を「{.*://」とかにすれば、「ftp://」とかでもカード形式になりそうですが、本文なども無いため、あまり意味は無いかも知れません。
次に自サイトのURLと比較して、内部リンクかどうか判断します。
if (preg_match('{'.home_url().'/.*?}', $url.'/')) {
- 「home_url()」で、ブログのホームURLを取得する。
- ホームURLの最後に「/」を付け足す。
- リンク先URLの最後に「/」を付け足す。
- URLを比較して、ホームURLと一致したら自サイト。
「xxxxxxx.co」と「xxxxxxx.com」とかでもマッチしてしまうので、「/」を付けてから比較しています。
ホームURLが「http://poponet.jp/poporon/」のように、ディレクトリ配下だったりする場合にちゃんと判断できるかは確認していません。
内部リンクは背景色をうっすら灰色にしています。
真っ白が良い場合には、「$bgcolor = ‘#f8f8f8’;」の記述を「$bgcolor = ‘#fff’;」に直します。
// 背景色の指定
if ($opt['bgcolor'] != '') {
$bgcolor = $opt['bgcolor'];
} else {
$bgcolor = '#f8f8f8';
}
もっと他の色が良い場合には、カラーコードを調べるとよいでしょう。
自記事チェック
内部リンクのときはドメイン名のところに「（内部）」と表示させていますが、自サイトのときは「（このサイト内の記事です）」と表示させて、自記事のときは「（この記事です）」と表示させたい場合は、記事URLと比較するとよいです。
実はコメントアウトしているので、58-64行目の「//」を外して、（ついでに51～55行目の先頭に「//」を付けると、）そんな感じになります。
// サイト表示
// if (strcmp(get_permalink(),$url) == 0) {
// $domain_info = '（この記事です）';
// $bgcolor='#ddd';
// } else {
// $domain_info = '（このサイト内の記事です）';
// $bgcolor='#eee';
// }
記事抜粋
記事抜粋のやり方はかなりテキトウです。
// 記事抜粋
$excerpt = strip_shortcodes(strip_tags($excerpt));
if (mb_strlen($excerpt) > 110) {
$excerpt = mb_substr($excerpt),0,110).'…';
}
- strip_tags()で、HTMLタグ、PHPタグを外す。
- strip_shortcodes()で、ショートコードを外す。
- 110文字を超えていたら、110文字に詰めて、最後に「…」を付け足す。
抜粋部分は「寝ログ」さんの「get_the_custom_excerpt」を使うようにするとmoreタグなども外してくれるので良さそうです。
strip_shortcodes()でショートコードを外しているつもりなのですが、wp_noteプラグインのショートコードが上手く外れません。
wp_noteプラグインは、「add_shortcode()」でショートコード追加を行っているわけでは無く、「the_excerpt」にフックを掛けて自前で置き換えをしているためでした。（疑似ショートコード？）
同様のプラグインを使っていて、抜粋にショートコードっぽいのが表示されてしまう場合、preg_replace()で「[…]」の組み合わせを取っ払う方が良さそうです。
$excerpt = strip_tags(preg_replace('/[[^]]*]/', '', $excerpt));
サムネイル取得
「get_the_post_thumbnail」で「thumb100」（100px×100pxのサムネイル）を取得しています。
// サムネイル取得
$thumbnail = get_the_post_thumbnail($id, 'thumb100', array('class' => 'linkcard-thumbnail-image'));
if ( !$thumbnail ) {
$thumbnail = '';
// $thumbnail = '<img class="linkcard-thumbnail-image" src="'.get_template_directory_uri().'/images/no-img.png" alt="" />';
}
サムネイルが無いときの処理はコメントしてあるため、その場合は表示せず、抜粋文の領域が広がります。
サムネイルが無いときにも特定のイメージを表示したい場合には、47行目の先頭の「//」を外します。
親テーマディレクトリの「images」ディレクトリ配下の「no-img.png」を読むようにしています。（STINGER5の仕様に合わせるため）
子テーマディレクトリにしたい場合には、「get_template_directory_uri()」を「get_stylesheet_directory_uri() 」に直します。
スタイルシートの読み込み
ヘッダー処理にフックして「popo_LinkCard_act_style」を呼び出します。
add_action('wp_head', 'popo_LinkCard_act_style');
「popo_LinkCard_act_style」は、プラグインディレクトリの「style.css」を呼び出しているだけです。
ヘッダーを重くしたくない場合、「add_action」の「wp_head」を「wp_footer」にすることで、フッターで読み込むようになりますが、読み込みまで表示が崩れてしまいます。
add_action('wp_footer', 'popo_LinkCard_act_style');
ショートコードを変更
大文字で「[BLOGCARD …]」と、小文字での「https://popozure.info/style=background-color:
add_shortcode( 'BLOGCARD' , 'popo_LinkCard_ShortCode'); add_shortcode( 'blogcard' , 'popo_LinkCard_ShortCode');
好きなショートコードで使用したい場合や、他のプラグインから変更してきた場合には、そのショートコードに合わせるとよいと思います。
「LINK」とかがお勧めでしょうか。
add_shortcode( 'LINK' , 'popo_LinkCard_ShortCode'); add_shortcode( 'link' , 'popo_LinkCard_ShortCode');
他のプラグインから乗り換えた場合には、そのショートコードにしてしまえば、記事内のショートコードを置き換えずに済みます。
記事内のショートコードを置き換えるなら、「Search Regex」プラグインとかが便利です。
手を付けると楽しい
「趣味グラマー」なので、私のプログラムの90％は「知的好奇心」から出来ています。
今、興味があるのは「設定画面」の作成。
こちらとかが参考になりそうです。
WordPressプラグインの「お作法」とかがよく分かっていないので、もう少し勉強せねば。
コメント
はじめまして。
ブログカードを探していてたどり着きました。
とても便利なプラグインを作成していただきありがとうございます。
一つだけ希望があるとすれば、
レスポンシブ対応にはならないのでしょうか？
私はあまり技術について詳しくないので、
修正が難しいかどうかさえも分かりません。
もしよろしければコメントを頂ければと思います。
お忙しいとは思いますがよろしくお願いいたします。
すいません。
レスポンシブになっていたようです。
しかし、最大幅が５００ｐｘ程度でしか表示されないのですが、７００ｐｘにしてセンタリングすることは出来ますでしょうか？
質問ばかりで申し訳ございません。
フジタタロウさん、コメントありがとうございます。
返信遅くなりました。
style.cssをエディタなどで開いて、「max-width: 480px;」→「max-width: 680p;」、「max-width: 500px;」→「max-width: 700px;」に直せば、横に広くなると思います。
style.cssに気になる部分があったので、修正版を本日中くらいにアップロードしなおす予定です。
また、センタリングについてですが、内部リンクはmarginの指定をするだけですが、はてなブログカードについては、php側も修正しないといけないため、同時に対応するかどうか検討させてください。
ver0.27を公開しました。
設定画面は無いので直していただく必要はありますが、700px幅やセンタリングにも対応できるようになっています。
詳しくはこちらの記事にて。
http://poporon.poponet.jp/20150718/7695
WordPress はてなブログカード ver0.25 を早速使用させていただきました！
いろいろスタイルの変更もできるのですね。
これから楽しみです♪
おかえりなさいさん、おかえりなさい。
使っていただいているようでありがとうございます(^-^)o
バージョンアップは完全にきまぐれですが、不具合などありましたらなるべく対応しますのでお気軽にどうぞ。