WordPressのテーマ「SWELL」でのTOPページのレイアウトをカスタマイズしてみた話です。
2020年4月30日に追加されたばかりの「SWELL 2.0.9」で実装された「タブブロック」の機能を使っています。
目次
タブブロックって？
あわせて読みたい
なんでカスタマイズしてみようと思った？
カスタマイズしてみてどうだった？
やり方は、ダッシュボードのブログパーツの所で登録してショートコードをウィジェットから呼び出すという形だったので簡単に実現出来ました。
登録する内容は、上から順にカテゴリを「段落ブロック」、新着/人気を「タブブロック」、記事を「投稿リスト」、という組み合わせで出来ます。
一応カテゴリ別に新着記事と人気記事をTOPページで見せたい場合は上記のような形で出来ました！
PV数を投稿の一覧に表示させたい場合は現時点だとPHPなどをいじらないといけないと思うんですけど、投稿リストのオプションでは表示させることが出来るんですよね。その点でも良いかもしれないです！
また記事下エリアに各カテゴリ別の新着記事を表示させて回遊性を高めるなんて使い方が出来るので、タブブロックめっちゃ便利でおすすめです、是非使ってみて下さい(*´ω｀*)v
あわせて読みたい
コメント
コメント一覧 （9件）
swellを使ったサイトはたくさんありますが、これだけの情報量をスッキリ見やすくサイトデザインされていてすごくびっくりしました！
トップページの全体カテゴリとFF14のカテゴリをタブで分けていらっしゃいますが、タブ下のカテゴリ部分はどのブロックで作っていらっしゃるんでしょうか。
最近swellに変えたのでよくわからず…もしよければ教えていただけたらうれしいです＞＜
こんにちは！お褒め頂き有難うございます！
最近SWELLに変えられたんですねー！わー！同じテーマなのでうれしいです(*´ω｀*)b
トップページのタブ下カテゴリ部分ですが、SWELLではまだ実装されていなくて自身でボックスメニューを配置させていますー！
流れ的には、①下記のURLなどからコードを頂いてfunctions.phpとstyle.cssをカスタマイズして、②ボックスメニュー用のメニューを作成して、③カスタムHTMLブロックで呼び出しているという形ですー！
テーマ内の機能ではないのですがマウスオーバーでエフェクト付いて面白いですし、もし良ければ使ってみてくださいです(*´ω｀*)
[WordPress]ボックスメニューを導入する。
https://willdosomeday.com/wordpress%E3%83%9C%E3%83%83%E3%82%AF%E3%82%B9%E3%83%A1%E3%83%8B%E3%83%A5%E3%83%BC%E3%82%92%E5%B0%8E%E5%85%A5%E3%81%99%E3%82%8B%E3%80%82/
「ボックスメニュー」ショートコードの実装方法。WPメニュー機能で内容を変更できるやつ。
https://nelog.jp/box-menu
(参考)外観>メニューでBOXメニュー用のメニューを作成
https://gyazo.com/97a4cd9fdbd1c19b37b605dcdf0daa06
(参考)TOPページのブログパーツ配置内容（カスタムHTMLブロック）
https://gyazo.com/05b151f0d4e54c8ca8f5a11e42d8e15e
こんなに丁寧に書いていただけるなんて…！
分かりやすく教えていただいてありがとうございます！
早速やってみます！
あとDCは違いますが実はFF14プレイしているので、これを機会にFF14記事も読ませていただきます( *´艸｀)
ありがとうございました(*´ω｀*)
ぜひぜひですー！
あまり詳しく無いのでお力になれるかはアレなんですけど、どこかで躓いた時などまた何なりとですー！！
アイコン自体はfontawesomeから持ってくればスムーズなんですけど、画像も指定できるので使い分けても良いかもですー！
画像の高さとか？で説明文が少し下に寄って見た目が気になる事も有るかもなんですけど・・
https://gyazo.com/8285ef776a6c3ad95642dcb2852a44f4
14プレイされてるんですね！DC違うのが残念だけどめっちゃうれしいです！
のんびりスカイスチールやってる位ですが面白いですよね～(*´ω｀*)
こちらこそコメント有難うございます！
また気が向いたら遊びに来て頂ければうれしいですヽ(=´▽`=)ﾉ
hanabiさんのおかげで無事にボックスメニュー設定できたんですが、swell2.2.5にアップデートしたら表示できなくなってしまいました（ショートコードだけが表示される状態です）
アップデートお気をつけください！
( ﾟдﾟ)ﾊｯ! 何度もすみません！
アップデートしてfunctions.phpにコピペしたものが消えていただけみたいです！
お騒がせしました＞＜
こんばんは！
お気遣い頂いて有難うございますー！
いつも考え無しにアップデートするから、この前も記事下の所を遅延読み込みに✓入れてたら関連コンテンツが表示されなくなっちゃったとかが有る人なので凄く有り難かったです(*´ω｀*)
そちらの件もしお手間じゃなければなんですけど、子テーマの方のfunctions.phpの方にコピペすればテーマのアップデート入っても消えちゃうとか無いかもです～！
そんなことが！びっくりしますよね～ｗ
ありがとうございます＞＜
カスタマイズは子テーマでするものなのだと今回勉強しました！
素人でお恥ずかしい…！お騒がせしました～＞＜
とんでもないです、こちらこそですー！
ほんといつもびっくりです～ｗ
いろいろ試してみるものの全然分からないし慣れないしで、いつもあわわわしてますｗ
https://pbs.twimg.com/media/EklzzhQVgAEQY6J?format=jpg&name=large
またよろしければ教えて下さい(*´ω｀*)