WordPressプラグイン開発／アプリのデザインをCSSでタブレイアウトにする

動画URL→ https://youtu.be/2SP_of5btJU

アプリのデザインをCSSでタブレイアウトにする

CSSタブレイアウト

タブレイアウトにすると一気にかっこよくなりますね^_^

WordPressで独自のスタイルシートを使う場合は、他のプラグインと重複しないように登録する方がよいとされています。

// スタイルシートを登録
function register_ktpwp_styles() {
    wp_register_style(
        'ktpwp-css',
        plugins_url( '/css/styles.css' , __FILE__),
        array(),
        '1.0.0',
        'all'
    );
    wp_enqueue_style( 'ktpwp-css' );
}
add_action( 'wp_enqueue_scripts', 'register_ktpwp_styles' );

タブレイアウトのCSSについては、ネット上にたくさんの情報がありコピペで使えるサンプルもあります。その中で良さげなのを選んで使いました。

CSSは以下です。

/*タブのスタイル*/
.tab_item {
  width: calc(100%/7);
  height: 50px;
  border-bottom: 5px solid #9da4a4;
  background-color: #d9d9d9;
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: #565656;
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
}
.tab_item:hover {
  opacity: 0.75;
}

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  padding: 40px 40px 0;
  clear: both;
  overflow: hidden;
}

/*選択されているタブのコンテンツのみを表示*/
#list:checked ~ #list_content,
#order:checked ~ #order_content,
#client:checked ~ #client_content,
#service:checked ~ #service_content,
#supplier:checked ~ #supplier_content,
#report:checked ~ #report_content,
#setting:checked ~ #setting_content  {
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  background-color: #9da4a4;
  color: #fff;
}

プログラムの中で以下のHTMLを書きました。

<div class="tabs">
  
  <input id="list" type="radio" name="tab_item" checked><label class="tab_item" for="list">list</label>
  <input id="order" type="radio" name="tab_item"><label class="tab_item" for="order">order</label>
  <input id="client" type="radio" name="tab_item"><label class="tab_item" for="client">client</label>
  <input id="service" type="radio" name="tab_item"><label class="tab_item" for="service">service</label>
  <input id="supplier" type="radio" name="tab_item"><label class="tab_item" for="supplier">supplier</label>
  <input id="report" type="radio" name="tab_item"><label class="tab_item" for="report">report</label>
  <input id="setting" type="radio" name="tab_item"><label class="tab_item" for="setting">setting</label>

  <div class="tab_content" id="list_content">
  $list_content
  </div>
  <div class="tab_content" id="order_content">
  $order_content
  </div>
  <div class="tab_content" id="client_content">
  $client_content
  </div>
  <div class="tab_content" id="service_content">
  $service_content
  </div>
  <div class="tab_content" id="supplier_content">
  $supplier_content
  </div>
  <div class="tab_content" id="report_content">
  $report_content
  </div>
  <div class="tab_content" id="setting_content">
  $setting_content
  </div>
  
</div>

CSSについてまったく勉強してないのですが、だいたいやってることはわかります。このコードは、ちゃんと動くので、理解は後でしようと思います。

print