テーマ「SWELL」をカスタマイズ！好みのトップページができた

テーマ「SWELL」が好きすぎて、記事を書くよりテーマをごにょごにょする時間の方が長くて本当に困ります。

SWELL独自の機能を組み合わせると楽しいコトがたくさんできるので抜け出せません。

その1つ、運営サイト（バースデークリップ）のトップページをカスタマイズしたので紹介します。

上記の現在のトップページです。

SWELLテーマの実験場にもなっているので、デザインが変更される可能性大です。

SWELL機能を使ってトップページのカスタマイズ

トップページは、SWELLの基本設定（カスタマイズ）とSWELLブロックを使って出来上がっています。

①～③は「カスタマイズ」の設定だけなので、カスタマイズというほどではないですが、ついでなので…。

④以下はタブ、カラム、投稿リスト、ブログパーツなどを組み合わせています。

タブは「カスタマイズ」内の「■ タブ切り替え設定（トップページ）」ではなく、SWELLブロックのタブです。

最後に詳しく書きますが、要素別に作ったブログパーツ（移動や変更に備えて）をトップページ用の固定ページで合体させています。

「カスタマイズ」での設定

①グローバルナビゲーション

WordPress基本機能のメニューで設定しています。

管理メニュー → 外観 → メニュー

ヘッダーに置く最も重要なナビゲーション。主要なカテゴリーを任意の名前で作り「メニュー設定」で「グローバルナビ」にチェックを入れる。

②お知らせバー

管理メニュー → 外観 → カスタマイズ → 「サイト全体設定」 → 「お知らせバー」

たった1つのリンクですから、大事です。

が、私は何に使ったら良いのかまだわからなくて、とりあえずユーザーにも自分にも（アフィリエイト）役立ちそうなリンク先にしています。

季節感のあるリンク先（夏ならプール情報とか）にすると良いかも？と思いつつ、ほったらかしです。

③記事スライダー

管理メニュー → 外観 → カスタマイズ → 「トップページ」 → 「記事スライダー」

WEBページ上の動くモノはあまり好まないのですが、ビジュアルの強さは確かにあるので設定しました。

それでも大きな画像がゴロンゴロン動くのは嬉しくないので、枚数をPC6枚、スマホ2枚です。

SWELLブロックを使ったカスタマイズ

上でも書きましたが、④、⑤、⑥はそれぞれSWELLブロックで作った要素をブログパーツに置き、それをトップページ用固定ページで合体させています。

トップページ用の固定ページ上で一気に作っても良いのですが、分けておいた方がチョコチョコ手を加える時に便利です。

順番の入れ替え時はスーパー便利！

④タブと投稿リストを使ったカテゴリー毎の人気記事

タブ機能はカスタマイズ → 記事一覧リスト → 「タブ切り替え設定（トップページ）」でも作れますが、小細工が利きません。

ですから、

SWELLブロックの「タブ」を使いました。

⑤カラムを使ったごあいさつ

⑥カラム、投稿リスト、ボタンを使ったカテゴリー毎の人気記事

固定ページで独自デザインのトップページを作る

固定ページにブログパーツを配置

固定ページをトップページにする

管理メニュー → 設定 → 表示設定 → 「ホームページの表示」内

ラジオボタンの「固定ページ」を選択。ホームページに、先に作った固定ページのタイトルを選択して保存。

これで今回作った固定ページがサイトのトップページとして表示されます。

固定ページ一覧を見ると、この固定ページの横に「— フロントページ」と追加されます。また、固定ページの編集画面を見ると、パーマリンクがトップページのURLになっています。

SWELLトップページカスタマイズのまとめ

1. SWELLの「カスタマイズ」でグローバルナビゲーションやスライダーを設定
2. 要素別にブログパーツを作る
   表示順の変更や編集をラクにするため
3. 固定ページにブログパーツを配置
4. 作った固定ページをトップページに設定

投稿リスト、ブログパーツはメチャクチャ便利です。組み合わせ次第でまだまだデザインの幅が広がりそう。