【WordPress自作テーマ】サイドバーレイアウトDisplay:tableの使い方#5

こんにちは！管理人のもちです！

今回はWordPressのサイドバー作成をしていきたいと思います！

前回はPC版の記事一覧をつくりました、記事の表示はだいぶ良くなったのですが、まだまだ寂しい見た目なので、左右にサイドバーを作って表示していこうと思います！
自作サイドバーといった感じです。

今回の流れとしては

1.サイドバーのレイアウトを作成
2.display:tableでサイドバーをレイアウト、HTMLを作成
3.WordPressにウィジェットの追加
4.サイドバーをテンプレート化
5.サイドバーの中身の作成
6.まとめ

の順番でやっていこうかと思います！

サイドバーのレイアウトを作成

まずは、今のサイトの状態(v3.1)です。

サイトレイアウト現状

中央に記事一覧があり左右にとりあえずサイドバーが入るくらいの空間があります。

ここにRSSや運営者情報などを表示していこうかと思うのですが、そもそも今の状態ではウィジェットにも対応してませんし、RSSボタンや運営者の情報欄もないといった状況です。

左サイドバーに

  • サイト情報
  • テーマ切り替え

右サイドバーに

  • 運営者情報
  • RSS
  • Youtube

を設置したサイドバーを作っていこうかと思います。
それを踏まえてイメージ図を作成すると

実際に目指す見た目

サイドバーのレイアウトはこんな感じにしていきます。

今回このレイアウトをするのにはGridレイアウトや、Tableレイアウト、inline-blockで中央に揃えるなどたくさんやり方がありますが、
今回はサイドバーの背景の白を中央のコンテンツ部分と同じ大きさにしたいので自動で一番高い要素に他要素を調節してくれるTableレイアウト(display:table)を使っていこうかと思います！

display:tableでサイドバーをレイアウト、HTMLを作成

早速サイドバーをレイアウトしていきます
今回使うレイアウトはTableレイアウトと言われるもので
レイアウトする親要素に

display:table;

子要素に

display:table-cell;

を使用します

display:tableは絶対にカラム落ちせずに全てのカラムの高さは、一番縦長と同じ高さになるという仕様があるため、サイドバーレイアウトをするときに非常に便利です。

例えば

HTML

<div class="content">
	<div>
		<p>左</p>
	</div>
	<div>
		<p>中央</p>
	</div>
	<div>
		<p>右</p>
	</div>
</div>

CSS

.content{
	display:table;
	width:100%;
}
.content div{
	display:table-cell;
	width:calc(100%/3);
}
.content div:nth-of-type(1){
	height:100px;
	background:red;
}
.content div:nth-of-type(3){
	background:blue;
}

だった場合

demo

左

中央

右

のように

横並びのレイアウトになり、一番縦幅が大きい右サイドバーにあわせて全てのtable-cellの高さが変わります。(全部高いところと統一)

一番右の要素を縦500pxにしてみると

CSS

.content{
	display:table;
	width:100%;
}
.content div{
	display:table-cell;
	width:calc(100%/3);
}
.content div:nth-of-type(1){
	height:100px;
	background:red;
}
.content div:nth-of-type(3){
	height:500px;
	background:blue;
}

demo

左

中央

右

このように、display:table-cell;が設定されている要素の縦幅が一番左の要素のheight:100pxは無視され一番大きい右の要素揃えになります。

この時必ず親要素がdisplay:table;子要素がdisplay:table-cellになっている必要があるので注意が必要です。

これを今のサイトに適用させるには

HTML

<div class="content">
	<aside>
		<p>左サイドバー</p>
	</aside>
	<main>
		<p>メインコンテンツ</p>
	</main>
	<aside>

		<p>右サイドバー</p>
	</aside>
</div>

CSS

.content{
	display:table;
	margin: 0 auto;
}
main{
	width: 760px;
	padding: 0 25px;
	background: #fff;
}
aside{
	display: table-cell;
	width: 280px;
	background: #fff;
}

これでサイドバーレイアウト用のHTMLとCSSができました！

これをテンプレートに組み込むと

サイドバーレイアウトを終えた状態

サイドバーが現れました！
ここにウィジェットを配置していくのですが、どうやらウィジェットという機能はデフォルトでは無効化されているようです。
そのためウィジェットを有効にしてからでないとウィジェットを追加できません

WordPressにウィジェットの追加

ウィジェットの有効化をしていきます

functions.phpの任意の場所に以下のコードを追加します

/*ウィジェット対応*/
function theme_widgets_init() {
    register_sidebar( array(
        'name' => __( 'Widget Area', 'sample'),
        'id' => 'sidebar-1',
        'description' => __( 'ここにウィジェット追加', 'sample' ),
        'before_widget' => '<aside id="widget-00" class="widget widget-00">',
        'after_widget' => '</aside>',
        'before_title' => '<h2 class="widget-title">',
        'after_title' => '</h2>',
    ) );
}
add_action( 'widgets_init', 'theme_widgets_init' );

