アニメーションでスクロールするスクリプト「SMINT」をWordPressで使う方法

smint-logo

以前、シングルページのためのjQuery4選で、一番最後に紹介したSMINTですが、WordPressのカスタムメニューに対応させるためにはカスタマイズが必要でした。

ほんの少しのカスタマイズでWordPressでも使いやすくなりました。

手順をメモしておきます。

SMINT

 

SMINT - The simple jQuery plugin for lovers of one page websites.

[DEMO]

ダウンロードとWordPressへの読込はシングルページのためのjQuery4選の一番最後のSMINTコーナーを参考にしてください。

STEP1:まず、本来の仕様を確認する

[code lang=”js”]
<!– スクリプト部分 –>
<script>
jQuery(document).ready( function() {
jQuery(‘.subMenu’).smint({
‘scrollSpeed’ : 1000
});
});
</script>

<!– メニュー –>
<div class="subMenu" >
<div class="inner">
<a href="#" id="sTop" class="subNavBtn">Home</a>
<a href="#" id="s1" class="subNavBtn">Section 1</a>
</div>
</div>

<!– コンテンツ部分 –>
<div class="section sTop">
<div class="inner">
<h1>Welcome to the SMINT Demo page! </h1>
<p>Click the links below to see it in action!</p>
</div>
<br class="clear">
</div>
<div class="section s1">
<div class="inner">
<h1>Section 1</h1>
</div>
</div>
[/code]
13,14行目のナビゲーションで指定したidと、19,26行目のclassが対になっています。

これをカスタマイズしてWordPressでも使いやすくしてみます。

カスタマイズしたい項目は2つです。

  1. ナビゲーションに対応させるコンテンツ要素を、divのclassではなく、sectionのidにしたい
  2. WordPressのカスタムメニューでも使えるようにしたい

 

STEP2:コンテンツ要素を、divのclassからsectionのidに変更する

jquery.smint.jsを開きます。

40行目あたりで以下のようにdivのclassが指定されているので、sectionのidに変更します。
[code lang=”js”]var id = $(this).attr("id");

// ここで要素が"div."になっているので、コメントアウトして ↓
//optionLocs.push(Array($("div."+id).position().top-menuHeight, $("div."+id).height()+$("div."+id).position().top, id));

// "section#"に書き換えます ↓
optionLocs.push(Array($("section#"+id).position().top-menuHeight, $("section#"+id).height()+$("section#"+id).position().top, id));</pre>
129行目あたりも次のように変更します。
<pre class="lang:js decode:true ">// gets the distance from top of the div class that matches your button id minus the height of the nav menu. This means the nav wont initially overlap the content.

// divのクラスが指定されているのでコメントアウトして ↓
//var goTo = $(‘div.’+ id).offset().top -selectorHeight;

// sectionのidを指定する ↓
var goTo = $(‘section#’+ id).offset().top -selectorHeight;[/code]
 

STEP3:WordPressのカスタムメニューで使えるようにする

まず、WordPress管理画面>外観>メニューを開き、上部の表示オプションタブでCSSクラスにチェックを入れます。

任意のメニューを設定したら、各メニュー項目のCSS Class(オプション)に、コンテンツ要素のid(sectionのid)と同じになるようにclass名を設定します。

これだけでは、メニューのliにclass名が設定されるだけで、きちんと動きません。

なぜなら、SMINTはa要素のid名で対応するコンテンツまで移動するからです。

それで、a要素にCSS Class(オプション)で設定したClass名と同じidをつけるようにコードを追加します。

wp_nav_menuを設定している部分(functions.phpなど)に、a要素にidを追加する関数を適用させます。
[php]wp_nav_menu(array(
‘container’ =&gt; false,
‘container_class’ =&gt; ”,
‘menu’ =&gt; ‘Main Menu’,
‘menu_class’ =&gt; ”,
‘theme_location’ =&gt; ‘main-nav’,
‘before’ =&gt; ”,
‘after’ =&gt; ”,
‘link_before’ =&gt; ”,
‘link_after’ =&gt; ”,
‘depth’ =&gt; 0,
‘walker’ =&gt; new wp_nav_walker(), //aタグにidをつける関数を適用
‘fallback_cb’ =&gt; ‘main_nav_fallback’
));[/php]
[php]//a要素にliに指定されたclass名と同じid名をつける
class wp_nav_walker extends Walker_Nav_Menu {
function start_el(&amp;$output, $item, $depth, $args) {
global $wp_query;
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : ”;

$class_names = $value = ”;

$a_id= $value = ”;
$a_id = $item-&gt;classes[0];

$classes = empty( $item-&gt;classes ) ? array() : (array) $item-&gt;classes;
$class_names = join( ‘ ‘, apply_filters( ‘nav_menu_css_class’, array_filter( $classes ), $item ) );
$class_names = ‘ class="’ . esc_attr( $class_names ) . ‘"’;

$output .= $indent . ‘&lt;li id="menu-item-‘. $item-&gt;ID . ‘"’ . $value . $class_names .’&gt;’;

$attributes = ! empty( $item-&gt;attr_title ) ? ‘ title="’ . esc_attr( $item-&gt;attr_title ) .’"’ : ”;
$attributes .= ! empty( $item-&gt;target ) ? ‘ target="’ . esc_attr( $item-&gt;target ) .’"’ : ”;
$attributes .= ! empty( $item-&gt;xfn ) ? ‘ rel="’ . esc_attr( $item-&gt;xfn ) .’"’ : ”;
$attributes .= ! empty( $item-&gt;url ) ? ‘ href="’ . esc_attr( $item-&gt;url ) .’"’ : ”;

$item_output = $args-&gt;before;
$item_output .= ‘&lt;a id="’. $a_id . ‘"’. $attributes .$class_names.’&gt;’;
$item_output .= $args-&gt;link_before . apply_filters( ‘the_title’, $item-&gt;title, $item-&gt;ID ) . $args-&gt;link_after;
$item_output .= ‘&lt;/a&gt;’;
$item_output .= $args-&gt;after;

$output .= apply_filters( ‘walker_nav_menu_start_el’, $item_output, $item, $depth, $args );
}
}[/php]
これで、完了です。

カスタムメニューで設定したメニューがアニメーションスクロールされるようになります!

使う人はあまりいないかもしれませんが・・ソースを追うだけでもjQueryの勉強になるかもしれません。