ブックマークレットはショートコード実装利用にしました。

いろいろと迷っていたブックマークレットですが、自作でショートコード利用にすることに決めました。

前回の「ブックマークレットに何を使うか迷ってます。」の投稿でも記載しましたが、私の希望としては

イメージ画像はサイトTop画面のイメージで表示したい。
修正や更新を簡単に済ませるようにしたい。
サイトURLやFaviconを表示して、多少なりとも見栄えの良いものにしたい。

要は、画像は「ShareHtml」、表示する形は「Celtispack プラグイン」、メンテナンスのしやすさは「ショートコード実装」と、いいとこどりしたい訳です。

なぜ、メンテナンスにこだわるかと言うと、折角このサイトをSSL化したのに、外部から画像を取り込んできているので「一部・・・」みたいな中途半端なSSL化より、完璧なSSLを目指したい。
直接コードで記述すると、画像取り込むサイトがSSL対応した時に修正するのが大変ですよね。

ショートコード化すれば、ショートコードのソースを直すだけで済みます。

ということで、自分なりに表示したい形や項目をコード化しました。

<div style="margin: 10px; padding: 20px 20px 0px 20px; background: #ffffff; border-radius: 5px; border: 1px #cccccc solid; box-shadow: 0 2px 3px 0 #dddddd; -moz-box-shadow: 0 2px 3px 0 #dddddd; -webkit-box-shadow: 0 2px 3px 0 #dddddd;"><a href="https://nfc-jp.net/" target="_blank"><img src="http://capture.heartrails.com/200x150/shadow?https://nfc-jp.net/" alt="株式会社 ＮＦＣ - - New Future Create -" width="200" height="150" align="left" border="0" /></a>
<h5><a href="https://nfc-jp.net/" target="_blank">株式会社 ＮＦＣ - - New Future Create -</a></h5>
<a href="http://b.hatena.ne.jp/entry/https://nfc-jp.net/" target="_blank"><img src="http://b.hatena.ne.jp/entry/image/https://nfc-jp.net/" alt="" border="0" /></a>
<div style="clear: both;"> </div>
<div style="padding-top: 5px; padding-bottom: 0; border-top: 1px solid #cccccc;">
<p><a href="https://nfc-jp.net/" target="_blank"><img class="alignleft" src="http://www.google.com/s2/favicons?domain=nfc-jp.net" alt="" width="16" height="16" />https://nfc-jp.net/</a></p>
</div>
</div>

これを、ショートコードとして利用できるように、テーマのfanction.php と style.css に追加して実装です。

まずは、表示する画像のサイズを変更できるように。デフォルトは200×150にしました。
サイトタイトルは h5 、サブタイトルみたいに使えるテキストを p strong 、説明文を p で囲むようにしました。

使用方法は、フルにオプション指定すると、

[url="サイトURL" domain="サイトドメイン" subtitle="サブタイトル" description="説明文" width="横サイズpx数" height"縦サイズpx数"]サイトタイトル

となります。

最低限指定するのは、

[url="サイトURL" domain="サイトドメイン"]サイトタイトル

実際の使用例は、

[url="https://nfc-jp.net/" domain="nfc-jp.net" subtitle="ここはサブタイトル風" description="ここは説明文風" width="300" height="200"]株式会社ＮＦＣ

株式会社ＮＦＣ

ここはサブタイトル風

ここは説明文風

https://nfc-jp.net/

ページやサブドメインにも対応です。

[url="https://nfc-jp.net/archives/2941" domain="nfc-jp.net" subtitle="株式会社ＮＦＣ"]ブックマークレットに何を使うか迷ってます。

ブックマークレットに何を使うか迷ってます。

株式会社ＮＦＣ

https://nfc-jp.net/archives/2941

[url="https://qhm.nfc-jp.net/" domain="nfc-jp.net" subtitle="株式会社ＮＦＣ" description="Quick Homepage Maker 標準デザインサンプル集 QHM-haik Version：V6.01 使用"]QHM標準デザインサンプル集