【WordPress】Local（by flywheel）のライブリンクで画像が表示されない時の応急処置

はじめに

WordPress開発・制作ツールで有名なLocalにはライブリンクという共有リンクを生成してくれる機能があります。
通常WordPressサイトを閲覧するにはサーバーを用意して、そこにWordPressを構築して〜ということが必要になりますが、Localではありがたいことに開発〜共有リンクでの閲覧まで一貫してWordPressサイト環境を提供してくれています（＝開発段階ではサーバーはもちろんドメインも用意する必要がない）。

実は最近、弊社の非エンジニアたちによるWordPress制作チームが立ち上がり、にわかにwebへの関心が高まっている社内事情です。どうやらすでに（社内向け？の）案件があるそうで、チームの方々にはLocalを各自導入して触ってもらっています。
（ちなみに筆者は別チームなので積極的に携わる状況にありません）

各々がWordPressをキャッチアップしながら作っているのですが、先日 「ライブリンクで用意したサイトの画像が表示されない」 という相談を受けました。

今回は本記事の表題のあるように、共有リンク（ライブリンク）のサイトで画像が表示されないという現象が起きた原因と対処法を情報共有しようと思います。

ちなみに、筆者が確認した限り表示されない画像というのはエディターの投稿機能[画像]で用意したものに限定されます。テンプレートファイルにてget_template_directory_uri()などで読み込んだ画像は表示されていました。
※試してないですが、[ギャラリー][カラム]など画像系統の投稿機能で用意するものもライブリンクでは表示されないかもしれません。

対象読者と環境

• 対象読者
  • 非エンジニア
  • WordPressに関心のある方（エンジニア・非エンジニア問わず）
  • Local関連の情報を探している方

環境はざっくり以下になります。localのインストール時は色々と面倒があったのですが、今回の話では環境はあまり関係がないと思います。

• 環境
  • intel Mac（非エンジニア）
  • M1 Mac（筆者）
  • テーマ：lightning
  • Web server：nginx
  • PHP：8.1.29
  • DB：MySQL 8.0.16
  • WordPress Ver：6.6.2

結論

• ライブリンクで画像が表示されない原因
  開発時はSSLされていないがライブリンクではSSLされているため混在コンテンツが発生したため。

• 混在コンテンツとは

HTTPS ページでは Mixed Contents と呼ばれる問題がよく発生します。これは、ページのサブリソースが安全ではない http:// で読み込まれることを指します。ブラウザはデフォルトで、スクリプトや iframe などのさまざまなタイプの Mixed Contents をブロックします。しかし、イメージ、オーディオ、動画は依然として読み込みが許可されており、それがユーザーのプライバシーとセキュリティを脅かしています。（...中略）
Mixed Contents を読み込むと、ページが安全とも安全でないとも言えない中間状態となるので、ブラウザのセキュリティ UX にも混乱が起こります。
Chrome 79 から開始される一連の手順を通して、 デフォルトですべての Mixed Contents がブロックされるように徐々に移行されます。

参照：HTTPS の Mixed Contents と決別する

つまり今回の問題は開発時もSSLしておけば問題がないと思われます（申し訳ないのですが未検証なので確証はありません）。

Localの各種サイト管理画面で[SSL]欄に以下のような表示があればSSLされていません。

以下のページがSSLへの対応法を詳しく解説して下さっています。他にも探せば情報はたくさんあると思います。今は生成AIもあるのでそちらを頼っても良さそうですね！

しかし、上記のような設定を行う暇もない状況の方に以下の応急処置を提供します。
（実際、筆者が今回の応急処置を採ったのは相談者から「あと数時間で役員にプレゼンするのに画像が表示されないのは困る」という切迫した状況からでした）。

• ライブリンクで画像が表示されない時の応急処置
  imgタグの不要（になってしまっている）属性をプログラム（本記事ではJavaScript）で強制的に排除する

以下2つが応急処置コードです。

/* ファイル名：adjustLiveLinkUrl.js */
document.addEventListener("DOMContentLoaded", () => {
    const figureImgs = document.querySelectorAll('img');
    figureImgs.forEach(figureImg => {
        if (figureImg.srcset.length > 1) {
            figureImg.removeAttribute('srcset'); // 邪魔な srcset 属性を排除
        }
    })
});

上記jsファイルを読み込むための記述です。functions.phpに書きます。
（記載場所はどこでも良いですがファイルの一番下の方にでも記載するといいと思います）

function theme_enqueue_styles_scripts() {
    wp_enqueue_script('adjustLiveLinkUrl', get_option('site_url').'/wp-content/themes/lightning/adjustLiveLinkUrl.js');
  }
add_action('wp_enqueue_scripts', 'theme_enqueue_styles_scripts');

応急処置までの経緯

ここからはキャプチャ画像を使って説明していきます。

理想とする表示

まずはじめに開発時の状況です。つまり理想とする表示になります。

当然ですが、開発環境（非SSL環境）ではこのようにきちんと画像が表示されています。

困った表示

次にライブリンクサイト（SSL環境）の状況です。

ログに混在コンテンツのエラーが記載されていますね。
当たり前ですが本来はしっかり混在コンテンツのエラーを対処する必要があります。

今回は応急処置なので先に述べた力技を使って以下の形にしました。

（力技による非推奨な）理想とする表示

力技（応急処置方法）の再掲

• imgタグを整形するJavaScriptコード

/* ファイル名：adjustLiveLinkUrl.js */
document.addEventListener("DOMContentLoaded", () => {
    const figureImgs = document.querySelectorAll('img');
    figureImgs.forEach(figureImg => {
        if (figureImg.srcset.length > 1) {
            figureImg.removeAttribute('srcset'); // 邪魔な srcset 属性を排除
        }
    })
});

• functions.php（上記JavaScriptを読み込む）

function theme_enqueue_styles_scripts() {
    wp_enqueue_script('adjustLiveLinkUrl', get_option('site_url').'/wp-content/themes/lightning/adjustLiveLinkUrl.js');
  }
add_action('wp_enqueue_scripts', 'theme_enqueue_styles_scripts');

さいごに

これはあくまで応急処置なので用が済んだら闇に葬ってください。そして、もし混在コンテンツが発生すればその時は正しく対応してください。
この応急処置（力技）はどうしても時間がない方のための魔改造です。

一応、修正方法を貼っておきます。

（……変なことするよりも最初からプラグイン使っていれば良かったのでは？）

状況に応じて上記キャプチャ元の以下ページを参照ください

ここまで読んでいただき、ありがとうございました。
どなたかのお役に少しでも立てれば幸いです。

参考