Twenty Twelve/スタイルシート(css)でページ毎にサイドバーの幅を変えたり、消す(なくす)方法。

この記事には広告を含む場合があります。

記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。

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%;*/
	}