WordPressでサイドバーを左と右の3カラムデザインにする

この記事が良ければ、ぜひシェアお願いします

今まで作ってきたテーマが2カラムのものばかりだったので、同じ発想で3カラムにも簡単にできるだろうとたかをくくって「ふふふん♪」とのんきに別サイトのテーマを作っていたら、上手く3カラムで表示がされないという事情に遭遇してしまいました。まだまだ初心者ですね、恥ずかしい限りです。

オリジナルテーマはダウンロードしてもらえてるみたいなのですが、反響がないのでテーマ構成の解説の需要はないのかなぁと思って後回しにしているのですが(笑)、WordPressではサイドバーを呼び出すための手順として下記のことが必要となってきます。

  1. functions.phpにサイドバーの定義をする
  2. サイドバーの構成を定義したsidebar.phpを用意しておく
  3. index.phpでサイドバーを呼び出すための関数を書いておく
  4. もちろんsidebar用のレイアウトをCSSに書いておく

あと、注意しておかないといけないところで言うと、もっと良いやり方があるのかもしれないですが、『サイドバーが次のコンテンツを変に回り込んで表示してしまう』ことがある、というところでしょうか。ですので、私の場合は、次にまたサイドバーを表示させたい場合には、<br clear=”all”>を打つようにしています。

WordPressでサイドバーを両側に定義する方法

WEBデザインの世界では割と有名なようなのですが、完全にCSSだけでサイドバーを定義する方法も確立されているようですね。ただ、私の場合個人的にmarginで-○○○pxとするのがあまり好きではないので、それぞれをdivタグで指定して配置する方法を使っています。

サイドバーウィジェットの定義

まず、WordPressでサイドバーウィジェットを使えるようにするには、functions.phpに定義しておいてあげる必要があります。これ便利ですよね。リスト形式にするのかテーブル形式にするのかも一緒に定義できるので。ここでは、私の場合のサンプルを載せておきます。

if ( function_exists('register_sidebar') )
    register_sidebar(array(
		'name'=>'side-widget-left',
		'id' => 'side-widget-left',
		'before_widget' => "<li class='sidebar-widget'>",
		'after_widget' => "</li>n",
		'before_title' => "<h3 class='sidebar-widget-title'>",		'after_title' => "</h3>n",
));
    register_sidebar(array(
		'name'=>'side-widget-right',
		'id' => 'side-widget-right',
		'before_widget' => "<li class='sidebar-widget'>",
		'after_widget' => "</li>n",
		'before_title' => "<h3 class='sidebar-widget-title'>",
		'after_title' => "</h3>n",
));

サイドバーのためのPHPファイルを作成する

index.phpにサイドバーの呼び出し関数を書くのは、基本テーマにも書かれているのでここでは割愛しますね。次にサイドバーのためのPHPファイルを作るところです。”sidebar.php”というファイル、良くWordPressのテーマでは含まれていることと思います。これです、これ。ただ、サイドバーが1つの時などにはこのPHPファイルが1つしかないこともあると思います。そうすると、「左カラムと右カラムでは幅を変えたりスタイルを変えたりしたいから困る!」となりますよね。

そんな時には、このPHPファイルを2種類用意してください。例えば、こんな感じです。

  • sidebar-left.php
  • sidebar-right.php

この、”sidebar-“と”.php”の【間】に来る言葉が大事なんです。この【間】の言葉が、例えばindex.phpでサイドバーを呼び出す時の引数となるわけです。ということで、そのサイドバーを表示させたい位置にindex.phpでこのように書いてください。

<?php get_sidebar('left'); ?>
~~~~
<?php get_sidebar('right'); ?>

サイドバーのためのPHPファイルを作る

ここでは私が作った時の例になりますが、こんな感じで作っています。ちなみに、”sidebar-left.php”の最後にうっかりbrタグでクリアオプションなんか付けたらダメですから注意です!

<div id="sidebar-left">
	<div class="sidebar-widget-container">
		<ul>
			<?php dynamic_sidebar( 'side-widget-left' ); ?>
		</ul>
	</div><!-- /.widget-area -->
</div>

3カラムにした場合のレイアウトサンプル

あとは、それぞれのカラムのサイズやスタイルをどうしたいのか、CSSに書いておくだけです。参考までに、サンプルを載せておきます。(1040px想定のものです)

#wrapper {
	width: 1040px;
	margin: 0 auto;
	padding: 0 auto;
}

#sidebar-left {
	width: 210px;
	float: left;
	padding-top: 5px;
	border-right: 1px solid #aaaaaa;
	background-color: #FFFFFF;
	clear: none;
}

#content {
	width: 600px;
	float: left;
	margin: 0;
	padding: 10px 5px 0 5px;
	background-color: #FFFFFF;
	clear: none;
}

#sidebar-right {
	width: 210px;
	float: right;
	padding-top: 5px;
	border-left: 1px solid #aaaaaa;
	background-color: #FFFFFF;
	clear: none;
}

WordPressのウィジェット機能では、サイドバーだけでなくフッターウィジェットにもなるし、コンテンツの上にウィジェットを配置することも可能です。割と自由が効くので、クライアントさんが「頻繁にウィジェットを更新したいぜベイベー」なんて言った際には、ベタ書きではなくウィジェットの活用をオススメします。

スポンサーリンク

この記事が良ければ、ぜひシェアお願いします

もぐ
年齢 : 30代半ばの1児の新米パパ。ITネットワークから始まり、WEBディレクター、WEBシステム系のプロマネ、データ分析など色々やってるエンジニアです。WordPress、Webサービス構築、BIツール、IoTなどがトレンド。新しくて面白い仕事募集中。
スポンサーリンク