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

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

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

目次

タブブロックって?

こういう機能です。

 

こういう事が出来ます。

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

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

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

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

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

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

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

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

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

  • ゲーミングマウス
  • ゲーミングキーボード
  • PCゲーム
  • Switch
  • マンガ
  1. ゲーミングマウス
  2. ゲーミングマウス
  3. ゲーミングマウス
  4. ゲーミングマウス
  5. ゲーミングマウス
  6. ゲーミングマウス
  7. ゲーミングマウス
  8. ゲーミングマウス
  9. ゲーミングマウス
  10. ゲーミングマウス
  11. ゲーミングマウス
  12. ゲーミングマウス
  13. ゲーミングキーボード
  14. ゲーミングキーボード
  15. ゲーミングマウス
  16. ゲーミングキーボード
  17. ゲーミングマウス
  18. ゲーミングマウス
  19. ゲーミングマウス
  20. ゲーミングキーボード
  1. ゲーミングキーボード
  2. ゲーミングキーボード
  3. ゲーミングキーボード
  4. ゲーミングキーボード
  5. ゲーミングキーボード
  6. ゲーミングキーボード
  7. ゲーミングキーボード
  8. ゲーミングキーボード
  9. ゲーミングキーボード
  10. ゲーミングキーボード
  11. ゲーミングマウスパッド
  12. ゲーミングキーボード
  13. ゲーミングキーボード
  14. ゲーミングキーボード
  15. ゲーミングキーボード
  16. ゲーミングキーボード
  17. ゲーミングキーボード
  18. ゲーミングキーボード
  19. ゲーミングキーボード
  20. ゲームパッド
  1. ゲーミングマウス
  2. PCゲーム
  3. ゲーミングマウスパッド
  4. ゲーミングマウス
  5. ゲーミングマウス
  6. ゲーミングキーボード
  7. ゲームパッド
  8. ゲーミングマウス
  9. ゲーミングキーボード
  10. ゲーミングマウス
  11. コントローラー(ハンドル・ジョイスティック)
  12. ゲーミングマウスパッド
  13. PCゲーム
  14. ゲーミングマウス
  15. ゲーミングマウス
  16. ゲーミングマウス
  17. PCゲーム
  18. 周辺機器・アクセサリ
  19. ゲーミングマウス
  20. コントローラー(ハンドル・ジョイスティック)
  1. ゲームソフト
  2. ゲームソフト
  3. ゲーム機本体
  4. ゲームソフト
    発売日 : 2019年10月18日
    価格 : ¥7,473
    新品最安値 :
    ¥7,470
  5. ゲーム機本体
  6. ゲームソフト
    発売日 : 2021年10月29日
    価格 : ¥5,409
    新品最安値 :
    ¥5,000
  7. コントローラー
  8. ゲームソフト
  9. ゲームソフト
    発売日 : 2017年04月28日
    価格 : ¥5,318
    新品最安値 :
    ¥4,900
  10. ゲームソフト
  11. ゲームソフト
    発売日 : 2022年03月25日
    価格 : ¥5,664
    新品最安値 :
    ¥5,664
  12. ゲームソフト
    発売日 : 2020年03月20日
    価格 : ¥5,628
    新品最安値 :
    ¥4,500
  13. ゲームソフト
  14. ゲームソフト
  15. ゲームソフト
    発売日 : 2020年11月19日
    価格 : ¥5,120
    新品最安値 :
    ¥4,430
  16. ゲームソフト
    発売日 : 2018年06月21日
    価格 : ¥3,490
    新品最安値 :
    ¥3,280
  17. ゲームソフト
  18. Nintendo Switch
  19. ゲームソフト
  20. ゲームソフト
  1. コミック
  2. コミック
  3. コミック
  4. コミック
  5. コミック
  6. コミック
  7. コミック
  8. コミック
  9. コミック
  10. コミック
  11. コミック
  12. コミック
  13. コミック
  14. コミック
  15. コミック
  16. コミック
  17. コミック
  18. コミック・ラノベ・BL
    発売日 : 2022年01月15日
    価格 : ¥673
    新品最安値 :
    ¥673
  19. コミック
  20. コミック
よかったらシェアしてね!
URLをコピーする
URLをコピーしました!

オススメ記事

この記事を書いた人

小学生の時にPCを買って頂いてからのPCゲーマーです。
元々はFPS民でCS:S、SF1、AVA、CS:GO、PUBG、APEXを触りました。いくつかのタイトルで大会も出たんですがさくっと負けたのが良い思い出です。

FPS以外は罪と罰++ 二律背反、アスガルド、LuviniaSaga、TERA、マビノギ英雄伝、FF14、Blade&Soul、TreeofSavior、PSO2、Satisfactory、Kurtzpel、ShadowArena、FallGuys、Craftopiaなどを触ってた雑食です。FF14を長くやっていて邂逅編の頃にガチ廃人でした。

最近はFF14で不定期にインしてのんびりギャザクラやってる感じの人です。課金はお布施みたいにずっと切らしていないんですがイン出来ない事が多いので宝くじ当てて廃プレイしたいなあって思ってます。

コメント

コメント一覧 (9件)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

コメントする

トップへ
目次
閉じる