前書き#
pjax の部分更新を有効にすると、次のページに移動する際には記事関連のファイルのみを読み込むため、大部分のファイルを再読み込みする必要はありません。これにより、ウェブサイトの負荷を大幅に軽減することができます。ユーザーにとっては、突然の画面遷移がなく、ユーザーエクスペリエンスも良好です。
ただし、Prism のコードハイライトを有効にしている場合、記事ページに移動する際には、prism.js ファイルは再読み込みされません。これにより、記事内のコードハイライトが無効になってしまいます。
このテーマには、私の場合には無効な Prism コードハイライトの再読み込み機能が付属していますので、他の解決策を探すしかありません。
このような場合、インターネット上にはいくつかの解決策がありますが、ここでは WordPress に焦点を当てて最も簡単な解決策の 1 つについて説明します。
関連ファイルの変更#
方法は非常に簡単で、1 つのファイルを変更するだけです。Asky シリーズのテーマの場合、変更するファイルの場所は/wp-content/themes/ASky/js/jquery.pjax.jsです。もしそのようなテーマでない場合は、この js ファイルの名前を検索することをお勧めします。
変更箇所は、以下の図のように、312 行目の下にあります。
関連するコードは以下の通りです。
//Prism Reload
if (container.contents.find("code[class*='language-']").length > 0)
$.getScript("/wp-content/plugins/ank-prism-for-wp/out/prism-js.min.js");//Your Prism.js location
Prism プラグインを使用しているため、最後の行のファイルの場所は、プラグインで使用されている prism.js の場所です。
設定が完了したら、コードハイライトを正常に使用することができます。また、CDN を使用している場合、キャッシュが少し長くなる可能性がありますので、このファイルを手動で CDN コンソールで更新することができます。更新する際には、ウェブサイトが読み込んでいる jquery.pjax.js ファイルの後ろに？ver=x.x.x があるかどうかを確認し、ある場合はそれを付けることを忘れないでください。