こんにちは、mickです。
WordPressテーマのcocoonにあるようなカスタムCSSを自作したい
同じようにカスタムJavaScriptを追加したい
好きな投稿や固定ページにだけ適用するCSSやJavaScriptを簡単に書きたい
こんな要望に応えます。
functions.phpにコードを追加するだけでcocoonにあるようなカスタムCSSやカスタムJavaScriptの入力欄を追加できます。
ここでは、プログラミング知識がなくても安全にできるプラグインを使った方法で紹介です。
functions.phpの編集は避ける
functions.phpにコードを追加するだけでcocoonにあるようなカスタムCSSやカスタムJavaScriptの入力欄を追加することができます。
でも、functions.phpの編集には注意が必要なことがよくWebサイトで紹介があります。
検索:「functions.php 編集」
主な理由が「functions.phpの編集を誤ると、画面が真っ白になってWordPressが動かなくなる」というもの。
そこでプラグインを仲介してfunctions.phpを編集するのと同じ結果を得られる方法を紹介します。
具体的な方法:Code Snippets プラグインを使う
Code Snippets プラグインを使うとfunctions.phpを編集せずに、functions.phpを編集したのと同じ結果が得られます。
Code Snippets にはこんなメリットがあります。
- 記述した機能は、テーマを変更してもそのまま使える
- 設定した機能はオンとオフができる
- 記述した機能のインポートとエクスポートができる
- 記述した機能をリストで管理できる
- プログラミング知識がなくてもトラブルが少ない
デメリットも上げておきます。
- プラグインをインストールして管理する必要がある
- 開発の都合でプラグインに制限があるときは利用できない
メリットの方が大きいです。
既存の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 でカスタムCSSとカスタムJavaScriptを自作する
Code Snippets を使ってcocoonのようなカスタムCSSとカスタムJavaScriptを自作していきます。
メニューのSnippetsからAdd New
WordPressメニューにある「Snippets」から「Add New」をクリック。
ここからカスタムCSSとカスタムJavaScriptの機能を追加していきます。
カスタムCSSとカスタムJavaScriptの機能を追加
- 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を追加したときの内容がこちらです。
すべての設定が終わったら「Save Changes and Activate」をクリックして機能を有効にします。
投稿画面で動作を確認する
投稿ページでカスタムCSSとカスタムJavaScriptの項目が増えていることを確認します。
カスタムCSSとカスタムJavaScriptにそれぞれCSSとJavaScriptをコーディング。
プレビューで動作の確認が取れたらOK。
まとめ。
cocconのようなカスタムCSSやカスタムJavaScriptを自作で追加する方法を紹介しました。
cocoonを使っているときにここのphpをfunctions.phpにコーディングしても入力欄が増えません。
つまり、cocoonも同じphpコードでカスタムCSSとカスタムJavaScriptを実装していると推測することができます。
Code Snippets を使うとテーマといった環境に依存しないため、メンテナンス性が高くて便利です。
既存のテーマを使っているなら、functions.phpを編集するまえにぜひ Code Snippets を試して欲しいです。
以上、みなさまの助けなれば幸いです。
初稿 2020/10/28