1. TOP
  2. wordpressテーマ作成
  3. 4.フッターとサイドバーウィジェットの要素をWordPressテーマに追加する
wordpressテーマ作成

4.フッターとサイドバーウィジェットの要素をWordPressテーマに追加する

WordPressテーマ作成4では、各ページに共通で表示されるfooter.phpとsidebar.phpを作成・デザインしていきます。フッターは表示幅に合わせたレスポンシブデザインで作成し、サイドバーではWordPressにデフォルトで付いているウィジェットを有効化させましょう。

footerの要素を追加する

今回作成するテーマでは、ナビメニューとコピーライトをフッターの中に組み込んでいきます。

WordPressテーマ作成3で、ヘッダーナビと一緒にfunctions.phpでフッターも有効化しているかとは思いますが、まだフッターナビゲーションを有効化していない場合は有効化してください。

functions.phpに記述

register_nav_menu( 'footer-nav',  ' フッターナビゲーション ' );

フッターナビゲーションを有効化したら、項目はなんでも良いので管理画面からフッター用のメニューを作成し、フッターナビゲーションにチェックを入れてください。

ナビメニューの有効化が完了したら、footer.phpのfooter-innerの中に要素を入れていきます。まずは、ナビメニューから記述していきます。

フッターナビとコピーライトの要素の追加

footer.phpのfooter-innerの中に記述

<div class="footer-nav-area">
<?php wp_nav_menu( array(
'theme_location' => 'footer-nav',
'container' => 'nav',
'container_class' => 'footer-nav',
'container_id' => 'footer-nav',
'fallback_cb' => ''
) ); ?>
</div>
<div class="copyright">
<p>copyright ©<?php bloginfo( 'name' ); ?> All Rights Reserved.</p>
</div>

メニューは、WordPressにデフォルトで搭載されているナビゲーション機能を呼び出します。header.phpに記述したものをコピペして値を変更すると簡単に作成できますよ。

値は、他のナビゲーションメニューと同じでなければ自分がわかりやすい名前をつけて問題ありません。ただし、theme_locationの値だけは必ずfunctions.phpに記述したものと同じものにしなければ反映されないので注意してください。

コピーライトで表示する文字は、『<?php bloginfo( ‘name’ ); ?>』でサイトタイトルを自動取得して表示しています。サイトタイトル以外を表示したい場合は、直接記述しましょう。

組み込みが終わったら、要素がきちんと出力されているかをブラウザ上で確認しましょう。

きちんと認識されていれば、『フッターナビ』と『コピーライト』が出力されます。今挿入した要素以外にも表示したいものがある場合は、footer-innerの中に追加して自分好みのfooterに仕上げてくださいね。

スマホ表示用のfooterのデザイン

footerの要素が出来上がったら、footerにCSSを追加していきます。今回は、スマホ用のデザインをベースにCSSを設定しますが、パソコン用のをベースに後からスマホ用のデザインを整えてもOKです。

CSSでデザインを始める前に、footerとfooter-innerに要素を確認するため指定しているカラーと高さの一時設定を、非表示もしくは削除してください。

スマホ用のデザインを整えるときは、ブラウザのデベロッパツール(F12キー)を使ってスマホ表示を確認しながら調整しましょう。

style.cssに記述

/*------フッター------*/
footer {
background-color: #23282d;
}
/*フッターメニュー*/
.footer-nav {
margin-bottom: 20px;
}
.footer-nav ul {
margin: 0;
padding: 0;
list-style: none;
}
.footer-nav ul:after {
display: block;
clear: both;
content: '';
}
.footer-nav li {
float: left;
width: 50%;
text-align: center;
}
.footer-nav li a {
font-size: .9em;
display: block;
padding: 10px 5px;
text-decoration: none;
color: #fff;
}
.footer-nav li a:hover {
color: #255fac;
}
/*コピーライト*/
.copyright p {
font-size: .9em;
margin: 0;
text-align: center;
color: #fff;
}

ナビゲーションメニューは、floatでメニューが横に並ぶようにしましょう。スマホは幅が狭いので、メニューが2つずつ1行に表示されるようにCSSを調整しています。

デモのCSSをそのまま記述してスマホで表示すると、上の画像のようなデザインになります。スマホ用のデザインが整ったら、『@media』を使ってパソコン用の表示を整えていきましょう。

パソコン用のフッターのデザイン

style.cssに記述

@media (min-width: 768px) {
.footer-nav li {
width: auto;
text-align: left;
}
.footer-nav li a {
font-size: 1em;
padding: 10px 20px;
}
/*コピーライト*/
.copyright p {
text-align: right;
}
}

フックポイントは、768pxに設定しipadなどのタブレッドで表示した時はPC用の表示になるようにしています。タブレットでもスマートフォン用の表示にしたいときはフックポイントを調整してください。

上記のCSSをそのまま記述すると上記の画像のような配置と大きさになります。これでフッターでの作業は終了です。

サイドバーでウィジェットが使えるようにする

サイドバーでは、wordpressにデフォルトで搭載されているウィジェットの機能を使用できるようにするために、functions.phpで機能を有効化しましょう。

有効化していない状態では、管理画面上にウィジェットの管理画面が表示されずに、使えない状態になっているので注意してください。

functions.phpに記述
functions.phpを編集する際は、必ずバックアップをとって慎重に編集してください。

