Sponsor

条件分岐/一部の記事だけテーマを変更する2つの方法

条件分岐/一部の記事だけテーマを変更 WP CSS
条件分岐/一部の記事だけテーマを変更
Sponsor

一部の記事だけテーマを変更する方法を2つ

  • 条件分岐・条件分岐タグ(function php)で指示する方法
  • プラグイン「Multiple Themes」を利用する方法

function php で指示する方法

条件分岐 「if」「else」「elseif」を利用する

if(条件①)条件を記述する場合「if」
elseそれ以外
elseif(条件②)複数の条件を記述する場合は「elseif」

条件①の場合②を実行、それ以外⑤を実行

  • 1つの条件の場合 if
  • 複数の条件の場合(条件を追加する場合)elseif
if( 条件①) {②を実行
}
elseif ( 条件③ ) {④を実行
} 
else {⑤を実行
}

「if」と「elseif」について

条件実行
投稿IDが「21363」の場合テーマ「hygiene」で表示する
投稿IDが「21328」の場合テーマ「m-sora」で表示する
※投稿IDの見つけ方は下記参照
//投稿ID別にテーマを変更する例
function get_skin_url() {
    $skin_file = get_theme_option( OP_SKIN_URL, '' );
	
	if( is_single(21363) ) { 
		$skin_file = get_template_directory_uri().'/skins/hygiene/style.css';
	}
	elseif(is_single(21328)) {
		$skin_file = get_template_directory_uri().'/skins/m-sora/style.css';
	}
    return $skin_file;
}

条件分岐タグ一覧

複数の条件を指定する場合は「 , 」で入力します。

  • 条件分岐タグ参考→条件分岐タグwikipedia

カテゴリー別に指示する

  • カテゴリーのID10の時、別のテーマ「別のテーマのスタイルシートのURL」を実行する
条件の書き方条件
is_category( ’10’ )カテゴリーのID10のアーカイブのページ
is_category( ‘soccer’ )カテゴリーのスラッグ「soccer」のアーカイブのページ
is_category( array( 10,20,30 ) )カテゴリーのID10、20、30のアーカイブのページ
in_category( ’10’ )カテゴリーのID10に属する投稿全て
in_category( array( soccer ) )カテゴリーのスラッグ「soccer」に属する投稿全て
in_category( array( 10,20,30 ) )カテゴリーのID10、20、30に属する投稿全て

タグ別に指示する

  • 例 タグ「soccer」の時、別のテーマ「別のテーマのスタイルシートのURL」を実行する
条件の書き方条件
is_tag( ‘soccer’ )タグのスラッグ「soccer」のアーカイブのページ
has_tag( ‘soccer’ )タグのスラッグ「soccer」に属する投稿全て
has_tag( array(‘soccer’, ‘Japan’) )タグのスラッグ「soccer」と「Japan」に属する投稿全て

トップページや固定ページ別に指定する

条件の書き方条件
is_front_page()フロントページ・トップページ
is_page()固定ページ
is_page( ‘5’ )ID5のページ
is_page( ‘about’ )固定ページのスラッグ「about」

記事毎にテーマを変更する条件分岐の書き方

function php (子テーマ)に記載します。function php に記載する前に保存することをオススメします。

function get_skin_url() {
    $skin_file = get_theme_option( OP_SKIN_URL, '' );
	
	if( is_single(投稿ID) ) {
        $skin_file = get_template_directory_uri().'/ スキンのURL ';
    }
	if( in_category( array(カテゴリーのスラッグ) ) ) {
		$skin_file = get_template_directory_uri().'/ スキンのURL ';
	}
  if( has_tag( 'タグのスラッグ' )  ) {
		$skin_file = get_template_directory_uri().'/  スキンのURL ';
	}
    if ( is_front_page() ) {
        $skin_file = get_template_directory_uri().'/ スキンのURL ';
    }
    return $skin_file;
}
ある投稿記事のみテーマを変更するis_single(投稿ID)
あるカテゴリーだけテーマを変更するin_category( array( カテゴリースラッグ) )
あるタグだけテーマを変更するhas_tag(“タグのスラッグ”))
フロントページだけテーマを変更するis_front_page()

