「ブンブンざむらい」のブログでは、WordPressの無料テーマである「Cocoon」を使用しています。
今回、Cocoonの設定ページ内にある「画像の拡大効果」、 baguetteBox を有効にしました。
しかし、写真貼り付け時に画像のリンクを「メディアファイル」に指定しなければ画像をクリックしても、画像の拡大表示は行われません。
今回はリンク設定をJavascriptで自動化したので紹介します。
自動化した理由
・毎回リンクを設定するのが面倒
・リンク設定抜けが発生する可能性がある
・スマホアプリでリンクの設定が見当たらない
・過去に投稿しているすべての画像にリンクを設定するのは大変
そもそも、画像のリンクを設定する必要がある事を知らなかったです…
デモンストレーション
ブログ記事作成画面の「ブロックを追加」から写真を挿入し、「画像の寸法」を25%に変更しました。
小さく表示されている写真をクリックすると、画像が拡大表示されると思います。
リンクの設定をせずに、正しくbaguetteBoxが機能している事がわかります。
baguetteBoxを有効にする
すでに拡大表示ができる場合はスキップしてください。
Cocoonの設定ページに移動し、baguetteBoxを有効にします。
「Cocoonの設定」⇒「画像」⇒「baguetteBox（軽量・スマホ向け）」⇒「変更をまとめて保存」で画像の拡大効果を使用できます。
baguetteBoxの動作確認
WordPress「新規投稿を追加」の画面で、画像を新しく追加します。
画像追加後、「リンクを挿入」⇒「メディアファイル」をクリックします。
「プレビュー」⇒「新しいタブでプレビュー」を押し、投稿のプレビュー画面へ移動します。
プレビュー画面で表示された画像をクリックし、クリックした画像が拡大表示されていれば問題ありません。
リンクを写真すべてに設定するのは大変なので自動化します。
画像のリンクを自動付与
今回は、JavaScriptを追加する事で画像のリンクを自動付与します。
JavaScriptなので、生成されたHTMLファイルをブラウザ側で書き換えます。
（まぁ、難しい話はここへんでやめましょう）
筆者の環境
Cocoon : 2.5.5
Cocoon Child : 1.1.3
WordPress : 6.1.3
PHP : 7.3.33
Jetpack : 12.3
Cocoon: Single Post (single.php)に追記
single.phpにJavaScriptのコードを貼り付ける事でブログ記事にアクセス際に記述したJavaScriptのコードが実行されます。
single.phpは「外観」⇒「テーマファイルエディタ」⇒「編集するテーマを選択」⇒「Cocoon」⇒「選択」⇒「Single Post (single.php)」で編集可能です。
表示されたコードの下に、画像リンク自動追加用コードを追記していきます。
コードを編集する前にバックアップ（コードのコピー）を取る事をおすすめします。
追記が終わりましたら忘れずに「保存ボタン」を押してください。
コード
Cocoon: Single Post (single.php)に以下のコードを貼り付けます。コード内のコメントは削除して構いません。
以下のコードは、画像にaタグ（リンク）が設定されていない場合にブラウザ側でリンクを設定するコードです。
ご自身の環境に合わせてコードの変更が必要になる可能性があります。
<script>
window.onload = function() {
var figures = document.getElementsByClassName("wp-block-image");
for (var i = 0; i < figures.length; i++) {
var figure = figures[i];
// figureに対してリンクがあるなら処理をしない
if(figure.querySelector("a") !== null){
continue;
}
// 画像URLの取得(リサイズ系のパラメータは削除)
var img = figure.querySelector("img");
img_src = img.src;
non_query_img_src = img_src.split("?")[0];
// 新しくaタグの作成
var a_tag = document.createElement("a");
a_tag.href = non_query_img_src;
// imgタグをaタグで包み込む
img.parentNode.insertBefore(a_tag, img);
a_tag.appendChild(img);
}
// baguetteBoxにリンクの再読み込み
baguetteBox.run('.entry-content');
}
</script>
コメント