- 締切済み
wordpressにjavascriptを挿入する方法について
はじめまして！wordpressにjavascriptをコードを挿入し作動させる方法が理解できず、 教えていただきたく投稿致しました。 私の知りたいこと ----------------------------------------------------------------------------- こちらのテーマに、 http://templates.arcsin.se/simple-organization-wordpress-theme/ こちらのdemo6を埋め込みたいのです。 http://www.ihwy.com/Labs/demos/current/jquery-listmenu-plugin.aspx mission statement とnexteventの下／記事の上にツッこみたいわけです。 ※不明である場合は投稿記事の中でも知りたいです ----------------------------------------------------------------------------- そのjsのソースコードはこちら http://www.ihwy.com/Labs/jquery-listmenu-plugin.aspx 尚、下のほうにある、DownloadVersion 1.1にソースがあります。 ひらきますと・・・・長いので割愛。。。 要はjavascriptの基礎がわかっていないためですが、、 急いでwebサイトを構築しているためこのようにさせていただきました。 「js」という名前のカスタムフィールドにJavaScriptを記述することで・・・ cssにpathを設定・・・・ header.phpにjsを宣言・・・・ このへんがキーかと思いますが、 うむむ。。よくわかりません。。 なにとぞ、「私の知りたい事」に対する 御回答を宜しくお願いします。
- exjapan
- お礼率0% (0/1)
- JavaScript
- 回答数1
- ありがとう数6
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- yyr446
- ベストアンサー率65% (870/1330)
wordpressは使った事ないですが、ぱっと見の回答でよいなら テーマのheader.phpの中の <head>の中に</title>の下に下記スクリプトを <script type="text/javascript" src="js/lib/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/lib/jquery.listmenu-1.1.js"></script> <script type="text/javascript"> $(function(){ $('#myList').listmenu(); }); </script> 追記（js/lib/はあなたのjqueryのソースをおいたパスに変える）する。 ＣＳＳもheader.phpの<header>中に直書きで追記しておく。 <style type="text/css"> .lm-wrapper { margin:0; padding:0; } .lm-wrapper .lm-letters { overflow:hidden; } * html .lm-wrapper .lm-letters { zoom:1; } /* for IE6 so that menu appears under letters */ .lm-wrapper .lm-letters a { font-size:0.9em; display:block; float:left; padding:2px 11px; border:1px solid silver; border-right:none; text-decoration:none; } .lm-wrapper .lm-letters a:hover, .lm-wrapper .lm-letters a.lm-selected { background-color:#eaeaea; } .lm-wrapper .lm-letters a.lm-disabled { color:#ccc; } .lm-wrapper .lm-letters a.lm-last { border-right:1px solid silver; } .lm-wrapper .lm-letter-count { text-align:center; font-size:0.8em; line-height:1; margin-bottom:3px; color:#336699; } .lm-wrapper .lm-menu { border:1px solid silver; border-top:1px solid silver; padding:15px; z-index:10; position:absolute; margin-top:-1px; background:#ffc; display:none; } .lm-wrapper .lm-menu ul li { list-style-type:none; margin-bottom:5px; font-size:0.9em } .lm-wrapper .lm-menu ol li { margin-left:15px; } .lm-wrapper .lm-menu .lm-no-match { color:green; } .lm-wrapper .lm-menu a { text-decoration:none; } .lm-wrapper .lm-menu a:hover { text-decoration:underline; } .lm-wrapper .lm-menu .lm-submenu { overflow:hidden; } </style> splash.phpの中の <div class="col3-mid left">の前に <div id="myList-menu" class="lm-wrapper"> <!-- all of the generated listmenu HTML will be in here --> <ul id="myList"> <li><a href="#">A item</a></li> <li><a href="#">B item</a></li> <li><a href="#">C item</a></li> etc... </ul> </div> を入れる。 うまくいかなかったら、 <script type="text/javascript"> $('#myList').listmenu(); </script> を、splash.phpの中の最後に追記する。
補足
回答ありがとうございます！！ うむむ。。おかきになった手順を一通り試しましたが、 うまくいきません。。 回答いただいて申し訳ないのですが、 もう少し詳しく見直してはいただけないものでしょうか。