cocconのようなカスタムCSSやカスタムJavaScriptを追加する【自作】

cocconのようなカスタムCSSやカスタムJavaScriptを追加する【自作】 WordPress

こんにちは、mickです。

WordPressテーマのcocoonにあるようなカスタムCSSを自作したい
同じようにカスタムJavaScriptを追加したい
好きな投稿や固定ページにだけ適用するCSSやJavaScriptを簡単に書きたい

こんな要望に応えます。

functions.phpにコードを追加するだけでcocoonにあるようなカスタムCSSやカスタムJavaScriptの入力欄を追加できます。

cocoonのカスタムCSSとカスタムJavaScript
cocoonのカスタムCSSとカスタムJavaScript

ここでは、プログラミング知識がなくても安全にできるプラグインを使った方法で紹介です。

functions.phpの編集は避ける

functions.phpにコードを追加するだけでcocoonにあるようなカスタムCSSやカスタムJavaScriptの入力欄を追加することができます。

でも、functions.phpの編集には注意が必要なことがよくWebサイトで紹介があります。

検索:「functions.php 編集」

主な理由が「functions.phpの編集を誤ると、画面が真っ白になってWordPressが動かなくなる」というもの。

そこでプラグインを仲介してfunctions.phpを編集するのと同じ結果を得られる方法を紹介します。

具体的な方法:Code Snippets プラグインを使う

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

Code Snippets プラグインを使うとfunctions.phpを編集せずに、functions.phpを編集したのと同じ結果が得られます。

Code Snippets にはこんなメリットがあります。

  1. 記述した機能は、テーマを変更してもそのまま使える
  2. 設定した機能はオンとオフができる
  3. 記述した機能のインポートとエクスポートができる
  4. 記述した機能をリストで管理できる
  5. プログラミング知識がなくてもトラブルが少ない

デメリットも上げておきます。

  1. プラグインをインストールして管理する必要がある
  2. 開発の都合でプラグインに制限があるときは利用できない

メリットの方が大きいです。

既存のWordPressのテーマを使うならCode Snippetsの選択肢はありです。
自分でWordPressのテーマを開発しているなら、自己管理できているはずなので直接functions.phpを編集するでしょう。

Code Snippets でカスタムCSSとカスタムJavaScriptを自作

早速 Code Snippets を使ってcocconのようなカスタムCSSとカスタムJavaScriptを自作していきます 

Code Snippets のインストールと有効化

まずは、WPS Hide Loginをインストールしていきます。

「プラグイン」 > 「新規追加」 > 「検索:Code Snippets」

Code Snippetsを「インストール」クリックしてインストール開始。

Code Snippets インストールする
Code Snippets インストールする

インストールが終わったら、そのまま「有効化」をクリックして有効化します。

Code Snippets を有効化する
Code Snippets を有効化する

Code Snippets でカスタムCSSとカスタムJavaScriptを自作する

Code Snippets を使ってcocoonのようなカスタムCSSとカスタムJavaScriptを自作していきます。

メニューのSnippetsからAdd New

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

Add New からカスタムCSSとカスタムJavaScriptの入力欄を作成する
Add New からカスタムCSSとカスタムJavaScriptの入力欄を作成する

ここからカスタムCSSとカスタムJavaScriptの機能を追加していきます。

カスタムCSSとカスタムJavaScriptの機能を追加

Code Snippets で新しい機能を追加する
Code Snippets で新しい機能を追加する
  • Add New Snippet
  • Code
  • Description

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

Add New Snippet

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

Code

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

カスタムCSSの追加には次のコードをコピペします。

//Custom CSS Widget
add_action( 'admin_menu', 'custom_css_hooks' );
add_action( 'save_post', 'save_custom_css' );
add_action( 'wp_head','insert_custom_css' );
function custom_css_hooks() {
  add_meta_box( 'custom_css', 'Custom CSS', 'custom_css_input', 'post', 'normal', 'high' );
  add_meta_box( 'custom_css', 'Custom CSS', 'custom_css_input', 'page', 'normal', 'high' );
}
function custom_css_input() {
  $post = get_queried_object();
  echo '<input type="hidden" name="custom_css_noncename" id="custom_css_noncename" value="'.wp_create_nonce('custom-css').'" />';
  echo '<textarea name="custom_css" id="custom_css" rows="5" cols="30" style="width:100%;" placeholder="このページにだけ適用するCSSコードを入力します。styleタグは不要です。">'.get_post_meta($post->ID,'_custom_css',true).'</textarea>';
}
function save_custom_css($post_id) {
  if ( !wp_verify_nonce( $_POST['custom_css_noncename'], 'custom-css' ) ) return $post_id;
  if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE) return $post_id;
  $custom_css = $_POST['custom_css'];
  update_post_meta( $post_id, '_custom_css', $custom_css );
}
function insert_custom_css() {
  if ( is_page() || is_single() ) {
    if ( have_posts() ) : while ( have_posts() ) : the_post();
      echo '<style>' . get_post_meta(get_the_ID(), '_custom_css', true) . '</style>';
    endwhile; endif;
    rewind_posts();
  }
}

