気まま赴くままに。デザインからプログラミングまでをたまにまとめてます。

Wordpress・ブログ コーディング スニペット

[WordPress]モーダルウインドウ[スニペット][DLするだけ]

今回はWPのエディタである「Gutenberg」での画像挿入に対応したモーダルウィンドウを作ってみました。

他にも方法はあると思いますが、外部ファイルの読み込ませ方がアナログちっくです。

スニペット:ある程度パターン化されたもの。ここではコードスニペットを指す。

スニペットはjavascriptの物をGitHubからDLして頂き、
それをサーバー内に配置してWordpress読み込ませるという形をとります。

今回の流れ

モーダルウィンドウの説明

ファイルのダウンロード

ファイルの配置

ファイル読み込み

コードの簡単な説明

スポンサーリンク



目次

モーダルウィンドウとは

PCの方は上の画像をクリックすると画像が拡大されると思います。

この様なポップアップの様に表示されるウィンドウのことを「モーダルウィンドウ」と言います。

ポップアップウィンドウとの違いはウィンドウを開いたまま別の動作が出来るかどうかです。

基本的に画像に多く使われているかと思います。

今回はこれをWordPress上で簡単に実装したいと思います。

 

ちなみに

反応しない方は多分スマホ等の方かと思います。

今回のスニペットでは、CSSにてスマホなどの小型デバイスには反応しない様にしています。

私的に小型デバイスで拡大したい場合は文章等と行ったり来たりする為、
別ウインドウで画像を開いた方が何かと便利だと思ってます。

スニペットの解説

WPのエディタである「Gutenberg」で画像を挿入する際、
wp-block-image というclassが付与されるかと思います。

予め wp-modal-img というidを付与した画像表示用の枠組みを作っておき、
それをCSSで非表示にしておきます。

javascriptにより、

.wp-block-imageがクリックされた場合

画像とその高さ・幅を取得

#wp-modal-imgにそれぞれを代入

枠組みの大きさを画像に合わせてそれぞれの2倍に(画像はサムネイルになっている為)

画像の高さに合わせて上下の余白を追加(画像の高さが650px以下の場合追加しない)

.wp-modal-bg がクリックされた場合 wp-modal-img を非表示に

と動作させています。

画像自体のURLでなくサムネイルのsrcを用いている為画質が多少荒くなるかと思います。

スニペットのダウンロード

GitHubからDLして頂きます。若しくはコードをコピペしてください。

https://github.com/uinoe/wp-modal

zipファイルは7zipやLhaplusで解凍してください。

html、css、jsファイルが含まれていると思います。

Clone or download から Download ZIP

ファイルの配置

管理しやすい様、サーバ内にスニペット専用のフォルダを作っておきます。

FTPから

/wp-content/themes/任意のテーマ/

中には

  • css フォルダを作成 > wp-modal.cssを配置
  • js フォルダを作成 > wp-modal.jsを配置

してあげます。

自分はstinger8を使用しているので /wp-content/themes/stinger8-child/

読み込ませる

WordPressでの作業になります。

以前に軽く触れましたが、

  1. サイドメニューより「外観>テーマエディター」を選択。
    (「編集するテーマを選択」は任意の「Child」とついているものを選択してください。)
  2. 右側のファイル一覧から「header.php」を選択。
    (ファイル一覧に表示されていない場合はFTPを用いて親テーマのものをコピーしてあげてください。)
  3. header.phpのheadタグ内に以下を記述。
    (入力箇所はheadタグ内の最後にでも追加してあげてください。)

<link href="<?php echo get_template_directory_uri() ?>/../stinger8-child/css/animate.css" rel="stylesheet">
<link href="<?php echo get_template_directory_uri() ?>/../stinger8-child/css/wp-modal.css" rel="stylesheet">

こんな感じになると思います。

#wp-modal-imgの設置

続いて枠組みとなる#wp-modal-imgを設置していきます。

bodyタグ内に

<!-- wp-modal -->
<div id="wp-modal1" class="wp-modal">
<div class="wp-modal-bg"></div>
<div class="wp-modal-content">
<img id="wp-modal-img" class="wp-modal-content" src="#" alt="modal-image">
</div>
</div>
<div id="wp-modal2" class="wp-modal">
<div class="wp-modal-bg"></div>
<div class="wp-modal-content">
<img id="wp-modal-img2" class="wp-modal-content" src="#" alt="modal-image">
</div>
</div>
<!-- wp-modal -->

と記述してあげます。

※CSSファイルがきちんと読み込まれていないとこれが表示されたままになります。

こんな感じ

まとめ

当ブログで公開しているスニペットはライセンスフリーです。

色々不都合な点も多いかと思いますので、都合のいいように書き換えて使用していただいて構いません。

事業を始めたい方や初心者さんに役立てたら嬉しいですし、スニペット作っているだけでも勉強になっています。

どうぞご自由にお使いください。

-Wordpress・ブログ, コーディング, スニペット
-,

関連記事

[WordPress]サイトの複製方法[簡潔]

今回はもう一つブログを作る際に役立つ、「クローンサイト」の作り方を紹介していきます。 WordPress標準の機能で行う方法 プラグインで行う方法 二種類の方法があります。 方法にもよりますが、今回紹 …

[WordPress]テーマをカスタマイズする方法

WordPressをインストールして、テーマいれて、カスタマイズ! 今回はカスタマイズ方法について書いていきます。 詳細は別途記事で、ここに順次リンクを張っていく予定です。 WordPressのインス …

カバー・アイキャッチ画像3

[WordPress]ブログ開設直後にやりたいこと[2019]

ドメイン・サーバー契約を終え、ブログを開設! 見た目を変えたり、記事の投稿を効率よく行いたいものです。 外観となるテーマ 便利な機能「プラグイン」 URLを見やすく!パーマリンク。 ユーザID一応隠そ …

カバー・アイキャッチ画像5

[meta,js,htaccess]リダイレクト設定[httpからhttpsも]

SSLの設定を終えた直後はhttpとhttps二つのURLが存在します。 又、www付きのアドレスも存在しています。 この状況はSEO的にはよろしくないです。 というのも、Googleさんがどれを評価 …

カバー・アイキャッチ画像2.1

[WordPress]ブログ開設前の前提知識(用語等編)

サーバーやドメイン、WordPressについてまとめています。 [WordPress]ブログ開設のやり方まとめ[2019] [WordPress]ブログ開設前の前提知識(構想編) スポンサーリンク 目 …