WordPress│JSの遅延読み込み方法│Uncaught ReferenceError: hljs is not definedエラーの解消

2023.09.222024.03.05

コードを装飾するhighlight.jsを使っている場合、Uncaught ReferenceError: hljs is not definedというエラー表示されることがあります。

SWELLと同じ製作者のHighlighting Code Blockのプラグインを愛用しているのですが、

Chromeのコンソールでエラー表示が出るようになったので対応してみました。

Uncaught ReferenceError: hljs is not definedエラーの解消方法

解決方法は簡単です。

JavaScriptを遅延読み込みさせるだけです。

SWELL以外のテーマの場合

管理画面、外観、テーマエディタのfunctions.phpから下記のコードを記載します。

function add_defer_attribute_to_highlight_js( $tag, $handle, $src ) {
    $defer_script = 'highlight-js';

    if ( $handle === $defer_script ) {
        return '<script src="' . $src . '" defer="defer" type="text/javascript"></script>' . "\n";
    }

    return $tag;
}

add_filter( 'script_loader_tag', 'add_defer_attribute_to_highlight_js', 10, 3 );

以上です。

ちなみに他にも遅延させたいJSがある場合は配列にして、記載します。

function add_defer_attribute_to_specific_scripts( $tag, $handle, $src ) {
    $defer_scripts = array(
        'highlight-js',
        'script-handle-1',
        'script-handle-2',
    );

    if ( in_array( $handle, $defer_scripts ) ) {
        return '<script src="' . $src . '" defer="defer" type="text/javascript"></script>' . "\n";
    }

    return $tag;
}

add_filter( 'script_loader_tag', 'add_defer_attribute_to_specific_scripts', 10, 3 );