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

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

こんにちは、mickです。

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

この記事ではphpファイルを編集せずに安全に機能を追加できるプラグイン「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を使う機能を追加

Code Snippetsからカスタムフィールドを使ったカスタムCSSを使う
Code Snippetsからカスタムフィールドを使ったカスタム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をコーディング

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

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

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

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

メニューのSnippetsからAdd New

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

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

Code Snippetsからカスタムフィールドを使ったカスタム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を使うには次のコードをコピペします。

Description

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

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

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

  • 名前は「js_css_code」
  • 値に自分の書きたいJavaScriptをコーディング
カスタムフィールドで編集中のページにだけ反映するJavaScriptをコーディング

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

まとめ。

カスタムフィールドを使ったカスタムCSSとカスタムJavaScriptをWordPressのプラグインCode Snippetsを使って実装する方法を紹介しました。

これは、ヘッダー部分とフッター部分にCSSやJavaScriptのコードを入れるための練習のために実装しました。

好きな投稿や固定ページにだけCSSやJavaScriptを適用させたいときは、前回の記事のようにカスタムフィールドを使わない方法のがスマート。

よければ参考にしてみてください。

以上、みなさまの助けなれば幸いです。

初稿 2020/10/29