ポップアップが実装できるプラグイン「Anything popup」「Easy Modal」

ポップアップ 「Anything Popup」

「Anything popup」は、ページにポップアップが実装できるWordPressプラグインです。ポップアップ要素を投稿ページと同様に作成できるため、テキストのみでなく画像なども実装することが可能です。ダウンロード

インストール・有効化して、「設定」→「Anything popup」へすすみます。
ポップアップごとに作成を行い、投稿ページへショートコードを埋め込む流れになります。

設定と内容の作成を行い、"Insert Message"をクリックすると下方のテーブルにショートコード(Short Code)が作成されますので、設置したい投稿ページに挿入して下さい。

(例) [AnythingPopup id="2"]

サンプル
どうやらコンテンツに(Contact Form 7などの)ショートコードを埋め込むことには対応していないようです。(Easy Modalは、対応しています。下方参照)

設定値

• Window Width：横　数値
• Window Height：縦　数値
• Header Color：ヘッダーの色　#4D4D4D
• Border Color：ボーダー色　#4D4D4D
• Header Font Color：ヘッダーフォント色　#ffffff
• Popup Title：ポップアップのヘッダテキスト　テキスト
• Popup Link Text/Label/Image：ポップアップリンクのテキスト　テキスト
• The Popup Content：ポップアップに表示するコンテンツ　コンテンツ

スタイル

id="2"のショートコードを埋め込んだ場合、以下の要素が生成されます。

<div id="AnythingPopup_BoxContainerHeader2">
    <div id="AnythingPopup_BoxTitle2">test</div>
    <div id="AnythingPopup_BoxClose2">
        <a href="javascript:AnythingPopup_HideForm( 'AnythingPopup_BoxContainer2', 'AnythingPopup_BoxContainerFooter2');">Close</a>
    </div>
</div>
<div id="AnythingPopup_BoxContainerBody2">test</div>

IDのみなのでワイルドカードなどを使用してスタイリングができればいいですが。。。

モーダル「Easy Modal」

「Easy Modal」は、モーダルウィンドウを実装できるプラグインです。ショートコードの埋め込みが可能です。ダウンロード

インストール・有効化して、管理画面の「設定」→「Easy Modal」に進み、"Add New"から各項目に入力し、publishして下さい。

Generalタブ

• Name：一意となる名称を設定
• Load Type："Per Page/Post"に設定した場合は、(後述する)リンクを貼ったページでのみモーダルウィンドウをロードし開くことができます。"Load Sitewide"に設定した場合、content(モーダルウィンドウの要素)を全てのページで生成し、どのページ上からも開くことができます。
• Title：モーダルウィンドウ上部に表示させるタイトル
• Content：モーダルウィンドウ内に表示させるコンテンツ

Display Options / Close Optionsタブ

• Size：ウィンドウサイズ
• Disable Overlay：オーバーレイ(背景)を表示させるか否か
• Animation Type：表示アニメーションの種類
• Animation Speed：表示までの遅延時間
• Animation Origin：スライド効果などの方向
• Location：モーダルウィンドウの表示位置
• Click Overlay to Close：オーバーレイ(ウィンドウ以外の背景)クリックでモーダルウィンドウを閉じるか
• Press ESC to Close：ESCキーでウィンドウを閉じるか

挿入方法

全ページにモーダルウィンドウを作成し表示させる方法と、投稿ページを限定して作成する方法があります。

「Load Type」で"Per Page/Post"を設定した場合は、前述の通りそのページでのみコンテンツがロードされます。各投稿ページの編集画面の下方に以下のようなチェックボックスが表れるので使用したいコンテンツを選択して下さい。"Per Page/Post"で作成したモーダルウィンドウのNameで表示されます。

「Load Type」で"Load Sitewide"を設定した場合は、コンテンツは全てのページでロードされます。ナビゲーションメニューなどどのページでも表示されるリンク経由で開きたい時などに使えます。

あとはリンクを投稿内に記述するだけです。class名(eModal-1など)はModalsページからClassカラムで各々確認することができますので該当のものを設定して下さい。

<a href="#" class="eModal-1">Contact Us</a>

サンプル

/wp-content/plugins/easy-modal/css下のCSSファイルを変更することでスタイリングできます。

Related

条件を付けて訪問時に開くポップアップを実装できる「WordPress Popup」 Lightboxなどが実装できるプラグイン「Magnific Popup」 Bootstrap Modal + 拡張機能が実装できるプラグイン Bootstrap Modal + 拡張機能が実装できるプラグイン(Bootstrap 2) 折りたたみ要素やタブなどをショートコードで実装できるプラグイン「Arconix Shortcodes」 Lightbox (画像ポップアップ) プラグイン サイトのキャプチャをショートコードで生成してくれる「Browser Shots」 ツールチップ実装プラグイン「WordPress Tooltip」