投稿ページに、個別でCSS・JavaScriptを読み込む方法

2021-12-11

「この記事だけちょっと違ったスタイルを当てたい！」

「記事内でHTML&CSSのコード解説をするために、各ページごとでスタイルを当てたい！」

そんな時はカスタムフィールドを使うと便利です。

カスタムフィールドの設定

まずはカスタムフィールドの設定をしていきます。

1、カスタムフィールドを作成するためのプラグイン「Advanced Custom Fields」をインストール。

2、管理画面にて[カスタムフィールド]→[新規追加]へ。

3、フィールドグループを作成します。「追加CSS・Javascript」とか、名前は自分がわかれば何でもいいです。

4、[フィールドを追加]をクリックしてCSS、Javascriptそれぞれのフィールドを設定していきます。

CSSを追加する用のフィールドを作成します。以下は設定の例です。

JavaScriptを追加する用のフィールドを作成します。以下は設定の例です。

作成すたカスタムフィールドをどの編集画面で表示するかを決めます。

投稿の編集画面で表示したいだけならば、デフォルトのまま、[投稿タイプ][等しい][投稿]でOKです。

最後に画面右上の[更新]をクリック。

これで、投稿の編集画面に[カスタムCSS]と[カスタムJavaScript]を入力するエリアが表示されるはずです。

続いて、投稿の編集画面にて[カスタムCSS][カスタムJavaScript]エリアに入力された内容を呼び出す作業です。

header.phpの<head></head>の中にに以下のコードを書きます。

<?php
if (is_single()) {
  $custom_css = get_field('custom_css');
    if($custom_css) {
      echo '<style>' . $custom_css . '</style>';
    }
  }
?>

[カスタムCSS]にコードを入力すれば、<style>～</style>で出力されます。

footer.phpの</body>手前に以下のコードを書きます。

<?php
if (is_single()) {
  $custom_js = get_field('custom_js');
    if($custom_js) {
      echo '<script>' . $custom_js . '</script>';
    }
  }
?>

[カスタムJavaScript]にコードを入力すれば、<script>～</script>で出力されます。

いかがでしたか？

カスタムフィールドを使えば、ページごとのCSSやJavaScriptを設定できるので、表現の幅が広がります。

ぜひ試してみてください。

最後までご覧いただきありがとうございました。