wordpressウィジェットでお問い合わせエリアを作る

wordpressのカスタマイズ案件で「フッターに3つウィジェットがほしい」というウィジェットカスタマイズのご要望をいただくことがあります。

wordressのウィジェット機能は「投稿エリア下」や「サイドバー」でよく利用されていますが、セクションごと作ってしまうことも可能です。

Webサイトカスタムに便利なウィジェット機能

カスタムメニュー、アドセンスコード、バナーなどなんでも入れられるウィジェット。この機能を使って効率よくサイトをカスタムできるように各ポイントにウィジェットを設置する必要があります。

カスタムウィジェットをワードプレスに登録する

ウィジェットの出力箇所を設定する

コンテンツのデザインを整える

という流れになるので、functions.php、footer.php(出力させたいテンプレート)、style.cssにコードを追加することになります。

カスタムウィジェットをワードプレスに登録する

functions.phpにregister_sidebar関数を使ってウィジェット項目を作ります。

register_sidebar(array(
     'name' => 'メインCTA' , 
     'id' => 'maincta' ,
     'before_widget' => '<div class="widget">',
     'after_widget' => '</div>',
     'before_title' => '<h3>',
     'after_title' => '</h3>'
   ));

name:
ウィジット画面に表示する名前

id:
ウィジットエリアのID(※画面に配置するときに必要となります)

before_widget:
ウィジットエリアの前に表示するタグ

after_widget:
ウィジットエリアの後に表示するタグ

before_title:
ウィジットのタイトルの前に表示するタグ

after_title:
ウィジットのタイトルの後に表示するタグ

if ( ! function_exists( 'custom_registration' ) ) {
  function custom_registration() {

    register_sidebar(array(
     'name' => 'メインCTA' ,
     'id' => 'maincta' ,
     'before_widget' => '<div class="widget">',
     'after_widget' => '</div>',
     &#039;before_title' => '<h3>',
     'after_title' => '</h3>'
   ));

  }
  add_action( 'widgets_init', 'custom_registration' ); 
}

ウィジェットの出力箇所を設定する
ウィジェットを表示させるには、表示したい場所のテンプレートにコードを追加します。

<?php dynamic_sidebar(); ?>

()の中にはfunctions.phpで設定したidを入れます。

<?php dynamic_sidebar(‘maincta’); ?>

後々デザインしやすくするため、表示テンプレート部分にコードをつけ加えます。

<div class="l__maincta">
  <div class="section-inner">
    <?php if ( is_active_sidebar( 'maincta' ) ) : ?>
    <?php dynamic_sidebar( 'maincta' ); ?>
    <?php endif; ?>
  </div>
</div>

コンテンツのデザインを見栄え良くする

カテゴリーの一覧表示やタグ表示では特にしませんが、一つのセクションとして表示させるときはデザインを整えます。

デモではこのようなコードを追加しています。

.l__maincta{
  padding: 60px 0;
    background-image: url(http://tamakikoji.com/wp-content/uploads/2018/06/car-1835506_1280.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
}
.l__cta{
  background: rgba(255, 255, 255, 0.8);
    padding: 45px 60px;
    max-width: 580px;
    margin: auto;
}
.l__cta h2{
  font-size: 1.6em;
    margin: 0 0 20px 0;
    text-align: center;
}
.l__cta p{
  font-size: 14px;
    line-height: 1.4;
    margin: 0 0 20px 0;
}
.l__btn__contact{
  text-align: center;
}
.l__btn__contact a{
  font-size: 14px;
    display: inline-block;
    min-width: 200px;
    height: 50px;
    line-height: 50px;
    padding: 0 25px;
    overflow: hidden;
    position: relative;
    background: #efba2e;
    color: #ffffff;
}
.l__btn__contact a:after{
  position: absolute;
    content: "";
    right: -10px;
    width: 40px;
    height: 40px;
    border-top: 8px solid #eee;
    border-right: 8px solid #eee;
    -webkit-transform: matrix(0.14142, 0.14142, -0.14142, 0.14142, -6, -4);
    -ms-transform: matrix(0.14142, 0.14142, -0.14142, 0.14142, -6, -4);
    transform: matrix(0.14142, 0.14142, -0.14142, 0.14142, -6, -4);
    top: 5px;
}

こうするとウィジェット感なく、キレイにカスタマイズすることができます。

ウィジェットでカスタマイズ幅を広げる

ウィジェットはカスタム幅広いと言われるワードプレスのメイン機能の一つです。コンテンツの見せ方のパターンがいくつも考えられるので、可能性はまだまだありそうです。

Pass On

ikeda
(いけだきょうすけ)1989年生まれ。愛知県のwebデザイナー兼プログラマー兼ライター。基本的に企画からデザイン、プログラミングまで一貫して請け負っているがイラストはへたくそ。誰かの人生がちょっと良くなれば嬉しいです。