//サイドバーにウィジェット追加
function widgetarea_init() {
register_sidebar(array(
'name'=>'サイドバー',
'id' => 'side-widget',
'before_widget'=>'<div id="%1$s" class="%2$s sidebar-wrapper">',
'after_widget'=>'</div>',
'before_title' => '<h4 class="sidebar-title">',
'after_title' => '</h4>'
));
}
add_action( 'widgets_init', 'widgetarea_init' );

サイドバーの記述自体は、ナビゲーションのときと似ていて『array()』の中に値を指定しています。では、各値について簡単に説明していきます。
name
サイドバーに名前を付けています。ここに記述した名前が管理画面のウィジェット選択画面に表示されます。

id
ウィジェットエリアにidを付けます。ここで指定した値でsidebar.phpの中にサイドバーを呼び出します。

before_widget/after_widget
ウィジェットの前と後ろに要素を置きたい場合に値を指定します。

今回は、ウィジェットアイテムの種類別に別々のid・class名が反映されるように『id=”%1$s”』『class=”%2$s”』と記述し、各アイテム共通で『class=”sidebar-wrapper』というclass名が反映されるように設定しています。

before_title/after_title
各ウィジェットにタイトルが付けられた場合のタグを設定できます。デモサイトでは見出しタグのh4タグでタイトルを括るように設定しています。

functions.phpでウィジェットの有効化が完了したら、管理画面上でウィジェットが設定できるようになります。

有効化を確認するのと同時にいくつかウィジェットを管理画面から挿入しておきましょう。ウィジェットの有効化と終わったら、sidebar.phpにウィジェットが表示されるように要素を追加していきます。

sidebar.phpのsidebar-innerの中に記述

<?php dynamic_sidebar( 'side-widget' ); ?>

sidebar.phpへの記述まで終わったら、ウィジェットが出力されているかをブラウザで確認しておきましょう。

サイドバーウィジェットのデザイン

CSSでデザインを始める前に、sidebarとcontainerに要素を確認するため指定しているカラーと高さの一時設定を、非表示もしくは削除してください。

まずは、ウィジェットのタイトルと余白のデザインを整えましょう。

style.cssに記述

/*------サイドバー------*/
.sidebar-wrapper {
margin-bottom: 1.8em;
padding: 10px;
}
.sidebar-wrapper h4 {
font-size: 1.1em;
margin-top: 0;
margin-bottom: 10px;
padding: 7px 10px;
color: #fff;
background-color: #464646;
}

複数ウィジェットを表示させたときに近づき過ぎないようにmargin-bottomで余白を追加し、見出しは目立つように背景色を付けています。

cssをそのまま適応すると、上の画像のようなデザインになります。ウィジェットを表示させるエリアのデザインが終わったら、WordPressに最初から搭載されている各ウィジェットにデザインを追加しましょう。

下記にサンプルとしてデフォルトウィジェット用のサンプルCSSを載せておきます。好みに合わせて自由にデザイン・カスタマイズして使ってください。

/*デフォルトウィジェット*/
.widget_recent_entries ul, .widget_meta ul, .widget_recent_comments ul, .widget_pages ul, .widget_meta ul, .widget_categories ul, .widget_archive ul, .widget_nav_menu ul {
padding: 0;
list-style: none;
}
.widget_recent_entries li, .widget_meta li, .widget_recent_comments li, .widget_pages li, .widget_meta li, .widget_categories li, .widget_archive li, .widget_nav_menu li {
position: relative;
padding: 10px;
}
.widget_recent_entries li, .widget_nav_menu li {
padding-left: 25px;
}
.widget_recent_entries a, .widget_meta a, .widget_recent_comments a, .widget_pages a, .widget_meta a, .widget_categories a, .widget_archive a, .widget_nav_menu a {
text-decoration: none;
color: #333;
}
.widget_recent_entries a:hover, .widget_meta a:hover, .widget_recent_comments a:hover, .widget_pages a:hover, .widget_meta a:hover, .widget_categories a:hover, .widget_archive a:hover, .widget_nav_menu a:hover {
opacity: .6;
}
/*カテゴリウィジェット*/
.widget_categories li {
display: inline-block;
margin: 2px;
padding: 2px 10px;
white-space: nowrap;
border-radius: 3px;
background-color: #777;
}
.widget_categories li:before {
font-family: 'FontAwesome';
font-size: .8em;
padding-right: 2px;
content: '\f02b';
color: #fff;
}
.widget_categories li a {
font-size: .8em;
color: #fff;
}
/*タグウィジェット*/
.tagcloud a {
font-size: .9em!important;
line-height: 2.5em;
margin: 2px;
padding: 2px 10px;
white-space: nowrap;
text-decoration: none;
color: #333;
border: 1px solid #333;
border-radius: 3px;
}
/*新着ウィジェット*/
.widget_recent_entries li:before {
font-family: 'FontAwesome';
position: absolute;
left: 5px;
content: '\f040';
color: #464646;
}
/*メニューウィジェット*/
.widget_nav_menu li:before {
font-family: 'FontAwesome';
position: absolute;
left: 5px;
content: '\f0da';
color: #464646;
}
/*カレンダーウィジェット*/
#wp-calendar {
width: 100%;
}
#wp-calendar tbody {
text-align: center;
}

以上で、フッターとサイドバーの作成は、完了です。次回からは、いよいよテーマのメイン部分であるcontents部分の作成方法についてご紹介していきます。