Advanced Custom Fieldsに設定ができない。(パート2)

「Advanced Custom Fields」は、簡単にカスタムフィールドを追加できるとても便利なプラグイン。本来はカスタムフィールドを使う場合、適切な入力フィールドを１つ１つコーディングしなければなりませんが、このプラグインを導入すれば、様々な種類のカスタム入力フィールドを簡単に設定する事ができます。

以前、本ブログで、「Advanced Custom Fields」で設定が利用できなくなった話をさせて頂きました。理由は、Advanced Custome Fieldsでは、設定のアクションを起こす際には、<a href=”#”>タグを使っているため、例えば、独自に作り込んだJavaScriptの以下のような処理を記述(スムーススクロール)すると、処理がこちらに遷移してしまい(競合する)、設定が利用できなくなるというものでした。

jQuery(function($){
    var t = jQuery('.siteHeader-frm').outerHeight();
    jQuery("a[href^=#]").click(function () {  /* 競合しちゃう。*/
        var e = $(this).attr("href"), o = $("#" == e || "" == e ? "html" : e), n = o.offset().top - t;
        return jQuery("html, body").animate({scrollTop: n}, 500, "swing"), !1
    });
});

1

2

3

4

5

6

7

jQuery(function($){

var t = jQuery('.siteHeader-frm').outerHeight();

jQuery("a[href^=#]").click(function () { /* 競合しちゃう。*/

var e = $(this).attr("href"), o = $("#" == e || "" == e ? "html" : e), n = o.offset().top - t;

return jQuery("html, body").animate({scrollTop: n}, 500, "swing"), !1

});

前回は、スムーススクロールが必要無かったので、削除にて対応しましたが、今回は、スムーススクロールも利用しつつ、「Advanced Custom Fields」の設定も問題なく利用させる必要がありました。その、ソースの記載方法について、備忘録も兼ねて記載しておきます。

以下です。

jQuery(function($){
    var header_height = jQuery('.siteHeader-frm').outerHeight();
    jQuery('a[href^="#"]').click(function () {
        var jump_string = $(this).attr("href");
        var o = $("#" == jump_string || "" == jump_string ? "html" : jump_string);
        if("#" == jump_string || "" == jump_string){  //for Advanced Custom Fields
            return ;
        }
        else{
            var object = $(jump_string);
        }
        jump_position = object.offset().top - header_height;
        return jQuery("html, body").animate({scrollTop: jump_position}, 500, "swing"), !1
    });
});

1

2

3

4

5

6

7

8

9

10

11

12