トップページの記事一覧部分 デザイン変更中

【WordPress】SWELLの「投稿リストブロック」はスゴイ。〜 “デバイス制限”機能を使えば最強 〜

現在、このブログの使用テーマは”旧Stork”ですが、そろそろSWELLにテーマ移行しようと思っています。

事前にローカル環境で色々とテストをしているのですが、ちょっとした問題にぶち当たり「どうすっぺ」と思っていたのですが、その問題が解決したので情報としてシェアしておきます。尚、もしかしたらこれは基本的な事かもしれないので、シェアするまでも無い事かもしれませんが、少なくとも僕は半日悩んだ内容です(笑)

概要としては

「投稿リストブロック」使用時に、PCとモバイルでレイアウトをカード型とリスト型に変える方法

です。

目次

投稿リストブロックはスゴイ便利。

SWELLの「投稿リストブロック」についてはコチラ
https://swell-theme.com/function/editor/4861/

に詳しく書いています。


カテゴリーとかタグとか、カスタム投稿タイプの種類とか、あらゆる投稿を読み出すことが出来るブロックなんですが、ちょっと凝ったトップページを作ろうと思うと、この機能がめちゃくちゃ役に立ちます。

ただ、ちょっと問題があります

固定ページに「投稿リストブロック」を配置して、最新記事をカード型に設定。

PCで表示させると”カード型”で表示されますが、

モバイルでも”カード型”で表示されちゃうんですね。
※左は「最大カラム数(SP)」の設定で1列にしたもの。右は2列にしたもの。

僕的にはモバイルは「リスト型」が好みです。
でも「投稿リストブロック」の場合、PCとモバイルでレイアウトを変えることが出来ません。そういう設定項目がないんですね。※あるのかな???

PC&モバイル共通のレイアウト指定しか出来ません。

一方、通常の記事一覧ページの設定項目には、PCとモバイルのレイアウトをそれぞれ指定することが可能です。
この場合は当たり前ですが、PCだとカード型、モバイルだとリスト型の表示になってくれます。

解決策は「デバイス制限」にあった

でもですね、SWELLを使用しているいくつかのサイトをPCとモバイルで表示させると、投稿リストブロック使っているのに、ちゃんとレイアウトが切り替わっているページが存在するんです。(殆どサイトではPCとモバイルのレイアウトは同じ。カード型が多い)

って事で調べを進めてみると

デバイス制限

っていう設定で実現出来ることが分かりました。

投稿リストブロックの設定画面の下の方にあります。

SP(モバイル)ボタンを押すと、そのブロックはモバイルでしか表示されなくなります。
PCボタンを押すと、PCでしか表示されない。

つまり

こんな風に同じ投稿リストを二つ配置し、上はカード型にしてデバイス制限の「PCボタン」を。
下はリスト型にしてデバイス制限の「SPボタン」を。

すると、ちゃんとPCではカード型、モバイルではリスト型で表示される様になりました。

この方法が正解なのかは分かりませんが、表示上は上手くいったので良しとしましょう。

リッチカラムブロック併用だともっと便利

それから左下の「リッチカラム」ブロック。

これを使うとレイアウトの幅がもっと広がります。

たとえばこんな風に、左からカラムにカード型、右カラムにリスト型の投稿リストブロックを入れ込めば、マガジン風のレイアウトになります。※右側の表示記事はCSSで2記事目から表示するように設定すればOK。


投稿リストブロックを使う事で、トップページがただのブログサイトからWEBメディアサイト風に変身できそうです。

過去記事も有効活用できそうだし、色々と可能性を感じます。

SWELL、やっぱり凄いわ。

SWELL https://swell-theme.com/


Rock’n Crawlersをメール購読する!

メールアドレスを入力して登録することで、ブログの更新がメールで通知されます!是非登録してみてください♬
※購読確認のメールが届くので確認ボタンをクリックして下さい。



この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

目次