SANGOで写真をポップアップで開く方法を詳しく解説！

写真をポップアップで開く方法を詳しく解説！デフォルト機能の利用とプラグインを利用する方法について！

今回は、記事内に投稿した写真をポップアップで拡大表示させる方法を説明します。

ポップアップでの拡大表示設定しておかないとブラウザで写真が開いてしまいます。
SANGOを使ったサイトで、ユーザーに写真をスマートに見せたい方は、ぜひこちらの記事も参考にしてみてください。

SANGOには、デフォルトで写真をポップアップで拡大表示表示させる機能が付いています。
今回は、そのデフォルトの機能を利用する方法を説明します。

また、プラグインで設定する方法も一緒に説明しています。
プラグインを利用したい場合には、そちらの説明も参考にしてください。

SANGOのデフォルト機能で写真のポップアップ表示を設定

SANGOのデフォルトの機能では、サイト全体に設定する方法と、記事毎に個別に設定する方法があります。

ポップアップでの拡大表示はこのようになります。
↓

まずは、「サイト全体に設定する方法」から紹介していきます。

【サイト全体に設定する方法】

サイト全体に設定する場合には、「外観」→「詳細設定」と画面を移動してください。

↓
その画面の中に「写真を拡大表示するためのJSを読み込む」という項目があります。
この項目にチェックを入れて「公開」をクリックすれば設定は完了です。

ただ、拡大表示の為のJavascriptを読み込むことになるので、サイト全体のパフォーマンスに影響することもあります。

それを避けるために、記事毎に個別する方法もおすすめします。
記事毎の設定にすれば、影響するのは該当記事にのみになります。

【記事毎に個別に設定する方法】

投稿画面の右カラムにある「JavaScript設定」の領域を確認してください。

その中に「写真を拡大するJavaScriptを利用」という項目があるので、チェックを入れて記事を保存するだけです。

簡単ですね！

【相性の悪いプラグイン】

こちらの機能と相性の悪いのが「Autoptimize」というプラグインです。
サイトの高速化のためにJavascriptやCSS、HTMLを圧縮してくれる便利なプラグインとなっています。

その場合は、「Autoptimize」を無効化する必要があります。

もしくは、「Autoptimize」の設定画面で「JavaScript コードの最適化」のチェックを外すことで、不具合は解消します。

プラグインを使って写真のポップアップ表示を設定

SANGOのデフォルトの写真拡大機能以外で設定する場合には、「WP jQuery Lightbox」というプラグインがおすすめです。

インストールは「プラグイン」→「新規追加」の画面から行います。

画面右上の検索ボックスで「WP jQuery Lightbox」を検索すると、画面の左上に該当プラグインが出てきます。

「今すぐインストール」をクリックするとインストールが開始ます。

インストールが完了すると「有効化」ボタンをクリックしてプラグインを有効化させてください。

これで完了です。

インストール完了したら拡大機能は有効になるのですが、1点設定を変更しておいた方がいい箇所があります。

「設定」→「jQuery Lightbox」と遷移して設定画面を開いてください。
その中に「スクリーンサイズに合わせて画像を縮小」という項目があるので、そこにチェックだけ入れておきましょう。

他の項目はデフォルトのままでも問題ないですが、必要があれば変更してください。

あとは、投稿画面から写真をアップロードするだけです。
その際「リンク先」には「メディアファイル」を選択してください。

これで、記事内に投稿した写真がポップアップでの拡大表示になっているはずです。

最後に

今回は、記事内に投稿した写真を拡大表示させる際に、Javascriptを使ってポップアップで表示させる方法を説明しました。

SANGOにはデフォルトで拡大表示設定できる機能が付いています。
その機能をそのまま利用することで、拡大表示の設定が可能です。

ただ、SANGOデフォルトの機能以外を利用される場合には、プラグインを利用することもできます。

拡大表示に利用できるプラグインはたくさんありますが、私のおすすめは「WP jQuery Lightbox」です。
設定も簡単なので、興味のある方は一度インストールしてみてください。