賢威のフッター要素数を増やす方法

この記事は約20分で読めます。

  • LINEで送る

賢威フッターエリア数の増加

賢威のフッター要素は初期設定で2つのメニューにわかれています。
使い方によっては、結構いろいろな使い方ができて便利です。

しかし、エリアが狭い1エリアと広い1エリアの2つしかないので
もう少し数を増やしたい場合も多くあると思います。

今回は、賢威でフッターの要素を増やす方方法を説明します。
PHP、CSSと細かな修正が多いですが順を追って直しましょう。

賢威6.1初期のフッターを理解する

まずは、どのようにフッターを変更したいのかイメージを固めるためにも、
賢威で初期のフッターがどのような構造になっているのか理解しましょう。

賢威フッターエリアの説明

各エリアをイメージで可視化するとこのような形です。
色を付けた枠ごとに、ソース上でエリア名が決まっています。

  • 白エリア:<div id=”footer”>
  • 赤エリア:<div id=”footer-in”>
  • 黄エリア:<div class=”area01″>
  • 緑エリア:<div class=”area02″>

フッター部分のソースは以下の様な形になっています。
「外観 > テーマ編集」から「footer.php」を開くと確認できます。
上で示した、各エリアの名前と照らしあわせて確認してください。

<!--▼フッター-->
<div id="footer">
<div id="footer-in">


<!--アドレスエリア-->
<div class="area01">
<h3>アドレス</h3>
<div class="access">
<div class="area01-freebox">
<?php
	if (the_keni('author_image') != "") {
		echo '<p><img src="'.the_keni('author_image')."\" /></p>\n";
	}
	if (the_keni('author_info') != "") {
		echo nl2br(the_keni('author_info'));
	}
?>
</div>
</div>
</div>
<!--/アドレスエリア-->


<!--フッターメニュー-->
<div class="area02">
<h3>メニュー</h3>
<div class="footer-menu">

<?php get_globalmenu_keni('footermenu1'); ?>

<?php get_globalmenu_keni('footermenu2'); ?>

</div>
</div>
<!--/フッターメニュー-->

</div>

</div>
<!--▲フッター-->

他にも、「<div class=”access”>」エリアや「<div class=”footer-menu”>」エリアなど、
さらに細かいエリアが存在しますが、今回は説明のしやすさから画像から省きました。

フッターのエリアを増やす

賢威フッターエリアの説明

それでは、実際に緑の枠を狭めて青い枠を増やす方法を説明していきます。
わかりやすいので「<div class=”area03″>」という名前をつけます。
1つの要素を追加する方法で説明していますが、同様のやり方で4,5と増やすことができます。

ただし、あまり横に増やしすぎると各エリアの幅が狭まりますので注意してください。
最大で4つぐらいがよく見るWebサイトのパターンだと思います。

「footer.php」の編集

まずは「footer.php」にソースを追加します。
以下のコードを「外観 > テーマ編集」から「footer.php」に追加します。

<div class="area03">
<h3>メニュー</h3>
<div class="footer-menu">

<?php get_globalmenu_keni('footermenu1'); ?>

<?php get_globalmenu_keni('footermenu2'); ?>

</div>
</div>

実際に追加した形はこのようになります。

<!--▼フッター-->
<div id="footer">
<div id="footer-in">


<!--アドレスエリア-->
<div class="area01">
<h3>アドレス</h3>
<div class="access">
<div class="area01-freebox">
<?php
	if (the_keni('author_image') != "") {
		echo '<p><img src="'.the_keni('author_image')."\" /></p>\n";
	}
	if (the_keni('author_info') != "") {
		echo nl2br(the_keni('author_info'));
	}
?>
</div>
</div>
</div>
<!--/アドレスエリア-->


<!--フッターメニュー-->
<div class="area02">
<h3>メニュー</h3>
<div class="footer-menu">

<?php get_globalmenu_keni('footermenu1'); ?>