カスタムJavaScriptの追加には次のコードをコピペします。

//Custom JS Widget
add_action( 'admin_menu', 'custom_js_hooks' );
add_action( 'save_post', 'save_custom_js' );
add_action( 'wp_footer','insert_custom_js' );
function custom_js_hooks() {
  add_meta_box( 'custom_js', 'Custom JavaScript', 'custom_js_input', 'post', 'normal', 'high' );
  add_meta_box( 'custom_js', 'Custom JavaScript', 'custom_js_input', 'page', 'normal', 'high' );
}
function custom_js_input() {
  $post = get_queried_object();
  echo '<input type="hidden" name="custom_js_noncename" id="custom_js_noncename" value="'.wp_create_nonce('custom-js').'" />';
  echo '<textarea name="custom_js" id="custom_js" rows="5" cols="30" style="width:100%;" placeholder="このページにだけ適用するJavaScriptコードを入力します。scriptタグは不要です。">'.get_post_meta($post->ID,'_custom_js',true).'</textarea>';
}
function save_custom_js($post_id) {
  if (!wp_verify_nonce($_POST['custom_js_noncename'], 'custom-js')) return $post_id;
  if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return $post_id;
  $custom_js = $_POST['custom_js'];
  update_post_meta($post_id, '_custom_js', $custom_js);
}
function insert_custom_js() {
  if ( is_page() || is_single() ) {
    if ( have_posts() ) : while ( have_posts() ) : the_post();
      echo '<script>' . get_post_meta(get_the_ID(), '_custom_js', true) . '</script>';
    endwhile; endif;
    rewind_posts();
  }
}

カスタムJavaScriptがJavaScriptのコードをヘッダー部分に追加するところからフッター部分に追加するように変更しました。
HTML5を考慮してtype属性を削除しました。
global $post;を$post = get_queried_object();に書き換えました。
(2020年10月29日追記)

この2つのコードはこちらより使わせていただいています。
ありがとうございます。

⇒ NxWorld「WordPress:ページや記事ごとに個別のCSSやJavaScriptを追加する方法」

HTML部分のtextareaタグには、placeholder属性を追加しています。

Description

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

カスタムCSSとカスタムJavaScriptの場合は「Run snippet everywhere」でないと意図する動作をしません。

Code Snippets でカスタムCSSとカスタムJavaScriptを追加した内容

Code SnippetsでカスタムCSSとカスタムJavaScriptを追加したときの内容がこちらです。

カスタムCSSとカスタムJavaScriptの機能を追加する(1/2)
カスタムCSSとカスタムJavaScriptの機能を追加する(2/2)

すべての設定が終わったら「Save Changes and Activate」をクリックして機能を有効にします。

投稿画面で動作を確認する

投稿ページでカスタムCSSとカスタムJavaScriptの項目が増えていることを確認します。

投稿や固定ページでカスタムCSSとカスタムJavaScriptが追加できた
投稿や固定ページでカスタムCSSとカスタムJavaScriptが追加できた

カスタムCSSとカスタムJavaScriptにそれぞれCSSとJavaScriptをコーディング。

カスタムCSSとカスタムJavaScriptの動作確認する
カスタムCSSとカスタムJavaScriptの動作確認する

プレビューで動作の確認が取れたらOK。

カスタムCSSとカスタムJavaScriptしていればOK
カスタムCSSとカスタムJavaScriptしていればOK

まとめ。

cocconのようなカスタムCSSやカスタムJavaScriptを自作で追加する方法を紹介しました。

cocoonを使っているときにここのphpをfunctions.phpにコーディングしても入力欄が増えません。

つまり、cocoonも同じphpコードでカスタムCSSとカスタムJavaScriptを実装していると推測することができます。

Code Snippets を使うとテーマといった環境に依存しないため、メンテナンス性が高くて便利です。

既存のテーマを使っているなら、functions.phpを編集するまえにぜひ Code Snippets を試して欲しいです。

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

初稿 2020/10/28