ワードプレス

WordPressの投稿や記事ページごとに個別のCSSとJSを追加する方法【カスタマイズ】

CSSとJS追加アイキャッチ画像

基本的にトップページや投稿ページは同じCSSJSを読み込んでいます。なので1つのページ投稿のみに適応したCSSを追加した場合でも、他のページでコードは読み込まれています。

トップページや他の記事でまったく使わないCSSが大量にあると、サイト表示スピードがその分遅くなってしまいます。

WordPressの投稿で個別ページのみCSSJSを適応したい時の方法についても解説します。

投稿にCSSJSのカスタムフィールドを追加するやり方です。

プル

これでコード量でのサイト全体遅延を気にせずにデザインが出来るようになりますね。

CSS&JS入力欄を作る方法

下の画像がカスタマイズ出来たものになります。

カスタムCSSとJS
カスタムCSSとJS

functions.phpを編集するので、コードを追加する前に バックアップをとることをおススメします。

有料テーマを使用している方は子テーマにfunctions.phpを作ってそこにコードを追加します。

※子テーマについての解説については下記の記事を参考に。

子テーマアイキャッチ画像
子テーマでJSを読み込む方法【WordPress】WordPressのテーマを使っている場合、親テーマに独自のJSを追加して動かす事が出来ますが、親テーマのアップデートがあると編集内容が上書きされて独自のJSは消えてしまいます。子テーマに施したカスタマイズは、親テーマをアップデートしても影響はありません。サイトをカスタマイズする場合は基本子テーマに記述していかなければなりません。そこで必要になってくるのが、JSファイルを子テーマで読み込みです。ブログサイトなどで独自のJSを追加したい場合のファイル構成と追加コードについて解説。...

functions.phpにコード追加

カスタムCSSとカスタムJSを両方追加する記述です。

CSSJS別々のfunctions.phpにしていますが、両方適応させる場合は同じfunctions.phpに記載でOKです。

functions.phpの一番上に<?phpが必要です。

<?php
カスタムCSS
カスタムCSS

カスタムCSS

<?php
//カスタムCSSを投稿に追加
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 );
}
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();
  }
}
カスタムJS
カスタムJS

カスタムJS

//カスタムJSを投稿に追加
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' );
  add_meta_box( 'custom_js', 'カスタム JS', 'custom_js_input', 'page', '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();
  }
}

functions.phpを更新・アップロードして「投稿」にカスタムCSSカスタムJSが追加されていれば完了です。

add_meta_box( 'custom_css', 'カスタム CSS', 'custom_css_input', 'post', 'normal', 'high' );
add_meta_box( 'custom_css', 'カスタム CSS', 'custom_css_input', 'page', 'normal', 'high' );

postが投稿ページでpageが固定ページになります。

設置完了
設置完了

▪JavaScript本格入門 モダンスタイルによる基礎から現場での応用まで
JavaScriptのプログラミングスタイルを基礎から解説。手軽さゆえに油断しがちな正しい文法から、進化を遂げた新記法、オブジェクト指向構文、実際の開発に欠かせない知識まで身につけられます。

カスタムCSSの使い方

投稿編集画面の下にカスタムCSSに反映させたいCSSを追加します。

カスタムCSS
カスタムCSS

これでその投稿のみにCSSが適応されるかと思います。

カスタムCSSの使用の注意点

カスタムCSSに改行を入れてしまうと機能しなくなるので、改行なしでの記述が必要になります。

改行NG
改行NG

改行ありはNG

改行なしOK
改行なしOK

・改行なしはOK

↓下記本は知識ゼロからJavaScriptがわかる本です。

スラスラわかるJavaScript
スラスラわかるJavaScript

▪スラスラわかるJavaScript
初めてプログラミングを学ぶ人を対象にした“スラスラわかる”シリーズ。JavaScriptの基礎知識や作法、基本構文、基本テクニックなどを無理なく習得し、かつプログラムが自力で作れるようになるところまで。JavaScriptの基礎固めをしっかりしたい方だけでなく、ほかの入門書で挫折した方やプログラミングに苦手意識を持っている方にもおすすめの一冊です。

book
created by Rinker
¥2,530 (2022/10/04 16:20:13時点 楽天市場調べ-詳細)

改行を一括で削除する方法は下記の「サクラエディタ(改行削除)」で解説しています。作業効率を上げたい方は活用してみてください。

↓jQueryについてしっかり理解したい方は下記の本がお勧めです。(古い本になりますが、良本です。)

Webデザイナーのための jQuery入門 魅力的なユーザーインターフェースを手軽に作る
Webデザイナーのための jQuery入門 魅力的なユーザーインターフェースを手軽に作る

▪Webデザイナーのための jQuery入門 魅力的なユーザーインターフェースを手軽に作る
jQueryはいま最もウェブデザイナー、ウェブサイト制作者に注目されている技術と言っても過言ではありません。ウェブサイトにアコーディオン・タブ・ツールチップなどを組み込もうと思ったら、まずjQueryを使うのがセオリー。

コメントを残す

メールアドレスが公開されることはありません。

CAPTCHA