当サイトのリンクにはアフィリエイト広告が含まれています

WordPressテーマカスタマイザーにカラム設定を追加する方法。

カスタマイズ By シェフ

WordPressテーマの中には、テーマカスタマイザー（外観→カスタマイズ）でカラムを切り替えできるものがあります。

  • 2カラムでサイドバーを右に
  • 2カラムでサイドバーを左に
  • 1カラムでサイドバーを非表示

と、ボタンをクリックするだけでサイトのレイアウトが変更できるので、プログラミングが一切わからない方にも直感的にカスタマイズをしてもらうことが可能です。

今回は、そのカラムの切り替え機能をテーマカスタマイザーに追加する方法をご紹介します。

基本知識

テーマカスタマイザーを拡張する上で必要な知識や考え方は下記記事にまとめているので、まずは一度チェックしてみましょう。

WordPressの外観→カスタマイズに設定項目を追加する方法！ Fantastech!! もっと見る

カスタマイズの流れ

今回の流れをざっくりと説明すると、下記のようになります。

  1. テーマカスタマイザーに設定項目を追加（functions.php）
  2. 1の設定をheader.phpのbody要素に「id」や「class」として追加
  3. 2のidやclass別のcssをスタイルシートに追加

つまり、body要素のid名やクラス名によって、適用されるcssが変わるという仕組みです。

もちろん、body要素ではなく、main要素や#wrapperなどに適用してもOKですし、やり方はいくつかあります。

では始めましょう。

テーマカスタマイザーにカラム切り替え機能を追加

こちらがサンプルコードです。

function theme_customizer_extension($wp_customize) {

//デザイン設定
$wp_customize->add_section( 'design', array (
 'title' => 'デザイン設定',
 'priority' => 10,
));

 $wp_customize->add_setting( 'layout', array (
 'default' => 'left-content',
 ));
 $wp_customize->add_control( 'layout', array(
 'section' => 'design',
 'settings' => 'layout',
 'label' =>'サイトのレイアウトを変更できます。',
 'type' => 'radio',
 'choices' => array(
 'left-content' => '2カラム（右サイドバー：デフォルト）',
 'right-content' => '2カラム（左サイドバー）',
 'center-content' => '1カラム（サイドバーなし）',
 ),
 'priority' => 10,
 ));

}
add_action('customize_register', 'theme_customizer_extension');

//サイトレイアウト
function layout() {
 return get_theme_mod( 'layout', 'left-content' );
}

※なぜこのコードになるかは、先述のテーマカスタマイザーの拡張方法についての記事を見ればわかるので割愛します。

body要素にテーマカスタマイザーの設定値を読み込み

テーマカスタマイザーで設定した値（ラジオボタンで選択した文字列）を、body要素にクラス名として追加します。

<body class="<?php echo layout() ?>">

デフォルトのクラス名は「left-content」になり、その他のラジオボタンをクリックすると、それに応じてクラス名が変わります。

スタイルシートにcssを追加

ここからは、サイトのデザインによってコードがガラッと変わるので、「コピペでOK！」とはいきませんが、サンプルコードをご紹介します。

@media only screen and (min-width: 780px) {
#contents-wrapper {
 width: 100%;
 float: left;
 margin-right: -300px;
}
.right-content #contents-wrapper {
 float: right;
 margin: 0 0 0 -300px;
}
.center-content #contents-wrapper {
 margin: 0;
}
#contents-inner {
 background-color: #fff;
 margin: 0 320px 20px 0;
}
.right-content #contents-inner {
 margin: 0 0 20px 320px;
}
.center-content #contents-inner {
 margin: 0 0 20px 0;
}
#sidebar {
 float: right;
 width: 300px;
}
}

コードを見て「あ！なるほど！」と思うはずですが、id名やクラス名別に、「float」や「margin」「padding」の値を変えています。

解説

例えば、デフォルトのレイアウトが「コンテンツが左で、サイドバーが右」の場合、

  1. コンテンツに「margin-right:-300px」を指定（右の余白にマイナスの値を指定し、300px分の隙間を作る）
  2. サイドバーに「float:right」と「width:300px」を指定（300px分の隙間に幅300pxのサイドバーを入れる）

となります。

そして、「コンテンツが右で、サイドバーが左」というレイアウトにする場合、body要素に「right-content」というクラス名が付いた時のcssを指定すればOKということになります。

【具体例】コンテンツに「margin-left:-300px」と「margin-right:0」を指定

【説明】左の余白にマイナスの値を指定し、300px分の隙間を作り、デフォルトで設定している右のマイナスの余白を消す

1カラムにする場合

1カラムにする場合も考え方は同じです。

例えば、body要素のクラス名が「center-content」だった場合に、

  1. コンテンツに「margjn:0」を指定（余白を作らない）
  2. サイドバーを非表示にする

とすれば、1カラムになりますね。

サイドバーを非表示にする方法

「display:none」でサイドバーを非表示にしてもいいですが、もっとスマートな方法があります。

<?php if ( layout() !== 'center-content' ) { //サイドバー表示切り替え ?>
<div id="sidebar">

</div>
<?php } ?>

これは、テーマカスタマイザーの設定値がcenter-content（1カラムにするクラス）以外だったらサイドバーを表示するという条件分岐です。

これで、1カラム以外のレイアウトの時はサイドバーがそもそも読み込まれません。サイドバー以外でも応用がきくテクニックなので、色々試してみてはいかがでしょうか？

まとめ

テーマカスタマイザーを拡張する前は、「すごく難しいことをやっている」と思っていましたが、今回ご紹介したように、やっていることはかなり簡単です。

3カラムにする場合も、4カラムにする場合も、考え方は同じなので、自作テーマにカラム切り替え機能を実装したい方は、一度挑戦してみてはいかがでしょうか？

以上、ご参考までに！(｀･ω･´)ゞ

カテゴリー：カスタマイズ

シェフ

このサイト「Fantastech」を運営している人