<?php get_globalmenu_keni('footermenu2'); ?>

</div>
</div>
<!--/フッターメニュー-->

<!--▼▼▼ 追加部分 area03ー-->
<div class="area03">
<h3>メニュー</h3>
<div class="footer-menu">

<?php get_globalmenu_keni('footermenu1'); ?>

<?php get_globalmenu_keni('footermenu2'); ?>

</div>
</div>
<!--▲▲▲ 追加部分 area03ー-->

</div>

</div>
<!--▲フッター-->

これでHTML上はエリアが追加されたことになりますが、
これではデザインが整っていないので、画像のように綺麗にはなりません。

「design.css」の編集

次に、デザインを調整します。
「外観 > テーマ編集」から「design.css」を開きます。

「area01」などで検索して、以下の記述箇所を見つけます。

#footer .area01{
	float: left;
	width: 39%;
	padding-bottom: 20px;
}

#footer .area02{
	float: right;
	width: 60%;
	padding-bottom: 20px;
}

ここに、まずは単純に「area03」を追加して以下のようにします。

#footer .area01{
	float: left;
	width: 39%;
	padding-bottom: 20px;
}

#footer .area02{
	float: right;
	width: 60%;
	padding-bottom: 20px;
}

#footer .area03{
	float: right;
	width: 60%;
	padding-bottom: 20px;
}

次に、各エリアの幅を設定します。
ここで重要なのが「width: XX%;」という部分です。

この「width: XX%;」で各エリアの幅を決めています。
初期の「area01」と「area02」を足すと「99%」になります。

賢威フッターエリアの説明

「1%」足りない分は、「area01」と「area02」の間の隙間です。
そこで、3分割した場合(4分割も)も同様に幅を決める必要があります。
今回は、3等分(3エリア均等なスペース)にします。

3等分にする場合、「area01」と「area02」の間で1つ
「area02」と「area03」の間で隙間が1つできます。

ですので、各隙間を「1%」とすると残り「98%」を「area01・area02・area03」で分割します。
割り切れないので、「area01・area03」を「32.6%」、「area02」を「32.7%」とします。

#footer .area01{
	float: left;
	width: 32.6%;
	padding-bottom: 20px;
}

#footer .area02{
	float: right;
	width: 32.7%;
	padding-bottom: 20px;
}

#footer .area03{
	float: right;
	width: 32.6%;
	padding-bottom: 20px;
}

賢威フッターエリアの説明

すると、この状態になります。
かなり3等分に近づきましたが、まだ「area02・area03」の隙間がありません。
次に、ここを調整します。が…その前に「float」について簡単に説明します。

今の状態だと「area01」は「left」、「area02・area03」が「right」と設定されています。
これは、3分割した状態で「area01」を左寄せ、「area02・area03」を右寄せで設定されています。
よって、「area01・area02」の間に余った「2%」が自然と隙間として出来上がっています。
(※厳密には「area01・area03」の間に隙間がありますが、わかりやすさを優先します)

じゃあ「area02」を中央寄せすれば隙間が均等になる!と思った方、
センスがいいですが、実は「float」には中央寄せがありません…

ですので、明示的に「area02・area03」の間に「1%」の隙間(余白)を設定します。
設定しますが、その前に「area02」の「float」を「left」に変更します。

これは…説明するとややこしくなるので割愛しますが、わかりやすくするためです。
「float」要素は結構使いますし、理解しておいて損はありません。
わかりやすすぎる解説ブログがありますので、興味のある方はどうぞ。

CSSでレイアウトするなら絶対覚えておきたい配置のルール:フロートや絶対配置、z-index とかいろいろ | Webデザインレシピ

「area01・area02」が左寄せ、「area03」が右寄せの状態になっているので、
隙間は「area01・area02」の間に「1%」追加します。

ちょっとごちゃごちゃしましたが、最終的なCSSはこうなります。

#footer .area01{
	float: left;
	width: 32.6%;
	padding-bottom: 20px;
}

