【WordPress】投稿ごとに独自のCSSやjsを読み込ませるカスタマイズ
MENU
  1. HOME
  2. WordPress / カスタマイズ
  3. 【WordPress】投稿ごとに独自のCSSやjsを読み込ませるカスタマイズ

最近の作業実績

  • 2022年10月18日不要になっていたコンテンツをサイト内から除去いたしました。
  • 2022年10月17日サイト内の画像が表示されない不具合を修正いたしました。
  • 2022年10月16日サイト内で発生した大量の404エラーを修正いたしました。
  • 2022年10月15日既存サイトの各所を簡単に更新できる機能を追加いたしました。
  • 2022年10月14日過去記事を定期的に自動ツイートする機能をテーマに実装いたしました。
  • 2022年10月13日サイト内の広告を一括管理できる機能をテーマに実装いたしました。
  • 2022年10月12日既存サイトのトップページを再構築いたしました。
  • 2022年10月11日クラシックエディターで管理されていたコンテンツをブロックエディターで再構築いたしました。
  • 2022年10月10日複数のサイトの更新情報を一括表示させる機能をテーマに実装いたしました。
  • 2022年10月09日WordPressの管理画面にオリジナルの管理ページを実装いたしました。
  • 2022年10月08日コンタクトフォーム7で構築されたフォームに確認画面とサンクスページを導入いたしました。
  • 2022年10月07日既存サイトのサーバー移管を担当いたしました。
  • 2022年10月06日フッターのレイアウトを再設計いたしました。
  • 2022年10月05日既存サイトのカラーを一括管理できる機能をテーマに実装いたしました。
  • 2022年10月04日新規ページを5ページ作成いたしました(デザイン込み)。
  • 2022年10月03日訪問者に閲覧履歴を表示する機能をテーマに実装いたしました。
  • 2022年10月02日ログインできなくなったWordPressを復旧いたしました。
  • 2022年10月01日オリジナルテーマの制作を担当いたしました。
  • 2022年09月30日破損していたテーマを修正いたしました。
  • 2022年09月29日アフィリエイト審査用のサイト立ち上げを担当いたしました。
  • このエリアには直近の制作実績を一部掲載しております。
  • 制作実績はリアルタイム反映ではありません。

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

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

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

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

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

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

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

今回のカスタマイズは、新旧どちらのエディタにも対応しています。
この記事は約 11 分で読めます。

投稿ごとに独自の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がハッキングされたが修正の仕方が分からない。サイトを元通りにできる人を探している。
  • Wordpressで0からサイトを制作したいが、自分ではできそうにもない。プロにサイト制作を委託したい。

一つでも該当する方は、以下のフォームからお気軽にご相談下さい。

WordPressに関して今すぐ相談する

著者:takaya kondo

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

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

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

コメントを残す

(必須)

CAPTCHA