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

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

フッターの要素を追加する

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

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

functions.phpに記述

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

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

ナビメニューの有効化が完了したら、footer.phpのfooter-innerの中に各要素を追加します。

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

<div class="footer-nav-wrap">
  <?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>© 2016 <?php bloginfo( 'name' ); ?></p>
</div>

メニューは、後からでも要素を簡単に変更することができるように、WordPressにデフォルトで搭載されているメニュー機能を利用して出力します。header.phpに記述したものをコピペして値を変更すると簡単に作成することができます。

値は、他に設定しているナビゲーションメニュー(header-navなど)の『theme_location』と同じ値でなければ、を自分がわかりやすい名前をつけて問題ありません。ただし、『theme_location』の値は、functions.phpでメニューを有効化した時に記述したものと同じでなければ反映されないので注意してください。

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

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

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

フッターのパソコン用のデザインをCSSで反映する

『WordPressテーマ作成2』で作成したWordPressテーマのデザインをベースに、まずはPC用のデザインから整えていきます。

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

style.cssに記述

.footer {
  background-color: #23282d;
}

.footer-nav,
.copyright {
  text-align: center;
}

.footer-nav {
  font-size: 0;
  margin-bottom: 3rem;
}

.footer-nav li {
  font-size: 1rem;
  display: inline-block;
  margin-right: 1.5rem;
}

.footer-nav li a {
  text-decoration: none;
  color: #fff;
}

.footer-nav li a:hover {
  opacity: .6;
}

.copyright p {
  font-size: 1rem;
  color: #fff;
}

フッターメニューは、ヘッダーメニュと同様に『display: inline-block;』で横に並べるスタンダードなデザインでCSSを調整していますが、メニューの数や文字列の量によってバランスよく配置されるように変更してください。

フッターでタブレット・スマホ用のデザインをCSSで反映する

※タブレット・スマートフォンの表示は、各ブラウザーのデベロッパーツールを使用することで確認することができます。デベロッパーツールは基本的には『F12』キーで表示できます。

style.cssに記述

@media(max-width: 800px) {
  .footer-nav {
    margin-bottom: 1.5rem;
  }

  .footer-nav ul {
    text-align: left;
  }

  .footer-nav li {
    width: 48%;
    margin-right: 4%;
    margin-bottom: 1rem;
  }

  .footer-nav li:nth-of-type(2n) {
    margin-right: 0;
  }
}

タブレット・スマートフォンでは、メニューが横に2列で並ぶように幅を調整し、『.footer-nav li:nth-of-type(2n)』は、2の倍数のliタグのみを指定しています。

メニューの文字数が長い場合は、『.footer-nav li』に幅を指定せずに縦一列で並べたほうがバランスが良いかと思いますので、バランスよく調整してください。

CSSをそのまま反映すると、上記の画像のようになります。以上で、フッターでの作業は終了です。

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

サイドバーは、wordpressにデフォルトで搭載されているウィジェットの機能を有効化して作成します。まずは、『functions.php』でウィジェット機能を有効化しましょう。

『functions.php』への記述を行わないと、WordPressの管理画面上にウィジェットの操作画面が表示されずに、使えない状態になっているので注意してください。

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でウィジェットの有効化が完了したら、WordPressの管理画面上でウィジェットが設定できるようになります。

有効化を確認するのと同時にいくつかウィジェットをWordPressの管理画面から挿入しておきましょう。

ウィジェットの有効化終わったら、sidebar.phpにウィジェットが表示されるように要素を追加していきます。

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

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

『dynamic_sidebar』のカッコの中のパラメータには、functions.phpで設定したウィジェットの『id』を記述してください。

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

サイドバーウィジェットのデザインをCSSで反映する

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

まずは、ウィジェットのタイトルと余白を整えます。

style.cssに記述

.sidebar-wrapper {
  margin-bottom: 2rem;
}

.sidebar-title {
  font-size: 1.1rem;
  box-sizing: border-box;
  margin: 0 0 1.2rem;
  padding: .5rem;
  color: #000;
  border-bottom: 4px solid #03162f;
}

複数ウィジェットを表示させたときに、各ウィジェットがくっついてしまわないように余白を追加しています。