サイドバー有効化やパラメータについて詳しく知りたい方は

register_sidebar()

で検索してください。仕様を書いていたら3000文字超えてしまったのでここでは省略します。
このコードを追加すると

WordPress管理画面

管理画面の外観タブにウィジェットが追加されます。

ウィジェット追加

こんな感じに表示されるかと思います。
今回は左サイドバーと右サイドバーがあるので2つサイドバーを追加します
functions.php

register_sidebar(['name' => 'サイドバー左','id' => 'sidebar-0']);
register_sidebar(['name' => 'サイドバー右','id' => 'sidebar-1']);

もちは構文を単純化、インライン化させるのが好きなのでかなりまとまった書き方をしていますがこんなに省略しなくて大丈夫です。
タイトルの前後などに出力される文字もいらないので今回は未定義('')にしてあります。(追記.未定義だとliタグとh2タグが挿入される)

サイドバー管理用のコンテンツエリア

これで各サイドバー用ウィジェットエリアが追加できました。
ここにサイドバーに表示させたい要素を追加すると表示させることができます、かなり管理が楽になります。

しかし、まだこの時点では、ウィジェットの出力をするテンプレートがないので動作しません。
そのため、サイドバーのテンプレートにウィジェットの呼び出しをさせる必要があるのでテンプレートを作成していきます。

サイドバーをテンプレート化、dynamic_sidebar()でウィジェットの出力

作ったウィジェットエリアの出力には

dynamic_sidebar()
という関数を使いますので出力したい場所に貼り付けます。
今回は左サイドバーと右サイドバーの2つですね
dynamic_sidebar("sidebar-0");
dynamic_sidebar("sidebar-1");

これをウィジェットを出力したい場所に貼り付けます。
このサイトの場合
asideタグがサイドバーの場所なので

左サイドバー

<aside class="sidebar0">
	<?dynamic_sidebar("sidebar-0")?>
</aside>

右サイドバー

<aside class="sidebar1">
	<?dynamic_sidebar("sidebar-1")?>
</aside>

実際に使う時はこんな感じで挿入します。
これでウィジェットを追加したらサイドバーに表示されるようになりました！

結構簡単に使えて便利ですね、HTMLでブログを作っていた頃を思い出すと涙が出ます(1年前の出来事)。

そしてこのサイドバーsingleやindex、categoryでいちいち6行も追加するのはナンセンスですのでテンプレートパーツ化しましょう。
テンプレートパーツ化しないと少し変更するだけでもあちこちのテンプレートを書き換えないといけないので、もしこの記事をみて自作サイドバーに挑戦している方がいたらぜひこのタイミングでサイドバーをテンプレートパーツ化しましょう。

sidebar-name.phpを作成する

テーマディレクトリにsidebar-left.phpなどを作成して先程作ったコードを添付してテンプレートパーツ化します。
sidebar-left.php
<aside class="sidebar0">
	<?dynamic_sidebar("sidebar-0")?>
</aside>
これで左サイドバーを表示したいところに
get_sidebar('left');

を追加します、get_sidebar()はsidebar-name.phpをget_sidebar('name')とすることで呼び出せます。
includeしてるだけなのでこの関数以外でも使うことができます。
しかしget_sidebar()はテーマのトップの階層にあるファイルからしか読み込みができないようなのでテーマをアーカイブ化して階層をトップのディレクトリ以外に保存しているこのサイトのような場合には不向きです。

今回はget_template_part()で呼び出します
このサイトではテーマディレクトリから現在のアーカイブのディレクトリまでの相対パスを$_PASSに格納しているので

<?get_template_part($_PASS.'sidebar', 'left')?>

のようにして呼び出します$_PASSの部分は任意の相対パスを文字列で追加するとget_sidebarと同じ動作を階層を変えて行えます。

サイドバーテンプレ

このファイルは更に/partsの中に作成してあるので

<?get_template_part($_PASS.'parts/sidebar', 'left')?>

で呼び出します、get_sidebarでこれができたらめちゃくちゃ便利なんですけどね、、WordPress詰めが甘いですね
これを追加したらトップページのコンテンツ部分がこんなに少ない行数で完結するようになりました！

<?get_template_part($_PASS.'header')?>
	<div class="content">
		<?get_template_part($_PASS.'parts/sidebar', 'left')?>
		<main>
		<?breadcrumbs()?>
			<section class="articles">
			<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
				<a href="<?the_permalink()?>">
					<div>
						<div class="article-box1">
							<div class="article-box1-img">
								<?if(has_post_thumbnail()){?>
								<img src="<?the_post_thumbnail_url('medium')?>" alt="<?the_title()?>">
								<?}else{?>
								<img src="https://blog.sumahotektek.com/wp-content/uploads/2021/02/no-image.jpg" alt="<?the_title()?>">
								<?}?>
							</div>
							<div class="article-box1-info">
								<author><?the_author_nickname()?></author>
								<p><time><?the_time( 'Y.m.d' )?></time></p>
							</div>
						</div>
						<div  class="article-box2">
							<h2><?the_title()?></h2>
						</div>
					</div>
				</a>	
				<?php endwhile; endif; ?>
			</section>
		<?get_template_part($_PASS.'theme', 'changer')?>
		</main>
		<?get_template_part($_PASS.'parts/sidebar', 'right')?>
	</div>
