テーマ「SWELL」をカスタマイズ！好みのトップページができた
テーマ「SWELL」が好きすぎて、記事を書くよりテーマをごにょごにょする時間の方が長くて本当に困ります。
SWELL独自の機能を組み合わせると楽しいコトがたくさんできるので抜け出せません。
その1つ、運営サイト（バースデークリップ）のトップページをカスタマイズしたので紹介します。
SWELL機能を使ってトップページのカスタマイズ
トップページは、SWELLの基本設定（カスタマイズ）とSWELLブロックを使って出来上がっています。
①～④は「カスタマイズ」と「メニュー」の設定だけでできています。
カスタマイズというほどではないですが、一応流れを書きました。
⑤以下はタブ、カラム、投稿リストなどを組み合わせています。
タブは「カスタマイズ」内の「■ タブ切り替え設定（トップページ）」ではなく、SWELLブロックのタブです。
「カスタマイズ」での設定
①グローバルナビゲーション
WordPress基本機能のメニューで設定しています。
ヘッダーに置く最も重要なナビゲーション。
主要なカテゴリーを任意の名前で作り「メニュー設定」で「グローバルナビ」にチェックを入れる。
②お知らせバー
たった1つのリンクですから、大事です。
が、私は何に使ったら良いのかわからなくて、とりあえずユーザーにも自分にも（アフィリエイト）役立ちそうなリンク先を設定しています。
季節感のあるリンク先にすると良いかも？と思いつつ、ほったらかしです。
③記事スライダー
WEBページ上の動くモノはあまり好まないのですが、ビジュアルの強さは確かにあるので設定しました。
それでも大きな画像がゴロンゴロン動くのは嬉しくないので、枚数をPC6枚、スマホ2枚です。
④ピックアップバナー
ピックアップバナーは2か所の設定が必要です。
- 「メニュー」でピックアップバナー用メニューを作る
- カスタマイザーで見た目を設定
ピックアップバナー用メニューはバナー画像のURLを説明欄に入れます。
最後にメニュー設定の「メニューの位置」で「ピックアップバナー」にチェックを入れて保存。
これでピックアップバナーが表示されます。
カスタムメニューでもサイト内のURLなら機能します。
私はバナーサイズを400×200pxにしました。
カスタマイザーでは下記の設定ができます。
- PCまたはスマホでバナーを何個横並びにするか
- バナータイトルの表示（位置も）・非表示の設定
- バナーに白線をつけるかどうか
- バナー画像を暗くするかどうか
- 下層ページにも表示するかどうか
カスタマイズの設定を後に書きましたが、メニューの保存でピックアップバナーが表示されるので、先にこちらの設定を済ませた方が良いかもしれません。
SWELLブロックを使ったカスタマイズ
⑤新着記事
投稿リストのSettingsで下記の設定をしています。
記事数2、テキスト型、新着順、カテゴリーはサムネイル画像上（テキスト型なのでサムネイルはありませんが）、抜粋文なし。
⑥タブと投稿リストを使ったカテゴリー毎の人気記事
タブ機能はカスタマイズ → 記事一覧リスト → 「タブ切り替え設定（トップページ）」でも作れますが、小細工が利きません。
ですから、
上記のタブを作るページです。タイトルはサイト上に表示されません。
タイトルをつける。サイト上には表示されないので、自分のわかりやすい文言にする。
タブスタイルは「ふきだし」。
Tab 2以降は「+」をクリックしてタブを増やし、タイトルを入力。
好みのレイアウトを設定。私の場合は…
- 表示投稿数 5
- テキスト型
- 人気順
- meta情報 非表示
- カテゴリー 非表示
- カテゴリーのみ選択
タブ名に合わせ、カテゴリーのみ再選択。
⑦カラムを使ったごあいさつ
ピンク背景色のあいさつ部分を作るページです。タイトルはサイト上に表示されません。
左から3番目の「2カラム 2/3・1/3」のカラムを選択。
左カラムに「段落」であいさつ文を入力。
右カラムに画像を挿入。
カラム全体を選択して、背景色を設定。
⑧カラム、投稿リスト、ボタンを使ったカテゴリー毎の人気記事
カテゴリー毎の人気記事部分を作るページです。タイトルはサイト上に表示されません。
一番左の2カラム均等割りを選択。
見出しタグh3を追加し、カテゴリ名を入力する。
見出しの下にSWELLブロックの「投稿リスト」を追加。
- 表示投稿数 2
- カード型
- 人気順
- meta情報 非表示
- カテゴリー 非表示
- 最大カラム数 PC・SP両方2列
- 抜粋 文字数PC・SP両方0
可愛いボタンを使いたいので、MOREリンク無視。
- カテゴリーのみ選択
SWELLブロックから「ボタン」を選び、カテゴリー名とカテゴリーのURLを入力。
カラムは左右カラムのちょうど中間あたりをクリックすると一発で選択できます。
ブロックツールバー（右端）の詳細設定「複製」でカラム全体を複製。
Settingはそのまま、Pickup（カテゴリーの再選択）とボタンの内容の書き換えです。
固定ページで独自デザインのトップページを作る
固定ページをトップページにする
管理メニュー → 設定 → 表示設定 → 「ホームページの表示」内
ラジオボタンの「固定ページ」を選択。
ホームページに、先に作った固定ページのタイトルを選択して保存。
これで今回作った固定ページがサイトのトップページとして表示されます。
固定ページ一覧を見ると、この固定ページの横に「— フロントページ」と追加されます。
また固定ページの編集画面を見ると、パーマリンクがトップページのURLになっています。
SWELLトップページカスタマイズのまとめ
- SWELLの「カスタマイズ」でグローバルナビゲーションやスライダーを設定
- 固定ページにタブ、カラム、投稿リストで作った要素を配置
- 作った固定ページをトップページに設定
投稿リスト、ブログパーツはメチャクチャ便利です。組み合わせ次第でまだまだデザインの幅が広がりそう。
