STORK(ストーク)にJINやSANGOのようなタブ機能を追加するカスタマイズ【WordPress】

STORKにJINやSANGOのようなタブ機能を実装 WordPress

今回はSTORK(ストーク)でJINやSANGOのようなタブ機能をつかえるようにするカスタマイズの紹介です。

Twitterにデモの動画をアップしたので、動きをご確認ください。

今回はこのタブ機能を実装します。

なるべく簡単に、コピペと少しの書き換えだけで実装できるようにしました!

2018年6月27日追記:
テツヤマモトさん(@okapo192)が改良版を書いてくださいました!
ぜひこちらもご覧ください:3
【STORK】トップページにカテゴリー切り替えタブを導入する【カスタマイズ】

カスタマイズの流れ

  1. style.cssにコピペ
  2. functions.phpにコピペ
  3. 今の記事のレイアウトをチェック
  4. ウィジェットにコピペ
  5. 完成!

という流れです。

デザインを整えて、
タブごとにカテゴリー記事を表示できるようにして、
ウィジェットでタブ機能を表示。

というふうに進めて行きます。

1. style.cssにコピペ

まずはタブの見た目を調整するCSSのカスタマイズです。

WordPress管理画面の

「外観」→「テーマの編集」

から、スタイルシート(style.css)の編集画面を開いてください。

※ご注意ください
テーマのカスタマイズをする際は子テーマを利用しましょう。
詳しくはSTORK公式サイトの説明をご覧ください。
専用「子テーマ」のダウンロード・解説 | OPENCAGE

style.cssの最後に、次のコードを書き加えましょう。

最後の行で改行した後にコピペしてください。

/* ---------- ストークタブ機能用CSS ---------- */
.post-tab-list ul.tab-list {
display: flex;
}
.post-tab-list ul li {
flex-direction: row;
width: 25%;
text-align: center;
cursor: pointer;
padding: 10px;
position: relative;
background-color: rgba(189,189,189,.17);
}
.post-tab-list ul li.selected {
background-color: #ff7d44; /* 選択中のタブの背景色 */
color: #fff; /* 選択中のタブの文字色 */
font-weight: bold;
}
.post-tab-list ul li:not(:first-child){
margin-left: 5px;
}
.post-tab-list ul li.selected::after {
position: absolute;
content: "";
bottom: -8px;
left: 50%;
margin-left: -8px;
opacity: 1;
width: 0;
height: 0;
border-top: 8px solid #2b2b2b;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top-color: #ff7d44; /* 選択中のタブの下矢印の色 */
}
.ptl, #main > .top-post-list.unselected, #main > .post-list-card.unselected, #main > .post-list-magazine.unselected, .pagination.unselected {
display: none;
}
.ptl.selected {
display: block;
}
@media only screen and (max-width: 767px) {
.post-tab-list ul.tab-list {
display: flex;
flex-wrap: wrap;
}
.post-tab-list ul li {
width: calc(50% - 2px);
}
.post-tab-list ul li:nth-child(odd) {
margin: 0 4px 4px 0;
}
.post-tab-list ul li:nth-child(even) {
margin: 0 0 4px 0;
}
.post-tab-list ul li.selected::after {
content: none;
}
}

ここで、1つポイントがあります。

このCSSで選択中のタブの背景色と文字色を変更できるので、

/* 選択中のタブの〜〜〜色 */

とコメントがある部分(3ヶ所あります)のカラーコードを、お好みの色に書き換えてください。

上のコードでは背景色が#ff7d44, 文字色が#fffになっています。(オレンジ背景・白抜き文字)

背景色をサイトに合ったカラーに変更し、文字も白や黒など見やすい色に変えましょう。

WEB色見本 原色大辞典 – HTMLカラーコード

2. functions.phpにコピペ

次に、タブで表示するカテゴリー記事一覧を出すためのショートコードを追加するカスタマイズです。

同じくWordPress管理画面から、

「外観」→「テーマの編集」→「テーマのための関数(functions.php)」

を開いてください。

functions.phpも、style.cssと同じように子テーマを利用しましょう。

