WordPress Twenty Thirteenの横幅を調整する

コンテンツエリアの横幅を広げる方法と、特定のカテゴリでのみ横幅を広げるやり方です。

cssのカスタマイズ

style.cssの以下のコードでコンテンツエリアのwidthを指定しています。max-widthの値を大きくすることでTwenty Thirteenの横幅を調整することが可能です。

.entry-header,
.entry-content,
.entry-summary,
.entry-meta {
  margin: 0 auto;
  max-width: 604px;
  width: 100%;
}

サイト全体で横幅(width)を広げる場合には、cssの該当箇所を調整することでカスタマイズすることが出来ます。

特定カテゴリにのみ変更を適用

当初検討した方法

幅を広げる方法が分かりましたので、この変更を特定のカテゴリにのみ適用してみます。方法としては、

上で載せたCSSを別のclass名で複製し、HTML側のclass属性を書き換える

といったやり方で対応しようと思いましたが、class名を変更すると、アイコンフォントや一部のデザインが適用されない結果となったので、不採用にしました。それ以外にも、テーマ側のHTMLでclass属性を修正する作業や条件分岐などが生じるため、より簡単な方法を探すことにしました。

簡単な方法

上記の理由により、class属性の名称を変更せずに対応することになりました。

class名を変更せずに、特定のカテゴリに対して異なるスタイルを適用する場合は、インラインでカスタマイズしたCSSをHTMLのhead領域に出力することで対応することが可能です。

function add_full_width_css()
{
  // カテゴリ情報の取得
  $cat = get_the_category();
  // techカテゴリの場合だけカスタマイズしたCSSを出力
  if( $cat[0]->slug == "tech" )
  {
$css = <<< EOF
<style type="text/css" media="all">
  .entry-header,
  .entry-content,
  .entry-summary,
  .entry-meta {
    margin: 0 auto;
    max-width: 1069px;
    width: 100%;
  }
</style>
EOF;

  echo $css;
  }
}
 
add_action('wp_head', 'add_full_width_css');

wp_headアクションフックを利用してHTMLのheadにカスタマイズしたCSSを記述することが可能です。上のコードのように特定のカテゴリの場合だけ、デザインを変更するCSSが出力されるように設定することで、カテゴリ毎に動的に横幅を調整することが出来るようになります。