現在、テストとして色々とサイトをあたって、ダイアログBOXを取入れてみたのですが、
ボックスは出ず、ボタンを押すと文字とcloseボタンだけ表示されます・・
これはダイアログボックスのcssを作らないとまずいのでしょうか・・・
http://alphasis.info/2011/06/jquery-ui-dialog-modal/
こちらの見本ではきれいにダイアログ表示がされているので
自動的に組込んだら作られるものだと思っていたのですが・・・
①functions.phpの中に
wp_enqueue_script( 'jquery' );
wp_enqueue_script('jquery-ui-dialog');
を書込んで、
②固定ページに
<div id="jquery-ui-dialog" title="ダイアログ">
<p>これは、デフォルトのダイアログ。メッセージを表示したいときなどに便利。</p>
<p>「×」アイコンをクリックすると閉じる。タイトルをドラッグしながら、ダイアログを移動できる。ダイアログのサイズを変更することもできる。</p>
</div>
<button id="jquery-ui-dialog-opener">テスト</button>
を書込んだのですが・・・
こんな感じで進んでいって良いのでしょうか・・
ご教授を頂けたら幸いです。
宜しくお願いします。
サンプルのサイトを見てみました。
ダイアログ部分のスタイルシートとして
jquery.ui.theme.css
を読み込んでいますね。
これ自体はjQueryのThemeRollerで製作できるかと。
http://jqueryui.com/themeroller/
あとは、wp_enqueue_styleでcssファイルを読み込んでみてください。
もし参考にしたいサイトがあるのなら
Chromeなどの「要素を検証」機能を使用すれば
簡単に解析できます。
TomoeIntlさん
ご教授を頂きありがとうございます。
Chromeなどの「要素を検証」機能を初めてしたのですが・・
いまいち使い方が下手なのか「jquery.ui.theme.css」を見つけること
ができませんでした。
あと、
「これ自体はjQueryのThemeRollerで製作できるかと。
http://jqueryui.com/themeroller/
」
こちらなんですが、いくつかファイルをダウンロードしてきました。
jquery.ui.theme.cssは「jquery-ui.theme.css」のことでしょうか？
こちらをheader.phpに読み込んだら良いのですかね・・すみません、
お手数お掛けいたします・・。
「要素を検証」（デベロッパーツール）の
［Elements］パネルにサイトのDOMツリーが表示されます。
このDOMを展開していって、調べたい要素を見つけてください。
DOMツリーにカーソルを持ってくると、
サイト上の要素にも枠が表示されるので、すぐにわかると思います。
http://www.buildinsider.net/web/chromedevtools/01
調べたい要素を選択すると「Styles」パネルにcssのセレクタや該当するファイル名が表示されます。
これでcssの構成が判別できます。
themeファイルは「jquery-ui.theme.css」でよいと思いますよ。
Stylesパネルで見つけたセレクタが「jquery-ui.theme.css」に含まれているか調べてみてください。
間違いなければ、cssファイルをthemeフォルダーにでもアップして
wp_enqueue_styleでheaderに読み込んでください。
デベロッパーツールにしても
wp_enqueue_styleにしても
検索すればいくらでも情報が出てきますよ。
調べてみてください。
TomoeIntlさん
ご教授を頂き本当にありがとうございます。
何とかアニメーションもでき、形になりました。
また、何か分からないことが出てきたら、ご教授宜しくお願い致します。
