ベストセラー人気 WordPress テーマTop 30 詳細

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

Last Updated:2016年8月2日| 2のコメント
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

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を変更する必要があれば第コンテキストもしコードの命令を知ることができますか? 初対面からお願いをささげるなって申し訳ありません。

    応答
    • こんにちは?

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

      まずテーマフォルダ内の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/

      問題がうまく解決されることを願います。 役に立ちました場合は、 "後援する」ページで、寄付を通じてこのブログを主催することができます。(笑)

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

      応答