WordPressで特定の投稿や固定ページにスタイルやスクリプトを挿入するカスタマイズ

2022年5月25日

web制作 WordPress

WordPressのテーマ制作時に絶対といってよいほど加えるべき機能がこれです。

運用が始まる前はコンテンツ内容は固まっていますが運用段階が始まってしばらくたつと例外処理が発生します。

そんなときこの機能を用意しておくとテーマのcssファイルやjsファイルを変更する必要がなく、かつ本番系、開発系で処理をわけることが簡単になります。

内容的にはカスタムフィールドを使います。

今回のコードではカスタムフィールド「custom_header」を作成してコードを書くとheadタグ内にここに書いたコードが吐き出されます。

また、カスタムフィールド「custom_footer」を作成してコードを書くとbodyタグの一番下のほうにここに書いたコードが吐き出されます。

カスタムフィールドを設定したらfunctions.phpに以下のコードを記入します。

if ( ! function_exists( 'custom_header_css' ) ) :
function custom_header_css() {
    global $post;
    $field = 'custom_header';
    if ( is_singular() ) {
        $custom_block = get_post_meta( $post->ID, $field, true );
        if ( $custom_block ) {
            echo $custom_block;
        }
    }
}
add_action( 'wp_head', 'custom_header_css', $priority = 100 );
endif;

if ( ! function_exists( 'custom_footer_script' ) ) :
function custom_footer_script() {
    global $post;
    $field = 'custom_footer';
    if ( is_singular() ) {
        $custom_block = get_post_meta( $post->ID, $field, true );
        if ( $custom_block ) {
            echo $custom_block;
        }
    }
}
add_action( 'wp_head', 'custom_header_css', $priority = 100 );
endif;

これでいざとなった時に即座にスタイルとスクリプトを挿入できるようになります。