公開日:2017年8月25日Plusers作成中のWordPressテーマのデモサイトはこちらWordPressテーマ作成4では、各ページに共通で表示されるfooter.phpとsidebar.phpを作成・デザインしていきます。フッターは表示幅に合わせたレスポンシブデザインで作成し、サイドバーではWordPressにデフォルトで付いているウィジェットを有効化させましょう。CONTENTSフッターの要素を追加するフッターのパソコン用のデザインをCSSで反映するフッターでタブレット・スマホ用のデザインをCSSで反映するサイドバーでウィジェットが使えるように有効化するサイドバーウィジェットのデザインをCSSで反映するフッターの要素を追加する今回作成するWordPressテーマでは、ナビメニューとコピーライトをフッターの中に組み込んでいきます。『WordPressテーマ作成3』で、ヘッダーナビゲーションと一緒にfunctions.phpでフッターナビゲーションも有効化しているかとは思いますが、有効化していない場合は有効化してください。);フッターナビゲーションを有効化したら、管理画面からフッター用のメニューを作成し、フッターナビゲーションにチェックを入れてください。ナビメニューの有効化が完了したら、footer.phpのfooter-innerの中に各要素を追加します。?></p></div>メニューは、後からでも要素を簡単に変更することができるように、WordPressにデフォルトで搭載されているメニュー機能を利用して出力します。header.phpに記述したものをコピペして値を変更すると簡単に作成することができます。値は、他に設定しているナビゲーションメニュー(header-navなど)の『theme_location』と同じ値でなければ、を自分がわかりやすい名前をつけて問題ありません。『theme_location』の値は、functions.phpでメニューを有効化した時に記述したものと同じでなければ反映されないので注意してください。?>』でサイトタイトルを自動取得して表示しています。サイトタイトル以外を表示したい場合は、直接記述しましょう。組み込みが終わったら、要素がきちんと出力されているかをブラウザ上で確認します。認識されていれば、『フッターナビゲーション』と『コピーライト』が出力されます。今挿入した要素以外にも表示したいものがある場合は、footer-innerの中に追加して自分好みのfooterに仕上げてください。フッターのパソコン用のデザインをCSSで反映する『WordPressテーマ作成2』で作成したWordPressテーマのデザインをベースに、まずはPC用のデザインから整えていきます。CSSでデザインを始める前に、footerとfooter-innerに要素を確認するため指定しているカラーと高さの一時設定を、コメントアウトもしくは削除してください。inline-block;』で横に並べるスタンダードなデザインでCSSを調整していますが、メニューの数や文字列の量によってバランスよく配置されるように変更してください。フッターでタブレット・スマホ用のデザインをCSSで反映する※タブレット・スマートフォンの表示は、各ブラウザーのデベロッパーツールを使用することで確認することができます。デベロッパーツールは基本的には『F12』キーで表示できます。li:nth-of-type(2n)』は、2の倍数のliタグのみを指定しています。li』に幅を指定せずに縦一列で並べたほうがバランスが良いかと思いますので、バランスよく調整してください。CSSをそのまま反映すると、上記の画像のようになります。以上で、フッターでの作業は終了です。サイドバーでウィジェットが使えるように有効化するサイドバーは、wordpressにデフォルトで搭載されているウィジェットの機能を有効化して作成します。『functions.php』でウィジェット機能を有効化しましょう。『functions.php』への記述を行わないと、WordPressの管理画面上にウィジェットの操作画面が表示されずに、使えない状態になっているので注意してください。functions.phpに記述functions.phpを編集する際は、必ずバックアップをとって慎重に編集してください。);ウィジェットを追加する関数の記述自体は、ナビゲーションのときと似ていて配列[array(~)]の中にパラメータを記述して詳細を指定しています。各値については、下記で説明します。nameウィジェットエリアに名前を付けています。ここに記述した名前が管理画面のウィジェット選択画面に表示されます。idウィジェットエリアにidを付けます。ここで指定した値でsidebar.phpの中にサイドバーを呼び出します。before_widget/after_widgetウィジェットの前と後ろに要素を置きたい場合に値を指定します。各アイテム共通の『sidebar-wrapper』というclass名が反映されるように設定しています。before_title/after_title各ウィジェットにタイトルが付けられた場合のタグを設定できます。上記のソースコードでは、見出しタグのh4タグでタイトルを括るように設定しています。ウィジェットの前と後ろに要素を置きたい場合に値を指定します。functions.phpでウィジェットの有効化が完了したら、WordPressの管理画面上でウィジェットが設定できるようになります。有効化を確認するのと同時にいくつかウィジェットをWordPressの管理画面から挿入しておきましょう。ウィジェットの有効化終わったら、sidebar.phpにウィジェットが表示されるように要素を追加していきます。?>『dynamic_sidebar』のカッコの中のパラメータには、functions.phpで設定したウィジェットの『id』を記述してください。sidebar.phpへの記述まで終わったら、ウィジェットが出力されているかをブラウザで確認しておきましょう。サイドバーウィジェットのデザインをCSSで反映するCSSでデザインを始める前に、sidebarとcontainerに要素を確認するため指定しているカラーと高さの一時設定を、非表示もしくは削除してください。ウィジェットのタイトルと余白を整えます。#03162f;}複数ウィジェットを表示させたときに、各ウィジェットがくっついてしまわないように余白を追加しています。ブラウザで確認したときに、サイドバーにCSSが反映されタイトルのデザインと各ウィジェット同士がくっついていないかを確認してください。ウィジェット全体の調整が完了したら、WordPressに最初から搭載されている各ウィジェットにデザインを追加していきます。下記にサンプルとしてデフォルトウィジェット用のサンプルCSSを載せておきます。好みに合わせて自由にデザイン・カスタマイズして使ってください。right;}以上で、フッターとサイドバーの作成は、完了です。次の記事からは、いよいよテーマのメイン部分であるcontents部分の作成方法についてご紹介していきます。下記より記事で作成したところまでのテーマファイルを下記よりダウンロードできます。『7.SEOやSNS用にWordPressのheadタグを編集し内部的に最適化する』内のディスクリプションの出力方法を変更しました。『7.SEOやSNS用にWordPressのheadタグを編集し内部的に最適化する』内のコードを修正しました。2019年9月21日WordPressテーマ作成の記事の内容をリニューアルしました。