WordPress│hljs is not definedの原因と読み込み順の直し方

2023.09.222026.10.13

hljs is not definedは、呼び出した時点でhighlight.jsのhljsが利用できないというエラーです。

原因には読み込み失敗、実行順序、ライブラリーの取り違えがあり、遅延読み込みを追加するだけでは解決しません。

先に読み込みと呼び出し元を確認する

開発者ツールのConsoleでエラーのファイルと行を開き、hljsを呼び出しているコードを確認します。

Networkでhighlight.jsのリクエストを探し、404・通信遮断・JavaScript以外の応答がないか確認します。

リクエストが見当たらない場合は、読み込み条件やファイルの場所を確認します。

最適化機能を使っている場合は現在の設定を書き出すかメモしてから、検証環境で対象のライブラリーと初期化処理を遅延対象から外して比較します。

ライブラリー本体だけにdeferを付けると、先に実行されるインライン初期化で同じエラーが起きます。

自分でhighlight.jsを設置する場合の読み込み例

既存のテーマやプラグインが読み込んでいる場合は、この例を重ねて追加しません。

highlight.jsの公式手順からブラウザー用ビルドを用意し、子テーマのassets/highlight.min.jsへ保存します。

npm用のCommonJSファイルをそのままブラウザーへ読み込ませないでください。

子テーマのfunctions.phpへ次のコードを追加します。

function waza_highlight_assets() {
    // 自分で設置したブラウザー用ビルドのファイル名に合わせます。
    $file = get_stylesheet_directory() . '/assets/highlight.min.js';
    if ( ! is_readable( $file ) ) {
        return;
    }
    wp_enqueue_script( 'waza-highlight', get_stylesheet_directory_uri() . '/assets/highlight.min.js', array(), (string) filemtime( $file ), true );
    wp_add_inline_script( 'waza-highlight', 'hljs.highlightAll();', 'after' );
}
add_action( 'wp_enqueue_scripts', 'waza_highlight_assets' );

本体の読み込み後に初期化を出力する例であり、色のテーマCSSは別途読み込む必要があります。

最適化後も初期化が本体より先に実行されないことを確認します。

対象HTMLはpreの中にcodeを置く形式で、highlight.jsが対応する言語を指定します。

SWELL・Highlighting Code Blockで確認すること

Highlighting Code Blockとhighlight.jsを同一のものとして扱わず、実際に出力されたスクリプトとエラーの呼び出し元を確認します。

SWELLの遅延対象にhighlight.jsを追加することを、共通の解決策としては推奨しません。

表示されたままでも確認する3つの段階

スクロールできます

段階	確認する場所	問題があるとき
本体の取得	Networkの応答とファイル内容	404ならパス、読み込まれなければ条件を確認
初期化の実行	Consoleとscriptの実行順	本体と初期化の最適化条件をそろえて比較
装飾の表示	code内のspanとテーマCSS	spanがあればCSSの読み込みと適用を確認

文字が見えるだけでは、highlight.jsの初期化が成功したとは判断できません。

WP Rocketを使う場合は、設定の保存と1項目ずつの切り分けを行ってから確認します。

確認と戻し方

キャッシュ更新後に記事を開き、コンソールのエラー、コード装飾、他のスクリプトを確認します。

元に戻す場合は追加した関数・フックを外し、控えておいた最適化設定を戻します。

2026年10月2日、WordPress 7.1.2の検証環境でhighlight.js 11.11.1のブラウザー用ビルドを読み込み、装飾用のspanとhljsクラスが生成されることを確認しました。

本体の後に初期化が出力され、この試験ページではConsoleのエラーはありませんでした。

WP Rocketの遅延処理を有効にした環境との統合は未検証です。

参照：wp_enqueue_script。

よくある質問：WordPressでhljs is not definedが出るとき

「hljs is not defined」は、どんなエラーですか？

記事では、呼び出した時点でhighlight.jsのhljsが利用できないというエラーです。原因には読み込み失敗、実行順序、ライブラリーの取り違えがあり、遅延読み込みを追加するだけでは解決しません。

最初に、何を確認しますか？

記事では、開発者ツールのConsoleでエラーのファイルと行を開き、hljsを呼び出しているコードを確認します。Networkでhighlight.jsのリクエストを探し、404・通信遮断・JavaScript以外の応答がないか確認します。リクエストが見当たらない場合は、読み込み条件やファイルの場所を確認します。

最適化機能を使っているときは、どうしますか？

記事では、現在の設定を書き出すかメモしてから、検証環境で対象のライブラリーと初期化処理を遅延対象から外して比較します。ライブラリー本体だけにdeferを付けると、先に実行されるインライン初期化で同じエラーが起きます。

自分でhighlight.jsを設置するときは、どうしますか？

記事では、既存のテーマやプラグインが読み込んでいる場合は、この例を重ねて追加しません。highlight.jsの公式手順からブラウザー用ビルドを用意し、子テーマのassets/highlight.min.jsへ保存して、functions.phpに読み込みコードを追加します。npm用のCommonJSファイルをそのままブラウザーへ読み込ませないでください。色のテーマCSSは別途読み込む必要があります。