技術

【WordPress】ポップアップを表示するプラグインをつくってみた

jQueryとCSSを使用したポップアップウィンドウ

 

ポップアップウィンドウとは、ウェブサイトのページにアクセスしたり、リンクボタンをクリックしたりしたタイミングで自動的に立ち上がる「別ウィンドウ」のことをいいます。

当サイトトップページにポップアップウィンドウを表示するようにしました。せっかくなので、ここで使用したコードを他でも利用できるように、シンプルなプラグインにしてみました。

ちなみにポップアップウィンドウの実装は、WordPressに標準で組み込まれているjQueryのFadeIn/FadeOut*を使用しました。

 

 

jQueryのFadeIn/FadeOut*

各要素の透明度を操作して、非表示の要素をフェードインまたはフェードアウトさせています。

引数に、”slow”、”normal”、”fast”、もしくは完了までの時間をミリ秒単位で設定することでフェードインまたはフェードアウト時間を指定することができます。

 

 

簡単!ポップアッププラグイン

当サイトのトップページに表示しているポップアップウインドウをプラグインにしてアーカイブしています。

シンプルなポップアップウィンドウプラグインをお探しの方、またWordPressの教材に使ってみたい方、是非お役立てください!