WordPress中の各hタグにプラグイン無しでスクロール遷移する

皆さんこんにちは！今晩は！！ロト君です。今回は簡単にスクロールでのhタグ遷移をプラグイン無しで作る方法を紹介します。

1.実際のコード
2.まとめ

1.実際のコード

実際に各コードは2種類あります。

function.php側と、js側です。

まずは、js側です。

jQuery(function(){
    jQuery('a[href^="#"]').click(function() {
       var speed = 800;
       var href= jQuery(this).attr("href");
       var target = jQuery(href == "#" || href == "" ? 'html' : href);
       var position = target.offset().top;
       jQuery('body,html').animate({scrollTop:position}, speed, 'swing');
       return false;
    });
 });

jQuery(function(){

jQuery('a[href^="#"]').click(function() {

var speed = 800;

var href= jQuery(this).attr("href");

var target = jQuery(href == "#" || href == "" ? 'html' : href);

var position = target.offset().top;

jQuery('body,html').animate({scrollTop:position}, speed, 'swing');

return false;

});

続いて、WordPress側に正しくjsファイルを読み込ませます。

<?php
    function lotokunn_enqueue_scripts() {
        wp_enqueue_script( 
        'scroll-script', 
        get_template_directory_uri() . '/js/scroll.js' 
        );
    }
    
    add_action( 'wp_enqueue_scripts', 'lotokunn_enqueue_scripts' );
?>

<?php

function lotokunn_enqueue_scripts() {

wp_enqueue_script(

'scroll-script',

get_template_directory_uri() . '/js/scroll.js'

);

}

add_action( 'wp_enqueue_scripts', 'lotokunn_enqueue_scripts' );

以上の、2種類を保存すればスムーズなスクロール遷移が出来ます！！

2.まとめ

よく、headタグに直接記載するよなサイトさんがありますが、それは間違いです。正しく、WordPressに書き込む為にはenqeueを活用しましょう！！

子テーマなどであっても、正しい表記の方が後々編集し易いです。

では、今回はここまで！(°▽°)ミ★

シェアをよろしくお願い致します！！

日	月	火	水	木	金	土
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31

lotokunn.com

WordPress中の各hタグにプラグイン無しでスクロール遷移する

1.実際のコード

2.まとめ

コメントするコメントをキャンセル

WordPress中の各hタグにプラグイン無しでスクロール遷移する

1.実際のコード

2.まとめ

コメントする コメントをキャンセル

コメントするコメントをキャンセル