「スワイプタブとは」
グノシーやスマートニュースなどのニュースサイトでみるカテゴリを替える時に指で横にスワイプ（スライド）して切り替える事ができるタブです。今回はスワイプタブを使ってスワイプタブメニューを設置したサイトを作ってみました。
「完成したサンプルサイト」
レスポンシブになっていてPCとスマホどちらも同じ見た目になっていますが、主にスマートフォン向けといった感じとなっています。
サイトの主要部分（スワイプタブメニュー）はプラグインなしで作成しています。その他、関連記事表示やSNSシェアボタンなどもプラグインなしです。
wordpressで作成していますが主要部分（スワイプタブメニュー）は、はてなブログなどでも作成できるとおもいます。
唯一プラグインを使っているのは投稿記事部分でサンプルサイトではYoutubeのリンクを張るだけでアイキャッチ画像と再生画面を作成してくれるVideo Thumbnailsというプラグインをつかって投稿しています。
この投稿部分に関しては、もちろんプラグインを使わずに普通に記事を投稿して表示したり、リンクを貼ったりといろいろできると思います。
「スワイプタブメニューサイト作り方トップページ編」
div class=”contents”ごとがタブの区切りになっていますのでこの中身を改変することで応用できます。今回は記事一覧を取得できるソースを追加しました。
作成したHTMLソースがこちら
<div class="container">
<div class="tabContainer">
<div class="tab">
<div class="tab__button active"><a href="#">タブ１</a></div>
<div class="tab__button"><a href="#">タブ２</a></div>
</div>
</div>
<div class="contents">
<div class="Swipe__tab">
<div class="side-new">
<?php
$cat = get_the_category();
$post_id = get_the_ID();
$cate_ids = $cat[0]->term_id;
for($i=1; $i<count($cat); $i++) {
$cate_ids .= "," . $cat[$i]->term_id;
}
$newposts = get_posts( array(
'posts_per_page' => 5,
'exclude' => 0 ));
foreach( $newposts as $post ):
setup_postdata( $post );
$new_title = get_the_title();
$hours = 10;
$today = date_i18n('U');
$entry = get_the_modified_date('U');
$elapsed = date('U',($today - $entry)) / 3600;
echo "<li><a href='" . get_permalink() . "'>";
if(has_post_thumbnail()) {
$img = wp_get_attachment_image_src(get_post_thumbnail_id(),array(60,60));
echo "<img src='{$img[0]}' alt='{$new_title}'>";
}
if( $hours > $elapsed ){
echo '<font color="#ff8000">New</font>';
}
echo "{$new_title} <span style='font-size:15px'>(" . get_post_time('m月d日h時i分') . ")</span></a></li>";
endforeach;
wp_reset_postdata();
echo '</div>';
?>
</div>
<div class="Swipe__tab">
<div class="side-new">
<?php
$cat = get_the_category();
$post_id = get_the_ID();
$cate_ids = $cat[0]->term_id;
for($i=1; $i<count($cat); $i++) {
$cate_ids .= "," . $cat[$i]->term_id;
}
$newposts = get_posts( array(
'category' => 1,
'posts_per_page' => 5,
'exclude' => 0 ));
foreach( $newposts as $post ):
setup_postdata( $post );
$new_title = get_the_title();
echo "<li><a href='" . get_permalink() . "'>";
if(has_post_thumbnail()) {
$img = wp_get_attachment_image_src(get_post_thumbnail_id(),array(60,60));
echo "<img src='{$img[0]}' alt='{$new_title}'>";
}
echo "{$new_title} <span style='font-size:15px'>(" . get_post_time('m月d日h時i分') . ")</span></a></li>";
endforeach;
wp_reset_postdata();
echo '</div>';
?>
</div>
</div>
</div>
タブごとに記事一覧を表示できるようにと、投稿時間と新着マークも表示できるようにしてあります。
トップタブではすべての記事一覧を最新順に、その他のタブはカテゴリーIDを指定することでカテゴリー別の記事一覧が表示できます。
「’category’ => 1,」 ←この部分を表示したいカテゴリーIDに変更し一番最初のタブはカテゴリーIDを指定しないことで全記事表示
「 ‘posts_per_page’ => 5,」←この部分は表示したい件数です。見た目をそろえるために全てのタブで同じ件数にしておくといいと思います。
array(60,60)この部分はアイキャッチ画像の大きさです、cssで指定する大きさと同じにしておくといいです。
あとはcssです。本体部分とタブ内部の２つをそれぞれサイトに合わせてアイキャッチのサイズや文字サイズ、カラー、レイアウトなど改変していただくといいと思います。
JavaScriptの読み込み
このままではタブはスワイプできませんので、最後に参照元記事にあるJavaScriptを読み込ませませれば動くようになります。
スムーズな切り替えが可能に
使用しているテーマやレイアウトで細かな部分は違ってくるかもしれませんがこれで大まかな部分はできたはずです。
スワイプタブはニュースサイトでなくとも複数のカテゴリーを扱っているサイトなどでカテゴリー一覧を読み込み切り替えなしでスムーズに表示させることができるので便利だと思います。