2017年10月06日WordPressプラグイン画像をポップアップ表示(モーダルウインドウ)させているサイトが多いです。前から自分のブログにも導入したいと思っていました。「けど、難しそう・・・。」と思い、実行に移していませんでした。ところが調べてみると、「簡単に」プラグインで実装できると書いてある記事が多いです。Maker」を使ってみることにしました。難しそうに思えることでもプラグインで簡単に実装できるのがWordPressのいいところです。簡単じゃじゃありません(笑)。Maker」の使い方を理解するまで簡単に2時間持ってかれました。Maker」をインストールして有効化します。プラグインを日本語化しないと設定が難しいので、日本語化ファイルを解凍してアップロードしたほうがいいと思います。日本語化ファイルはWPのさんの「【WordPress/ポップアッププラグイン】どれがいい?上位4件を徹底比較してみた」からダウンロードできます。Maker」と表示されるので「ポップアップの追加」でポップアップを新規作成します。するとWordPressのエディタ画面が表示されます。タイトルを記入する欄が2カ所ありますが、上の欄が「ポップアップの名称」で、下の欄が「ポップアップが表示された時に表示されるテキスト」です。記事欄にポップアップ表示させたい画像や、テキストを入力します。ポップアップ対象を作成したら、ポップアップを表示させる設定をします。記事欄の下に設定項目があるので、ポップアップ作成画面で全て設定できます。最初に「トリガー」を設定します。難しい単語が出てきました(笑)。Googleタグマネージャーでトリガーの設定をしたことがありますが、よく意味は分かっていません。調べてみると、あらかじめ指定した処理を自動的に起動する機能。トリガトリガーとは「あらかじめ設定した処理」をしてくれる機能のことのようです。何となく意味が分かったのでまずは、「トリガータイプ」でポップアップが表示される条件を指定します。自動的にポップアップが表示されると「ウザい」と思う人も多そうです。そこで、「クリックで開く」に設定しました。次に、今回作成したポップアップを表示させるための条件を「クイックトリガー設定」でします。ここが意味がわからず、かるく2時間持ってかれた場所です(笑)。クリックトリガーの設定クイックトリガー設定でます、CSSセレクタの追加でポップアップへのLink方法を設定します。Containing」のみの説明になります。Containing」を選択すると、a[href*=”contain”]と表示されるので、「contain」の部分をクラス名に書き換えます。クラス名の確認方法クラス名はポップアップを一旦「公開」すると、「全てのポップアップ」で記事一覧が表示されます。ポップアップ一覧に「CSSクラス」が表示されるます。この中の「popmake=数字」の部分を、「CSSセレクタを追加」の「クラス名」に記入します。これで、自分が大苦戦したポップアップの呼び出しのトリガー設定はおそらく大丈夫です。その他の設定トリガーのセットにするクッキーの設定です。クッキーの保存期間やサイト全体のクッキーの設定などできます。わからない人は「新しいクッキーを追加」して、初期設定のままで問題ないと思います。「よくわからない人=たつじんw」です(笑)。「表示設定」ではアニメーションのタイプやポップアップの位置を設定できます。他にもポップアップを「閉じるボタン」の設定・テーマなどを設定できます。表示設定全般に関しては、ポップアップの表示を確認しながら、自分の好みに変えていくのがいいと思います。Makerを有効化すると全ての画像がこのようにポップアップ表示されます。閉じるボタンがないのでブラウザで「戻る」ボタンをクリックしないと、記事に戻ってくれません。設定していない画像もクリックするとポップアップ表示されるのは嬉しいですが、閉じ方がわかりません(笑)。作成したポップアップを適用するには、テキストや画像にリンクを貼って作成したポップアップを呼び出します。http://a[href*=”クラス名”]でリンクすれば、テキストでも画像でもポップアップを呼び出すことができます。ここで記入するクラス名は、下段のエスケープされた「E3%82%A3・・・」も含め、CSSクラス名全てです。表示の確認テキストと画像にリンクを貼りました。記事にある「たつじんwのお気に入り」か「画像」をクリックすると、ポップアップで作成した画像が表示されます。ポップアップを指定した場合は「閉じるボタン」も表示されるので、ユーザビリティを損ないません。テーマの設定クラスを追加しているのでスタイルシートで表示を整えてもいいですが、知識がないと難しいことです。Makerには嬉しいことに「テーマ」を変更することで、表示のスタイルを選ぶことがができます。これがDefaultです。Makerは細かい設定ができて、管理画面からポップアップを作成できるので便利なプラグインだと思います。細かい設定ができる分、使いこなせるようになるには少し時間がかかるかもしれません。※画像は全てフリー素材サイト「ぱくたそ」の画像を使用しています。ここだけおさえれば完璧!本当に使える商用利用OKのフリー素材サイトのまとめぱくたそ以外にもよくお世話になっているフリー素材サイトのまとめも書いています。今日のたつじんへの一歩たつじんwポップアップの呼び出し方にあまり触れていない記事が多い気がします。「当然のこと」として扱われているんでしょう。当然のことで大苦戦したのは、あまりに勉強不足です(笑)スポンサーリンクこの記事を書いている人たつじんwたつじんwになるために勉強したことをこのブログに書いています。最近はWordPressとiPhoneの記事が多いです。必須サイト上に表示された文字を入力してください。Maker」の使い方プロフィールWordPressとiPhoneが好きな標準的ではない男子(おっさん笑)です。たつじんwプロジェクトシェアお問合わせTOPへホーム。