新しく作ったカスタム投稿(逆引きのページ)を開いたら、コードの枠がただの灰色の箱になり、コードの中のアンダースコア(_)が見えなくなっていました。このブログでは、ページを軽くするために、プラグインの CSS・JS を使うページだけで読む処理をテーマに入れています。
原因:読み込みを許していたのが「投稿」だけだった
読み込みを絞る処理は、次のような形で、ページごとに「このプラグインの CSS・JS を読むか」を決めていました。
// 指定のない投稿は、コードの枠(Enlighter)と目次を読む
if ( 'post' === $post->post_type && in_array( $slug, array( 'enlighter', 'table-of-contents-plus' ), true ) ) {
return true;
}
return false; // それ以外は外す
投稿(post)だけを許していたので、あとから作ったカスタム投稿では Enlighter の CSS・JS が外されていました。コードは素の pre のまま出ていて、テーマの行の高さの中でアンダースコアの下の部分が切れて見えなかった、というのが答えです。
直し方:コードを載せる投稿タイプでも読むようにする
// カスタム投稿(reference)もコードを載せるので、Enlighter を読む
if ( 'reference' === $post->post_type && 'enlighter' === $slug ) {
return true;
}
目次はいらないページなので、Enlighter だけを許しました。直したあと、カスタム投稿のページで Enlighter の CSS・JS が読まれ、ふつうの投稿と同じ黒い枠になったこと、目次の JS は読まれないままなことを確認しました。
気をつけること
読み込みを絞るときの確認
- 投稿タイプを足したら、絞る処理の「許すページ」に入れるかを必ず考える
- 確認はログインしていない状態で、ページのキャッシュを外して(?nc=1 などを付けて)見る
- 「表示が崩れている」ではなく「CSS・JS が読まれていない」かを、ページのソースで見る
