【WordPress】投稿ごとに独自のCSSやjsを読み込ませるカスタマイズ
MENU
  • 記事公開:2019/10/03
  • 最終更新:2019/09/16

【WordPress】投稿ごとに独自のCSSやjsを読み込ませるカスタマイズ

投稿ごとに独自のCSSやjsを読み込ませたい場合ってありませんか?
実はこれ、多くの方が実現したいと考えています。

今回は、投稿ごとに独自のCSSやjsを読み込ませるカスタマイズをご紹介します。

・投稿ごとに独自CSSを読み込むカスタマイズ
・投稿ごとに独自jsを読み込むカスタマイズ

いずれのカスタマイズも、プラグインは使いません。
テーマを直接カスタマイズします。

WordPressに関わって10年目の私が実際に使っている方法です。
5分程度で実装することができますので、ぜひ挑戦してみてください。

それでは、投稿ごとに独自のCSSやjsを読み込ませるカスタマイズをご覧ください。

今回のカスタマイズは、新旧どちらのエディタにも対応しています。

この記事は約 11 分で読めます。

WordPressのカスタマイズはお任せください。

WordPressのカスタマイズを格安で代行いたします。ご希望のカスタマイズがあればご相談ください。

投稿ごとに独自のCSSを読み込むカスタマイズ

カスタマイズの手順は以下の通りです。

  1. functions.phpにコードを追加する。
  2. header.phpにコードを追加する。
  3. 投稿画面に独自CSSの入力項目が追加されているのを確認する。
  4. 独自CSSが読み込まれているのを確認する。

個別にみていきましょう。

手順1:functions.phpにコードを追加する

functions.phpに以下のコードを追記してやります。

//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', '独自CSS', 'custom_css_input', 'post', 'normal', 'high');
add_meta_box('custom_css', '独自CSS', 'custom_css_input', 'page', 'normal', 'high');
}
function custom_css_input() {
global $post;
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%;">'.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);
}

参考:Webお役立ちネタ帳

カスタマイズ自体は、上記のコードをfunctions.phpに追加することで完了です。

手順2:header.phpにコードを追加する

CSSを出力したい箇所に以下のコードを記述します。

<?php $css = get_field('_custom_css'); ?>
<?php if(!empty($css)):?>
<style type="text/css">
<?php echo get_post_meta(get_the_ID(), '_custom_css', true); ?>
</style>
<?php endif;?>

<?php wp_head(); ?>の上あたりに記述すればよいかと思います。
この辺りは臨機応変に変更してください。

手順3:投稿画面に独自CSSの入力項目が追加されているのを確認する

投稿編集画面を開いてください。

投稿編集画面の下部に、上記の独自CSSの入力項目が表示されていれば、第一段階は成功です。

上記の項目に入力したCSSが、その投稿で読み込まれるようになります。
適当なCSSを入力して投稿を保存してください。

手順4:独自CSSが読み込まれているのを確認する

投稿ページのソースを確認してみましょう。
head内に先ほど入力したCSSが表示されていれば、カスタマイズは成功です。

投稿ごとに独自のjsを読み込むカスタマイズ

カスタマイズの手順は以下の通りです。

  1. functions.phpにコードを追加する。
  2. header.phpにコードを追加する。
  3. 投稿画面に独自CSSの入力項目が追加されているのを確認する。
  4. 独自CSSが読み込まれているのを確認する。

個別にみていきましょう。

手順1:functions.phpにコードを追加する

functions.phpに以下のコードを追記してやります。

//Custom JS Widget
add_action('admin_menu', 'custom_js_hooks');
add_action('save_post', 'save_custom_js');
add_action('wp_head','insert_custom_js');
function custom_js_hooks() {
add_meta_box('custom_js', '独自js', 'custom_js_input', 'post', 'normal', 'high');
}
function custom_js_input() {
global $post;
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%;">'.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();
}
}

参考:Webお役立ちネタ帳

カスタマイズ自体は、上記のコードをfunctions.phpに追加することで完了です。

手順2:header.phpにコードを追加する

CSSを出力したい箇所に以下のコードを記述します。

<?php $js = get_field('_custom_js'); ?>
<?php if(!empty($js)):?>
<script>
<?php echo get_post_meta(get_the_ID(), '_custom_js', true); ?>
</script>
<?php endif;?>

<?php wp_head(); ?>の上あたりに記述すればよいかと思います。
この辺りは臨機応変に変更してください

手順3:投稿画面に独自jsの入力項目が追加されているのを確認する

投稿編集画面を開いてください。

投稿編集画面の下部に、上記の独自jsの入力項目が表示されていれば、第一段階は成功です。

上記の項目に入力したjsが、その投稿で読み込まれるようになります。
適当なjsを入力して投稿を保存してください。

手順4:独自jsが読み込まれているのを確認する

投稿ページのソースを確認してみましょう。
head内に先ほど入力したjsが表示されていれば、カスタマイズは成功です。

ここで入力した内容は【<script>と</script>の間】に出力されます。
jsを記述する時は、この部分に注意してください。

