神ゲーだった

SWELLのタブブロックでTOPページをカスタマイズする

WordPressのテーマ「SWELL」でのTOPページのレイアウトをカスタマイズしてみた話です。
2020年4月30日に追加されたばかりの「SWELL 2.0.9」で実装された「タブブロック」の機能を使っています。

目次

タブブロックって?

こういう機能です。

こういう事が出来ます。

なんでカスタマイズしてみようと思った?

TOPページを以下のように、タブ切り替え表示出来るようにしていました。
(実際に動かせます)

以下のように、各カテゴリ別に新着と人気をタブ切り替えで表示したかった、がキッカケでした。

カスタマイズしてみてどうだった?

やり方は、ダッシュボードのブログパーツの所で登録してショートコードをウィジェットから呼び出すという形だったので簡単に実現出来ました
登録する内容は、上から順にカテゴリを「段落ブロック」、新着/人気を「タブブロック」、記事を「投稿リスト」、という組み合わせで出来ます。

ただカテゴリが多かったり表示させる数を増やしたいとなると縦に伸びていくので、下に配置されるカテゴリの部分が見づらくなっちゃうんですよね。
なので各カテゴリの部分もタブ切り替えできればシンプルでスッキリ出来る~と思ったんですけど、うまく切り替えできなくて「タブブロックの中にタブブロックを配置する」という使い方は出来なかったのでそこだけ残念でした。
(素人考えでも処理が複雑そうなので、そうだよね~って感じです)

実用的にはカテゴリウィジェットからカテゴリ別のページを開くと、新着と人気のタブ切り替えページは表示できるので1クリックすれば良いだけの話なんですけど、「TOPページ開きました!後はページ遷移無しで網羅的にお目当ての内容を表示できます!」という事を実現したかったのでなかなか難しいなぁと思ったところでした。

一応カテゴリ別に新着記事と人気記事をTOPページで見せたい場合は上記のような形で出来ました!
PV数を投稿の一覧に表示させたい場合は現時点だとPHPなどをいじらないといけないと思うんですけど、投稿リストのオプションでは表示させることが出来るんですよね。その点でも良いかもしれないです!

また記事下エリアに各カテゴリ別の新着記事を表示させて回遊性を高めるなんて使い方が出来るので、タブブロックめっちゃ便利でおすすめです、是非使ってみて下さい(*´ω`*)v

0

コメント

コメントする

目次
閉じる