#footer .area02{
	float: left;
	width: 32.7%;
	padding-bottom: 20px;
	padding-left: 1%;
}

#footer .area03{
	float: right;
	width: 32.6%;
	padding-bottom: 20px;
}

賢威フッターエリア数の増加

このように、「area01・area02・area03」が綺麗に分割して表示されます。

「mobile.css」の編集

賢威フッターエリア数の増加

次に、レスポンシブルデザインでの表示を調整します。
先ほどまでの修正で、パソコン上は綺麗に表示されますがスマホだと上の画像のように崩れます。
これを、綺麗に表示するために「mobile.css」を修正します。

これは簡単なので、修正版をそのまま載せます。

#footer .area01,
#footer .area02,
#footer .area03{
	float: none;
	width: 100%;
	margin-bottom: 2em;
}

賢威フッターエリア数の増加

レスポンシブルデザインでは横並びが解除され、「area01・area02・area03」が
それぞれ画面いっぱいに並んで縦に表示されるデザインになります。

もし、「area04」を追加する場合には同様に追加してください。
そして「area02」の後ろに「,(カンマ)」を追加しているので忘れず修正してください。

カスタムメニューで追加したフッターエリアを表示する

賢威フッターエリアウィジェット対応

最後にフッターメニューへの追加を説明します。
賢威では、フッター要素を管理画面から変更することができます。(初期でフッター1と2)

「賢威の設定 > フッター」を選択すると画像のように「フッターの設定」が表示され、
その1番上に「フッタメニュー1の選択」と「フッタメニュー2の選択」があります。

追加した3つ目のエリアでも同様の設定ができるようにしたいのです。
しかし、「賢威の設定」のメニューを変更するのは、超高難易度でDBへの追加からしなければならないので、今回は却下。
別の方法でカスタマイズできるようにしたいと思います。

ウィジェットにフッターの第3エリアを追加

賢威フッターエリアウィジェット対応

ひとつ目はウィジェットにフッターの第3エリアを追加する方法です。
まずは「function.php」にソースを追加します。
以下のコードを「外観 > テーマ編集」から「function.php」を開きます。

「function keni_widgets_init」があるので探します。

function keni_widgets_init() {
	register_sidebar( array(
		'name' => __( 'サイドバー' ),
		'id' => 'sidebar',
		'before_widget' => '<div class="contents widget-conts %2$s">',
		'after_widget' => '</div>',
		'before_title' => '<h3>',
		'after_title' => '</h3>',
	) );

	register_sidebar( array(
		'name' => __( 'サブコンテンツ' ),
		'id' => 'sub-contents',
		'before_widget' => '<div class="contents widget-conts %2$s">',
		'after_widget' => '</div>',
		'before_title' => '<h3>',
		'after_title' => '</h3>',
	) );
}

ここで、画像のようにウィジェット表示を制御しているので
「フッターの第3エリア」を同じように追加します。

function keni_widgets_init() {
	register_sidebar( array(
		'name' => __( 'サイドバー' ),
		'id' => 'sidebar',
		'before_widget' => '<div class="contents widget-conts %2$s">',
		'after_widget' => '</div>',
		'before_title' => '<h3>',
		'after_title' => '</h3>',
	) );

	register_sidebar( array(
		'name' => __( 'サブコンテンツ' ),
		'id' => 'sub-contents',
		'before_widget' => '<div class="contents widget-conts %2$s">',
		'after_widget' => '</div>',
		'before_title' => '<h3>',
		'after_title' => '</h3>',
	) );

	register_sidebar( array(
		'name' => __( 'フッターの第3エリア' ),
		'id' => 'footer-area03',
		'before_widget' => '<div class="contents widget-conts %2$s">',
		'after_widget' => '</div>',
		'before_title' => '<h3>',
		'after_title' => '</h3>',
	) );
}

賢威フッターエリアウィジェット対応

