WordPressでブログの運用歴が長い人は「クラシックエディタ」を使っていた方も、最近では「ブロックエディタ」で記事作成する方法へシフトしている方も増えているのではと思います。

この記事は「クラシックエディタ」でソースコード更新していたページで、カスタムフィールドを使うとき専用の内容かもしれません。

カスタムフィールドを使える設定にする

ページ別にCSSやJavascriptをお手軽に追加して、デザインを変えてみたり、何か変化させたりしたい。という時ありませんか！

設定からカスタムフィールドを使えるようにする方法は以下です。

• 投稿ページの公開ボタンの2つ右にある「･･･」を押して「設定」に行きます。
• 「パネル」の追加「カスタムフィールド」をONにして「リロード」ボタンを押します。

カスタムフィールドを入力してみよう

管理画面上の第二引数は今回（cssとjs）としました。
（第二引数は、カスタムフィールドの名前の部分を表します。）

• 「カスタムフィールドを追加：」にある「新規追加」を押してください。「-選択-」のプルダウン部分が、名前を入力が可能状態になります。
• 名前にcssと入れて、値（内容）は適当に入力します。
• 「カスタムフィールドを追加」ボタンを押します。（上のカスタムフィールドへ追加されます。）

ソースコードを追加しよう

カスタムフィールドを追加しただけでは何も起きません。
出力したいところに吐き出してもらう為の、ソースコードの追加が必要になります。

■ WPテーマ内のファイル：function.php

function.phpへ下のコードを追加します。

• カスタムフィールドでcss入れたい時

// カスタムフィールドでページ別にCSSを読み込む
function include_custom_css() {
    $dir = get_template_directory_uri();
    if ( is_single() || is_page() ) {
		if ( post_custom( 'css' ) ) {
            $css = explode( ',', post_custom( 'css' ) );
            foreach ( $css as $value ) {
                echo "<style type=\"text/css\">\n{$value}\n</style>\n";
            }
		}
	}
}
add_action( 'wp_head', 'include_custom_css' );// ページにcssが刺さる(wp_head)

• カスタムフィールドでjavascriptを入れたい時

// JavaScriptコードが変換されないように保存
function save_custom_js( $post_id ) {
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
        return;
    }

    if ( isset( $_POST['js'] ) ) {
        $js = wp_unslash( $_POST['js'] );
        update_post_meta( $post_id, 'js', $js );
    }
}
add_action( 'save_post', 'save_custom_js' );

// カスタムフィールドでページ別にJavaScriptを読み込む
function include_custom_js() {
    if ( is_single() || is_page() ) {
        $js = get_post_meta( get_the_ID(), 'js', true );

        if ( $js ) {
            echo "<script type=\"text/javascript\">\n";
            echo "{$js}\n";
            echo "</script>\n";
        }
    }
}
add_action( 'wp_footer', 'include_custom_js' );// ページにjsが刺さる(wp_footer)

上記方法は、function.phpへの追加作業だけで完了します。

がしかし、差し込む場所をどうしても指定したい場合はありますでしょうか？その時は、参考の@fromage-blancさんの方法にすると幸せになれると思います。

差し込む場所を指定したいとき

参考同様に、header.phpとfooter.phpにソースを仕込みます。
get_post_meta()を使用します。
管理画面上の第二引数は上と同じ（cssとjs）としました。

■ WPテーマ内のファイル：header.php

// </head>前に追加
echo get_post_meta($post->ID, 'css', true);
</head>

■ WPテーマ内のファイル：footer.php

// </body>前に追加
echo get_post_meta($post->ID, 'js', true);
</body>

※参考の@fromage-blancさんは、管理画面上の項目の第二引数は（head_customとbody_custom）としているようですね。

クラシックには戻れないかも

ビジュアルエディターで記事を作成し始めたら、簡単にhtml（cssやjs）も差し込めます。
ブロックの「カスタムHTML」というものです。

SEOのためにカスタムフィールドを利用しようと思ったのですが、それならプラグインのアプリが優秀です。今はもう、いらない子なのかなぁ。

カスタムフィールドは「ビジュアルエディター」「コードエディター」どちらでも使えるので、使い方次第で用途が出てくるかもしれませんし、出てこないかもしれません。

参考サイト

参考にさせていただきましたブログのリンクです。
ありがとうございます。

参考：@fromage-blanc
【ワードプレス】記事毎に任意のcssやjsを挿入【カスタムフィールド】
https://qiita.com/fromage-blanc/items/c2d71f0c377dc53403ef

参考：Naifix
WordPress でページごとに個別の CSS を設定する方法 7 選
https://naifix.com/page-css/

参考：ことだま
【プラグインなし】WordPressのページごとに個別のCSSを追加する方法
https://cotodama.co/custom_css/

参考：JavaDrive
エスケープシーケンスの種類と使い方
https://www.javadrive.jp/php/string/index4.html

参考：WordPress.com
カスタム HTML ブロック
https://wordpress.com/ja/support/wordpress-editor/blocks/custom-html-block/

【AI】イラストを描いてもらった

今回の記事のキャッチ画像で使わせてもらいます「Memeplex.app」で作成した画像です。誰でもgoogleアカウントでログインして使えます。

この記事にピッタリなイラストのための考えたリクエストは、「ノートパソコンの画面にWordPressの文字が大きく表示されている。画面の背景はブルーで、文字の色は白色。ノートパソコンの背景は薄いグリーン1色。」です。
選んだモードは以下の3つです。

• 映画のポスター
• サイバーパンク風
• UnrealEngine5風

WordPressの文字は入れると規約違反になるのでしょうか。うーん。