Home > WEB | WordPress | javascript > WordPressのカスタムフィールドで<HEAD>内でJavsScript, CSSをロードして動かす

WordPressのカスタムフィールドで<HEAD>内でJavsScript, CSSをロードして動かす

MacOSXのようなダイアログをページ内に表示する、
ModalBoxの改造記事を書こうと思ったんだけど、
WordPressで記事ごとにJavaScriptやCSSの読み込みを追加したくて悩む。

プラグインを利用＆改造して、
カスタムフィールドでこんな感じでできるようにしてみた。

javascript, css フィールドにファイル名を指定して追加する。
（Add-Meta-Tagsを追加で、keywords,description フィールドの指定によって、
META情報もページごとに指定可能。）

というわけで、WorｄPressの個別ページで、
ModalBoxのJSとCSSを読み込んで、表示させてみた。

↓個別ページ表示でないと動きません。

クリックでModalBoxが表示されるでしょか。

■　記事本文中にjavascriptをかく・・・
プラグインを作っている方がおられました。
カスタムフィールドのHTMLを記事に挿入するプラグイン
ContentEXプラグインにより、カスタムフィールドに追加したHTMLを
そのまま記事本文中に記述できます。

本文中のJavaScriptに関してはこれでOKでした。便利。

■　head内でjavascript,css ファイルをロードする・・・

こんなのをページごとに自由に差し込みたい。

近いプラグインで、ページごとにMETAを自由に追加できる、
Add-Meta-Tagsというプラグインがあったので、これをちょっと改造させていただきました。
→メタタグをページごとに設定できるWordPressのプラグイン:Add-Meta-Tagsの日本語版

このプラグインのMETAタグを追加している部分に
javascript, css カスタムフィールドがあった場合、HEADに追加する処理を、加えました。

add-meta-tags.php

PHP:

PHP:

// add javascript
$js_fld_contents = get_post_meta($posts[0]->ID, $js_fld, false);
if(!is_null($js_fld_contents)){
foreach($js_fld_contents as $js_fld_content){
if ( !empty($js_fld_content) ) {
$my_metatags .= "\n<script type=\"text/javascript\" src=\"". $js_fld_content ."\"></script>";
}
}
}
// add css
$css_fld_contents = get_post_meta($posts[0]->ID, $css_fld, false);
if(!is_null($css_fld_contents)){
foreach($css_fld_contents as $css_fld_content){
if ( !empty($css_fld_content) ) {
$my_metatags .= "\n<link rel=\"stylesheet\" href=\"". $css_fld_content ."\" />";
}
}
}

これで javascript, css という名前のカスタムフィールドが有効になります。

Comments:1

okm 08-09-19 (金) 18:39: wordpress2.6.2でwarning… 修正→　http://parpue.net/wordpress/296

Trackback URL for this entry: http://parpue.net/wordpress/25/trackback
Listed below are links to weblogs that reference: WordPressのカスタムフィールドで<HEAD>内でJavsScript, CSSをロードして動かす from parpue.net

pingback from parpue.net - wordpress 2.6.2に更新 08-09-19 (金) 18:37: [...] 、Warningが出てしまった。 WordPressのカスタムフィールドで<HEAD>内でJavsScript, CSSをロードして動かす [...]

Home > WEB | WordPress | javascript > WordPressのカスタムフィールドで<HEAD>内でJavsScript, CSSをロードして動かす

最近の記事

カテゴリ