【WP】特定の固定ページにだけテーマとは別のデザインを適用する方法

90thumb-s

かなりイレギュラーな制作方法かもしれないですが。実際あったお願いで、最初つまづいた点もあるので最終的な対応の仕方をメモしておきます。
もっとスマートな方法があるかもしれませんが、運用更新する上で問題ないレベルだと思います。

『特定の固定ページにだけテーマとは別のデザインを適用する』とは

依頼内容を補足。

  • クライアントが既に自分でWPサイトを運用。
  • テーマは有料のものを購入して設定済み。
  • テーマはそのままで、固定ページにのみ新しいデザインのコンテンツを数ページ追加。

テーマが設定されているので、当然固定ページの中身は既存テーマのCSSが影響してきます
そこだけオリジナルのデザインを入れても当然表示は総崩れ。

そのため、問題は
新規固定ページにだけ、既存テーマの影響を受けさせないようにするには?
というところでした。

ちなみに、新しいページだけ、ファイルごとWPファイルの中に入れられれば一番手っ取り早いと思います。
しかし、クライアントが自分で運用する上でWPの投稿画面上でソースを触りたいということでした。

① 最初つまづいた方法

最初、新規固定ページ用のCSSもWPのstyle.cssに追加するという通常の方法を考えてました。

そこで、固定ページに適用されてるclassをデベロッパーツールで確認。
新規固定ページだけ別途jQueryファイルを読み込んで、不要なclassをremoveClassで削除してみました。

<link rel='stylesheet' href='http://sample.com/wp/wp-content/themes/sample-theme/css/sample.js' />
$(function(){
    $("div").removeClass("sample-theme-wrap");
    $("div").removeClass("sample-theme-content");
    $("div").removeClass("sample-theme-container");
});

こうすれば、style.cssを読み込みつつ、不要なclassだけ消せます。

結果は新規固定ページだけ、別のオリジナルデザインでの表示に成功。

が、致命的な問題が一つ。

一旦不要なclassも読み込んだ上で、後からjQueryで削除してるので、結局不要なclassも読み込んでしまっています。
そのため、ロードした瞬間に表示が崩れることがありました。

これは許容できないので別の方法を検討。

補足:固定ページの投稿画面から外部ファイルを読み込む方法

通常、body内である固定ページの投稿画面から外部ファイルを読み込むことはしません。
そもそもそんなことできるのかも知りませんでした。

今回は既存テーマの方で、投稿画面下部にhead〜/head内に挿入できる入力欄が用意されていたので、そこに記述して読み込みました。

他にも、jsやjQueryを使ってbody内から外部ファイルを読み込む記述をする方法はあるようです。

② 解決した方法

こちらの方がむしろシンプルでした。

まずは、新規固定ページ用のCSSファイルをテーマ内のcssフォルダに別途上げ、新規固定ページでだけ読み込みます。
(これも上記『投稿画面内から外部ファイルを読み込む方法』と同じ方法)

<link rel='stylesheet' href='http://sample.com/wp/wp-content/themes/sample-theme/css/sample.css' />

そして、header.phpやfunctions.phpなどで読み込んでいるテーマのstyle.cssを読み込む記述を条件分岐で囲み、固定ページでだけは読み込ませないようにしました。
(どこでどうcssを読み込んでるかはもちろんテーマによって変わってきます。)

//functions.phpで指定されているテーマのstyle.cssの読み込みを、特定の固定ページだけ除外

if ( !is_page(array(123,456,789))): // 除外する固定ページのIDを指定
     wp_enqueue_style( 'hogehoge', get_stylesheet_uri() );  // cssを読み込む記述
endif;

こうすれば、また他に固定ページにオリジナルデザインを適用する際も、条件分岐に固定ページのIDを追加するだけで対応できます。

その他の記述

あとは、pやbrが自動挿入されるWPの機能も除外する必要がありました。

//functions.php WPの自動整形を無効化

function disable_page_wpautop() {
     if ( is_page(array(123,456,789))) remove_filter( 'the_content', 'wpautop' );
}
add_action( 'wp', 'disable_page_wpautop' );

固定ページの画像はテーマ内の『images』フォルダにあげたので、パスを短縮する指定も。
これでテーマまでの長い記述を省略して、『[theme]/images/sample.jpg』といった短い記述で済ませられます。

// 投稿画面内の画像パスの短縮

add_shortcode( 'theme', 'shortcode_theme' );
function shortcode_theme( $atts, $content = '' ) {
     return get_template_directory_uri().$content;
}