functions.phpを開いたら、最後の行で改行した後に次のコードをコピペしてください。

2018年5月23日追記: 動作が軽くなるようにコードを改善しました

// ストークタブ機能 --------------------------------------------------------------------------------
// "num" = 表示記事数, "cat" = カテゴリ番号
// 呼び出し元での指定も可能 -> [getCatArticles type="simple" num="x" cat="y"]
ini_set("memory_limit","64M");
function getCatItems($atts, $content = null) {
// デフォルトの記事レイアウトと記事数とカテゴリーIDを指定
// type…記事のレイアウト
// num…表示する記事数
// cat…カテゴリーID(0はカテゴリー指定なし)
extract(shortcode_atts(array(
"type" => 'simple',
"num" => '10',
"cat" => '0'
), $atts));

// typeの例外処理
if ($type != 'simple' && $type != 'card' && $type != 'magazine'):
$type = 'simple';
endif;

// 処理中のpost変数をoldpost変数に退避
global $post;
$oldpost = $post;

// カテゴリーの記事データ取得
if ($cat != '0'): // カテゴリー指定なし
$myposts = get_posts('numberposts='.$num.'&order=DESC&orderby=post_date&category='.$cat);
else: // カテゴリー指定あり
$myposts = get_posts('numberposts='.$num.'&order=DESC&orderby=post_date');
endif;

if ($type == 'card'):
$retHtml = '<div class="post-list-card cf">';
elseif ($type == 'magazine'):
$retHtml = '<div id="magazine-wrap" class="post-list-magazine cf">';
else:
$retHtml = '<div class="top-post-list">';
endif;

if($myposts) {
// 記事がある場合↓
// 取得した記事の個数分繰り返す
foreach($myposts as $post) :
setup_postdata($post);

//カテゴリーを取得
$cats = get_the_category();

// 投稿ごとの区切りのdiv
if ($type == 'card'):
$retHtml .= '<article class="post-list cf animated fadeIn post-' . get_the_ID() . ' post type-post status-publish format-standard has-post-thumbnail ';
else:
$retHtml .= '<article class="post-list animated fadeIn post-' . get_the_ID() . ' post type-post status-publish format-standard has-post-thumbnail ';
endif;
foreach($cats as $cat):
$retHtml .= 'category-' . $cat->slug . ' ';
endforeach;
if ($type == 'magazine'):
$retHtml .= ' article cf" role="article" style="position: relative;">';
else:
$retHtml .= ' article cf" role="article">';
endif;
if ($type == 'card' || $type == 'magazine'):
$retHtml .= '<a href="' . get_the_permalink() . '" rel="bookmark" title="' . the_title_attribute('echo=0') . '">';
else:
$retHtml .= '<a href="' . get_the_permalink() . '" rel="bookmark" title="' . the_title_attribute('echo=0') . '" class="cf">';
endif;

// サムネイルの有無チェック
if ( has_post_thumbnail() ) {
// サムネイルがある場合↓
$retHtml .= '<figure class="eyecatch">';
if ($type != 'magazine'):
$retHtml .= get_the_post_thumbnail($page->ID, 'home-thum');
else:
$retHtml .= get_the_post_thumbnail($page->ID);
endif;
$retHtml .= '<span class="cat-name cat-id-' . $cat->cat_ID . '">' . $cat->name . '</span>';
$retHtml .= '</figure>';
} else {
// サムネイルがない場合↓
if ($type != 'magazine'):
$retHtml .= '<figure class="eyecatch noimg">';
$retHtml .= '<img src="' . get_template_directory_uri() . '/library/images/noimg.png">';
$retHtml .= '<span class="cat-name cat-id-' . $cat->cat_ID . '">' . $cat->name . '</span>';
$retHtml .= '</figure>';
endif;
}

if ($type == 'card' || $type == 'magazine'):
$retHtml .= '<section class="entry-content">';
else:
$retHtml .= '<section class="entry-content cf">';
endif;
$retHtml .= '<h1 class="h2 entry-title">' . get_the_title() . '</h1>';
$retHtml .= '<p class="byline entry-meta vcard">';
$retHtml .= '<span class="date gf updated">' . get_the_time('Y.m.d') . '</span>';
$retHtml .= '<span class="writer name author"><span class="fn">' . get_the_author() . '</span></span>';
$retHtml .= '</p>';

// シンプルかつスマホ表示の場合とカード型またはマガジン型の場合に抜粋文を表示
if( !is_mobile() && $type == 'simple' ){
$retHtml .= '<div class="description"><p>' . get_the_excerpt() . '</p></div>';
} else if ($type == 'card' || $type == 'magazine' ){
$retHtml .= '<div class="description"><p>' . get_the_excerpt() . '</p></div>';
}

$retHtml .= '</section>';
$retHtml.= '</a>';
$retHtml.= '</article>';

endforeach;
$myposts = null;
$post = null;
wp_reset_postdata();

} else {
// 記事がない場合↓
$retHtml.='<article id="post-not-found" class="hentry cf">';
$retHtml.='<header class="article-header">';
$retHtml.='<h1>まだ投稿がありません!</h1>';
$retHtml.='</header>';
$retHtml.='<section class="entry-content">';
$retHtml.='<p>表示する記事がまだありません。</p>';
$retHtml.='</section>';
$retHtml.='</article>';
}

$retHtml.= '</div>';

// oldpost変数をpost変数に戻す
$post = $oldpost;

return $retHtml;
}
// 呼び出しの指定
add_shortcode("getCatArticles", "getCatItems");