ブラウザで確認したときに、サイドバーに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,
.calendar_wrap,
.tagcloud {
  list-style: none;
}

.widget_recent_entries li,
.widget_meta li,
.widget_recent_comments li,
.widget_pages li,
.widget_meta li,
.widget_archive li,
.widget_nav_menu li {
  position: relative;
  margin-bottom: .5rem;
}

.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;
}

.sidebar-wrapper a:hover {
  opacity: .6;
}

/*カテゴリウィジェット*/
.widget_categories li {
  display: block;
  margin-bottom: .5rem;
}

.widget_categories li a {
  font-size: .95rem;
  position: relative;
  display: block;
  padding: .9rem .6rem .9rem 2rem;
  color: #fff;
  background-color: #03162f;
}

.widget_categories li a::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  position: absolute;
  top: 50%;
  left: .6rem;
  content: '\f02b';
  transform: translateY(-50%);
  color: #fff;
}

.widget_categories .children {
  margin-bottom: .5rem;
  padding: 0;
  padding-left: 1rem;
  background-color: #415671;
}

.widget_categories .children li {
  margin-bottom: 0;
}

.widget_categories .children li a {
  font-size: .9rem;
  background-color: transparent;
}

.widget_categories .children li a::before {
  position: absolute;
  top: 50%;
  left: .6rem;
  content: '∟';
  transform: translateY(-50%);
  color: #fff;
}

/*カテゴリウィジェットとアーカイブウィジェットのドロップダウン表示*/
.widget_categories .screen-reader-text {
  display: none;
}

.widget_archive .screen-reader-text {
  position: relative;
  display: block;
  height: 0;
  text-indent: -9999999px;
}

.widget_categories form {
  position: relative;
}

.widget_categories form::after {
  position: absolute;
  top: 50%;
  right: 1rem;
  content: '▼';
  transform: translateY(-50%);
  pointer-events: none;
}

.widget_categories .postform,
.widget_archive select {
  font-size: .95rem;
  width: 100%;
  padding: 4px 10px;
  cursor: pointer;
  border: 1px solid #e0e3ef;
  border-radius: 0;
  background-color: #f4f5f9;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.widget_archive label::after {
  position: absolute;
  top: .5rem;
  right: 1rem;
  content: '▼';
  text-indent: 0;
  pointer-events: none;
}

/*タグウィジェット*/
.tagcloud a {
  font-size: .9rem !important;
  line-height: 1;
  position: relative;
  display: inline-block;
  margin-bottom: .5rem;
  padding: .2rem .5rem;
  text-decoration: none;
  color: #03162f;
  border: 1px solid #000;
  background-color: #fff;
}

/*メニューウィジェット*/
.widget_nav_menu li a {
  font-size: 1rem;
  font-weight: bold;
  position: relative;
  padding-left: 1.3rem;
  color: #333;
}

.widget_nav_menu li a::before {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  position: absolute;
  top: 50%;
  left: 0;
  content: '\f105';
  transform: translateY(-50%);
  color: #03162f;
}

/*最近の投稿*/
.widget_recent_entries li {
  padding-bottom: .5rem;
  border-bottom: 1px solid #ddd;
}

.widget_recent_entries li a:before {
  font-family: 'Font Awesome 5 Free';
  font-weight: bold;
  font-weight: 900;
  position: absolute;
  left: 5px;
  content: '\f303';
  color: #000;
}

.widget_recent_entries li a {
  display: block;
  margin-bottom: .3rem;
  padding-left: 1.6rem;
}

.widget_recent_entries .post-date {
  font-size: .8rem;
  display: block;
}

/*カレンダーウィジェット*/
.calendar_wrap {
  padding: 1rem;
  border: 1px solid #ddd;
}

.calendar_wrap table {
  width: 100%;
}

.calendar_wrap tbody {
  text-align: center;
}

.calendar_wrap caption {
  font-weight: bold;
  margin-bottom: 1rem;
}

.calendar_wrap td {
  padding: .3rem 0;
}

.calendar_wrap tfoot td {
  padding-top: .7rem;
}

.calendar_wrap tfoot td:last-child {
  text-align: right;
}

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

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