今回の記事では、バズ部さんが無料で提供しているWordPressテーマ:Xeoryのフッターに4列(4カラム)のウィジェットエリアを作る方法を紹介したいと思います。
一度ウィジェットエリアを作ってしまえば、タグクラウドや最新の記事一覧、お問い合わせフォームなど、色々なウィジェットを簡単に出し入れすることができるので、結構便利です。
2列や4列のウィジェットエリアを作る方法についても紹介しているので、もしよければ参考にして下さい。
目次
カスタマイズ前
↓ ここにウィジェットエリアを追加。
カスタマイズ後
PCサイズ
↓ 「最近の投稿ウィジェット」や「アーカイブウィジェット」など4つのウィジェットを追加。
タブレットサイズ
↓ タブレットサイズでは4列から2列に。
スマホサイズ
↓ スマホサイズでは横幅100%になります。
※ 今回はPHPファイルを編集していきます。画面が真っ白になることもあるので、PHPコードは注意して編集して下さい。
はじめに
WordPressでウィジェットエリアを作るには、
- ウィジェットエリアの登録 (functions.php)
- ウィジェットエリアの表示 (表示させたい場所のPHPファイル)
という2つの作業が必要になります。
ウィジェットの登録は functions.phpなどのPHPファイルで行い、
ウィジェットを表示するには、必要なコードを「表示させたい場所のPHPファイル」に書き込みます。
1. functions.php を編集
まずはウィジェットエリアの登録です。
以下のコードを functions.php に書き込みます。
※ 書き込む fucntions.php は、親テーマのものでも子テーマのものでも、どちらでも大丈夫です。
function wcl_register_footer_widgets() {register_sidebar( array('name' => 'Footer 1','description' => 'フッター左に表示されるウィジェットエリアです。','id' => 'footer-1','before_widget' => '<div class="site-footer-in footer-widget-1 widget"><div id="%1$s" class="%2$s site-footer-conts">','after_widget' => '</div></div>','before_title' => '<h4 class="widget-title">','after_title' => '</h4>',) );register_sidebar( array('name' => 'Footer 2','description' => 'フッター中央左に表示されるウィジェットエリアです。','id' => 'footer-2','before_widget' => '<div class="site-footer-in footer-widget-2 widget"><div id="%1$s" class="%2$s site-footer-conts">','after_widget' => '</div></div>','before_title' => '<h4 class="widget-title">','after_title' => '</h4>',) );register_sidebar( array('name' => 'Footer 3','description' => 'フッター中央右に表示されるウィジェットエリアです。','id' => 'footer-3','before_widget' => '<div class="site-footer-in footer-widget-3 widget"><div id="%1$s" class="%2$s site-footer-conts">','after_widget' => '</div></div>','before_title' => '<h4 class="widget-title">','after_title' => '</h4>',) );register_sidebar( array('name' => 'Footer 4','description' => 'フッター右に表示されるウィジェットエリアです。','id' => 'footer-4','before_widget' => '<div class="site-footer-in footer-widget-4 widget"><div id="%1$s" class="%2$s site-footer-conts">','after_widget' => '</div></div>','before_title' => '<h4 class="widget-title">','after_title' => '</h4>',) );}add_action( 'widgets_init', 'wcl_register_footer_widgets' );
これでフッター用のウィジェットエリアが登録されました。
※ この時点ではまだ何も表示されませんが、デモ用にウィジェットを入れておきます。
次に登録したウィジェットエリアを表示させます。
footer.php の19行目付近に、以下のコードがあるので、
<footer id="footer"><?php if( has_nav_menu( 'footer_nav' ) ){ ?>
これを下のコードで置き換えます。
<footer id="footer"><?phpif ( is_active_sidebar( 'footer-1' ) | is_active_sidebar( 'footer-2' ) | is_active_sidebar( 'footer-3' ) | is_active_sidebar( 'footer-4' ) ) :echo '<div class="footer-widgets">';echo ( dynamic_sidebar( 'footer-1' ) | dynamic_sidebar( 'footer-2' ) | dynamic_sidebar( 'footer-3' ) | dynamic_sidebar( 'footer-4' )) ? '</div>' : '';endif;?><?php if( has_nav_menu( 'footer_nav' ) ){ ?>
( ※ 上のように書くと、ウィジェットが何も入っていないときに、ウィジェットエリアを包む空のdivタグが出力されないようになります )
保存・更新すると、
先ほど入れたウィジェットが表示されるようになりました。
3. CSSファイルを編集
ここまでのPHPコードの編集で、ウィジェットエリアを登録、表示することができましたが、余白が少なくかなり見づらい状態なので、CSSファイルを編集して見た目を整えていきましょう。
お使いのCSSファイルに以下のコードを追加します。
.footer-widgets {-webkit-box-sizing: border-box;box-sizing: border-box;max-width: 1200px;margin: 0 auto;padding-top: 40px;padding: 40px 20px;}.footer-widgets:before {content: "";display: table;}.footer-widgets:after {content: "";display: table;clear: both;}.footer-widgets .widget-title {font-size: 20px;font-weight: bold;border-bottom: 1px solid #383838;padding-bottom: 5px;margin-bottom: 20px;}.footer-widget-1,.footer-widget-2,.footer-widget-3,.footer-widget-4 {width: 21.25%;float: left;margin-bottom: 20px;}.footer-widget-1,.footer-widget-2,.footer-widget-3 {margin-right: 5%;}@media only screen and (max-width: 950px) {.footer-widget-1,.footer-widget-2,.footer-widget-3,.footer-widget-4 {width: 47.5%;margin-bottom: 20px;}.footer-widget-2,.footer-widget-4 {margin-right: 0;}}@media only screen and (max-width: 736px) {.footer-widget-1,.footer-widget-2,.footer-widget-3,.footer-widget-4 {width: 100%;}.footer-widget-1,.footer-widget-2,.footer-widget-3,.footer-widget-4 {margin-right: 0;}}
PCサイズではウィジェットが4列に並んでいますが、、、
ブラウザを狭めてタブレットサイズにすると、4列表示だったウィジェットが2列表示になり、、、 ↓
もう少しブラウザの幅を狭めると、1列表示になります。 ↓
3-1. 横幅の計算方法について
先ほどCSSコードの中に width: 47.5%
という数字が出てきましたが、これは下の画像のように計算することができます。
少しややこいんですけど、これにサイト全体の横幅(1200px)などを当てはめると、width: 21.25%
や width: 47.5%
という横幅を計算できます。
(余白は60pxにしました)
今回のカスタマイズは以上になります。
最後まで閲覧ありがとうございました。