投稿以外でも独自CSSや独自jsを読み込みたい場合

今回ご紹介した方法は、投稿以外にも固定ページ、カスタム投稿でも利用可能です。

投稿以外でも独自CSSを読み込めるようにする方法

【投稿ごとに独自のCSSを読み込むカスタマイズ】でfunctions.phpに追加したコードの中にある、以下の部分を調整することで、固定ページやカスタム投稿でも独自CSSを読み込めるようになります。

function custom_css_hooks() {
add_meta_box('custom_css', '独自CSS', 'custom_css_input', 'post', 'normal', 'high');
}

このコードを以下のように修正してやります。

固定ページで独自CSSを読み込めるようにしたい場合

以下のように修正します。

function custom_css_hooks() {
add_meta_box('custom_css', '独自CSS', 'custom_css_input', 'post', 'normal', 'high');
add_meta_box('custom_css', '独自CSS', 'custom_css_input', 'page', 'normal', 'high');
}

赤文字部分のコードを追加しました。

カスタム投稿で独自CSSを読み込みたい場合

以下のように修正します。

function custom_css_hooks() {
add_meta_box('custom_css', '独自CSS', 'custom_css_input', 'post', 'normal', 'high');
add_meta_box('custom_css', '独自CSS', 'custom_css_input', 'カスタム投稿名', 'normal', 'high');
}

赤文字部分のコードを追加されました。

追加されたコードの中に【カスタム投稿名】という部分があります。
独自CSSを読み込ませたいカスタム投稿の名前に書き換えてください。

カスタム投稿名が【test】であれば【test】と書き換えます。

カスタム投稿名の調べ方は、以下のコンテンツを参考にしてください。
カスタム投稿名とカスタムタクソノミー名の調べ方

投稿以外でも独自jsを読み込めるようにする方法

【投稿ごとに独自のjsを読み込むカスタマイズ】でfunctions.phpに追加したコードの中にある、以下の部分を調整することで、固定ページやカスタム投稿でも独自CSSを読み込めるようになります。

function custom_js_hooks() {
add_meta_box('custom_js', '独自js', 'custom_js_input', 'post', 'normal', 'high');
}

このコードを以下のように修正してやります。

固定ページで独自jsを読み込めるようにしたい場合

以下のように修正します。

function custom_js_hooks() {
add_meta_box('custom_js', '独自js', 'custom_js_input', 'post', 'normal', 'high');
add_meta_box('custom_js', '独自js', 'custom_js_input', 'page', 'normal', 'high');
}

赤文字部分のコードを追加しました。

カスタム投稿で独自jsを読み込みたい場合

以下のように修正します。

function custom_js_hooks() {
add_meta_box('custom_js', '独自js', 'custom_js_input', 'post', 'normal', 'high');
add_meta_box('custom_js', '独自js', 'custom_js_input', 'カスタム投稿名', 'normal', 'high');
}

赤文字部分のコードを追加されました。

追加されたコードの中に【カスタム投稿名】という部分があります。
独自CSSを読み込ませたいカスタム投稿の名前に書き換えてください。

カスタム投稿名が【test】であれば【test】と書き換えます。

カスタム投稿名の調べ方は、以下のコンテンツを参考にしてください。
カスタム投稿名とカスタムタクソノミー名の調べ方

まとめ

投稿ごとに独自のCSSやjsを読み込ませるカスタマイズをご紹介しました。

  1. functions.phpにコードを追加する。
  2. header.phpにコードを追加する。(独自jsはfooter.php)
  3. 投稿画面に独自CSSの入力項目が追加されているのを確認する。
  4. 独自CSSが読み込まれているのを確認する。

基本的にコピペだけで行える簡単なカスタマイズです。
興味のある方は、挑戦してはいかがでしょうか?

Wordpressサイトのカスタマイズで
お困りではありませんか?

あなたのWordpressサイトを、ご希望に沿ってカスタマイズいたします。
次に該当する方は、お気軽にご相談下さい。

  • Wordpressサイトをカスタマイズしたいが、やり方が分からないで困っている。カスタマイズの知識が豊富な人に任せたい。
  • Wordpressサイトをカスタマイズしたいが、自分でカスタマイズする暇がない。カスタマイズが得意な人に丸投げしたい。
  • Wordpressサイトをカスタマイズしてみたが、上手くカスタマイズできなかった。カスタマイズ経験が豊富な人に任せたい。
  • Wordpressサイトをカスタマイズしてみたら、バグが発生して困っている。正常に動作するように正しくカスタマイズしてほしい。

一つでも該当する方は、以下のリンクからチェックしてみてください。

詳細を確認する


著者:takaya kondo

岡山在住のWordPress専門フリーランサーです。Wordpressを使ったWEBサイト制作を中心に10年間ほど活動させていただいています。

Wordpress関連の記事でお役に立てれば幸いです。

【関連記事】あなたが興味のありそうな関連記事をご紹介します。

コメントを残す

(必須)

CAPTCHA