• 締切済み

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を宣言・・・・ このへんがキーかと思いますが、 うむむ。。よくわかりません。。 なにとぞ、「私の知りたい事」に対する 御回答を宜しくお願いします。

みんなの回答

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.1

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の中の最後に追記する。

exjapan
質問者

補足

回答ありがとうございます！！ うむむ。。おかきになった手順を一通り試しましたが、 うまくいきません。。 回答いただいて申し訳ないのですが、 もう少し詳しく見直してはいただけないものでしょうか。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • javascriptライブラリの使い方

    aa.js bb.js cc.js の3つのjavascriptを使ったサイトを作成中です。 ヘッダーに <script src="aa.js" type="text/javascript"></script> <script src="bb.js" type="text/javascript"></script> <script src="cc.js" type="text/javascript"></script> と記載し、「aa.js bb.js cc.js 使う前提のスクリプト」をサイト上に記載しているのですが、aa.js bb.js cc.js のそれぞれが重いため、サイト記載のスクリプトがaa.js、bb.js、cc.jsより先に読み込まれてしまい、思ったような表示が出来ません。 (cc.jsが読み込まれないままの状態でサイトのスクリプトを読み終わってしまう) そこで調べてみると、下記のようなライブラリを発見しました。 http://notnil-creative.com/blog/archives/1361 このライブラリ(script.js)を使うと、通常は以下のように書くJavascriptの読み込みが、 <script src="jquery.js"></script> <script src="my-jquery-plugin.js"></script> <script src="my-app-that-uses-plugin.js"></script> 下記のように書くことができるそうです。 $script('jquery.js', function () { $script('my-jquery-plugin.js', function () { $script('my-app-that-uses-plugin.js') }) }) この書き方で、ページのレンダリングを阻害せず、非同期にJavascriptを読み込むことができ、なおかつ「jQueryが読み込まれてからjQueryプラグインを読み込み、そのあとウェブサイト用のスクリプトを読み込む」というような依存関係のある複数のJavascriptファイルの読み込みにも対応できちゃいます。 という優れものであり、私の要求にぴったりと思いました。 早速、http://notnil-creative.com/blog/archives/1361のページからscript.jsをダウンロードしたのですが、使い方がわかりません。 例ではヘッダーに $script('jquery.js', function () { $script('my-jquery-plugin.js', function () { $script('my-app-that-uses-plugin.js') }) }) と記載すればOKと書いてあります。 ただ、この記入方法で動くようにするためには、$scriptがscript.jsに連動していることを記載すべき だと思いますが、javascriptでそのような例を見たことがなく困惑しています。 このスクリプトの使い方(ヘッダーの記入方法)について、ご教授頂けませんでしょうか? 宜しくお願い致します。

  • wordpressでJavascriptのフラッシュを作動させるには？

    お世話になっております。最近、必要にせまられウェブサイトを開設しなくてはならなくて、wordpressを利用しております。色々なサイトやワードプレスの説明を読んだのですが、Javascriptの起動の仕方がわかりません。ワードプレスのフォーラムで質問してみたりもしたのですが、ワードプレス固有の問題というよりも、私のプログラミングの知識がないため、より一般的なJavascriptの技術をここで聞けるのではないかと思いました。そしてwebで以下のサイトをみつけ、今の私の知識でその指示通りにしてみました。 やりたいことは、サイトのトップページのヘッダー下に画像が現れたり消えたり・・・というフラッシュの窓を設置することです。 まずは​http://km33.net/2008/09/crossslide.htmlが説明しているように、Javascriptのファイルをダウンロードしました。 jquery.cross-slide.jsとjquery-1.3.2.min.jsをダウンロードし、それをftpにて&http://example.co.jp/woadpressの直下に,この2つのファイルをアップロードしました。さらにimagesというファイルを作り、そのなかに、1.jpg, 2.jpg,3,jpgという３つの画像を入れ、それをwordpressフォルダのすぐ直下にアップロード。 そして投稿の編集画面のHTMLの投稿欄から、 <script type="text/javascript" src="jquery.cross-slide.js" ></script> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <h1>Static cross-fade</h1> <style type="text/css"> #test1 { border: 2px solid #555; width: 300px; height: 225px; } </style> <script type='text/javascript' id='source-test1'>//<![CDATA[ $(function() { $('#test1').crossSlide({ sleep: 2, //sec fade: 1 //sec }, [ { src: 'images/1.jpg', dir: 'up' }, 　{ src: 'images/2.jpg', dir: 'down' }, 　{ src: 'images/3.jpg', dir: 'up' } ]); }); //]]></script> <div id='test1'>Loading…</div> と書いたのですが、プログラムが作動しません。 これらの命令文は、ほぼコピペです。それにも関わらずjavascriptが起動しないのは、私が命令文を書きこむ場所がわからないからとほぼ原因がはっきりしております。最初は、プラグインと同じ要領で、投稿ページのhtml欄に命令を書き込みました。しかしそれだとjavascriptは起動しないようです。

  • WordPressでjQueryが自動読込されない

    【 WordPress 4.8 】 WordPress.orgでオリジナルテーマをつくっているのですが headにjQueryを呼び出すコードが出てきておりません。 テーマをTwentySeventeenなどに切り替えるとjQueryは読み込まれてます。 ちなみに、今年初めに作成したオリジナルテーマでは jQueryが自動で読み込まれてました。 WordPressではjQueryは自動で読み込まれるものと思っておりましたが 仕様が変わったのでしょうか、それとも、何か別の要因が考えられるのでしょうか

  • EXCELデータベースからjavascript表示

    EXCELデータベースからjavascript表示 質問と選択肢、答えの番号をあらかじめEXCELに保存しておいてそれをデータベース接続して HTMLの画面に表示させる機能の追加です。 現在はソースコードに直接記述している部分をEXCELのワークシートからデータを取得してくる機能がほしいです。」 この方法だとプログラミングに詳しくない人でもソースコードを直接触らずにEXCELのワークシートを編集すれば済むと思います。 サンプルコード index.html ------------------------------ <!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <title>CSVファイルを使用した表・グラフ</title> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="js/jquery.csv2table-0.02-b-4.3.js" type="text/javascript" charset="utf-8"></script> <script> $(function(){ $('#table').csv2table('media/dete_2.csv'); }); </script> </head> <body> <h1><img src="images/logo.png" width="487" height="180" alt="CSVファイルを使用した表・グラフ"></h1> <div id="table"></div> </body> </html> --------------------------------https://ccchart.com/lib/jquery/plugin/csv2table/v002/test.htm jquery.csv2table-0.02-b-4.4.jshttps://ccchart.com/lib/jquery/plugin/csv2table/v002/js/jquery.csv2table-0.02-b-4.4.js AsarKingChangさんお願いします。 よろしくお願いします。GWは終わりました。めいいっぱい楽しめましたでしょうか？　また遊んでください。よろしくお願いします。

  • wordpressでJavascriptのフラッシュを作動させるには？

    お世話になっております。最近、必要にせまられウェブサイトを開設しなくてはならなくて、wordpressを利用しております。色々なサイトやワードプレスの説明を読んだのですが、Javaの起動の仕方がわかりません。ワードプレスのフォーラムで質問してみたりもしたのですが、ワードプレス固有の問題というよりも、私のプログラミングの知識がないため、より一般的なJavaの技術をここで聞けるのではないかと思いました。そしてwebで以下のサイトをみつけ、今の私の知識でその指示通りにしてみました。 やりたいことは、サイトのトップページのヘッダー下に画像が現れたり消えたり・・・というフラッシュの窓を設置することです。 まずはhttp://km33.net/2008/09/crossslide.htmlが説明しているように、Javaのファイルをダウンロードしました。 jquery.cross-slide.jsとjquery-1.3.2.min.jsをダウンロードし、それをftpにてhttp://example.co.jp/woadpressの直下に,この2つのファイルをアップロードしました。さらにimagesというファイルを作り、そのなかに、1.jpg, 2.jpg,3,jpgという３つの画像を入れ、それをwordpressフォルダのすぐ直下にアップロード。 そして投稿の編集画面のHTMLの投稿欄から、 <script type="text/javascript" src="jquery.cross-slide.js" ></script> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <h1>Static cross-fade</h1> <style type="text/css"> #test1 { border: 2px solid #555; width: 300px; height: 225px; } </style> <script type='text/javascript' id='source-test1'>//<![CDATA[ $(function() { $('#test1').crossSlide({ sleep: 2, //sec fade: 1 //sec }, [ { src: 'images/1.jpg', dir: 'up' }, 　{ src: 'images/2.jpg', dir: 'down' }, 　{ src: 'images/3.jpg', dir: 'up' } ]); }); //]]></script> <div id='test1'>Loading…</div> と書いたのですが、プログラムが作動しません。 これらの命令文は、ほぼコピペです。それにも関わらずjavaが起動しないのは、私が命令文を書きこむ場所がわからないからとほぼ原因がはっきりしております。最初は、プラグインと同じ要領で、投稿ページのhtml欄に命令を書き込みました。しかしそれだとjavaは起動しないようです。

  • wordpressでハンバーガーメニュー

    今、Wordpressでこちらのハンバーガーメニューをつけようと頑張っています。 http://www.misallychan.com/entry/2016/07/27/185000 それで、jQueryの「$」を「jQuery」に変換しているんですが、 すでに元のコードが「jQuery(function($){」こんな感じのコードの場合 Wordpressでは、どんな文字に変更すればいいですか？ よろしくお願いします。

  • 【javascript】２つ同時に上手く動かない

    javascript初心者です。 現在作成している画面に２つのjavascriptを動かしたいと思っております。 しかしながら、一つずつでは動くのですが、同時に表示すると上手く動作しません。 いい方法などありましたらご教授お願い致します。 【htmlのヘッド】 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.coda-slider-2.0.js" charset="utf-8"></script> <script type="text/javascript" src="js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="js/sm_scroll.js"></script> <script type="text/javascript" src="js/jcaption.min.js"></script> <script type="text/javascript" charset="utf-8"> $(function(){ $('#coda-slider-1').codaSlider({ autoSlide:false, autoHeight:false, autoSlideStopWhenClicked:false, autoSlideInterval:10000, firstPanelToLoad:1, dynamicArrows: false, }); }); </script> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script> 【上部のjavascript】 Coda-Slider 参照URL：http://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_slider/coda_slider.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB 【下部のjavascript】 litebox 参照URL：http://lokeshdhakar.com/projects/lightbox2/ javascript内が初期化されているのが問題なのでしょうか？ 解決の方法などありませんでしょうか？ 以上、宜しくお願い致します。

  • WordPressでjQuery-UIの使い方

    WordPressでjQuery-UIの使い方を教えてください。 現在、WordPressで作ったサイトにフローティングメニューを取り入れたいと思っています。 フローティングメニューを入れるにあたり、jQuery-UIを読み込まなければならないのですが ちゃんと読み込まれていないようです。 WordPressではなくテストでサイトを作り、読み込ませるとちゃんと動作するので、 WordPress特有の問題かと思います。 WordPressでjQuery-UIを読み込ませる方法を教えてください。 下記に参考にしたサイトと、ソースを記述しました。 -------WordPressのヘッダ内の記述と参考にしたサイト------- <?php wp_deregister_script('jquery.ui.core.min'); wp_enqueue_script('jquery.ui.core', get_bloginfo('template_url') . '/js/jquery.ui.core.js'); ?> wp_deregister_scriptでWordPressのjquery.uiを見に行かないようにして、 wp_enqueue_scriptでダウンロードしてきたＵＩを見に行くようにしてあります。 参考にしたサイト（jQuery-UI） http://d.hatena.ne.jp/deeeki/20090907/wp_enqueue_jquery_ui フローティングメニューについて参考にしたサイト http://www.skuare.net/test/jScrollFollow.html

    • ベストアンサー
    • PHP
  • wordpressでcookie.jsを使う

    wordpressの初心者です。 こちら http://blog.idea-clippin.com/?p=129 の機能をwordpressで作っているサイトに搭載したいと考えています。 jsは別の部分でつかっていて動くので indexと同じ階層にjsフォルダを作りその中にjquery.layerBoard.jsをつっこみ imgフォルダに同じ画像名の画像を。 hederとbodyにコピペをしたのですが、文字しか出なかったのでおそらく欠けているのはcookie.jsと考えています。 cookie.jsを入れれば使えるとおもうのですが、紹介サイトでも省略されていていまいちよくわかりませんでした。 https://github.com/carhartl/jquery-cookieは見てみたもののリンク切れなのかダウンロードボタンはありませんでした。 ワードプレスにcookie.jsを導入するにはどのような方法がありますか？

  • jQuery Mobile　バージョン

    jQuery Mobileでスマホサイトを作成しているのですが 現在は <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"> </script> <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"> </script> と言うソースを使っていたのですが http://www.buildinsider.net/web/jquerymobileref/24 を見たら、私と違いました。 私のバージョンが古いのでしょうか？ <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"> </script> へ 書き換えたほうが良いのでしょうか？

    • ベストアンサー
    • CSS

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する