この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
WordPress/Twenty Twelveで固定ページやカスタム投稿タイプなど、ページ毎に別のCSSを使ってサードバーの
幅を狭めたり消したりする方法。
オリジナルのスタイルシートファイル作成します。
ここでは、『shop.css』というファイル名で作成しています。
保存先は
/[wordpressのホームディレクトリ]/wp-content/themes/[テーマディレクトリ]/css/shop.css
です。
今回は、サイドバーを消してみます。
まず、single.phpのサイドバー表示を削除します。
<?php get_sidebar(); ?> --- これを削除 <?php get_footer(); ?>
これだけでは、サイドバーの表示がなくなっただけで、サイドバーのエリアは空白として
残っていますので、以下のようにし、コンテンツ部分だけ(1カラム)表示にします。
ここでは、single.phpだけ1カラムにします。
他のページは、変更なしです。
CSSの設置場所は </HEAD> の直前に入れます。
【header.php】
<?php if ( is_single() ) { // シングルページ ?>
<link href="<?php echo get_template_directory_uri(); ?>/css/shop.css" rel="stylesheet" type="text/css" />
<?php } else { //  以外 ?>
<?php } ?>
</head>
※ カスタム投稿タイプ (例 singel-shop.php)の場合
<?php if ( get_post_type() === 'shop' ) { // カスタム投稿タイプ ?>
<link href="<?php echo get_template_directory_uri(); ?>/css/shop.css" rel="stylesheet" type="text/css" />
<?php } else { //  以外 ?>
<?php } ?>
CSSの変更箇所は /*zono-custom*/ 部分のみです。 
【shop.css】
/* =Media queries
-------------------------------------------------------------- */
/* Minimum width of 600 pixels. */
@media screen and (min-width: 600px) {
	.author-avatar {
		float: left;
		margin-top: 8px;
		margin-top: 0.571428571rem;
	}
	.author-description {
		float: right;
		width: 80%;
	}
	.site {
		margin: 0 auto;
		max-width: 960px;
		max-width: 68.571428571rem;
		overflow: hidden;
	}
	.site-content {
		float: left;
		width: 100%;/*zono-custom 65.104166667%;*/
	}
	body.template-front-page .site-content,
	body.single-attachment .site-content,
	body.full-width .site-content {
		width: 100%;
	}
	.widget-area {
		float: right;
		width: 0%;/*zono-custom 26.041666667%;*/
	}
				32ARTS