WordPressで動きを付ける

WordPress の学習をしていく中で、いろんな便利機能(というのか?)
があります。javascript jQuery と同じ動きもできるわけで。
学習ではphpファイルを使いますが、もしかしたら管理画面の追加CSS とか
コードを書けば同じように動かせるかもしれません。
まだ理解の途中なので実際にここでやったらまた報告します。

なので、ここに書いてあるコードはphpファイルを使ったものです
ご了承ください。

そして、下記のコードを適用させるには functions . php にcssやscriptの動きをさせますよ~ってコードも書いとかないといけないようです。

とりあえず、jQueryのコードを書いていたような動きを二つほど。

count _ num を使うと画面をスクロールして読み込んだ時にパラパラアニメのように数字が変わっていく(ザ・ベストテンという音楽番組をご存知の方なら歌者さんが出てくる扉の横にあるレコード枚数をドラム音とを鳴らしながらパタパタめくれていくボードのような動き。で伝わるでしょうか?)アニメーションになる。
数字を扱うwebサイトだとページに動きが出て面白いかも。

数字を動かしたい箇所がある場合、その数字をタグで囲います
そして、そのタグのclass属性に count _ num を追加します。
動かしたい数字が複数ある場合はclass属性。1か所だけならidでもいいみたいです。

例えば

< span class= "children_number" > 500 < / span >
< span class= "children_count" > 名 < / span >

とあったら

<span class= "count_num children_number" > 500 < /span >
<span class= "children_count" > 名 < /span >

となります。

この動きをさせたい時は下記のコードを functions.php に書き足しました。
WordPressのjQueryを解除して登録し直す。という感じです。
デフォルトのjQueryを解除する関数が色々あります
それを解除してからじゃないとjQuery同士でケンカしちゃうから
結果動かないということになるようです。

デフォルトのjQueryを解除して下記のコードを書きました

wp_enqueue_script('waypoints', get_template_directory_uri() . '/js/waypoints.min.js', array(), 4.0, true);
        wp_enqueue_script('counterup', get_template_directory_uri() . '/js/jquery.counterup.min.js', array(), 1.0, true);

数字の動きを付ける装飾なので、counterup が必要。でも、waypoints がないと動かないそうです。

codepenとか使えなくて、動いているところをここに載せることがまだできませんが、
気長に待っててくれると嬉しいです。
腕あげるぞー^^

コメントを残す

%d