これで、ウィジェットに「フッターの第3エリア」が表示されます。
次に、先ほども修正した「footer.php」を再度直します。

<!--▼フッター-->
<div id="footer">
<div id="footer-in">


<!--アドレスエリア-->
<div class="area01">
<h3>アドレス</h3>
<div class="access">
<div class="area01-freebox">
<?php
	if (the_keni('author_image') != "") {
		echo '<p><img src="'.the_keni('author_image')."\" /></p>\n";
	}
	if (the_keni('author_info') != "") {
		echo nl2br(the_keni('author_info'));
	}
?>
</div>
</div>
</div>
<!--/アドレスエリア-->


<!--フッターメニュー-->
<div class="area02">
<h3>メニュー</h3>
<div class="footer-menu">

<?php get_globalmenu_keni('footermenu1'); ?>

<?php get_globalmenu_keni('footermenu2'); ?>

</div>
</div>
<!--/フッターメニュー-->

<!--▼▼▼ 追加部分 area03ー-->
<div class="area03">
<h3>メニュー</h3>
<div class="footer-menu">

<?php
	dynamic_sidebar( 'footer-area03' );
?>

</div>
</div>
<!--▲▲▲ 追加部分 area03ー-->

</div>

</div>
<!--▲フッター-->

注意点は「dynamic_sidebar」の後ろのカッコに入るのは、
先ほど「id」として登録した名前になります。

これで準備完了です。

賢威フッターエリアウィジェット対応

このようにツイッターコードをウィジェットで埋め込むことで、
フッターの第3エリアに表示することができるようになります。

賢威フッターエリアウィジェット対応

ツイッターのタイムラインが表示されました。

カスタムメニューにフッターの第3エリアを追加

賢威フッターエリアメニュー対応

次にカスタムメニューでの追加方法です。
「外観 > メニュー」から「新規メニューを作成」してメニュー名を決めます。
今回は「フッター第3のエリア」にしました、そして「メニューを保存」をクリックします。

次に「function.php」にソースを追加します。
以下のコードを「外観 > テーマ編集」から「function.php」を開きます。

<!--▼フッター-->
<div id="footer">
<div id="footer-in">


<!--アドレスエリア-->
<div class="area01">
<h3>アドレス</h3>
<div class="access">
<div class="area01-freebox">
<?php
	if (the_keni('author_image') != "") {
		echo '<p><img src="'.the_keni('author_image')."\" /></p>\n";
	}
	if (the_keni('author_info') != "") {
		echo nl2br(the_keni('author_info'));
	}
?>
</div>
</div>
</div>
<!--/アドレスエリア-->


<!--フッターメニュー-->
<div class="area02">
<h3>メニュー</h3>
<div class="footer-menu">

<?php get_globalmenu_keni('footermenu1'); ?>

<?php get_globalmenu_keni('footermenu2'); ?>

</div>
</div>
<!--/フッターメニュー-->

<!--▼▼▼ 追加部分 area03ー-->
<div class="area03">
<h3>メニュー</h3>
<div class="footer-menu">

<?php get_globalmenu_keni('フッター第3のエリア'); ?>

</div>
</div>
<!--▲▲▲ 追加部分 area03ー-->

</div>

</div>
<!--▲フッター-->

注意点は「get_globalmenu_keni」の後ろのカッコに入るのは、
先ほどメニュー名として登録した名前になります。

これで準備完了です。

賢威フッターエリアメニュー対応

先ほど作ったメニューに追加してやることで、
フッターの第3エリアに追加することができました。

賢威フッターエリアメニュー対応

カテゴリが表示されました。

簡単さはカスタムメニュー、自由度はウィジェット

フッターエリア追加時に2パターンのエリア表示方法を紹介しました。

簡単さではカスタムメニューへの追加で、自由度はウィジェットへの追加です。
わかる方は、ウィジェットへの追加を行ってフッターをカスタマイズしてください。

  • LINEで送る

コメントを残す

このページの先頭へ