WordPress テーマの作成

WordPressのテーマを3段組にする

更新日:

WordPressでテーマの作成/18

今まで 2段組で作成してきたテーマを左右にウィジェットを配置する3段組のテーマに変更したいと思います。ウィジェットを追加するには、『functions.php』にウィジェット追加のための『register_sidebar();』を挿入します。尚、ダッシュボードでサイドバーの位置がわかるように、サイドバーに名前もつけます。

それでは、『functions.php』ファイルの『register_sidebar();』を下記のように変更します。

//ウィジェット
register_sidebar(array(
	'name'=>'右サイドバー'
	));
register_sidebar(array(
	'name'=>'左サイドバー'
	));

ダッシュボードを確認してみましょう。既存のサイドバーが右サイドバーという名前に変更になり、その下に、左サイドバーが作成されました。

次に、『home.php』ファイルを開き、コードを下記のように変更します。

<?php get_header(); ?>

<!-- コンテンツ+右サイドバー -->
<div id="content_and_R">
<!-- コンテンツ -->
<div id="content">
<p class="title">投稿記事</p>

<?php if(have_posts()): while(have_posts()):
the_post(); ?>
	<?php get_template_part('content'); ?>
<?php endwhile; endif; ?>

<!-- ページネーション -->
<?php get_template_part('pagenation');?>
<!-- /ページネーション -->
</div><!-- /コンテンツ -->
<!-- 右サイドバー -->
<div id="sidebarR" class="sidebar">
<ul>
<?php dynamic_sidebar('右サイドバー');?>
</ul>
</div><!-- /右サイドバー -->
</div><!-- /コンテンツ+右サイドバー -->

<!-- 左サイドバー -->
<div id="sidebarL" class="sidebar">
<ul>
<?php dynamic_sidebar('左サイドバー'); ?>
</ul>
</div><!-- /左サイドバー -->
<?php get_footer(); ?>

次にスタイルシートを変更します。ID属性のサイドバーをクラス属性に変更します(#sidebarを.sidebarに変更)。

/* サイドバー */
.sidebar	{
	width: 200px;		/*サイドバーの横幅を200pxに指定*/
	float: left;		/*左側配置に指定*/
}		

.sidebar ul	{
	margin: 0;			/*メニュー周りの余白を削除*/
	padding: 0;
	list-style-type: none}	/*リストマークを削除*/

.sidebar .widget	{margin-bottom: 20px}	/*メニューの間隔を20pxに指定*/

.sidebar h2	{
	font-size: 0.75em;	/*見出しの文字サイズを0.75emに指定*/
	color: #ffffff;		/*見出しの文字色を白色に指定*/
	background-color: #0c8bcd;	/*背景色を青色に指定*/
	border-radius: 3px;	/*背景を3pxの角丸に指定*/
	padding: 2px 10px;	/*バーの内側の上下余白を2px、左右余白を10pxに指定*/
	margin: 0}			/*周りの余白を削除*/

.sidebar li li	{
	font-size: 0.7em;	/*リンクの文字サイズを0.7emに指定*/
	display:block;		/*リンクをブロック要素として指定*/
	border-bottom: dotted 1px #aaaaaa;	/*リンクの下に1pxのグレー点線を挿入*/
	margin: 0;			/*リンク周りの余白を削除*/
}			

.sidebar li li a	{
	color: #000000;		/*リンクの文字色を黒に指定*/
	display: block;		/*リンクをブロック要素として指定*/
	padding: 5px 10px}	/*上下の間隔を5px、左右の間隔を10pxに指定*/

.sidebar li li a:hover	{
	background-color: #f7e29e}	/*リンクを重ねたときの背景色をオレンジ色に指定*/

次に、コンテンツ関連のCSSを変更します。

/* コンテンツ+右サイドバー */
#content_and_R	{
	width: 720px;	/*コンテンツ+右サイドバーの横幅を720pxに指定*/
	float: right;	/*右側に配置*/
}	

/* 右サイドバー */
#sidebarR	{
	float:right; /*右側に配置*/
}

/* コンテンツ */
#content	{
	width:500px;	/*コンテンツの幅を500pxに指定*/
	float:left;		/*左側に配置*/
	margin-left: 10px;	/*左側に10pxの余白*/
}

それでは、左サイドバーにウィジェットを追加してブラウザで確認してみましょう。

同じように、その他のファイルも変更して下さい。

本日は以上です。

 

-WordPress, テーマの作成
-

Copyright© WinRoad徒然草 , 2018 All Rights Reserved Powered by AFFINGER5.