勝手にライトニング!

人生をレポートするブログ@多摩センター

LIBライトニング
管理人:ライトニング

 映像系フリーランスを生業として暮らす2010年生の長男、2014年生の長女を持つ2児のパパです。
 全く絵心はないのですが、先輩ブロガーさんの漫画記事に触発され、下手なりに挿絵としてイラストを適当に書いてます。
使用機材:Windows10 / BAMBOO PAD CTH301 / FireAlpaca
icon_twitter icon_facebook icon_youtube  

OGPやTwitterカードのアイキャッチ画像を使ってリンクを生成「サムネイルリンク」-Word Press with Post Snippets

      2017/07/07

サムネイルリンクサンプル

 ブログを書くのを綺麗(このサイトが綺麗かどうか言われると微妙ですが)に、そして楽に!をいつも考えているライトニングですが、今回はリンクを上のようにアイキャッチ画像(サムネイル)付きで表示するコードを紹介したいと思います。

Browser Shotsを参考にしています

Browser Shotsの形式
Browser Shotsの形式

 ライトニングのブログのリンクは、そもそもBrowser Shotsというプラグインの形式を使用していました。いや、正確に言うとBrowser Shotsの使い勝手が悪くなったようなので、Shufulifeのちゅんこさんの記事を参考にした物を使っていました。

 これはとても便利で、綺麗に表示してくれるのですが、時代とともに色々なサイトでアイキャッチ画像を設定している所も増えたので、それを使った方が見た目が良いかなと思ったので作成してみた次第です。

 ただし、アイキャッチ画像の指定であるOGP(Facebook)やTwitterカードの設定がされていないサイトもあるので、その場合はスクリーンショットを使うようにしてあります。

OGP?Twitterカードって何?

 詳しくここでは解説しませんが、FacebookやTwitterでリンクを入れると、アイキャッチ画像付きで綺麗なリンクが貼られる仕組みです。

FacebookのOGP
FacebookのOGP
Twitterカード
Twitterカード

 まだ、導入していないのであれば、是非導入をオススメしますが、設定がちょっと面倒なのが玉に瑕なんですよね。ライトニングはSEOプラグインの「Yoast SEO」で設定していますよ。

事前の準備

 今回の方法では、ショートコードのプラグイン「Post Snippets」とライトニングが作ったGoogle Chromeアドオン「Lightning Blog Tools」を使用していますので、まずは下記リンクを参考に導入してください。(ん?つまりGoogle Chromeしか使えないって事か……まあ、URL抽出だけでもChrome使って頂ければ……)

 Post SnippetsはPHPショートコードを作るために必要で、Lightning Blog Toolsは対象のページのURLやタイトル、アイキャッチ画像のURLを簡単に抽出して整形する為に使います。

Post Snippetsの設定

 プラグイン自体の説明は省きます。

 以下の内容でスニペットを書いてください(コピペでOK)

Title
SELECT
サムネイルリンク
Variables
SELECT
ogp,url,title,boxtitle,af_photo_link,af_link

Shortcode
PHP Code
wptexturize

Snippet
SELECT
/* サムネイルリンク ver1.5.0 要 PHP 4.3.0以上 WordPress 2.8以上 powered by 勝手にライトニング! http://lightning2014.ensyutsubu.com/blog/ */ $ver = '1.5.0'; $ogpimg = '{ogp}'; $siteurl = '{url}'; $sitetitle = '{title}'; $boxtitle = '{boxtitle}'; $afphoto = '{af_photo_link}'; $aflink = '{af_link}'; $thimg = ''; if(exif_imagetype($ogpimg)){ $thimg = $ogpimg; } else { $thimg = 'http://s.wordpress.com/mshots/v1/'.urlencode(esc_url($siteurl)).'?w=200'; } echo '<div class="ltng_thumlinkbox">'; if($boxtitle){ echo '<div class ="thumlinkbox_title">',$boxtitle,'</div>'; echo '<div style="clear:both"></div>'; } if($afphoto){ echo '<div class="ltng_afimage">',$afphoto; }else{ echo '<div class="ltng_image">'; if($aflink==''){ echo '<a href="',$siteurl,'" target="_blank" >'; } echo '<span class="ltng_thumback" style="background-image: url(',"'",$thimg,"'",')"></span>'; if($aflink==''){ echo '</a>'; } } echo '</div><div class="ltng_titlebox"><div class="ltng_linktitle">'; if($aflink){ echo $aflink; }else{ echo '<a href="',$siteurl,'" target="_blank">',$sitetitle,'</a>'; } echo '</div></div>'; echo '<div class="ltng_signature"><a href="http://lightning2014.ensyutsubu.com/blog/page-8469/" target="_blank" >powered by サムネイルリンク ver.',$ver,'</a></div>'; echo '<div style="clear:both"></div>'; echo '</div>';
Description:
SELECT
サムネイル付リンク生成<br />ogp:アイキャッチ画像URL<br />url:ページのURL<br />title:ページのタイトル<br />boxtitle:(省略可)ボックス左上のタイトル<br />af_photo_link: (省略可)アフィリエイトサムネイル<br />af_link: (省略可)アフィリエイトリンク

CSSの設定

 PC画面用とスマホ用と分けてあります。CSSの書き足し方はWORDPRESSのテーマによって違うので、説明は省略しますが、私が使っているSTINGER5は下記のサイトが仕組みを分かりやすく書いてあったのでご参考ください。

