ワードプレスでモーダルウィンドウを
こんにちは、カリンです。
ポートフォリオのWordPressバージョンが完成しました。
すでに完成していたhtmlとcssを使用して、WordPressに移行していったのですがWordPressにすることでclass名が変わってしまいcssが反映しない、jQueryが思うように動かない、ローカルから本番環境に移行がうまくいかない・・・などなど苦戦しました。
今回は苦戦したことを覚えている限りで書いていこうと思います。
モーダルウィンドウ
クリックしてポップアップを表示させるのにjQueryでモーダルウィンドウを作りました。
WordPressにするときにjQueryをfuctions.phpに書き込んだのですが、クリックしても反応なし。
ググった結果、ポップアップを作れるWordPressのプラグインがあるとのこと。
Popup Makerというプラグインでモーダルウィンドウが作れました。
私は画像をクリックしたときにモーダルウィンドウを表示させたかったのですが、そのやり方を紹介しているサイトが少なかったのでやり方も載せておきます。
ポップアップ編集画面のPopup SettingsでTriggersを選択。
Add New Triggerをクリックする。
cookieを利用して再訪問した時にポップアップするのを防ぐかどうかを設定できます。
今回は画像をクリックする度にポップアップを表示したいので、チェックを外します。
外したら、右下のAddをクリック。
Extra CSS Selectorsの◁をクリック。
Link:Containingを選択し、Addをクリックする。
ここまで出来たら、一度「公開」をクリック。
All Popupsで作成したポップアップを表示する。
CSS Classesのpopmake-○○○をコピーする。
ポップアップ名をクリックして編集画面を開く。
Popup SettingsのActionsの鉛筆をクリックしてポップアップの設定を開く。
Extra CSS Selectorsに記載されているcontainsを消して、そこに先ほどコピーしたものを張り付ける。
そのとき、「" “」を消さないように気を付ける！
貼り付けたら、a[href*="popmake-○○○"]をコピーする。
Updateをクリックしてポップアップの編集画面の更新をクリックする。
Popup Makerでやるのはここまで。
つぎに、ポップアップを表示させる画像の記事を開く。
画像にリンクを設定し、リンクにhttp://を記述し、先ほどコピーしたポップアップのExtra Selectorsを張り付ければ完成です😊
おわりに
日本語に対応していないプラグインですが、使いこなせれば簡単にモーダルウィンドウを作れるので便利でした。
JQueryは他にもトップへ戻るボタンで苦戦したので、また別の記事で書いていきます！