1. TOP
  2. wordpressテーマ作成
  3. 4.フッターとサイドバーウィジェットの要素を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に記述したものをコピペして値を変更すると簡単に作成することができます。

値は、他に設定しているナビゲーションメニュー(header-navなど)の『theme_location』と同じ値でなければ、を自分がわかりやすい名前をつけて問題ありません。ただし、『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 {
  opacity: .6;
}


/*コピーライト*/
.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に記述
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"』と記述し、各ウィジェットごとの名前 + 各アイテム共通の『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: 'Font Awesome 5 Free';
  font-size: .8em;
  font-weight: bold;
  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: 'Font Awesome 5 Free';
  font-weight: bold;
  position: absolute;
  left: 5px;
  content: '\f303';
  color: #464646;
}

/*メニューウィジェット*/
.widget_nav_menu li:before {
  font-family: 'Font Awesome 5 Free';
  font-weight: bold;
  position: absolute;
  left: 5px;
  content: '\f0da';
  color: #464646;
}

/*カレンダーウィジェット*/
#wp-calendar {
  width: 100%;
}

#wp-calendar tbody {
  text-align: center;
}

2018年5月29日現在のFont Awesome ver5.0.13では、CSSで出力する際に『font-weight: bold;』を指定しないと『◽』と表示されてしまう不具合があるようです。使用する際は注意してください。

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

下記より記事で作成したところまでのテーマファイルを下記よりダウンロードできます。
4.までで作成したテーマ ダウンロード