WordPressでjqueryを使う方法

このQ&Aのポイント
  • WordPress初心者のためのjqueryの使い方を解説します。jqueryを使うためには、元ファイルのhtmlの中にjqueryの読み込みリンクを追加する必要があります。
  • また、jqueryを使った固定ページを作成する場合は、特定のプラグインやライブラリを追加する必要があります。さらに、必要な設定や記述方法についても詳しく説明します。
  • ヘッダーにjqueryのコードを貼り付けることで、ヘッダー全体にjqueryを適用することができます。また、特定の要素にjqueryを適用する場合は、その要素のIDやクラスを指定する必要があります。
回答を見る
  • ベストアンサー

wordpressにjqueryを使う

wordpress初心者の者です。 現在wordpressで海外のテンプレートを使っています。 その中で、wookmarkというjqueryを固定ページに使いたいのですが、 jqueryの元ファイルのhtmlのコードの中に、下記のようなリンク部分があるのですが、 1行目の「jquery.min.js」は読み込む必要ありますでしょうか? <!-- include jQuery --> <script src="../libs/jquery.min.js"></script> <!-- Include the imagesLoaded plug-in --> <script src="../libs/jquery.imagesloaded.js"></script> <!-- Include the plug-in --> <script src="../jquery.wookmark.js"></script> またその下に下記のような記述があるのですが、これはヘッダーに 貼付ければよろしいのでしょう?? ご存知の方教えてください。 <!-- Once the page is loaded, initalize the plug-in. --> <script type="text/javascript"> (function ($){ $('#tiles').imagesLoaded(function() { // Prepare layout options. var options = { autoResize: true, // This will auto-update the layout when the browser window is resized. container: $('#main'), // Optional, used for some extra CSS styling offset: 2, // Optional, the distance between grid items itemWidth: 210, // Optional, the width of a grid item fillEmptySpace: true // Optional, fill the bottom of each column with widths of flexible height }; // Get a reference to your grid items. var handler = $('#tiles li'), filters = $('#filters li'); // Call the layout function. handler.wookmark(options); /** * When a filter is clicked, toggle it's active state and refresh. */ var onClickFilter = function(event) { var item = $(event.currentTarget), activeFilters = []; if (!item.hasClass('active')) { filters.removeClass('active'); } item.toggleClass('active'); // Filter by the currently selected filter if (item.hasClass('active')) { activeFilters.push(item.data('filter')); } handler.wookmarkInstance.filter(activeFilters); } // Capture filter click events. filters.click(onClickFilter); }); })(jQuery); </script>

noname#199277
noname#199277

質問者が選んだベストアンサー

  • ベストアンサー
  • ONEONE
  • ベストアンサー率48% (279/575)
回答No.1

>1行目の「jquery.min.js」は読み込む必要ありますでしょうか? wookmarkはjQueryのプラグインという位置付けですので、「はい」 ただし、wordpressがもともと読み込んでいるものがあれば新たに読み込む必要はありません。 >またその下に下記のような記述があるのですが、これはヘッダーに 貼付ければよろしいのでしょう?? そうですが、optionsでところどころオプション的な自分で設定する記述もありますので、ご自分の環境にあうように設定してください。

noname#199277
質問者

お礼

ご回答ありがとうございました。 おかげさまでたいへん参考になりました。 また機会がありましたら、よろしくお願いします。

関連するQ&A

  • mootoolsとjQueryの共存がうまくいかない。

    mootoolsとjQueryの共存がうまくいかない。 ▼共存参考サイト http://h2ham.seesaa.net/article/106053238.html 参考サイトを見て、共存したいのですが、Operaでうまくいきません。 IE、fox、safari、chromeではうまくいくのですが・・・ $をj$などに変えてみたりいろいろ試しましたがうまくいきませんでした。 お力添えよろしくお願いします。 <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="../js/yuga.js" charset="utf-8"></script> <script type="text/javascript" src="../js/jquery-easing-1.3.pack.js"></script> <script type="text/javascript" src="../js/jquery-easing-compatibility.1.2.pack.js"></script> <script type="text/javascript" src="../js/coda-slider.1.1.1.pack.js"></script> <script type="text/javascript"> var theInt = null; var $crosslink, $navthumb; var curclicked = 0; theInterval = function(cur){ clearInterval(theInt); if( typeof cur != 'undefined' ) curclicked = cur; $crosslink.removeClass("active-thumb"); $navthumb.eq(curclicked).parent().addClass("active-thumb"); $(".stripNav ul li a").eq(curclicked).trigger('click'); theInt = setInterval(function(){ $crosslink.removeClass("active-thumb"); $navthumb.eq(curclicked).parent().addClass("active-thumb"); $(".stripNav ul li a").eq(curclicked).trigger('click'); curclicked++; if( 5 == curclicked ) curclicked = 0; }, 15000); }; $(function(){ $("#main-photo-slider").codaSlider(); $navthumb = $(".nav-thumb"); $crosslink = $(".cross-link"); $navthumb .click(function() { var $this = $(this); theInterval($this.parent().attr('href').slice(1) - 1); return false; }); theInterval(); }); </script> <script type="text/javascript"> <!-- jQuery.noConflict(); var j$ = jQuery; --> </script> <script src="../js/mootools.js" type="text/javascript"></script> <script src="../js/menu.js" type="text/javascript"></script> <script src="../js/main.js" type="text/javascript"></script>

  • IEのみjqoueryスライダーが動かない

    いつもお世話になっています。 Wordpressでサイトを構築しています。 firefoxやsafariでは動作確認がとれいていますがieのみ動きません。 なぜでしょうか? <script src="/js/jquery-1.6.2.min.js"></script> <script src="/js/jquery.easing.1.3.js"></script> <script src="/js/jquery.bxslider.min.js"></script> <?php wp_head(); ?> <script type="text/javascript"> $(function(){ var slider = $('#slider8').bxSlider({ auto: true, pager: true, speed: 1000, controls: true, }); $('.thumbs a').click(function(){ var thumbIndex = $('.thumbs a').index(this); slider.goToSlide(thumbIndex); $('.thumbs a').removeClass('pager-active'); $(this).addClass('pager-active'); return false; }); $('.thumbs a:first').addClass('pager-active'); }); jQuery(function() { var topBtn = jQuery('.tothetopfixed'); //最初はボタンを隠す topBtn.hide(); //スクロールが100に達したらボタンを表示させる jQuery(window).scroll(function () { if (jQuery(this).scrollTop() > 100) { topBtn.fadeIn(); } else { topBtn.fadeOut(); } }); //スクロールしてトップに戻る //500の数字を大きくするとスクロール速度が遅くなる topBtn.click(function () { jQuery('body,html').animate({ scrollTop: 0 }, 500); return false; }); }); </script> よろしくお願いします。

  • CakePHPでjQueryを使うには

    ローカル環境にてCakePHPでwebサービスを制作しています。 ブラウザでviewを確認しながら構築しているのですが、この環境でgoogleAPIのjQueryを動作させることは出来るのでしょうか? もしできるとしたら、 <?php echo $this->Html->script('http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js');?> <script type="text/javascript"> jQuery('#more').click(function(){$('innerboxes').clone().appendTo('box')}); </script> で動かないのは何が問題なのでしょうか? また、googleAPIを使わない方法でも以下のように試しましたが、これも動かない原因はどこにあるのでしょうか? jQueryのホームページでver1.5のソースをコピーし作ったjQuery1.5.jsを、 webroot /jsに入れる。 Controllerに var $helpers=array('Ajax','Javascript'); を記述。 Viewに、 <?php echo $javascript->link('jQuery.1.5.js'); ?> <script type="text/javascript"> jQuery('#more').click(function(){$('innerboxes').clone().appendTo('box')}); </script> 宜しくお願いします。

  • 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が動きません。

    表題のとおりです。 fademover(http://www.detelu.com/fademover/)を動かそうと思って 導入しても動いてくれません。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="jquery.fademover.js"></script> <script> $(function(){ $('body').fadeMover({'effectType': 2,'inSpeed': 5000}); }); </script> の部分。 Chromeだと Uncaught TypeError: Object [object Object] has no method 'fadeMover' index.html:14 (anonymous function) index.html:14 n ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2 o.fireWith ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2 e.extend.ready ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2 c.addEventListener.B Safariだと TypeError: 'undefined' is not a function (evaluating '$('body').fadeMover({'effectType': 2,'inSpeed': 5000})') と出ます。 jsやjqueryはあまりいじったことないので 手が出ない状態です。 よろしくお願いします。

  • JQUERYのいくつかが順番によって機能しなくなり

    JQUERYのいくつかが順番によって機能しなくなります。 干渉を起こしているのかと思うのですが、どうすれば解決できるのでしょうか?var j = jQuery.noConflict();などをやってみましたが、知識不足でうまくいきませんでした。 ・top messageのみ動く。 var j = jQuery.noConflict(); <!--page-scroll--> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/jquery.page-scroller.js"></script> ・fontsizeとtop messageのみ動く。 <!--script--> <a href="#main" class="gotop"></a> <!--top message--> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/message.js"></script> <!--fontsize--> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/jquery.textresizer.min.js"></script> <script> $(function(){ $("h1+ul a").textresizer({ target: "#contentsrighttop,.copyright,address,div#list div p",type: "fontSize",// サイズ指定方法 sizes: [ "13px", "15px", "20px"],// フォントサイズ selectedIndex: 1 // 初期表示 }); }); </script> <!--page-scroll--> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/jquery.page-scroller.js"></script> <!--script end--> <!--fontsize--> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/jquery.textresizer.min.js"></script> <script> jQuery(function(){ jQuery("h1+ul a").textresizer({ target: "#contentsrighttop,.copyright,address,div#list div p",type: "fontSize",// サイズ指定方法 sizes: [ "13px", "15px", "20px"],// フォントサイズ selectedIndex: 1 // 初期表示 }); }); </script> <!--top message--> <script type="text/javascript" src="js/jquery-1.8.3.js"></script> <script type="text/javascript" src="js/message.js"></script> <!--script end-->

  • 640px以下の時のみjQueryを有効にしたい

    JQueryで、以下のソースでやりたい事が実現できました。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> $(function() { $('nav ul').hide(); $('.menu-icon').on('click', function() { var $navList = $(this); if($navList.hasClass("current")) { $('nav ul').slideUp(500,function(){ $navList.removeClass("current"); }); } else { $('nav ul').slideDown(500,function(){ $navList.addClass("current"); }); }; return false; }); }); </script> が、640px以上のときも、効いてしまって「nav ul」が隠れてしまいます。そこで、 <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> jQuery(document).ready(function($) { if (window.matchMedia( '(max-width: 640px)' ).matches) { 「上記javascript」 } </script> と、切り分けをし640px以下のときだけ、jqueryが聞くようにしたつもりなのですが、以下の問題が発生しました。 640px以上の場合はjavascriptが無効になったのですが、640px以下の場合には、以下の問題が発生しました。 ・640px以上の場合はhideされることなく表示されるようになったのですが、640px以下の場合にも.hideされずに開きっぱなし ・.menu-iconでhideのオン・オフが切り替えられたのですが、無反応になりました。 つまり、全体にjavascriptが全く聞いていない。640px以下の時のみjQueryを有効にするにはどうしたらいいのでしょうか?教えてください。 以上、よろしくおねがいします。

  • jQueryタブメニュー内へのリンク方法。

    javascript勉強中です。 調べたり試してみたりしたのですが、なかなか上手くいかず質問させていただきました。 下記のjQueryを使ったタブメニューなのですが、他のページからタブ内(tab1~tab3)へリンクさせるjavascriptの書き方や方法を教えていただけないでしょうか。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> $(function($) { $(".area").hide(); $(".tab_content").hide(); }); jQuery.event.add(window,"load",function(){ $(".tab01 li:first-child").addClass("active"); $(".area:first-child").show(); $(".tab01 li").each(function(i){ $(this).click(function(){ $(".content .area").hide(); $(".content .area").eq(i).fadeIn(400); if($(this).hasClass("active")){ $(".tab01 li").removeClass("active");} else {$(".tab01 li").removeClass("active"); $(this).addClass("active"); } }); }); }); </script> </head> <body> <div> <ul class="tab01"> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> <div class="content"> <div class="area" id="tab1">tab1</div> <div class="area" id="tab2">tab2</div> <div class="area" id="tab3">tab3</div> </div> </div> </body> </html> どうぞ宜しくお願い致します。

  • mootoolsとjQueryの共存がうまくいかず、エラーが出る。

    mootoolsの「SlideIn」とjQueryの「lavalamp」を同時に動かしたいのですが、上手くいきません。。 共存がうまくいってないのとエラーがでます。 ・SlideIn ttp://solidstate.jp/ImageDisplay/effectAction/script_66.html ・lavalamp ttp://www.gmarwaha.com/blog/2007/08/23/lavalamp-for-jquery-lovers 共存させるために、以下のURLを参考にしてます。 ・jQuery⇒mootoolsの共存 ttp://h2ham.seesaa.net/article/106053238.html ・jQueryとprototype.jsを共存させる方法 ttp://www.css-lecture.com/log/javascript/029.html 最後の「この記述ですとjQueryの$をj$に書き換えなくて大丈夫です。」の部分の以下を使用してます。 <script type="text/javascript"> jQuery.noConflict()(function($){ var j$ = jQuery; </script> 共存するためには「jquery_1.3.2.min.js」の下に、「jQuery.noConflict()(function($){」をもってくるようですが、 jqueryの方は順番の指定「jquery本体⇒easing⇒lavalamp」があるため順番変更ができません。。 そして、Firefoxでjavaエラーがでています。上が出ているエラー表示で、下がエラーの箇所です。 ・missing } after function body var j$ = jQuery; ・$(".lavaLamp") is null $(".lavaLamp").lavaLamp({ ・$('startFx') is null $('startFx').addEvent('click', function (e){ 共存させず、mootools、jqueryどちらも単体で動かした場合、正常動作しています。(エラーはでますが・・) 分かる方いましたら、回答おねがします。 javascript部分--------------------------------------------------------------------------------------------------------------------------------------------- <!--jquery--> <script type="text/javascript" src="jquery_1.3.2.min.js"></script> <script type="text/javascript" src="jquery.easing.1.1.js"></script> <script type="text/javascript" src="jquery.lavalamp.js"></script> <script type="text/javascript"> $(function() { $(".lavaLamp").lavaLamp({ fx: "backout", speed: 800, click: function(event, menuItem) { return true; } }); }); </script> <!--共存記述--> <script type="text/javascript"> jQuery.noConflict()(function($){ var j$ = jQuery; </script> <!--mootools--> <script type="text/javascript" src="mootools.v1.11.js"></script> <script type="text/javascript"> var SlideIn = { start: function () { var delay = 200; $$('.illust').each(function (el) { // ターゲットに付加するクラス名 el.setStyles({ 'position': 'relative', 'top': 20, //要素の開始位置 'opacity': 0 //要素の最初のアルファ }); var fx = el.effects({transition:Fx.Transitions.Back.easeOut}); fx.start.delay(delay, fx, { 'opacity': 1, //要素の最後のアルファ 'top': 0 //要素の終点の位置 }); delay += 200; }); } }; window.addEvent('domready', function () { SlideIn.start(); $('startFx').addEvent('click', function (e){ new Event(e).stop(); SlideIn.start(); }); }); </script>

  • 画像がフェードインしてからフェードアウトする

    <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <title>Document</title> <script src="jquery.min.js"></script> <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script> <script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script> <script> $(function(){ var $grid = $('.grid').masonry({ // options itemSelector: 'none', columnWidth: '.grid__item', gutter: 20, stagger: 30, percentPosition: true, visibleStyle: { transform: 'translateY(0)', opacity: 1 }, hiddenStyle: { transform: 'translateY(100px)', opacity: 0 }, }); var msnry = $grid.data('masonry'); $grid.imagesLoaded(function() { $grid.masonry( 'option', { itemSelector: '.grid__item' }); var $items = $grid.find('.grid__item'); $grid.masonry( 'appended', $items ); }); var nextSlugs = [ 'page2.html', 'page3.html' ]; function getPath() { var slug = nextSlugs[ this.loadCount ]; if( slug ) { return 'https://www.miso.blog/demo/masonry_infinitescroll/'; } } }); </script> </head> <body> <h1>Infinite Scroll - Masonry image grid</h1> <ul class="grid"> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> <li class="grid__item fadein"> <img src="sdfsafasfas.png"></li> </ul> </div> <script> $(function(){ $(window).scroll(function (){ $('.fadein').each(function(){ var position = $(this).offset().top; var scroll = $(window).scrollTop(); var windowHeight = $(window).height(); if (scroll > position - windowHeight + 200){ $(this).addClass('active'); } }); }); }); </script> </body> </html> ------------------------------------------------------------------------------- @charset "utf-8"; body { font-family: sans-serif; line-height: 1.4; font-size: 18px; padding: 20px; max-width: 640px; margin: 0 auto; } .grid { max-width: 1200px; } /* reveal grid after images loaded */ .grid.are-images-unloaded { opacity: 0; } .grid__item, .grid__col-sizer { width: 27%; } .grid__gutter-sizer { width: 2%; } /* hide by default */ .grid__item { margin-bottom: 20px; float: center; } .grid__item--height1 { height: 140px; background: #EA0; } .grid__item--height2 { height: 220px; background: #C25; } .grid__item--height3 { height: 300px; background: #19F; } .grid-item--width2 { width: 400px; } .grid__item img { display: block; max-width: 100%; } .fadein { opacity : 0; transform : translate(0, 100px); transition : all 1s; } .fadein.active{ opacity : 1; transform : translate(0, 0); } 何故か画像がフェードアウトして表示されません。 やりたい事は、ある一定の位置にスクロールして調整して 画像を読み込んでフェードインさせて表示させたいのですが ご教示お願いします。

    • ベストアンサー
    • HTML

専門家に質問してみよう