このコードをfunctions.phpに追加することで、 [getCatArticles] というショートコードが使えるようになりました。

このショートコードは、指定したカテゴリーの記事一覧を表示できるショートコードです。

3. 今の記事のレイアウトをチェック

これでタブごとにカテゴリーの記事一覧を表示する準備ができました!

さっそくウィジェットにショートコードを入れて……といきたいところですが、 その前に「記事のレイアウト」をチェックしましょう

「外観」→「カスタマイズ」→「グローバル設定」 と進んで下にスクロールすると、

  • [PC]トップページ記事レイアウト
  • [SP]トップページ記事レイアウト

という箇所があると思います。

そこでチェックされているものを確認しましょう。

  • シンプル
  • カード型
  • マガジン型

この記事レイアウトによって、これから使うショートコードが少しだけ変わります。PCとSP(スマホ)それぞれの記事レイアウトが確認できたら次に進みましょう!

レイアウト「ビッグ」はあまり使われていないので対応していません。

もしビッグで使いたい!という方がいらっしゃいましたらご用意しますのでTwitterなどでご連絡ください。

4. ウィジェットにコピペ

レイアウトが確認できたら、いよいよ最後のステップです。

ウィジェットにタブやショートコードをコピペしていきましょう。

「外観」→「ウィジェット」 でウィジェット画面を開いてください。

4箇所のウィジェットにコピペ

ウィジェット画面の右のほうに、

  • ① PC:トップページ上部
  • ② SP:トップページ上部
  • ③ PC:トップページ下部
  • ④ SP:トップページ下部

という4ヶ所があると思います。

今回はこの4箇所にコピペしていきます。

コードをコピペする際は「テキスト」ウィジェットのテキストモードをご利用ください。

①, ②「トップページ上部」のコード

①と②の「トップページ上部」の2ヶ所には、同じコードをコピペします。

その際、「ここにカテゴリー名を入れてください」の部分(3ヶ所)にそれぞれのタブのカテゴリー名を入れてコピペしてください。

<div class="post-tab-list">
<ul class="tab-list">
<li class="post-tab-1 selected">最新記事</li>
<li class="post-tab-2">ここにカテゴリー名を入れてください</li>
<li class="post-tab-3">ここにカテゴリー名を入れてください</li>
<li class="post-tab-4">ここにカテゴリー名を入れてください</li>
</ul>
<div class="post-tab-list-inner">
<div class="ptl post-tab-list-1 selected"></div>
</div>
</div>

③, ④「トップページ下部」のコード

ここで注意点です!

③と④の「トップページ下部」の2ヶ所は、先ほど確認した記事のレイアウトやカテゴリーによって、ショートコードの部分が変える必要があります。

