質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.49%

  • JavaScript

    16461questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • WordPress

    7231questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

  • jQuery

    6720questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • プラグイン

    438questions

    プラグイン(plug-in)は、ソフトウェアアプリケーションの機能拡張の為に開発された、一組のソフトウェアコンポーネントのことを指します。

スクロールしたタイミングでフェードイン・アウトを繰り返すFadeThisの設定

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 1,129

323232

score 3

いつもお世話になっております

wordpressでスクロールしたタイミングでフェードイン・アウトを繰り返すFadeThisを使おうと思い設定をしていますが
うまくいきません。

テーマはXeory extensionを使用しています。

http://gimmicklog.main.jp/jquery/220/
こちらに掲載されているようにやっているのですが同じようにできません。

やった手順としては
FadeThis-配布サイトからjsをダウンロードして
イメージ説明

こちらの二つを


に挿入しました。

プラグインは
フッターのbody閉じ直前に配置しています。

どなたか、ご教授ください。

よろしくお願いいたします。

<footer id="footer">
  <div class="footer-01">
    <div class="wrap">

      <div id="footer-brand-area" class="row">
        <div class="footer-logo gr6">
        <?php
        $logo_image = get_option('footer-logo');
          if( isset($logo_image) && $logo_image !== '' ){
        ?>
          <img src="<?php echo get_option('footer-logo');?>" alt="<?php echo get_bloginfo('name'); ?>" />
        <?php
          }else{
            echo get_bloginfo('name');
          }
        ?>
        </div>
        <div class="footer-address gr6">
          <?php echo get_option('footer-address');?>
        </div>
      </div><!-- /footer-brand-area -->

      <div id="footer-content-area" class="row">
        <div id="footer-list-area" class="gr6">
          <div class="row">

      <?php if( has_nav_menu( 'footer_nav' ) ){
      //bzb_get_nav_menu_name();
        echo '<div id="footer-cont-about" class="gr4">';
        echo "<h4>" . get_option('footer_menu_title') . "</ph4>";
        wp_nav_menu(
          array(
            'theme_location'  => 'footer_nav',
            'menu_class'      => '',
            'menu_id'         => 'fnav',
            'container'       => 'nav',
            'items_wrap'      => '<ul id="footer-nav" class="%2$s">%3$s</ul>'
          )
        );
        echo '</div>';
      } //if footer_nav
      ?>

    <?php if( has_nav_menu( 'global_nav' ) ){ ?>

            <div id="footer-cont-content" class="gr4">
              <h4>ブログコンテンツ</h4>
      <?php
        wp_nav_menu(
          array(
            'theme_location'  => 'global_nav',
            'menu_class'      => 'clearfix',
            'menu_id'         => 'footer-gnav-ul',
            'container'       => 'div',
            'container_id'    => 'footer-gnav-container',
            'container_class' => 'gnav-container'
          )
        );?>
    </div>
    <?php } ?>

            <div id="footer-cont-sns" class="gr4">
              <h4>ソーシャルメディア</h4>
              <?php footer_social_buttons();?>
            </div>
          </div>
        </div>
        <div class="gr6">
          <div class="row">
        <?php
         $facebook_page_url = get_option('facebook_page_url');
         if(isset($facebook_page_url) && $facebook_page_url !== ''){
        ?>
        <div id="footer-facebook" class="gr12 text-right">
            <div class="fb-page" data-href="<?php echo $facebook_page_url;?>" data-width="500" data-height="600" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true" data-show-posts="false"><div class="fb-xfbml-parse-ignore"><blockquote cite="<?php echo $facebook_page_url;?>"><a href="<?php echo $facebook_page_url;?>"><?php echo get_option('site_name');?></a></blockquote></div></div>
        </div>
        <?php } ?>
          </div>
        </div>
      </div>



    </div><!-- /wrap -->
  </div><!-- /footer-01 -->
  <div class="footer-02">
    <div class="wrap">
      <p class="footer-copy">
        © Copyright <?php echo date('Y'); ?> <?php echo get_bloginfo('name'); ?>. All rights reserved.
      </p>
    </div><!-- /wrap -->
  </div><!-- /footer-02 -->
  <?php
  // }
  ?>
</footer>

<a href="#" class="pagetop"><span><i class="fa fa-angle-up"></i></span></a>
<?php wp_footer(); ?>

