Maker」の使い方を徹底解説!コンテンツの説明や追加情報をユーザーに見せたい時、または注意喚起や利用規約などで絶対にユーザーに見せないといけないコンテンツがある時、ポップアップでその内容を表示させることで確実にユーザーに情報を届けることができます。世の中にはColorBoxやprettyPhotoといったjsのライブラリもありますが、ことWordPressに限っては簡単な設定ですぐに使えるプラグインがそろっています。Maker」になります。Maker」の使い方を実例を交えつつ説明していきます。長いですので必要箇所を抜粋して読んでいただければと思います。Makerをインストールしてみましょう。Maker】を検索します。Makerの設定項目が表示されますので確認してみましょう。-WordPressにプラグインを導入しよう!検索の仕方からインストール、zipフォルダの...https://wp-topics.com/base/1049/WordPressには簡単にブログやホームページを作成できるという利点がありますが、それを可能にしているのは様々な機能を持った「プラグイン」を簡単に導入できる点にあります。個々のプラグインでそれぞれ使い方や設定は違いますが、導入方法は至って簡単です。Makerを使ってポップアップを作成していきましょう。demoまずはdemoのように簡単なポップアップの作成から行います。Popup」をクリックします。Title・エディタひとつずつ解説していきます。Name作成するポップアップの名前を入力します。日本語でも構いませんので分かりやすい名前を付けておくことをおすすめします。作成後はこの名前で各ポップアップを管理する事になります。Title作成するポップアップのタイトルを入力します。ポップアップの中に表示される内容になりますので、表示させたいコンテンツに応じてタイトルを記入します。未記入の場合タイトルは表示されませんのでタイトルはいらないなーという場合は記入しなくても問題ありません。エディタポップアップの中身を作成します。普段使っているエディタと同じようにビジュアルとテキストで分かれていますし、クイックタグなども普段通り使えますので安心してください。-AddQuicktag(アドクイックタグ)が超便利!頻出タグの登録で執筆を効率化しよう!https://wp-topics.com/plugin/591/ワードプレスで記事を書く時にめんどくさいな、と思っていたのがタグの挿入。テーマにもよりますが、このようにstrongタグやhタグなどは最初からテキストエディタにクイックタグ(挿入ボタン)が用意されている場合も多いです。Settingsではポップアップの動作部分を設定できます。何をトリガーにポップアップを出すのか、どのような見た目で表示させるのか等を簡単に設定できますので説明していきます。Trigger何を起因にポップアップを起動させるかを設定できます。Trigger」をクリックするとクリックでポップアップを起動させるパターンか時間経過でポップアップを起動させるパターンかを選べます。クリックの場合は前述のdemoのようにコンテンツをクリックした際にポップアップが出現、時間経過の場合はページが表示されてから何秒後にポップアップが出現する形になります。クリックを使う場面は商品等を詳しく説明する場合やページ遷移前に読んでほしい注意点があるとき等、時間経過を使う場面はページ遷移後にある程度時間が経っている場合に出したいコンテンツの表示等に向いています。遷移から時間が経っている=ページをしっかりと読み込んでいるorページを読んでも分からずに困っている事が想定されます。「もっと詳しく」という風にファン拡大や販促に繋げたり、「分からないところはありませんか?」とユーザーをチャットに導いたりFAQに繋げたりといった使い方ができますね。Targetingポップアップを表示するページを指定する事ができます。target~で指定した投稿やカテゴリだけでポップアップを表示させるような設定が可能です。下部のチェックボックスはスマホやタブレットでページを見た時のポップアップの処理を指定でき、チェックを入れておくことでスマホ、タブレットでのポップアップを無効に設定する事ができます。Displayポップアップの表示方法(見た目)を変更できます。デフォルトでは画面いっぱいを使ったポップアップが表示されてUIとして使いにくいので、それ以外のものから選択したほうが無難かと思います。themeを作成する事もできますので気に入ったものが無い!という場合はチャレンジしてみてください。各ポップアップの見た目は下記をクリックして確認してください。borderClose閉じるボタンのテキストを変更できます。デフォルトでは「×」になっていますが、「閉じる」や「了承」といった言葉に変更する事も可能です。文字を入力すると閉じるボタンをcssできちんと修正しないと崩れてしまいますのでどうしても「閉じる」にしたいんだ!という場合以外は何も記述しないで良いかと思います。閉じるボタンを表示させるまでの時間を変更する事もできます。ポップアップ表示から1秒後、5秒後などと変更する事は可能ですが、閉じるボタンが分かりづらいポップアップはスパムと変わりませんので0秒のまま(最初から表示)に固定しておくのが無難です。Methodsでは閉じ方にバリエーションを付けることが可能です。Closeにチェックを入れておくと、ユーザーがポップアップの外(オーバーレイがかかっている部分)をクリックする事でポップアップを閉じることができるようになります。小さい×ボタンだけで閉じるボタンとするのはインターフェースとして使いづらいので基本的にはチェックを入れておくことを推奨します。CloseはそれぞれescキーやF4キーを押したときにポップアップを閉じるようにできるチェックボックスです。こちらも必要に応じて選択しましょう。Advancedこの項目ではフォーム送信後のポップアップの自動再起動を無効にしたり、ユーザー補助機能のオンオフを切り替えることができます。絶対にこういう動きをさせたいというのが無い限りはチェックをしなくても問題ないでしょう。実際にポップアップを作成してみる上記の流れが分かったところで実際にdemoで使ったポップアップを作成してみましょう。長ったらしく各項目を解説しましたが、やること自体は単純です。説明に従ってこのように各項目を埋めていきましょう。Nameに任意の名前を付けます。今回は練習なので「new-popup」と付けましたが、実際には分かりやすく〇〇の説明補足、〇〇への誘導などと管理しやすい名前にしておくのがベターです。Titleを記入します。ここからはユーザーに見える内容になるので適切な名前を付ける必要があります。今回はそのままdemoと記入します。タイトルが記入できたら中身を作成していきます。ここも練習ですのでとりあえず何でも大丈夫です。World!」と入れておきましょう。最後にトリガーの設定をします。Open」を選択してAdd。Nameを記入する欄が出てきますが無視して再度Addをクリックで問題ありません。これでポップアップの作成は完了です。Popupsの項目にこのように作成したポップアップが表示されていれば成功です。実際にポップアップを記事内に組み込む上記でポップアップが完成したら実際に記事内に挿入してみましょう。ポップアップは通常の投稿内でも固定ページでも使用する事が可能です。適当に投稿などから記事作成を行います。エディターはビジュアルモードを選択してください。Triggerを選択します。Nameを選択します。今回は「new-popup」で作成しているのでnew-popupを選択します。aとかbだとこの時に内容が分からなくなりますので名前は大切ですね。Contentに何をクリックした時にポップアップが起動するかを記述します。here!、詳しく見る等)を入れればその文字列をクリックした時に起動、htmlで画像やボタンを作成して入れておけば、そのコンテンツをクリックした時に起動するようになります。Contentで入れた内容を囲うタグを設定します。pタグ、spanタグなど通常のhtmlタグが使えます。htmlはよく分からない...という場合はコンテンツを独立させるならpタグ、一連の文章中で使う場合はspanタグを使うぐらいの感覚で良いかと思います。Classにつけておきたいclass名を記入します。必要ない場合は無しでも構いません。記述できたら「Save」をクリックして保存します。エディターにdemoと表示されていたら完成です。プレビューを確認、実際にdemoの文字をクリックしてみましょう。このように表示されていたら成功です!見た目と動きを調整する表示されたのは良いですが、このままではちょっと見づらいですね。コンテンツの量が多ければきちんと表示されますが、表示されるポップアップのサイズが毎回マチマチなのは何だか気持ちが悪いです。いう事でポップアップを調整して見た目と動きを整えましょう。SettingsからDisplayを開きます。・その他設定を変更可能です。各項目を調整して見た目や動きを整えていきましょう。sizeSizeでは言葉の通り、ポップアップのサイズを変更できます。Sizesizeの項目をクリックするとポップアップの横幅を変更する事ができます。デフォルトは全体の60%の幅になっていますが、コンテンツに応じてサイズの変更が可能になっています。横幅、縦幅を指定したい場合は「custom」を選択するとpxでサイズを指定する事も可能になります。Widthはポップアップの最小幅を決めることができます。横幅を%で指定している場合は、ブラウザサイズが小さくなるとそれに応じてポップアップも小さくなっていき、内部のコンテンツが崩れてしまう事があります。それを防ぐ為にも「少なくともこのサイズまでしか小さくしない」というサイズを決めておくことができます。Widthこちらは逆に最大サイズを決めておくことができます。横幅が広いディスプレイの場合、表示されるポップアップが大きくなりすぎないように「大きくなってもここまで」というサイズを決めることができます。Animationアニメーションではポップアップの表示の仕方を変更できます。Typeどういった動きでポップアップが表示されるかを指定できます。Slideでコンテンツがふわっと表示されながらスライド表示されます。Originの項目を変更する事でスライドの始動位置を上下左右、様々な方向に変更可能です。Speed数値を変えることで表示されるまでの時間を変更する事が可能です。デフォルトでは350ms=0.35秒で表示になっていますが、数字を大きくすることでよりゆっくりと、小さくすることで素早く表示させることが可能です。あまりにゆっくり表示されるとユーザーにイラっとされる原因にもなりますので特に問題が無ければデフォルトのままで良いでしょう。PositionPositionではポップアップをどの位置に表示させるかを変更する事ができます。Locationデフォルトでは「サイトの上部から100pxで左右均等位置」に表示されますが、Locationを変更する事で位置を変更する事ができます。サイトの左寄せであったりサイトの真ん中に配置するといった形で変更が可能ですので試してみてください。位置調整スライド位置を細かく指定するにはスライドバーの数字を変更します。デフォルトではTOPの表示だけですが、Locationを変更する事で左右の調整用スライドバーも表示されます。各位置から何pxずらす、という指定になります。Triggerにチェックを入れると、ポップアップの表示位置をトリガーになったボタンや文字の上部に固定する事が可能です。商品説明や利用規約などの場合はポップアップのコンテンツが大きくなりすぎて使いづらいですが、専門用語を簡単に補足する場合などは小さなポップアップを文字の直上に出してあげることで説明が簡単にできる、なんて使い方も可能です。例:このサイトではモーダルウィンドウの表示方法について解説しています。使い方によっては非常に便利ですので覚えておいて損はないです。Advancedアドバンスの項目では表示に関するより高度な設定をすることが可能です。Overlayポップアップ表示中のオーバーレイを無効にすることができます。デフォルトではポップアップ以外の部分は薄くグレーがかかっていますが、チェックを入れることでオーバーレイを消すことができます。Triggerの例でもオーバーレイを非表示にしていますので確認してみてください。Stackableデフォルトではポップアップは一つずつしか開けませんが、この項目にチェックを入れることで複数個のポップアップを開いたままにできます。Repositioningデフォルトではブラウザサイズが変更された場合、それに応じてポップアップのサイズが可変しますが、この項目にチェックを入れることでサイズ調整をしないようにすることが可能です。Z-indexz-indxの値を変更できます。基本的にデフォルトのままで問題ないかと思いますが、重なり順などで調整が必要な場合はこちらから変更が可能です。こんなに色々あっても分からない!という場合はとりあえずサイズだけ変更しておきましょう。サイズだけ整えておけば、それ以外の項目は追々でも問題ありません。Makerを使ってポップアップを作る方法をまとめました。日本語ではないうえに、諸々説明を書いたので迷うところもあるかと思いますが、きちんと手順を踏めば非常に簡単に使えてサイトに動きを出すことができるのでお勧めです。自身でhtml、cssが書けるのであればサイトに合った形に1から作成する事も可能ですので試してみてください。あまりにポップアップが多いサイトは使いづらいですが、要所要所で使う分には訴求やユーザーの疑問に応えやすいコンテンツになるのでぜひ活用してみてください。2018.10.30最近カスタム投稿を使う機会がほんとに多いので、一度カスタム投稿の使いかたをまとめようと思います。プロフィールWEB屋さんの端くれ。