get_skin_url関数

get_skin_url関数は、Cocoon独自のスキン切り換え関数です。

https://wp-cocoon.com/skin-switch-demo/

参考→https://gist.github.com/yhira/559bd516406377cdd105d0d93ea86deb

どのテーマに変更するか指定する「uri().’/スキンのURL’」

変更するテーマのURLを調べます。uri().’/スキンのURL’ この部分です。実際のスキンのURLは「/skins/スキンの名前/style.css」になります。

  • uri().’/skins/スキンの名前/style.css’

スキンの名前を見つける(スキンのstyle.cssを見つける)

FTPを利用します。マスターテーマの中のskinsの中に各スキンのstyle.css(スタイルシート)があります。

  • /wp-content/themes/cocoon-master/skins
条件分岐/一部の記事だけテーマを変更
条件分岐/一部の記事だけテーマを変更

「bizarre-foods-blackburger」の場合、スタイルシートのURLは

  • /skins/bizarre-foods-blackburger/style.css
条件分岐/一部の記事だけテーマを変更
条件分岐/一部の記事だけテーマを変更

function php で指示する実際

//テーマを変更する
function get_skin_url() {
    $skin_file = get_theme_option( OP_SKIN_URL, '' );
	
	if( is_single(21363) ) {
		$skin_file = get_template_directory_uri().'/skins/hygiene/style.css';
	}
	if( in_category( array( sports) ) ) {
		$skin_file = get_template_directory_uri().'/skins/lightning-skin/style.css';
	}
	if( has_tag( 'soccer' ) ) {
		$skin_file = get_template_directory_uri().'/skins/m-sora/style.css';
	}
	if ( is_front_page() ) {
        $skin_file = get_template_directory_uri().'/skins/m-tomato/style.css';
    }
    return $skin_file;
}

次のように変更しています。

条件表示するスキンのURL
投稿ID「21363」/skins /hygiene/style.css
カテゴリー「sports」/skins/lightning-skin/style.css
タグ「soccer」/skins/m-sora/style.css
フロントページ/skins/m-tomato/style.css
URLskins /スキンのフォルダの名前/style.css

「in_category」と「is_category」の違い

条件の書き方条件
in_category( array( sports) )カテゴリー「sports」の投稿すべて
is_category( ‘sports’ )カテゴリー「sports」のアーカイブのページ

is_category( ‘sports’ ) でテーマを変更した場合

  • カテゴリー「sports」のアーカイブのページのみ黒テーマ
//カテゴリーsportsのアーカイブのテーマを変更する
function get_skin_url() {
    $skin_file = get_theme_option( OP_SKIN_URL, '' );
	
	if( is_category( 'sports' ) ) {
		$skin_file = get_template_directory_uri().'/skins/skin-dark-kamonoha/style.css';
	}
    return $skin_file;
}
スポーツ(sports)のアーカイブのページ黒いテーマに変更(skin-dark-kamonoha)
スポーツの投稿記事白いテーマ(本来のテーマ)のまま

上のソースコードでカテゴリー「sports」のアーカイブのページを黒テーマに変更

条件分岐/一部の記事だけテーマを変更
条件分岐/一部の記事だけテーマを変更

カテゴリー「sports」の投稿記事は白テーマのまま

is_category( ‘sports’ )はアーカイブのみを変更します。

条件分岐/一部の記事だけテーマを変更
条件分岐/一部の記事だけテーマを変更

in_category( array( sports) ) )でテーマを変更した場合

  • カテゴリー「sports」に属する投稿を黒いテーマに変更する
