Code Serendipity

Keyword: Ruby, Python, javascript, RoR, heroku, AWS...

Code Serendipity

Keyword: Ruby, Python, wordpress, javascript, AWS...

wordpressの子テーマのheader.phpに独自jsファイルを挿入する(例:smooth scroll ライブラリ)

https://s.w.org/images/backgrounds/wordpress-bg-medblue.png

header.php に, smooth_scroll.js を挿入する

smooth_scroll.jsは、 jQueryに依存せずに、 スクロール速度や加速度を制御できたり、 コールバック関数を作れたりする素敵なライブラリです。

子テーマ内の、header.phpファイルのheadタグにて、

<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/追加したjsファイル名"></script>

としてあげます。

この場合、

<script type="text/javascript" src="<?php echo get_stylesheet_directory_uri(); ?>/smooth_scroll.js"></script>

になります。

smooth scroll を動かす

smooth scroll のoption を指定し、

smoothScroll.init({ Â speed: 300 , 
    updateURL: false, 
    easing: 'easeInOutCubic' 
}) ;

動かしたいファイルで、 クリックをリッスンしたい要素にdata-scroll属性を付与してあげ、

<a href="#gotoEnglish" data-scroll> &gt;&gt; English Version </a>

... 省略

<div id='gotoEnglish'>
... ここに飛ばしたい
</div>

飛ばしたい先にidを付与してあげればOKです。

参考

motoshige.net