[WordPress] Twenty Twelveテーマでサイドバーなくす

WordPressの基本的なテーマの一つであるTwenty Twelveはシンプルで簡単にカスタマイズが可能です。 前へでTwenty Twelveテーマにウィジェット領域と検索ボックスを追加する方法を説明しました。 この記事では、サイドバーなくしFull-widthページに作成する方法を説明します。

Twenty Twelveテーマのテーマオプション(ルックス>カスタマイズ)でサイドバーをなくすオプションがあるか確認してみるようなオプションがないですね。 しかし、 サイドバーのウィジェットを削除とFull-widthページの形式で表示されます。

もしサイドバーのままおく場合には、サイドバーを非表示にし、メインコンテンツ領域の幅を100%に変更します。 たとえば、特定のページのみサイドバー非表示にしたり、特定の文のみサイドバーを非表示にする場合には、サイドバーのウィジェットをそのままにして、次のようなコードをスタイルシートファイル(style.cssの)に追加するようにします。

.single.single-post #primary {
width: 100%;
}

.single.single-post .site {
max-width: 57.14rem;
}
.single.single-post #secondary {
display:none;
}

上記の場合、単一のポスト(Single Post)のみサイドバーのないフロントページレイアウトで表示されます。 ここで、実際の動作例を見ることができます。 必要に応じてフッターウィジェットエリアを追加したり、サイドバーのウィジェットをフッターウィジェットに使用するようにCSSを調整してくれることができます。

Twenty Twelveテーマのサイドバーなくしたレイアウト
Twenty TwelveテーマのレイアウトをFull-widthに変えた後の形状

例えば、次のようなコードをスタイルシートファイルに追加して、サイドバーのウィジェットに3つのウィジェットを追加すると、サイドバーのウィジェットがフッターウィジェットのように動作します。

.single.single-post #primary {
width: 100%;
}

.single.single-post .site {
max-width: 57.14rem;
}
.single.single-post #secondary {
width: 100%;
}

@media screen and (min-width: 960px) {
.single.single-post #secondary aside {
width: 32%;
display: inline-block;
float: left;
padding: 5px;
}
}

.site{...} 部分は ボディの最大幅を指定する部分です。 サイドバーの使用されていないため、 ボディの最大幅を適切に調整するようにします。 サイドバーCSSで隠さずにテーマのソースから 部分をコメントアウトするか、削除して削除することも可能です。 サイドバーのウィジェットのウィジェットを削除する方法を使用している場合には、 ボディ 幅を指定するだけです。

Twenty Twelveなどの基本テーマをよく活用してもすっきりとしたスタイルのブログを作成することができるようになります。 デフォルトのテーマを使用すると、余計な(?)のプラグインがなくて速度面でもメリットがあります。 そして、比較的容易にカスタマイズが可能です。 あまりにも派手な効果を望まない場合は、デフォルトのテーマを活用するのも良い方法です。


2のコメント

  1. https://uploads.disquscdn.com/images/06fb75fc207485da9d99985b7b9b50b2552b3089db494d885f554d2c0a3b9b9a.png https://uploads.disquscdn.com/images/6dd1e6cb787f3a2d04bdbbaf57dcd84ba346242b8ab248f85842c121c5c053e9.png こんにちは WordPress サイドバーに関して検索してそのページを見るようになりました。 特定のページや文章ではなく「商品」にもサイドバーを削除し、商品コンテンツをサイドバー領域まで埋める方法があるでしょうか? 現在使用されているテーマはwp-storeです。 上の記事ではstyle.cssを修正する方法を書いてくれましたが、もし私の場合もstyle.cssを修正しなければならない場合、私の状況に合ったもしかしたらコード命令を知ることができますか? 初めからお願いしますので申し訳ありません。

    1. こんにちは?

      ブログを訪問していただきありがとうございます。

      まずテーマフォルダ内のstyle.cssファイルを直接変更すると、今後のテーマが更新されると変更がすべて失われます。 ルックス>ユーザー定義>追加CSSに追加したり、チャイルドテーマを使用してください。

      ご希望の内容は、2つの方法が可能ハニダ。
      1) WooCommerce テンプレートファイルの修正
      2)CSSで非表示に

      CSSで非表示にすることがどうしても簡単になります。 CSSで非表示にする方法は、上記の提示された方法と原理は同じです。

      サイトバー - >表示されないようにする
      コンテンツ部分 - > 100%で増やす

      次のコードを外見>ユーザー定義>追加CSSとの一番下に追加してください。

      .product-template-default #primary, .tax-product_cat #primary {
      width: 100% !important;
      }

      実際にテストしてみていないのでうまくいくかどうかは分かりません。 そして、次の文も参照してください。

      https://www.thewordcracker.com/basic/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4%EC%97%90-css%EB%A5%BC-%EC%A0%81%EC%9A%A9%ED%95%98%EB%8A%94-%EB%B0%A9%EB%B2%95%EA%B8%B0%EC%B4%88/

      問題がうまく解決されることを願っています。 あなたが助けてくれたら、「スポンサー」ページで寄付を通してこのブログを後援することができます。

      楽しい夜の時間を持って^^

コメントを残す

*メールアドレスは公開されません。