<?get_template_part($_PASS.'footer')?>

まだまだ機能が足りないので今後分量が増えていく予定ではありますが、現状こんな感じです。

これでテンプレートパーツ化までは完成です。
では、最後に表示するウィジェットを作成していきましょう！

サイドバーの中身(ウィジェット)の作成

では最後に、サイドバーの中身を作っていきます。

管理画面から[外観]>[ウィジェット]と進んでください。
今回は作るものはHTMLで完結するのでfunctions.phpには記述せずに進めていきます。(追記.訂正箇所があったので使用しました)

HTMLをウィジェットとして追加させたい場合はカスタムHTMLを使用します。
追加できるウィジェット一覧からカスタムHTMLを選択してサイドバーに追加してください。

カスタムhtml追加設定

この画像にあるのがカスタムHTMLです、展開するとどこに追加するか聞かれますので必要な箇所に追加してください。
今回は左サイドバーに追加します。

カスタムhtmlをサイドバーに追加

追加したらカスタムHTMLがサイドバー左のタブに移っているかと思います。
そうしたらここに実際に表示させたいHTMLを入力し保存します。

参考ほどにこのサイトで使う予定のサイドバーのコードを添付しておきます

HTML

<h2>机上の空論とは</h2>
<p>基本自由に創作活動を行うプログラマーが集まったサークルです。<br>2019年頃から動き始めメンバーそれぞれが色々と作れるようになったので、発表する場を作るためにサーバーを借りました。<br>とりあえずサーバー代を取り返すために活動をしています。活動内容はゲーム制作だったりアプリ作成、Web開発などです、このサイトの管理人のもちは仕事も受け付けているのでお困りの際はTwitterDM(<a href="https://twitter.com/motimoti_dev" target="_blank">@motimoti_dev</a>)とかに連絡ください、割と格安で問題解決します。<br>領収書的な何かがほしい時はランサーズで案件通します<br>今はまだしていないですがメンバーの何人かは動画編集をやり始めるとかしているとかで、映像作品も作るかもしれません。<br>温かい目でダメ出ししてください。</p>
カスタムhtmlを使ってサイト紹介

かけたら保存しましょう。
作ったサイドバーを確認してみると

サイドバーの様子、カスタムhtmlを出力

作ったHTMLが表示できています！
しかし余計な・が出てきているので消していきましょう。
解決するにはウィジェットエリアを追加したときの

functions.php

register_sidebar(['name' => 'サイドバー左','id' => 'sidebar-0']);
register_sidebar(['name' => 'サイドバー右','id' => 'sidebar-1']);

を以下のように変更しましょう

functions.php

register_sidebar(['name' => 'サイドバー左','id' => 'sidebar-0','before_widget' => '','after_widget' => '','before_title' => '<h2 class="widget-title">','after_title' => '</h2>']);
register_sidebar(['name' => 'サイドバー右','id' => 'sidebar-1','before_widget' => '','after_widget' => '','before_title' => '<h2 class="widget-title">','after_title' => '</h2>']);

最初に未定義だったためデフォルトのliタグが出力されていたみたいですね。
ネットで対処法を調べると素人記事でliタグの・を消すCSSなんかを紹介していますが、つかわないliタグがあって更にそれを消すCSSがあるこの流れは非常にナンセンスですので(本日2回目)、元から直しましょう。

机上の空論と葉の追加

無事表示ができました、
この流れで他のHTMLも作成して、ウィジェット化できます！
作業は以上です！

まとめ

サイドバーを作る方法と実際に作っている過程を紹介しました！
いかがだったでしょうか？

他のウィジェットは今日は疲れたので裏方でつくってレイアウトもしておきます(・o・)

ここまででやっとPC版のトップページ見た目がきれいになってきました。
意外と時間がかかるものですね、記事を書きながらなのでそのせいかもしれませんが笑

次回はスマホ対応かパンくずリストの設置、コンタクトフォーム、プライバシーポリシーの作成、タグクラウドの設置のどれかをしようかと思います！

今日は疲れたのでたくせんねます、それではおやすみなさーい(・o・)

ここまでのテーマはアーカイブの3.2に当たります！

テーマ

現在使用中テーマは最新版

v.1.0v.2.0v.3.0v.3.1v.3.2v.3.3v.3.4v.3.5v.3.6v.3.7v.3.8v.shaneron選択しない(安定版)