ショートコードの部分はあとで変えるとして、とりあえず③, ④の「トップページ下部」の2ヶ所にコードをコピペしてしまいましょう。

<div class="ptl post-tab-list-2">[getCatArticles]</div>
<div class="ptl post-tab-list-3">[getCatArticles]</div>
<div class="ptl post-tab-list-4">[getCatArticles]</div>
<script>
$('.tab-list li').on('click',function(){
$('.tab-list li.selected').removeClass('selected');
ptlNum = $(this).attr('class');
ptlNum = ptlNum.slice(-1);
$(this).addClass('selected');
if (ptlNum == 1) {
$('.ptl.selected').removeClass('selected');
$('#main > .top-post-list').removeClass('unselected');
$('#main > .post-list-card').removeClass('unselected');
$('#main > .post-list-magazine').removeClass('unselected');
$('.pagination').removeClass('unselected');
} else {
$('#main > .top-post-list').addClass('unselected');
$('#main > .post-list-card').addClass('unselected');
$('#main > .post-list-magazine').addClass('unselected');
$('.pagination').addClass('unselected');
$('.ptl.selected').removeClass('selected'); $('.post-tab-list-' + ptlNum).addClass('selected');
}
});
</script>

コピペができたらショートコードを変えていきます。

ショートコード[getCatArticles]の使い方

今回使うショートコードの使い方をご説明します。

[getCatArticles]

このショートコードのまま使うと、

「シンプル」レイアウトで、「最新記事(カテゴリー指定なし)」が「10記事」表示されます。

タブで表示するために、「記事のレイアウト」と「表示する記事数」と「記事のカテゴリー」を指定したいですよね。

そこで、このショートコードでは、「引数」とよばれる値をショートコードに加えることで、それらを指定できるようになっています。

例:[getCatArticles type=”card” num=”20″ cat=”51″]

type=””では、「記事のレイアウト」を指定できます。

シンプルは”simple”, カード型は”card”, マガジン型は”magazine”を入れてください。

num=””では、「表示する記事数」を指定できます。

表示したい記事数を入れてください。(例:20記事表示する場合はnum=”20″)

cat=””では、「記事のカテゴリー」を指定できます。

表示したいカテゴリーの「カテゴリーID」を入れてください。(例:cat=”2″)

カテゴリーIDは、カテゴリー編集画面のURLで確認できます。
(tag_ID=〇〇の数字です。下の画像でいうと65)

いくつか例をあげると、

例1:カテゴリーIDが6の記事を15記事、カード型で表示したい

[getCatArticles type=”card” num=”15″ cat=”6″]

例2:カテゴリーIDが27の記事を10記事、シンプルレイアウトで表示したい

[getCatArticles type=”simple” num=”10″ cat=”27″]

のようになります。

タブごとにカテゴリー別の記事が表示されるように、ショートコードに引数を追加してください。

JIN同様、最初のタブは最新記事で固定になります。
ショートコードでは2, 3, 4番目のタブの記事を設定してください。

記事数が多い場合はボタンを追加

ショートコードで指定した記事数よりも投稿数の方が多い場合は、続きの投稿へのリンクを貼りましょう。

ストークのボタンショートコードなどを使うと便利です。

ストーク:ショートコードの使い方

それぞれの[getCatArticles]の直後に貼ればOKです。

例:[btn class=”rich_blue”]<a href=”カテゴリーページのURL/page/2/”>もっと見る</a>[/btn]

※2ページ目と合わない場合はWordPressの設定などをご確認ください。

タブ機能完成!

これでタブ機能が完成です!

トップページでタブ機能が問題なく動くかご確認ください。

無事に動いたら完了です!お疲れ様でした:3

ショートコードごとに記事レイアウトが変えられるので、PCとスマホ表示で変えたり、タブごとに変えることもできます。
引数を色々変えてしっくりくるデザインを探してみてください:3

もしトップページ上部と下部に他のウィジェットを追加したい場合は、
上部:今回追加したテキストウィジェットより上
下部:今回追加したテキストウィジェットより下
に追加してください。

コメント

タイトルとURLをコピーしました