プラグインの CSS・JS を使うページだけで読む設定にしたら、カスタム投稿でコードの枠が崩れた

広告WordPress・PHP を学べる本

Amazonのアソシエイトとして、WordPress functions.phpは適格販売により収入を得ています。

新しく作ったカスタム投稿(逆引きのページ)を開いたら、コードの枠がただの灰色の箱になり、コードの中のアンダースコア(_)が見えなくなっていました。このブログでは、ページを軽くするために、プラグインの 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 が読まれていない」かを、ページのソースで見る

SiteBeacon(サイトビーコン)

サイトが止まったら、すぐに気づける。

ホームページを 5 分ごとにチェックして、止まったとき・エラーが出たとき・SSL やドメインの期限が近いときに、メールでお知らせします。2 サイトまでは、ずっと無料で使えます。

SiteBeacon を見る サイトを直す相談をする

監視で気づいたあとの直す作業も、同じ担当がお受けします。