注:いわずもがなですが、PC用の部分はスマホ用と違う部分だけ書き込んでいますので、スマホ用なしで、PC用を適用してもフォーマットが崩れます。(当たり前ですねスミマセン)

※2017年7月7日モバイル版CSSを若干修正しました

CSS スマホ用
SELECT
/*=================================== サムネイルリンク スマホ用(モバイルファースト) ver.1.01 ===================================*/ .ltng_thumlinkbox { width: 80%; margin: 15px auto 20px; padding: 20px 20px 10px; border:double #CCC; background-color: #ffffff; text-align: center; } .ltng_thumlinkbox .thumlinkbox_title{ background-color: #fff; margin: -2em 0 0; padding: 0 8px; display: block; float:left; font-weight: bold; font-size: 1em; color: #3e3e3e; } .ltng_thumlinkbox .ltng_afimage { display: inline-block; max-width: 250px; margin: 0 auto; box-shadow:0px 2px 4px #CCCCCC; } .ltng_thumlinkbox .ltng_image { display: block; max-width: 250px; height:150px; margin: 0 auto; box-shadow:0px 2px 4px #CCCCCC; overflow: hidden; } .ltng_thumlinkbox .ltng_image .ltng_thumback{ display: inline-block; background-position: center center; background-repeat: no-repeat; width: 250px; height: 150px; background-size: cover; } .ltng_thumlinkbox .ltng_titlebox { text-align: center; } .ltng_thumlinkbox .ltng_titlebox a{ font-weight: bold; text-decoration: none; display: block; } .ltng_thumlinkbox .ltng_titlebox .ltng_linktitle{ text-align:left; line-height:150%; overflow: hidden; padding-top:15px; display: inline-block; } .ltng_thumlinkbox .ltng_signature { font-size: 7px; margin-top: 15px; text-align: right; } .ltng_thumlinkbox .ltng_signature a{ font-size: 7px; color: #d4d4d4; text-decoration: none; }
CSS PC用
SELECT
/*=================================== サムネイルリンク PC用 ===================================*/ .ltng_thumlinkbox { margin:10px auto 30px; } .ltng_thumlinkbox .ltng_afimage{ max-width: 150px; margin:0 15px 10px 0; float:left; text-align:left; } .ltng_thumlinkbox .ltng_image{ width: 150px; height:120px; margin:0 15px 10px 0; float:left; text-align:left; } .ltng_thumlinkbox .ltng_image .ltng_thumback{ width: 150px; height: 120px; } .ltng_thumlinkbox .ltng_titlebox { text-align: left; } .ltng_thumlinkbox .ltng_titlebox .ltng_linktitle{ display: block; }

 本当はimgタグで、object-fitを使いたかったんですが、IE/Edgeがまだ未対応なので、background-imageで画像のトリミングを行っています。Edgeが対応したら切り替えたいですね~。切り替えの際はPostSnippetsを書き換えれば、昔の記事も変わるので便利!

Lightning Blog Toolsの設定

 オプションから「クリップボード」欄に下記を追加。

メニュー名:
サムネイルリンク

値:
[サムネイルリンク ogp="%metaimg%" url="%url%" title="%ht:%title%:%" boxtitle="" af_photo_link='' af_link='']

 または下記をダウンロードして取り込んでください。

 「全てを更新」を必ず押してくださいね。

使い方

 ここまでの準備ができたら、あとは簡単です。

サムネイルリンク使い方

 リンクしたいサイトで右クリックして「サムネイルリンク」をクリック。

 そのあとWORDPRESS側でペーストすると、

ショートコード挿入した感じ

 こんな感じでショートコードが挿入されます。アイキャッチ画像が設定されているページだとogpパラメータにURLが挿入されます。設定されていない場合は、挿入されません。

 挿入した結果は下記のような感じです。

2017年5月29日追記

 Ver1.1.0から「boxtitle」というVariablesに値を入れると左上に箱のタイトルを入れられるようにしました。

 例えば……

[サムネイルリンク ogp="http://lightning2014.ensyutsubu.com/blog/wp-content/uploads/2016/06/1492ae1891fc362456211b6496d95a43.jpg" url="http://lightning2014.ensyutsubu.com/blog/post-9143/"  title="マイナンバーカードが届かない! 今、申請しないと確定申告に間に合わない?!東京都の交付状況一覧 |勝手にライトニング!" boxtitle="ここにタイトル"]

このように「boxtitle」に記入すると……

このような表示になります。

2017年5月30日追記

 Ver1.5.0からアフィリエイトのコードに対応しました。テキストリンクコードを「af_link」というVariablesに値を入れる(サニタイズしなくてOK)。サムネイル画像に関しては「af_photo_link」にコードを入れて下さい。
 コードには結構「”(ダブルクォーテーション)」が使われるので、Variablesの値は「’(シングルクォーテーション)」で括るようにしてください。

使用にあたって

 コードやCSSの改変は自由に行ってください。署名の「powered by サムネイルリンク」も消して貰っても大丈夫です。改変したものをHPに公開してもらってもOKですが、その場合キャプション部分(/* ~ */の部分)は変更した事を記述してください

 こうした方が良いとか、ご要望があれば(著者の能力の問題で出来ないことも多いですが)コメント残して頂ければ、励みになります。

SPONSORED LINK

 - WORDPRESS, ブログ初心者奮闘記