固定ページ・投稿ごとにカスタムCSSを追記できるようにする方法【プラグイン不要】

WordPressサイトを運用していると「このページにだけCSSを追記して少しデザインを変えたい……」と思う場合があります。

そんなときに役に立つカスタムCSSを導入する方法を紹介します。固定ページや投稿の１ページごとにCSSを独自に追記し、ページごとに少しずつデザインを変えさせる機能です。

カスタムCSSはカスタムフィールドを使うことで導入します。プラグインは使わず、子テーマを使ってカスタマイズを行います。

まずは子テーマを導入しましょう

テーマファイルに直接変更を加えるとテーマのアップデートで変更が失われるので、まずは子テーマを導入します。

2022.06.19
子テーマを使ってWordPressをもっとカスタマイズしよう
WordPressを自分好みのものにするのに役立つのがテーマとプラグイン。ネット上には数えきれないほどたくさんのテーマやプラグインが公開され...

子テーマの必要性と導入方法については、上記の記事を参考にしてください。

functions.phpに追記

子テーマファイル内のfunctions.phpに以下の通りにコードを追記します。

// カスタムフィールドの追加
function add_field_for_custom_css() {
	$screens = array( 'post', 'page' );
	foreach ( $screens as $screen ) {
		add_meta_box(
      'custom_css',
			'カスタムCSS',
			'create_custom_css',
			$screen
		);
	}
}
add_action( 'add_meta_boxes', 'add_field_for_custom_css' );

// 記事・固定ページにカスタムCSSが使えるようにする
function create_custom_css() {
    $keyname = 'custom_css';
    global $post;
    $get_value = get_post_meta( $post->ID, $keyname, true );
    wp_nonce_field( 'action-' . $keyname, 'nonce-' . $keyname );
    echo '<textarea style="margin-top: 0px;margin-bottom: 0px;height: 82px;width: 100%;height: 150px;" placeholder="ここにCSSを書くと個別ページに反映されます。styleタグは不要です。" name="' . $keyname . '">' . $get_value . '</textarea>';
}

// カスタムフィールドの保存
add_action( 'save_post', 'save_custom_css_field' );
function save_custom_css_field( $post_id ) {
    $custom_fields = ['custom_css'];

    foreach( $custom_fields as $d ) {
        if ( isset( $_POST['nonce-' . $d] ) && $_POST['nonce-' . $d] ) {
            if( check_admin_referer( 'action-' . $d, 'nonce-' . $d ) ) {

                if( isset( $_POST[$d] ) && $_POST[$d] ) {
                    update_post_meta( $post_id, $d, $_POST[$d] );
                } else {
                    delete_post_meta( $post_id, $d, get_post_meta( $post_id, $d, true ) );
                }
            }
        }

    }
}

これで、投稿と固定ページで「カスタムCSS」のカスタムフィールドが追加されました。

続いて、カスタムCSSで記述した内容をCSSとして該当ページに出力できるよう、header.phpを編集します。

header.phpに追記

親テーマファイルのheader.phpを複製し、子テーマファイル内に配置してください。さらに、子テーマファイルheader.phpに以下のコードを追記します。

追記する位置は、</head>閉じタグの直前です。他のCSSファイルの読み込みなどよりも優先される必要があるので、必ず他のCSS読み込みタグや<?php wp_head(); ?>よりも後に記述するようにします。

<?php if (is_singular() )
{
$custom_css = get_post_meta($post->ID,'custom_css',true);
if($custom_css)
{
echo <<<EOS
<style>
$custom_css 
</style>
EOS;
}
}
?>

環境によってはエラーが出るのでインデントは利用しないことをおススメします。

ここまで作業すれば、投稿や固定ページの「カスタムCSS」に記述したCSSが、そのページにだけ適用されるようになるはずです。

CSSの書き方ですが、<style>タグは不要で以下のように書けば適用されます。

body {
color: red;
}

他の投稿タイプでもカスタムCSSを使えるようにするには

functions.phpに追記した$screens = array( 'post', 'page' );の部分にカスタムCSSを適用したい投稿タイプのスラッグを追記すればOKです。

$screens = array( 'post', 'page', 'post_type' );
TOP