11/23 PLLまとめを追記しました

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

URLをコピーする
URLをコピーしました!

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

目次

タブブロックって?

こういう機能です。

こういう事が出来ます。

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

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

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

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

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

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

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

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

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

1+
よかったらシェアしてね!
URLをコピーする
URLをコピーしました!

この記事を書いた人

元々はFPS民でSF1、AVA、CSGO、PUBG、APEXを触りました。いくつかのタイトルで大会も出たけど手が震えてさくっと負けました。
FPS以外はFF14、TERA、B&S、LuviniaSaga、ToS、PSO2、マビ英、Kurtzpel、ShadowArena、FallGuysなどと雑食です。
FF14を長くやっていて邂逅編の頃にガチ廃人でした。今はのんびりギャザクラやってる感じの人です。

オススメ記事

コメント

コメント一覧 (9件)

  • swellを使ったサイトはたくさんありますが、これだけの情報量をスッキリ見やすくサイトデザインされていてすごくびっくりしました!

    トップページの全体カテゴリとFF14のカテゴリをタブで分けていらっしゃいますが、タブ下のカテゴリ部分はどのブロックで作っていらっしゃるんでしょうか。

    最近swellに変えたのでよくわからず…もしよければ教えていただけたらうれしいです><

  • こんなに丁寧に書いていただけるなんて…!
    分かりやすく教えていただいてありがとうございます!
    早速やってみます!

    あとDCは違いますが実はFF14プレイしているので、これを機会にFF14記事も読ませていただきます( *´艸`)
    ありがとうございました(*´ω`*)

    • ぜひぜひですー!
      あまり詳しく無いのでお力になれるかはアレなんですけど、どこかで躓いた時などまた何なりとですー!!

      アイコン自体はfontawesomeから持ってくればスムーズなんですけど、画像も指定できるので使い分けても良いかもですー!
      画像の高さとか?で説明文が少し下に寄って見た目が気になる事も有るかもなんですけど・・
      https://gyazo.com/8285ef776a6c3ad95642dcb2852a44f4

      14プレイされてるんですね!DC違うのが残念だけどめっちゃうれしいです!
      のんびりスカイスチールやってる位ですが面白いですよね~(*´ω`*)

      こちらこそコメント有難うございます!
      また気が向いたら遊びに来て頂ければうれしいですヽ(=´▽`=)ノ

      • hanabiさんのおかげで無事にボックスメニュー設定できたんですが、swell2.2.5にアップデートしたら表示できなくなってしまいました(ショートコードだけが表示される状態です)
        アップデートお気をつけください!

      • ( ゚д゚)ハッ! 何度もすみません!
        アップデートしてfunctions.phpにコピペしたものが消えていただけみたいです!
        お騒がせしました><

        • こんばんは!
          お気遣い頂いて有難うございますー!
          いつも考え無しにアップデートするから、この前も記事下の所を遅延読み込みに✓入れてたら関連コンテンツが表示されなくなっちゃったとかが有る人なので凄く有り難かったです(*´ω`*)
          そちらの件もしお手間じゃなければなんですけど、子テーマの方のfunctions.phpの方にコピペすればテーマのアップデート入っても消えちゃうとか無いかもです~!

          • そんなことが!びっくりしますよね~w

            ありがとうございます><
            カスタマイズは子テーマでするものなのだと今回勉強しました!
            素人でお恥ずかしい…!お騒がせしました~><

コメントする

目次
閉じる