こんにちは！マダラです！
今回は久しぶりに技術屋っぽい記事ですね。
ネットに紹介記事があったのでスライドして切り替わるタブスライダーを実装しました！
単に実装したという話よりも、みなさんがいかにコピペで簡単にできるかが大事ですよね！笑
ということでコードも載せておきます！
参考にしてください！
元ネタの記事も検索すると出ると思います〜
まずは完成版から！
色とか、細かいデザインは適当です笑
cssにコメント入れてるので自由に変更してください。
コピペで使ってください！！
まず、一番上のファイルですね。tabslider.phpです。
のちのち書きますが、ショートコードでtabsliderで読みこみます。
<div class="tab-container-box">
<div class="tabContainer">
<div class="tab">
<div class="tab__button active"><a href="#">トップ</a></div>
<div class="tab__button"><a href="#">エンタメ</a></div>
<div class="tab__button"><a href="#">スポーツ</a></div>
<div class="tab__button"><a href="#">政治</a></div>
<div class="tab__button"><a href="#">経済</a></div>
<div class="tab__button"><a href="#">お笑い</a></div>
</div><!--tab-->
</div><!--tabContainer-->
<div class="contents">
<!--タブ１-->
<div class="contents__content">
<?php query_posts('showposts=5'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); $loop_count++; ?>
<?php include('tabslider-tmp.php'); ?>
<?php endwhile; else: ?>
<p>記事がありません</p>
<?php endif; ?>
</div><!--タブ１contents__content-->
<!--タブ２-->
<div class="contents__content">
<?php query_posts('showposts=5'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); $loop_count++;?>
<?php include('tabslider-tmp.php'); ?>
<?php endwhile; else: ?>
<p>記事がありません</p>
<?php endif; ?>
</div><!--タブ２contents__content-->
<!--タブ３-->
<div class="contents__content">
<?php query_posts('showposts=5'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); $loop_count++;?>
<?php include('tabslider-tmp.php'); ?>
<?php endwhile; else: ?>
<p>記事がありません</p>
<?php endif; ?>
</div><!--タブ３contents__content-->
<!--タブ4-->
<div class="contents__content">
<?php query_posts('showposts=5'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); $loop_count++;?>
<?php include('tabslider-tmp.php'); ?>
<?php endwhile; else: ?>
<p>記事がありません</p>
<?php endif; ?>
</div><!--タブ４contents__content-->
<!--タブ5-->
<div class="contents__content">
<?php query_posts('showposts=5'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); $loop_count++;?>
<?php include('tabslider-tmp.php'); ?>
<?php endwhile; else: ?>
<p>記事がありません</p>
<?php endif; ?>
</div><!--タブ５contents__content-->
<!--タブ6-->
<div class="contents__content">
<?php query_posts('showposts=5'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); $loop_count++;?>
<?php include('tabslider-tmp.php'); ?>
<?php endwhile; else: ?>
<p>記事がありません</p>
<?php endif; ?>
</div><!--タブ６contents__content-->
</div><!--contents-->
</div><!--tab-Container-box-->
<!--固定ページを投稿一覧にしないためのリセット処理-->
<?php query_posts('page_id=4649'); ?>
<?php wp_reset_query(); ?>テンプレートになるtabslider-tmp.phpです。
この記述に関しては、上のtabslider.phpでincludeさせてますのでファイル名を合わせるようにしてください。
<div class="loopbox">
<a href="<?php the_permalink(); ?>" ontouchstart="">
<!--サムネイル表示-->
<?php if( has_post_thumbnail() ): ?>
<?php the_post_thumbnail(array(50,50),array('class' => 'tab-img')); ?>
<?php else: ?>
<img class="tab-img" src="<?php echo get_stylesheet_directory_uri(); ?>/img/thumb.jpg"/>
<?php endif; ?>
<!--記事タイトル取得-->
<?php the_title( '<span class="tab-title">', '</span>'); ?>
<!--new!マーク表示-->
<?php
$days = 7; //Newを表示させたい期間の日数
$today = date_i18n('U');
$entry = get_the_time('U');
$kiji = date('U',($today - $entry)) / 86400 ;
if( $days > $kiji ){
echo '<div class="new-css tab-info">New!</div>';
}
?>
<!--カテゴリー表示-->
<?php
$cat = get_the_category();
$catname = $cat[0]->cat_name; //カテゴリー名を取得
$catslug = $cat[0]->slug; //スラッグ名を取得
?>
<div class="<?php echo $catslug; ?> cat-all tab-info"><?php echo $catname; ?></div>
<!--投稿日取得-->
<div class="tab-date tab-info"><?php echo get_the_date(); ?></div>
</a>
</div><!--loopbox-->
tab.cssですね。テーマ内にcssフォルダを作ってその中に入れてます。
.tab-container-box{
max-width: 100%; /*スライドタブ全体幅*/
margin: 0 auto;
padding:0;
}
.tab-container-box p{
display:none; /*Wordpress自動整形除去*/
}
.tabContainer {
overflow-x: auto;
overflow-y: hidden;
}
.tabContainer::-webkit-scrollbar {
height: 3px; /*タブ横スクロールの下線太さ*/
}
.tabContainer::-webkit-scrollbar-track {
background: blue; /*右端の下線カラー*/
}
.tabContainer::-webkit-scrollbar-thumb {
background: blue;/*下線カラー*/
}
.tab{
display: table;
cursor:pointer;
}
.tab__button{
display: table-cell;
text-align: center;
background-color:midnightblue; /*タブ背景色*/
vertical-align: middle;
border: 1px solid #ccc; /*タブ外枠*/
border-bottom-width: 4px;
width:200px;
min-width: 80px; /*各タブwidth*/
font-weight:bold;
}
.tab__button.active{
border-bottom: none;
background-color:blue; /*アクティブタブ背景色*/
}
.tab__button.active a{
color: #fff; /*タブ文字色*/
}
.tab__button a{
padding: 10px;
color: #fff; /*タブ文字色*/
display: block;
text-decoration: none;
font-size: 12px; /*タブ文字サイズ*/
}
.contents__content{
background-color: #dcdcdc; /*コンテンツ背景色*/
text-align: left;
}
.loopbox{
border-bottom:solid 1px #fff; /*各記事の下線色*/
margin:0;
}
.loopbox a:active{
background-color: rgba(0,0,0,0.1);
}
.contents__content div{
clear: left;
}
.tab-img{
/*アイキャッチ画像サイズはhmtlの出力側で管理*/
object-fit:cover;
float:left;
margin-right:5px;
}
.tab-title{
display:block;
font-size:12px; /*コンテンツタイトルフォントサイズ*/
overflow:hidden;/*float打ち消し*/
white-space: nowrap; /*折り返さない*/
text-overflow: ellipsis; /*...にする*/
line-height:1.1;
font-weight:bold;
padding:0;
margin:0;
height:30px; /*画像高さと合わせる。ここではnewとcategoryの15pxを考慮*/
}
.contents__content div a{
width: 100%;
text-decoration: none;
box-sizing:border-box;
display:block;
padding: 5px; /*コンテンツ内パディング*/
border-bottom:0px solid #000; /*コンテンツ下線(現在削除)loopboxで表示*/
color:#222; /*コンテンツ文字カラー*/
font-size:0px; /*inlineの余白除去*/
}
/*コンテンツ横の縦バー*/
/*.contents__content div a:before{
content:'';
width: 50px;
height: 30px; コンテンツ一つあたりのheight
display: block;
background-color: #fff;
display: table-cell;
}*/
.tab-info{
display:inline-block;
margin:0 5px;
height:20px;
box-sizing:border-box;
border-radius:3px;
font-size:10px;
padding:1px 3px;
line-height:20px; /*テキスト中央揃え*/
}
/*newマークデザイン*/
.new-css{
color:#fff;
background-color:#FE9A2E;
}
/*カテゴリーデザイン*/
.cat-all{
color:#fff;
background-color:#191970;
}
.none{
color:#fff;
background-color:#191970; /*カテゴリ未分類背景色*/
}
.tab-date{
color:#fff;
background-color:skyblue;
}
/*ーーーーーーーーーーーーーーーーーーーーーーーーー
メディアクエリ 768px以上
ーーーーーーーーーーーーーーーーーーーーーーーーー*/
@media screen and (min-width: 768px){
.loopbox a:hover{
background-color: rgba(0,0,0,0.1);
}
}テーマ内にjsフォルダを作って、読み込ませています。tab.bxslider.jsです。こちらはネットから拾ってこれますので、そっちでとったほうが早いです。
$(document).ready(function(){
/******************************************
事前準備
*******************************************/
//タブボタンの数を取得
var tabQuantity = $('.tab__button').length;
//タブの長さとボディの長さの差分を取得
var tabExtraDistance = $('.tab').width() - $('.tabContainer').width();
/******************************************
スライダー発動
*******************************************/
var slider = $('.contents').bxSlider({
pager:false,
controls:false,
onSlideBefore: function($slideElement, oldIndex, newIndex){
//スライドする時に関数を呼び出す。newIndexはスライダーの現在地。
slideChange(newIndex);
}
});
/******************************************
スライドする時に発動する関数。タブの表示調整を行う。
*******************************************/
function slideChange(newIndex){
//クラスを調整
$('.tab__button').removeClass('active');
$('.tab > div:nth-child(' + ( newIndex + 1 ) + ')').addClass('active');
//スクロールするべき距離を取得。タブ全体の長さ / ( タブの個数 - 1 ) * スライドの現在地
var scrollDestination = ( tabExtraDistance / (tabQuantity - 1) ) * ( newIndex );
//スクロール位置を調整
$('.tabContainer').animate({ scrollLeft: scrollDestination }, 'slow');
}
/******************************************
タブボタンクリックで発動する関数
*******************************************/
$('.tab__button').on('click',function(e){
//何番目の要素かを取ってスライドを移動する
var nth = $('.tab__button').index(this);
slider.goToSlide(nth);
//クリックイベントを無効化
e.preventDefault();
})
});あとはjquery.bxslider.min.jsが必要ですですがこちらもネットにあるので拾ってきてください。。笑
ワードプレスで読みこませる
ワードプレスで使う場合はfunctions.phpでファイルの読み込みが必要です.
先ほどのcssとjsファイルの３つを読み込んでいます。
function my_scripts() {
wp_enqueue_script( 'tab.bxslider', get_stylesheet_directory_uri() . '/js/tab.bxslider.js', array(), false, true );
wp_enqueue_script( 'jquery.bxslider.min', get_stylesheet_directory_uri() . '/js/jquery.bxslider.min.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );
function add_files() {
wp_enqueue_style( 'tab', get_stylesheet_directory_uri() . '/css/tab.css', "", "all");
}
add_action( 'wp_enqueue_scripts', 'add_files' );/* Your code... */include("tabslider.php");でも出力できますが、
投稿で簡単に挿入できるように、ショートコードが使えるようにしましょう。
function my_php_Include($params = array()) {
extract(shortcode_atts(array('file' => 'default'), $params)); ob_start(); include(STYLESHEETPATH . "/$file.php"); return ob_get_clean(); } add_shortcode('myphp', 'my_php_Include');あとは、すきな位置に、このショートコードを入れるだけ！！
かっこの部分は ] が入ります！
そのまま書いちゃうと出力されてしまうので、、、
ちなみに同じページに２個以上タブスライダーを出力してもうまく動かないです。。
[myphp file='tabslider'かっこまとめ
ある程度の技術力があれば、簡単に導入できるかと思います。
ワードプレス触りたての人でも扱えるような形にしたいんですがなかなか難しいですね。
ファイル転送ツールとか使えないと積んでる。