サムネイル付きのリンクを簡単に作成できるWordPressプラグインです。
WP Thumbnail Linkbox Shortcodeの特長
* ブックマークレットにより､リンク先のURL､タイトルをワンクリックで取得し､ショートコードで出力します｡
* リンク先のサムネイルも自動的に表示できます｡
こんなリンクを生成できます
このように､サムネイル付きのリンクを作成できます｡
[link href=”http://lovemac.jp/” title=”loveMac.jp | Mac/iPad/iPhoneを快適に使うためのコンテンツを配信するブログ”]
[link href=”http://lovemac.jp/blog/2583/” title=”Mac中級者への道！Dockを整理・カスタマイズしてすっきり使う | loveMac.jp”]
インストール
WordPressの管理画面「プラグイン」->「新規追加」で､「WP Thumbnail Linkbox Shortcode」を検索し､インストールして､プラグインを有効にしてください｡
ブックマークレットの登録
このプラグインでは､ブックマークレットを使ってショートコードを作成します｡プラグインインストール後には､ブラウザのブックマークバーに､このブックマークレットを登録してください｡
WordPressの管理画面「設定」->「WP Thumbnail Linkbox」で､設定画面が開きます｡
設定画面内「使い方」の欄に「WP Thumbnail Linkbox Shortcode」というリンクがあります｡これがブックマークレットです｡このブックマークレットをお使いのブラウザのブックマークバーにドラッグ&ドロップして登録します｡
登録が完了すると､「WP Thumbnail Linkbox Shortcode」という名前のブックマークレットが､ブラウザのブックマークバーに表示されます｡
ショートコードについては､後述します｡
基本的な使い方
ここではWordPressのページ（http://wordpress.org）のリンクを作成する手順を紹介します｡
まず､WordPressの記事作成ページとは別のタブ､または別ウインドウで､作成したいリンク先のページ（http://wordpress.org）を開きます｡
次に､そのページを表示した状態で､先程のブックマークレットを実行（クリック）します｡
ブックマークレットを実行すると､ダイアログボックス内にショートコードが生成されます｡
これをコピーしてWordPressの記事内にペーストします｡今回はこのようなショートコードが生成されました｡↓↓
[[link href=”https://wordpress.org/” title=”Blog Tool, Publishing Platform, and CMS — WordPress”]]
ペーストした場所にリンクが作成されます｡↓がサンプルです｡
[link href=”https://wordpress.org/” title=”Blog Tool, Publishing Platform, and CMS — WordPress”]
基本的な使い方は以上です｡以下､設定方法などをまとめます｡
設定画面で設定する
設定画面で行った設定は､作成したリンク全てに適用されます｡
WordPressの管理画面「設定」->「WP Thumbnail Linkbox」で､設定画面が開きます｡
スタイルシートについて
生成されるリンク用のスタイルシートが読み込まれていますので､そのまま使うことができますが､スタイルを自分でカスタマイズしたい場合は「デフォルトのCSSを使わない」にチェックを入れてください｡デフォルトのCSSが無効になりますので､ご自分のスタイルシートにてカスタマイズすることができます｡
リンクのターゲット属性について
「ターゲット属性の値」では､aタグに付与する「target=””」の値を設定できます｡「_blank」を選んだ場合は､aタグに「target=”_blank”」が付与されます｡また､ここで設定したターゲットは､全てのリンクに反映されます｡
また､ショートコードのターゲットで値を渡すこともできます｡この時､最初のアンダースコアは不要です｡
例）
[[link href=”○○” title=”○○” target=”blank”]]
また､設定ページで「_blank」を選んでいて､個別にターゲットをなしにしたい場合は以下のようにtarget=”none”を指定します｡
[[link href=”○○” title=”○○” target=”none”]]
取得するサムネイルのサイズについて
当プラグインでは､リンク先のページのサムネイルを自動生成します｡この時取得するサムネイルのサイズを設定で変更できます｡
サムネイルの横幅
「取得するサムネイルの横幅（px）（正の整数）」に､取得するサムネイルの横幅を入力します｡入力がない場合はデフォルト値80が適用されます｡
サムネイルの高さ
高さについては､横幅の比率で設定します｡「横幅の比率（正の整数または小数）」に､縦幅に対する横幅の比率を入力します｡
例1)
横幅が80の時「2」を入力した場合､縦幅に対して横幅の比率が2となり､取得する画像サイズは「80×40」となります｡
例2)
横幅が80の時「0.5」を入力した場合､縦幅に対して横幅の比率が0.5となり､取得する画像サイズは「80×160」となります｡
数値変えてもサムネイルサイズが変わらないんですけどー
紛らわしくて恐縮ですが､ここで設定できるサイズとは､あくまで「（自動で）取得するサムネイルのサイズ」となります｡表示サイズではありません｡;
表示サイズは､デフォルトのCSSによって横幅80pxに設定されています｡表示サイズを変更するには､スタイルシートも編集する必要があります｡ご了承ください｡
補足
環境によっては､取得サイズが自動的に2倍になることがあります｡僕の環境､
MacBook Pro (Retina, 13-inch, Early 2015)､Safari10.0.2では､取得サイズが自動的に2倍になります｡
内部リンクの場合、サムネイルにアイキャッチ画像を使う
v0.2.0から、自分のサイトへの内部リンクを貼る場合、サムネイルにリンク先ページのアイキャッチ画像を表示させることができるようになりました。
「内部リンクの場合、サムネイルにアイキャッチ画像を使う」の設定はデフォルトでは「無効」になっていますが、ここからサイトに設定されているサムネイルサイズを選択します。
通常は「thumbnail」などのサイズの小さいものを選ぶのがよいと思います。
「内部リンクの場合、サムネイルにアイキャッチ画像を使う」を有効にした場合でも、外部へのリンクはもちろん、内部リンク先のページにアイキャッチ画像が設定されていない場合は、通常のサムネイルが表示されます。
ショートコードによる設定
ショートコードでもいくつかの設定をすることができます｡ショートコードによる設定は､設定画面の設定値より優先されます｡
ショートコードで使える変数
| href | 文字列 | リンク先のURL｡ブックマークレットによって自動的に生成されます｡ |
|---|---|---|
| title | 文字列 | リンクのタイトル｡ブックマークレットによって自動的に生成されます |
| show_domain | bool（0 or 1） | リンクに､リンク先のドメインを表示するかどうか｡非表示にする場合は 0を渡します｡ |
| target | 文字列 | リンクのターゲット属性の値｡アンダースコアは不要｡（例: blank） |
| width | 数値（自然数） | 取得するサムネイルの横幅｡前述のとおり､「表示サイズ」ではなく「取得する画像のサイズ」です｡ |
| ratio | 数値（0以上の整数または小数） | 取得するサムネイルの､縦幅に対する横幅の比率｡ |
ショートコードのカスタマイズ例
[[link href=”https://wordpress.org/” title=”Blog Tool, Publishing Platform, and CMS — WordPress” show_domain=”0″ target=”blank” width=”100″ ratio=”1.618″]]
- リンク先: https://wordpress.org
- リンクのタイトル: Blog Tool, Publishing Platform, and CMS — WordPress
- リンク先のドメイン: 表示しない
- ターゲット属性の値: _blank
- 取得するサムネイルの横幅(px): 100px
- 取得するサムネイルの､縦幅に対する横幅の比率: 1.618倍