<script>
(function($){

$(function() {
    $("#header-fnav").hide();
  $("#header-fnav-area").hover(function(){
    $("#header-fnav").fadeIn('fast');
  }, function(){
    $("#header-fnav").fadeOut('fast');
  });
});


// グローバルナビ-サブメニュー
$(function(){
  $(".sub-menu").css('display', 'none');
  $("#gnav-ul li").hover(function(){
    $(this).children('ul').fadeIn('fast');
  }, function(){
    $(this).children('ul').fadeOut('fast');
  });
});

// トップページメインビジュアル
$(function(){
  h = $(window).height();
  hp = h * .3;
  $('#main_visual').css('height', h + 'px');
  $('#main_visual .wrap').css('padding-top', hp + 'px');
});

$(function(){
    if(window.innerWidth < 768) {
  h = $(window).height();
  hp = h * .2;
  $('#main_visual').css('height', h + 'px');
  $('#main_visual .wrap').css('padding-top', hp + 'px');
    }
});

// sp-nav
$(function(){
  var header_h = $('#header').height();
  $('#gnav-sp').hide();

    $(window).resize(function(){
      var w = $(window).width();
      var x = 991;
      if (w >= x) {
          $('#gnav-sp').hide();
      }
  });

  $('#gnav-sp').css('top', header_h);
  $('#header-nav-btn a').click(function(){
    $('#gnav-sp').slideToggle();
    $('body').append('<p class="dummy"></p>');
  });
  $('body').on('click touchend', '.dummy', function() {
    $('#gnav-sp').slideUp();
    $('p.dummy').remove();
    return false;
  });
});

})(jQuery);

</script>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="<?php echo get_stylesheet_directory_uri(); ?>/lib/jquery.fadethis.min.js"></script>
<script>
$(window).fadeThis();
</script>

</body>
</html>

コード
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • aozuki

    2018/01/17 12:13

    「Java」は関係ないのでタグを外しておいた方が良いです。

    キャンセル

  • 323232

    2018/01/17 12:42

    失礼しました。削除しました。

    キャンセル

回答 1

checkベストアンサー

+3

/wp/wp-content/themes/xeory_extension/libフォルダに置いたのなら、
当然読み込み時のパスを合わせてあげなければなりません。

<script src="<?php echo get_stylesheet_directory_uri(); ?>/lib/jquery.fadethis.min.js"></script>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/01/17 12:45 編集

    aozuki様。
    いつもありがとうございます。

    スクリプトの記述変更しました。

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="<?php echo get_stylesheet_directory_uri(); ?>/lib/jquery.fadethis.min.js"></script>
    <script>
    $(window).fadeThis();
    </script>
    </body>
    </html>

    ですが、うまくいきません。
    記入場所は、フッター部分に書き込んでします。

    キャンセル

  • 2018/01/17 13:10

    プラグインは正常に読み込めてますか?
    F12で開発者ツールを開き、Networkタブで読み込んでるファイル一覧を確認できます。検索枠に jquery.fadethis.min.js を入力し検索結果が出てくれば読み込まれているのですが

    キャンセル

  • 2018/01/17 13:23

    お世話になります。

    検索ヒットせず

    一覧へは

    jquery.fadethis.min.js 404 script (index) 387 B 877 ms

    と赤文字で表示されています。

    キャンセル

  • 2018/01/17 14:00

    でしたらプラグインのjsファイルが読み込めてないので
    http://サイトのドメイン/wp/wp-content/themes/xeory_extension/lib/jquery.fadethis.min.js
    にアクセスした際にjsファイルが表示されたら読み込みの<script>タグに問題が
    表示されなければファイルの置き場所がおかしいです。これらを確認して対応したら良いでしょう

    キャンセル

  • 2018/01/17 14:29

    >表示されなければファイルの置き場所がおかしいです。
    こちらの方でした。

    場所はフッターの一番下に配置しています。
    フッターのPHPアップしております。
    見ていただけたら幸いです。

    キャンセル

  • 2018/01/17 15:45

    「jsファイルを置いた場所」と「呼び出し先の場所(<script>のsrc)」を一致させるように修正してみてください。

    キャンセル

  • 2018/01/17 15:59

    できました!!!
    ありがとうございます。
    また、勉強になりました。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.49%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • JavaScript

    16461questions

    JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

  • WordPress

    7231questions

    WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

  • jQuery

    6720questions

    jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

  • プラグイン

    438questions

    プラグイン(plug-in)は、ソフトウェアアプリケーションの機能拡張の為に開発された、一組のソフトウェアコンポーネントのことを指します。