//カテゴリーsportsに属する投稿のテーマを変更する
function get_skin_url() {
    $skin_file = get_theme_option( OP_SKIN_URL, '' );
	
	if(in_category( array( sports) ) ) {
		$skin_file = get_template_directory_uri().'/skins/skin-dark-kamonoha/style.css';
	}
    return $skin_file;
}
スポーツ(sports)に属する投稿全て黒いテーマに変更(skin-dark-kamonoha)

上のソースコードでカテゴリー「sports」の投稿ページを黒テーマに変更

左 本来の白テーマ・右 黒テーマ

条件分岐/一部の記事だけテーマを変更
条件分岐/一部の記事だけテーマを変更
分離条件タグ/一部の記事だけテーマを変更

投稿ID「21363」のテーマを変更する

  • 投稿ID「21363」のテーマを「hygiene」に変更する
//投稿ID 21363 のテーマを変更する
function get_skin_url() {
    $skin_file = get_theme_option( OP_SKIN_URL, '' );
	
	if( is_single(21363) ) {
		$skin_file = get_template_directory_uri().'/skins/hygiene/style.css';
	}
    return $skin_file;
}

投稿ID「21363」の投稿ページ・テーマ「hygiene」

条件分岐/一部の記事だけテーマを変更
条件分岐/一部の記事だけテーマを変更

カテゴリー「sports」のテーマを変更する

  • カテゴリーのスラッグが「sports」のテーマを「lightning-skin」に変更する
//カテゴリーsportsのテーマを変更する
function get_skin_url() {
    $skin_file = get_theme_option( OP_SKIN_URL, '' );
	
	if( in_category( array( sports) ) ) {
		$skin_file = get_template_directory_uri().'/skins/lightning-skin/style.css';
	}
    return $skin_file;
}

カテゴリー「sports」の投稿をテーマ「lightning-skin」に変更

条件分岐/一部の記事だけテーマを変更
条件分岐/一部の記事だけテーマを変更

タグ「soccer」のテーマを変更する

  • タグのスラッグが「soccer」のテーマを「m-sora」に変更する
//タグsoccerのテーマを変更する
function get_skin_url() {
    $skin_file = get_theme_option( OP_SKIN_URL, '' );
	
	if( has_tag( 'soccer' ) ) {
		$skin_file = get_template_directory_uri().'/skins/m-sora/style.css';
	}
    return $skin_file;
}

タグ「soccer」の投稿をテーマ「m-sora」に変更

条件分岐/一部の記事だけテーマを変更
条件分岐/一部の記事だけテーマを変更

トップページのテーマを変更する

  • トップヘージのテーマを「m-tomato」に変更する
//トップヘージのテーマを変更する
function get_skin_url() {
    $skin_file = get_theme_option( OP_SKIN_URL, '' );
	
	if ( is_front_page() ) {
		$skin_file = get_template_directory_uri().'/skins/m-tomato/style.css';
	}
    return $skin_file;
}

トップヘージのテーマを「m-tomato」に変更

条件分岐/一部の記事だけテーマを変更
条件分岐/一部の記事だけテーマを変更

投稿ID・スラッグの確認方法

投稿IDの確認方法

  1. 投稿の編集画面を開く
  2. URLを確認する
  3. post=「投稿ID」
条件分岐/一部の記事だけテーマを変更
条件分岐/一部の記事だけテーマを変更

カテゴリーとタグのスラッグの確認

  1. ダッシュボード→カテゴリーまたはタグ
  2. クイック編集をクリック
  3. スラッグが表示される

プラグイン「Multiple Themes」を利用する

「Multiple Themes」を利用することで、簡単に2つ以上のテーマを使い分けることができます。

  • フロントページを別のテーマにする
  • カテゴリーアーカイブページを別のテーマにする
  • タグアーカイブページを別のテーマにする
  • 投稿者のアーカイブページを別のテーマにする
  • ある投稿記事のみ別のテーマにする

詳しくは下のリンクに記載しています。

WP CSS
Sponsor
ゆきををフォローする