勝手にライトニング!

フリーランスの男が家族と生きる!そんなブログ

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

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


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

      2016/07/06

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

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

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
サムネイルリンク
Variables
ogp,url,title

Shortcode
PHP Code
wptexturize

Snippet
/* サムネイルリンク ver1.0.0 要 PHP 4.3.0以上 WordPress 2.8以上 powered by 勝手にライトニング! http://lightning2014.ensyutsubu.com/blog/ */ $ver = '1.0.0'; $ogpimg = '{ogp}'; $siteurl = '{url}'; $sitetitle = '{title}'; $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">'; echo ' <div class="ltng_image">'; echo ' <a href="',$siteurl,'" target="_blank" >'; echo ' <span class="ltng_thumback" style="background-image: url(',"'",$thimg,"'",')"></span>'; echo ' </a></div>'; echo ' <div class="ltng_linktitle">'; echo ' <a href="',$siteurl,'" target="_blank">',$sitetitle,'</a>'; echo ' </div>'; echo ' <div class="ltng_signature"><a href="http://lightning2014.ensyutsubu.com/blog/page-8469/" target="_blank" >powered by サムネイルリンク</a></div>'; echo '<div style="clear:both"></div>'; echo '</div>';
Description:
サムネイル付リンク生成<br />ogp:アイキャッチ画像URL<br />url:ページのURL<br />title:ページのタイトル

CSSの設定

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

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

CSS スマホ用
/*=================================== サムネイルリンク スマホ用(モバイルファースト) ===================================*/ .ltng_thumlinkbox { width: 80%; margin: 10px auto 20px; padding: 20px 20px 10px; border:double #CCC; overflow: hidden; } .ltng_thumlinkbox .ltng_image { display: block; width: 250px; height:150px; margin: 0 auto; box-shadow:0px 2px 4px #CCCCCC; } .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_linktitle{ text-align:center; line-height:150%; overflow: hidden; padding-top:15px; } .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用
/*=================================== サムネイルリンク PC用 ===================================*/ .ltng_thumlinkbox { margin:30px auto; } .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_linktitle{ margin:0; text-align:left; }

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

Lightning Blog Toolsの設定

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

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

値:
[サムネイルリンク ogp=”%metaimg%” url=”%url%” title=”%title%”]

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

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

使い方

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

サムネイルリンク使い方

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

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

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

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

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

使用にあたって

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

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

SPONSORED LINK

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