web制作を独学でコツコツ継続し約1年が経ちました。今まで学んだ言語は
HTML 、CSS 、JavaScript、jQuery、PHP です。
それらを駆使してどうにかこのブログサイトをオリジナルテーマで作成し
ブログを運営できるようにまでなりました！
自分の忘備録も兼ねてこのサイトの作り方を数回に分けて書いていきます。
まずは「タブ」を紹介します。
このサイトの一番こだわったところ
たくさんのブログサイトを見てまわってよく見かけたのが「タブ」です。
すっかり気に入ってしまい、どうにか実装したく奮闘したので
今回はこのタブとはどういったものなのか、どう実装したのかを解説していきます。
そもそもタブとは
ページ移動をせずに複数のカテゴリのうち選択したカテゴリを表示させることができる。
このサイトのトップページを見ていただけたらわかると思います。
これを実装したコードは以下
タブのコード
index.php
<!-- タブを作る IDで指定 -->
<div class="content-wrapper">
<ul class="tab">
<li><a href="#">###</a></li>
</ul>
<!-- タブの中身を作る -->
<div class="entry-items">
<div id="#" class="area">
<?php while (have_posts()) :
the_post(); ?>
<ul class="entry-item-list">
<div class="entry">
<li>
<a class="entry-item" href="<?php the_permalink(); ?>">
<div class="entry-item-img">
<?php
if (has_post_thumbnail()) {
the_post_thumbnail('large');
} else {
echo '<img src="' . esc_url(get_template_directory_uri()) . '/img/noimg.png" alt="">';
}
?>
</div>
<div class="entry-item-body">
<div class="entry-item-meta">
<?php
$category = get_the_category();
if ($category[0]) {
echo '<div class="entry-item-tag">' . $category[0]->cat_name . '</div>';
}
?>
<time class="entry-item-published" datetime="<?php the_time('c'); ?>">公開日
<?php the_time("Y-m-d"); ?></time>
</div>
<h2 class="entry-item-title"><?php the_title(); ?></h2>
<div class="entry-item-excerpt">
<p><?php the_excerpt(); ?></p>
</div>
</div>
</a>
</li>
</div>
</ul>
<?php endwhile; ?>
</div>
script.js
// 任意のタブにURLからリンクするための設定
function GethashID(hashIDName) {
if (hashIDName) {
// タブ設定
jQuery('.tab li').find('a').each(function () { //タブ内のaタグ全て取得する
var idName = $(this).attr('href'); //タブ内のaタグのリンク名(#lunch)の取得
if (idName == hashIDName) { //リンク元の指定されたURLのハッシュタグ
var parentElm = $(this).parent();//タブ内のaタグの親要素(li)を取得
$('.tab li').removeClass("active");//activeクラスを取り除き
$(parentElm).addClass("active");//リンク元の指定されたURLのハッシュタグとタブ内のリンク名が同じであればliにactiveクラスを追加
//表示させるエリア
$(".area").removeClass("is-active");//元々付いているis-activeクラスを取り除き
$(hashIDName).addClass("is-active");//表示させたいエリアのタブリンク名をクリックしたら、表示エリアにis-activeクラスを追加
}
});
}
}
//タブをクリックしたら
jQuery('.tab a').on('click', function () {
var idName = $(this).attr('href');//タブ内のリンク名を取得
GethashID(idName);//設定したタブの読み込みと
return false;//aタグを無効にする
});
//ページが読み込まれたらすぐに動かす
jQuery(window).on('load', function () {
jQuery('.tab li:first-of-type').addClass("active");//最初のliにactiveクラスを追加
jQuery('.area:first-of-type').addClass("is-active");//最初の.areaにis-activeクラスを追加
var hashName = location.hash;//リンク元の指定されたURLのハッシュタグを取得
GethashID(hashName);//指定したタブの読み込み
});
これでタブとタブの中身が出来ました。
あとは必要な数だけ足していくだけです。
CSSは適宜当ててくださいね！
