#0009 WordPress記事 に Blogger の画像を利用する (画像拡大ライブラリ lity も使用します)
ブログ等でもっともデータ転送量で負荷がかかるもののひとつが画像の表示です。
ですので、画像を WordPress のサーバーではなく外部のサーバーに置いてしまえば、自サーバのデータ転送量とサーバの負荷を節約できるわけです。
ここでは Blogger に画像を貼り付けた後、その画像リンクを WordPress投稿記事で利用する方法を紹介します。
最初は小さい画像サイズ/ファイルサイズの画像を表示します。画像をクリックすることで画面いっぱいに大きな画像を表示します ( この処理に Lity (jQuery ライブラリ) を使用します。
| 1. | Blogger に画像を貼り付ける。 |
Blogger にログインした後、新しい投稿ボタンをクリックして投稿画面を表示します。
適切にタイトルを入力した後、メニューバーの画像アイコンをクリックして画像を挿入するか、ドラッグ＆ドロップで画像を挿入します。
| 2. | WordPress 投稿記事に画像リンクを入力する。 |
Blogger 上の画像でマウス右ボタンをクリックしてメニューを表示、『画像アドレスをコピー』をクリックします。
Wordpress の記事投稿では以下のようにショートタグで入力します。(画像URL内に空白文字がなければダブルクォーテーション等のエスケープは不要です)
[gil に続いて、Blogger の画像アドレスを入力し ] で閉じれば OK です。
[gil https://2.bp.blogspot.com/-K2nLp7_BhBc/WBqzeec62II/AAAAAAAAAZY/ZR4HH2KC4SIN2wEiOGBzo9u-lQIx7gW_QCLcB/s320/%252309-01.png]
上のショートタグのソースはこの記事の後半で記載しています。展開後のコードは以下のようになります。
<div id='divframe'>
<a class='tscode' href='javascript:void();' name='gil_resizeimg' onclick='gil_resizeimg(this);return false;' title='この画像を拡大する'>[拡大]</a>
<a class='tscode' href='javascript:void();' name='gil_all_resizeimg' onclick='gil_all_resizeimg();return false;' title='このページの全部の画像を拡大する'>[このページの全画像を拡大]</a>
<br>
<a href='https://2.bp.blogspot.com/-K2nLp7_BhBc/WBqzeec62II/AAAAAAAAAZY/ZR4HH2KC4SIN2wEiOGBzo9u-lQIx7gW_QCLcB/s1600/%252309-01.png' data-lity class="external">
<img name='gil_images' class='googleimagelink' alt='blogger images' title='画像クリックで別のタグに拡大表示' src='https://2.bp.blogspot.com/-K2nLp7_BhBc/WBqzeec62II/AAAAAAAAAZY/ZR4HH2KC4SIN2wEiOGBzo9u-lQIx7gW_QCLcB/s320/%252309-01.png'>
</a>
</div>
| 3. | Lity 画像拡大 ｊQuery ライブラリとショートコードをセットアップする |
Lity 画像拡大 ｊQuery ライブラリは Lity (jQuery ライブラリ) で配布しています。リンクをクリックすると以下のような画面が表示されるので、Download ボタンをクリックします。次の画面で、Source code (zip) リンクをクリックしてライブラリをダウンロードしてください。
ダウンロードしたら zip ファイルを解凍して、lity_2.2.0/dist フォルダの中の lity.js と lity.min.css を 取り出します。
WordPress をインストールしたフォルダに js フォルダを作成し、この２つのファイルをそこにコピーします。
WordPress では、独自の JavaScript ライブラリや、スタイルシートを読み込む場合は、以下のようにシステム関数(wp_enqueue_script と wp_enqueue_style ) を使うことを推奨されています。子テーマの function.php あるいは、 add-header.php のいずれかに以下のコードを書き込めば OK です。以下の例では add-header.php に書き込んでいます。また、Blogger 画像表示用ショートコードは function.php に書き込んでいます。
add-header.php 追加コード (ソースコード内クリックで全選択します)
<?php
wp_enqueue_style( 'lity', get_option('siteurl').'/js/lity.min.css', array(), null, 'all');
wp_enqueue_script('lity', get_option('siteurl').'/js/lity.js',array(), false, true);
?>
<script type="text/javascript">
function gil_all_resizeimg()
{
var zSzWidth ="s320"; // デフォルトの画像幅(これを変更する場合は対応する funcition.php も変更のこと)
var zElmsOfAtag0 = document.getElementsByName( "gil_resizeimg" ) ;
var zElmsOfAtag1 = document.getElementsByName( "gil_all_resizeimg" ) ;
if(zElmsOfAtag1)
{
var zBoolShowLargeTextFlag = false; // 「拡大する」を表示するとき true
var zElmsOfImg = document.getElementsByName( "gil_images" ) ;
if(zElmsOfImg)
{
var zStrReplaced = "/s1600/";
if ( zElmsOfImg[0].src.indexOf(/s1600/) != -1 )
{
zStrReplaced = "/" + zSzWidth + "/"; zBoolShowLargeTextFlag = true;
}
for (var i=0 ; i< zElmsOfImg.length ; i++ )
{
zElmsOfImg[i].src = zElmsOfImg[i].src.replace(/\/s\d+\//, zStrReplaced );
}
}
for (var i=0;i< zElmsOfAtag1.length;i++)
{
if(zBoolShowLargeTextFlag) { zElmsOfAtag1[i].innerHTML = "[このページの全画像を拡大]"; }
else { zElmsOfAtag1[i].innerHTML = "[このページの全画像を縮小]"; }
}
for (var i=0;i< zElmsOfAtag0.length;i++)
{
if(zBoolShowLargeTextFlag) { zElmsOfAtag0[i].innerHTML = "[拡大]"; }
else { zElmsOfAtag0[i].innerHTML = "[縮小]"; }
}
}
}
function gil_resizeimg( xElm ) {
var zSzWidth ="s320"; // デフォルトの画像幅(これを変更する場合は対応する funcition.php も変更のこと)
var zElmImg = xElm.parentNode.getElementsByTagName('img');
if("[拡大]" == xElm.innerHTML ){
xElm.innerHTML = "[縮小]"; zElmImg[0].src = zElmImg[0].src.replace(/\/s\d+\//, '/s1600/' );
} else {
xElm.innerHTML = "[拡大]"; zElmImg[0].src = zElmImg[0].src.replace(/\/s\d+\//, '/' + zSzWidth + '/' );
}
}
</script>
<style type="text/css">
a.tscode {padding-left:5px;}
div#divframe {padding:2px 5px 2px 2.5em;font-size:11px;line-height:1.2;margin:5px;border:0;}
</style>
function.php 追加コード (ソースコード内クリックで全選択します)
// [gil グーグルBlogger 画像リンクURL] グーグルBlogger 画像リンク生成ショートコード
function GoogleImageLinkfunc($xArgs)
{
$zStrImgUrl = ""; $zSizW = "s320"; // デフォルトの画像幅(これを変更する場合は対応する add-header.php も変更のこと)
switch( count($xArgs) )
{
case 0: return ""; // 引数無しは無効
case 1: $zStrImgUrl = $xArgs[0]; break; // 引数は画像URLのみ
default: return "<p><b style='color:red;'>(gil arguments err)</b></p>"; // 他は無効
}
$zStrLnkTxt = "拡大"; $zStrDefSiz = "/{$zSizW}/"; $zStrChgSiz = "/s1600/";
if( "1" == filter_input( INPUT_GET, "gil_large" ))
{ $zStrLnkTxt = "縮小"; $zStrDefSiz = "/s1600/"; $zStrChgSiz = "/{$zSizW}/"; }
if( preg_match('#/s\d+/#', $zStrImgUrl) ){ /* OK */ }
else { // /s数値/ がURLにない場合(blogger画像でない場合)は無効
return "<p><img name='gil_notSuppotLink' alt='images' src='{$zStrImgUrl}'></p>";
}
$zStrView2 = preg_replace('#/s\d+/#', $zStrDefSiz , $zStrImgUrl );
$zStrLink2 = preg_replace('#/s\d+/#', $zStrChgSiz , $zStrImgUrl );
$zStrPc = "\n<div id='divframe'>\n";
// スマホはアンカー表示無し
// 投稿個別ページと固定ページはアンカー有
if ( ( ! wp_is_mobile() ) && ( is_single() || is_page() ) )
{
$zStrPc .= "<a class='tscode' href='javascript:void();' name='gil_resizeimg' onclick='gil_resizeimg(this);return false;' title='この画像を{$zStrLnkTxt}する'>[{$zStrLnkTxt}]</a> " .
"<a class='tscode' href='javascript:void();' name='gil_all_resizeimg' onclick='gil_all_resizeimg();return false;' title='このページの全部の画像を{$zStrLnkTxt}する'>[このページの全画像を{$zStrLnkTxt}]</a><br>" ;
}
$zStrPc .= "<a href='{$zStrLink2}' data-lity>" .
"<img name='gil_images' class='googleimagelink' alt='blogger images' title='画像クリックで別のタグに拡大表示' src='{$zStrView2}'>" .
"</a></div>";
return $zStrPc;
}
add_shortcode('gil', 'GoogleImageLinkfunc');
| 4. | Blogger に挿入した画像の削除＆その他 注意点 |
Blogger に挿入した画像は、挿入した時点で保存されます (Blogger 投稿記事の保存/公開時点ではありません)
また、Blogger 投稿画面上で画像を削除しただけでは、Google のサーバーに画像が残ったままとなります。
個人情報等を含んだ画像を間違ってアップしたときなどで、画像を削除する場合は以下のように操作してください。
| 4-1. | Google Album を表示する。 |
ブラウザで Blogger にログインしている状態で、以下のリンクをクリックするかアドレスバーに入力して移動してください。
https://get.google.com/albumarchive/
投稿画像が表示されるので、ここで画像の削除を行ってください。
| 4-2. | 同様の機能のプラグインの紹介 |
Blogger の画像保存容量が 15GB であるのに対して、google photo では無制限に画像保存ができるとアナウンスされています。同様の機能として WordPress プラグインも公開されていますので、参考までに解説している URL を以下に記します。
Googleフォトを WordPressに埋め込むプラグイン公開
WordPressのブログの全画像をGoogleフォトから配信させるようにした
| 5. | おまけ。pre タグ内のテキスト全選択 スクリプトのソースコード |
pre 開始タグ内に onclick='selectTextInPre(this);' を記述することで、preタグ内クリック時にソースコードの全選択を行います。ソースコードの表示を自前で行いたい方は参考にしてください。
/* ソースコード選択関数 */
function selectTextInPre( xElm ) {
var zRng = document.createRange();
zRng.selectNodeContents(xElm);
window.getSelection().addRange(zRng);
return false; /* for atag dosen't work */
}
wrote by tasa.