• 締切済み

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という3つの画像を入れ、それを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は起動しないようです。

  • jasu
  • お礼率40% (188/466)

みんなの回答

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

ちゃんと見ていませんが… cross-slide.jsとjqueryの読み込み順が、普通で考えると逆では? jqueryを先にしてもダメでしょうか?

jasu
質問者

お礼

すばやいご返答ありがとうございます。 アドバイスされたように投稿欄に記述したcross-slide.jsとjqueryの順番を入れ替えてみました。結果は作動はしなかったので、そもそも投稿欄にjavascriptを書き込んで動くのかなぁと思いhttp://www.tohoho-web.com/js/start.htm#Prepareにある現在時を表示するスクリプトをテスト的に投稿欄に書いてみました。 投稿欄にそのスクリプトを記述したら作動しました。  私が選んでいるテーマのホーム画面は投稿すると自動的に日付がついてサイトに現れるので、どうしても日付入りの日記風になります。サイトの顔の部分が、なんの前置きもなしに日記になってしまうのは嫌だなと思っていたので、日記風の投稿の上に色々な画像を見せるフラッシュを置きたいと思っていたのでした。実は質問のときに書いた命令文と同じものをindex.phpの以下の部分にも書いていました。 <?php get_header(); ?> <?php include (TEMPLATEPATH . '/l_sidebar.php'); ?> <div id="content" class="narrowcolumn"> <div class="navigation"> (ここに質問のときにした命令文を記述していた) <div class="alignleft"><?php posts_nav_link('','','&laquo; Older Entries') ?></div>  つまり、ホーム画面のヘッダーの下にindex.phpに書き込んだフラッシュの枠と、投稿内に同じ枠があったわけですが、理由は分かりませんが、別の投稿欄に試験的に現在時を表示する上のjavascriptを書いた後に、index.phpに書きこんだフラッシュが作動していました! もしかすると読み込みに時間がかかっていただけで、現在時表示javascriptが起動した後に偶然作動し始めたような感じもしますが、とにかく投稿欄にあったフラッシュの命令は、もう不要になったので、削除したら、作動していたindex.phpのフラッシュがまた枠だけを残し起動しなくなりました。 fujillinさんが仰っていたように、cross-slide.jsとjqueryの順番を変えたのは投稿欄にあったほうだけでしたので、それを削除したのが影響を与えたのかもしれませんが、もとに戻そうとあれこれしたのですが、結局、質問前の状態に戻ってしまいました(泣)

