カスタムフィールドを使ったカスタムCSSとカスタムJS【Code Snippets版】

こんにちは、mickです。

カスタムフィールドを使って好きな投稿や固定ページにだけCSSやJavaScriptを適用する、カスタムCSSとカスタムJavaScript。
前の記事ではphpファイルを直接編集しました。

この記事ではphpファイルを編集せずに安全に機能を追加できるプラグイン「Code Snippets」を使って実装していきます。

カスタムフィールドとCode Snippetsを使って実装
まとめ。

カスタムフィールドとCode Snippetsを使って実装

カスタムフィールドとCode Snippetsを使ってカスタムCSSとカスタムJavaScriptを実装していきます。

カスタムフィールドを表示する

WordPress5.5では非表示になっているカスタムフィールドを表示します。

「メニュー」＞「オプション」

「詳細パネル」に「カスタムフィールド」があるのでチェックを入れればOK。

カスタムフィールドを表示する方法は画像付きで紹介している記事があります。

プラグインの Code Snippets をインストールして有効化

phpファイルを編集せずに安全に機能を追加できるプラグイン Code Snippets をインストールします。

「プラグイン」＞「新規追加」＞「検索：Code Snippets」

Code Snippets

An easy, clean and simple way to enhance your site with code snippets.

インストール後は有効化してすぐに使えるようにします。

Code Snippets でカスタムフィールドのカスタムCSSを使う

Code Snippets を使ってカスタムフィールドのカスタムCSSを使えるようにしていきます。

Code Snippets を使わない場合は、header.phpに記述するphpコードになります。

メニューのSnippetsからAdd New

WordPressメニューにある「Snippets」から「Add New」をクリック。

「WordPressメニュー」＞「Snippets」＞「Add New」

ここからカスタムフィールドのカスタムCSSを使う機能を追加していきます。

カスタムフィールドのカスタムCSSを使う機能を追加

Add New Snippet
Code
Description

この3つを入力すればOK。

Add New Snippet

追加する機能の名前を入力します。Code Snippets のリストにはこの名前で載ります。

Code

追加する機能のphpコードを入力します。

add_action('wp_head', 'cf_custom_css_code');
function cf_custom_css_code(){
  if (is_singular())
  {
    $post = get_queried_object();
    $headinsert = get_post_meta($post->ID, 'custom_css_code' ,true);
    if($headinsert)
    {
      echo '<style>';
      echo $headinsert;
      echo '</style>';
    }
  }
}

カスタムフィールドのカスタムCSSを使うには次のコードをコピペします。

Description

追加する機能の説明を入力します。この説明文は、Code Snippets のリストに載ります。

投稿や固定ページのカスタムフィールドにCSSを書く

カスタムフィールドにCSSをコーディングします。

名前は「custom_css_code」
値に自分の書きたいCSSをコーディング

これで好きな投稿や固定ページにだけCSSを反映させることができるようになりました。

Code Snippets でカスタムフィールドのカスタムJavaScriptを使う

Code Snippets を使ってカスタムフィールドのカスタムJavaScriptを使えるようにしていきます。

Code Snippets を使わない場合は、footer.phpに記述するphpコードになります。

メニューのSnippetsからAdd New

カスタムフィールドのカスタムCSSと同様に「Add New」で機能を追加していきます。

カスタムフィールドのカスタムJavaScriptを使う機能を追加

Code Snippetsからカスタムフィールドを使ったカスタムJavaScriptを使う

Add New Snippet
Code
Description

カスタムフィールドのカスタムCSSと同じように3つを入力すればOK。

Add New Snippet

追加する機能の名前を入力します。Code Snippets のリストにはこの名前で載ります。

Code

追加する機能のphpコードを入力します。

add_action('wp_footer', 'cf_custom_js_code');
function cf_custom_js_code(){
  if (is_singular())
  {
    $post = get_queried_object();
    $footer_insert = get_post_meta($post->ID, 'custom_js_code' ,true);
    if($footer_insert)
    {
      echo '<script>';
      echo $footer_insert;
      echo '</script>';
    }
  }
}

カスタムフィールドのカスタムCSSを使うには次のコードをコピペします。