この記事には広告を含む場合があります。
記事内で紹介する商品を購入することで、当サイトに売り上げの一部が還元されることがあります。
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%;*/ }