関連するQ&A

  • 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という3つの画像を入れ、それを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は起動しないようです。

  • jqueryの質問

    今楽天ショップサイトを制作しています。 htmlとcssの知識はある程度あります。 crossSlideというプラグインを使ったのですが、 javascriptに追記してリンクを新しいタブかウィンドウで開く方法はあるのでしょうか。 どなたかよろしくお願いいたします。 ソースは下記のようにしています。 <script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/jquery.cross-slide.js"></script> <script type="text/javascript"> <!-- $(document).ready(function() { $('#feature').crossSlide({sleep:1.9,fade:0.7}, [ {src: 'http://image.rakuten.co.jp/店名/cabinet/js_images/js_image1.jpg', href: 'http://item.rakuten.co.jp/' }, {src: 'http://image.rakuten.co.jp/店名/cabinet/js_images/js_image2.jpg', href: 'http://item.rakuten.co.jp/' }, {src: 'http://image.rakuten.co.jp/店名/cabinet/js_images/js_image3.jpg', href: 'http://item.rakuten.co.jp/' }, {src: 'http://image.rakuten.co.jp/店名/cabinet/js_images/js_image4.jpg', href: 'http://item.rakuten.co.jp/' }, {src: 'http://image.rakuten.co.jp/店名/cabinet/js_images/js_image5.jpg', href: 'http://item.rakuten.co.jp/' }, {src: 'http://image.rakuten.co.jp/店名/cabinet/js_images/js_image6.jpg', href: 'http://item.rakuten.co.jp/' } ]); }) --> </script>

  • crossSlideがうまく機能しないです;

    簡単な画像切り替えのプラグインとして、 crossSlideを見つけたので使用してみようとしたんですが、 全く何も表示されない状態で困っています。 下記のようにソースは記載しています。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <meta http-equiv="content-language" content="ja" /> <title></title> <meta name="description" content="" /> <meta name="keywords" content="" /> <meta http-equiv="content-style-type" content="text/css" /> <meta http-equiv="content-script-type" content="text/javascript" /> <link href="css/base.css" rel="stylesheet" type="text/css"> <link href="css/index.css" rel="stylesheet" type="text/css"> <script type='text/javascript' src='js/jquery-1.9.1.min.js'></script> <script type='text/javascript' src='js/jquery.cross-slide.js'></script> <script type="text/javascript"> $(function(){ $('#mainvisual').crossSlide({ sleep: 1, fade: 1 },[ { src: 'images/01.jpg' }, { src: 'images/02.jpg' }, { src: 'images/03.jpg' } ]); }); </script> </head> <body> <p>タイトル</p> <div id="mainvisual"> <p>写真</p> </div> </body> </html> cssは何も指定していません。 jsフォルダに、jquery-1.9.1.min.jsファイル、jquery.cross-slide.jsファイルを入れています。 imagesフォルダには、01.jpg、02.jpg、03.jpgを入れてます。 ブラウザには <p>タイトル</p> は表示されるのですが、 div#mainvisualの中の <p>写真</p>の文字は表示されません。 何が原因なのでしょうか。 よければアドバイスの方よろしくお願いします。

  • javascriptファイルは1つに統合できますか

    javascript初心者のため、どなたかご教示いただけるとありがたいです。 html内に外部javascriptファイルを読み込むようにscript要素で記述しているのですが、複数の外部jsを読み込んでおり、可能であればhtml内の記述を簡略化したいと思っております。 <現状> <script type="text/javascript" src="・・・/js/jquery.js" charset="utf-8"></script> <script type="text/javascript" src="・・・/js/jquery.page-scroller.js" charset="utf-8"></script> <script type="text/javascript" src="・・/js/jquery.cookie.js"></script> <script type="text/javascript" src="・・・/js/ui.core.js"></script> <script type="text/javascript" src="・・・/js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="・・・/js/jquery.scrollfollow.js"></script> <script type="text/javascript" src="・・・/js/jquery.bxslider.js"></script> <script type="text/javascript" src="・・・/js/set_slider.js"></script> ・・・ jsに対する基礎的な質問ですが、上記のような複数の外部jsファイルを、1つの外部jsファイルにまとめることは可能なのでしょうか? (単純に1箇所にコピー&ペーストするようなイメージで) お手数ですが、ご教示のほど、宜しくお願い致します。

  • 複数のjavascriptが作動しない

    http://www.coolwebwindow.com/template/public.php 上記無料で配布されているホームページのテンプレートに 下記lightboxを設置しました。 http://lokeshdhakar.com/projects/lightbox2/ このテンプレートには、ページ内リンクへの移動がスムーズになる javascripが設置されているのですが、 このページにlightboxを追加すると スムーズに移動するjavascriptが無効になってしまいます。 <!--ページをスムーズに移動するjs--> <link rel="stylesheet" href="css/common.css" type="text/css" /> <script type="text/javascript" src="js/common.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <!--lightboxのjs--> <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /><script src="js/prototype.js" type="text/javascript"></script> <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="js/lightbox.js" type="text/javascript"></script> どのように対処すればいいのでしょうか? ご教授お願いいたします!

  • スライドショーについて

    ど~もど~も。よろしくです。http://okwave.jp/qa5423914.html 上のURLでの質問はjQueryじゃなくて「TinySlideshow」ってやつだったんだけど、jQueryだったらどうなるのかな? 私も同じような設計で悩んでてピッタシと思うのがやっとあった!と思ってたら・・・jQueryじゃないみたい(泣) 私のしたいことはjQueryを使ったスライドショーで、時間によって色んな画像がころころと変わるようなものを作りたいです。 ソースを貼っておくのでよろしくお願いします。 htmlファイル <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <!-- saved from url=(0051)http://www.frontstyle.com/shopcruise/tokyo_009.html --><HTML xmlns="http://www.w3.org/1999/xhtml"> <HEAD><TITLE>test</TITLE><META content="text/html; charset=utf-8" http-equiv=Content-Type><META content=IE=7 http-equiv=X-UA-Compatible><!--css--> <LINK rel=stylesheet type=text/css href="css/style.css"> <LINK rel=stylesheet type=text/css href="css/ie6.css"> <LINK rel=stylesheet type=text/css href="css/backnumber.css"> <LINK rel=stylesheet type=text/css href="css/lightview.css"> <LINK rel=stylesheet type=text/css href="css/shopcruise.css"> <!--js--> <SCRIPT type=text/javascript src="js/heightLine.js"></SCRIPT> <SCRIPT type=text/javascript src="js/jquery-1.3.2.js"></SCRIPT> <SCRIPT type=text/javascript> jQuery.noConflict(); </SCRIPT><SCRIPT type=text/javascript src="js/jquery.easing.1.3.js">/SCRIPT> <SCRIPT type=text/javascript src="js/jquery.galleryview-1.1.js"></SCRIPT><SCRIPT type=text/javascript src="js/jquery.timers-1.1.2.js"></SCRIPT><SCRIPT type=text/javascript> jQuery(document).ready(function(){jQuery('#slide').galleryView({ panel_width: 638,panel_height: 300,frame_width: 80,frame_height: 38,transition_interval: 3000,overlay_height: 0 });}); </SCRIPT> <!--[if lt IE 7]><script type="text/javascript" src="js/iepngfix.js"></script><![endif]--> <SCRIPT type=text/javascript src="js/heightLine.js"></SCRIPT> <SCRIPT type=text/javascript src="js/swapimage.js"></SCRIPT> <SCRIPT type=text/javascript src="js/prototype.js"></SCRIPT> <SCRIPT type=text/javascript src="js/scriptaculous.js"></SCRIPT> <SCRIPT type=text/javascript src="js/lightview.js"></SCRIPT> <!--//js--></HEAD><BODY><DIV id=slide class=galleryview> <!--スライドショーここからだよ--> <DIV id=gallery_box> <!--メイン画像ここからだよ--> <DIV class=panel><IMG alt="○○○ src="./images/1.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/2.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/3.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/4.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/5.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./images/6.jpg" width=640 height=300> </DIV> <DIV class=panel><IMG alt="○○○" src="./imagess/7.jpg" width=640 height=300> </DIV> <!--メイン画像ここまでだよ--> <!--メイン画像ここまでだよ--><!--サムネイルここからだよ--> <UL class=filmstrip> <LI><IMG alt="アバハウス・ドゥヴィネット リュクス" src="./images/image_tokyo_009_7s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネット リュクス" src="./images/image_tokyo_009_2s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネット リュクス" src="./images/image_tokyo_009_3s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネット リュクス" src="./images/image_tokyo_009_4s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネット リュクス" src="./images/image_tokyo_009_5s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネット リュクス" src="./images/image_tokyo_009_6s.jpg"> <LI><IMG alt="アバハウス・ドゥヴィネット リュクス" src="./images/image_tokyo_009_1s.jpg"> </LI></UL><!--サムネイルここまでだよ--> </DIV><!--スライドショーここまでだよ--> </DIV></BODY></HTML> 長くなっちゃってごめんなさい。 困っているので、お願いします。

  • Camera slideshowの使い方について

    jQueryプラグイン"Camera slideshow"を試しに使ってみたのですが、まったく動きません。 どこが間違っているのか見当もつかなく困っています。 【head内】 <head> <!--省略--> <link rel="stylesheet" id="camera-css" href="/camera.css" type="text/css" media="all"> <script type="text/javascript" src="/js/jquery.min.js"></script> <script type="text/javascript" src="/js/jquery.mobile.customized.min.js"></script> <script type="text/javascript" src="/js/jquery.easing.1.3.js"></script> <script type="text/javascript" src="/js/camera.js"></script> <script type="text/javascript" charset="utf-8"> <script type="text/javascript"> jQuery(function(){ jQuery('#camera').camera(); }); }); </script> </head> 【HTML部】 <div class="camera_wrap camera_blue_skin" id="camera"> <div data-src="../images/slides/bridge.jpg"></div> <div data-src="../images/slides/leaf.jpg"></div> <div data-src="../images/slides/road.jpg"></div> </div> この情報だけで質問をするのが失礼だったらすいません。 初心者なもので誠に申し訳ございませんが、改善方法をどなたかご教授いただければ大変助かります。 よろしくお願いしますm(_ _)m

  • prototype+jquery+プラグイン

    prototype.jsとjqueryとプラグイン系の読み込み方が良くわかりません。 クロスブラウザ対応のMP3プレイヤーを導入したく追加したのですが 順番を並べ変えたりいろいろしましたが導入する事ができずにこまっています。 何かいい方法はないでしょうか? エラーの内容も順序によって様々です・・・・ <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="lightbox.js"></script> <script type="text/javascript" src="lightbox_shortcut_keys_addon.js"></script> <script type="text/javascript" src="slide3/script/jquery-1.2.2.js"></script> <script type="text/javascript" src="jquery.cycle.all.js"></script> <script type="text/javascript" src="jquery.easing.1.3.js"></script> <script type="text/javascript" src="jquery.jcarousel.pack.js"></script> <script type="text/javascript"> jQuery.noConflict(); var $j = jQuery; </script> 以下追加===================================================== <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" src="jquery.compat-1.3.js"></script> <script type="text/javascript" src="jquery.jplayer.min.js"></script> <script type="text/javascript"> jQuery.noConflict(); var $j = jQuery; $j(document).ready(function(){ $("#mp3").jPlayer(); }); </script>

  • jquery.bgSwitcherが設置できない

    私は、いまbgSwitcherの設置ができなくて悩んでいます。 「fadeOut」を利用したいのですが、画像は表示されるのですが、そこから何も動きません。 だれか分かる方がいらっしゃれば是非教えていただきたいので、宜しくお願いします。 ▼私の現在の状況************************************************************ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <TITLE>○○○</TITLE> <META name="keywords" content="○○○"> <META name="description" content="○○○"> <meta name="robots" content="all" /> <link href="css/style.css" rel="stylesheet" type="text/css" media="all" /> <script type="text/javascript" src="js/script.js"></script> <script type="text/javascript" src="js/lightbox/js/prototype.js"></script> <script type="text/javascript" src="js/lightbox/js/scriptaculous.js?load=effects"></script> <script type="text/javascript" src="js/lightbox/js/lightbox.js"></script> <link rel="stylesheet" href="js/lightbox/css/lightbox.css" type="text/css" media="screen"> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.bgSwitcher.js"></script> <script> jQuery(document).ready(function($) { $('#fadeOut').bgSwitcher({ images: ['images/image1.jpg','images/image2.jpg','images/image3.jpg','images/image4.jpg'], interval: 2000 }); }); </script> </head> <body> <div id="wrap"> <div id="container"> | 途中は省略 ↓ <div id="fadeOut" class="bg"><p><img src="images/top_main.png" width="670" height="450" /></p></div> | ↓ 以下省略。 ちなみに「class="bg"」は、 .bg {  width: 640px;  height: 415px;  margin: 0;  padding: 0; } こういった感じです。 *************************************************************************** これで、なぜ動かないのでしょうか? このプラグインは、jquery.bgSwitcher.js 自体を何か編集する必要があるのでしょうか? 開発された方のサイトを隅から隅まで見ても分かりませんでした。 ▼開発者様のサイト http://rewish.org/javascript/jquery_bg_switcher ちなみに、jQueryのバージョンは、jquery-1.7.1.minです。 どなたか、ご助力をお願い致します。

  • JavaScriptのソースについて

    マウスでクリックすると画像やテキストがスライドするようなサイトを作りたいのですが、 JavaScriptのソースがうまく機能しません。 いろいろ調べたり、試したりしたのですが、解決しなかったのでご回答頂けれと思います。 <script language="javascript" type="text/javascript" src="js/jquery.js"></script> <script language="javascript" type="text/javascript" src="js/jquery.flow.1.2.min.js"></script> <script language="javascript" type="text/javascript"> <!-- $(document).ready(function(){ $("#myController_h").jFlow({ slides: ".loves_slide_h", controller: ".jFlowControl_h", // must be class, use . sign slideWrapper : "#jFlowSlide_h", // must be id, use # sign selectedWrapper: "jFlowSelected", // just pure text, no sign width: "680px", height: "250px", duration: 400, prev: ".jFlowPrev_h", // must be class, use . sign next: ".jFlowNext_h" // must be class, use . sign }); }); //--> </script> ソースはこんな感じで作ってみたのですが、お分かりになる方がいらっしゃいましたらよろしくお願い致します。

専門家に質問してみよう