SWELLカスタマイズ完全ガイド｜103の実例まとめ– SWELL CUSTOMIZE –

SWELLは設定画面だけでもかなりのことができますが、実案件では「あと一歩」が必ず出てきます。このページでは、これまでに書いてきたSWELLカスタマイズの記事103本を、やりたいこと別に整理しました。

上から順に読む必要はありません。目次から目的の章に飛んでください。

まず知っておくこと｜SWELLカスタマイズの4つの層

SWELLのカスタマイズは、大きく4つの層に分かれます。①カスタマイザーの設定画面 ②追加CSS ③ブロック・ブログパーツ ④フックとPHPの順で、下にいくほど自由度が上がり、同時に壊れやすくなります。

「やりたいことがどの層で実現できるか」を先に見極めると、無駄なコードを書かずに済みます。まずは設定画面で足りないか確認し、次にCSS、それでも届かないときにフックへ進むのが安全です。

この章では、どの層を触るときにも土台になる記事をまとめています。

ヘッダーとフッターでよく使うCSSをまとめました。SWELLのクラス名を使うので、テーマ更新に強い書き方です。

カスタマイザーの「デザイン設定」で見た目がどう変わるか、実際の画面で比較しています。CSSを書く前にここを確認すると早いです。

Web制作で確認すべきブレイクポイントの一覧です。SWELLが内部で使っている値に合わせるとズレが起きません。

保守しやすいコーディングルールを24項目にまとめました。複数人で触るサイトや、長期運用するサイトで効きます。

SWELLのテーマファイルがどう構成されているかの一覧です。どこに何が書かれているか把握しておくと、フックを探す時間が減ります。

子テーマで上書きできる関数とコードを38個まとめました。テンプレートを直接編集せずに挙動を変えられます。

デザイン・見た目を整える

SWELLのブロックは標準のままでも整っていますが、実案件では「もう少しこうしたい」が必ず出ます。この章はCSSの上書きが中心で、テーマ更新の影響を受けにくい調整方法を集めました。

追加CSSに書く場合は、SWELLが定義しているクラス名を使うと更新に強くなります。力技で要素を指定すると、テーマのアップデートで崩れる原因になります。

SWELLブロックとWordPressブロックの見た目を全21種類、実物で並べたデザインパターン集です。

FAQブロックをアコーディオン形式にして、開閉できるようにします。

ステップブロックを縦ではなく横並びで表現します。手順が3〜4個のときに収まりがよくなります。

フルワイドブロックの上下の余白を別々に微調整します。

見出しの横に「もっと見る」リンクを配置します。コピペで使えます。

テーブルの「スクロールできます」という文言を任意のテキストに変更します。

ボタンのキラッと光るアニメーションを、画像に対しても使えるようにします。

アコーディオンブロックをボタンの見た目で表示します。

エディターのカスタム書式を追加して、よく使う装飾をワンクリックで適用できるようにします。

リストを横3列に折り返して表示します。項目が多いときに縦長になるのを防げます。

小数点を含むフォントサイズが意図せず丸められる問題への対処です。

テーブルの1列目だけでなく2列目も固定表示にします。項目名が2列にわたる表で使います。

スクロールできることを示すヒントを表示します。横スクロールするテーブルで効果があります。

CSSだけで左右に分割したスプリットレイアウトを作ります。

FAQブロックを2列に並べて、縦の長さを抑えます。

商品レビューブロックの星評価を0.1刻みで入力できるようにします。

アイコン・SNSシェア

SWELLには専用のアイコンフォントが用意されていて、CSSの疑似要素からも呼び出せます。画像を用意せずに装飾できるので、表示速度を落とさずに見た目を整えられます。

SWELLが標準で持つアイコン全63個の一覧です。CSSの疑似要素からも呼び出せるので、画像を用意せずに装飾できます。

SNSアイコンを横並びに配置する方法です。コピペで設置できます。

SNSシェアボタンを画面の好きな位置に固定表示します。

固定ページでもSNSシェアボタンを画面端に固定表示できるようにします。

トップページ・メインビジュアル

トップページは訪問者が最初に見る場所であり、直帰率に直結します。メインビジュアルは設定画面だけでもかなり作り込めますが、スライダーの枚数制限やコンテンツの重ね方など、標準では届かない部分もあります。

トップページにローディング画面を表示します。ロゴアニメーションでブランドの印象を強められます。

メインビジュアルの下に、任意のコンテンツを差し込みます。

メインビジュアルのスライダーは標準で枚数に上限がありますが、6枚以上表示できるようにします。

複数のブログパーツをメインビジュアルに重ねて配置します。

メインビジュアルをスクロールしても固定表示にします。

記事一覧・スライダー

投稿リストブロックはSWELLの中でも特に応用が利く機能です。表示件数、並び順、スライダー化、カスタムタクソノミー対応など、ここを押さえるとサイトの回遊性が大きく変わります。

スライダー化にはSwiperとFlickityの2系統があります。用途と実装の重さが違うので、記事内で比較しています。

投稿リストを自動で横スクロールさせます。

ギャラリー・投稿リスト・リッチカラムの各ブロックをスライダー化します。Flickityを使います。

投稿リストに表示されるカテゴリーを、タグやカスタムタクソノミーに差し替えます。

おすすめ記事をスライダー表示します。メインビジュアル直下に置くと回遊が伸びます。

記事一覧を「もっと見る」ボタン付きの無限スクロールにします。

ショートコードを使わずに投稿リストの表示件数を増やします。

投稿リストをSwiperでスライダー表示します。

ページネーションを簡単に実装する方法です。標準の「次へ」だけでは足りない場合に使います。

特定のアーカイブページだけ、記事一覧のレイアウトを変更します。

投稿リストに新着を示すNEWバッジを表示します。

新着記事リストを表示します。

記事スライダーを記事本文の中で表示します。

投稿リストブロックを横スクロール表示にします。

投稿リストにカスタムフィールドの値を表示します。

複数サイトの新着記事をカード形式でまとめて表示します。

ヘッダー・フッター・メニュー

ヘッダーとフッターはすべてのページに出るため、ここを整えると全体の印象が変わります。SWELLはフックが豊富に用意されているので、テンプレートファイルを直接編集しなくても差し込めます。

フッターにロゴを表示します。

PC表示でもハンバーガーメニューを使えるようにします。メニュー項目が多いサイト向けです。

ヘッダーの下に別のナビメニューなどを差し込みます。

グローバルメニューにホバーしたとき、ブログパーツをポップアップ表示します。

スマホで上方向にスクロールしたときだけヘッダーを表示します。画面を広く使えます。

特定のナビメニューの末尾にメニュー項目を追加します。

パンくずリストの表示を追加します。

960px付近でヘッダーの表示が崩れる問題への対処です。

フッターのサブメニューを開閉できるようにします。

サイドバー・ウィジェット・目次

サイドバーと目次は、読者の回遊と滞在時間に直結します。特に目次まわりは、SWELLの標準機能に少し手を加えるだけで使い勝手が大きく向上します。

特定の条件でサイドバーを表示・非表示に切り替えます。

サイドバーの目次で、今読んでいる箇所をハイライトします。

サイドバーをもう1列追加して3カラムにします。

見出しから目次へ戻るアンカーリンクを自動で挿入します。

特定の記事だけ目次の見出し表示設定を変更します。

目次に対して特定の項目だけ表示・非表示を切り替えます。

ブログパーツ・CTA・広告

ブログパーツはSWELLの中でもっとも使い回しが効く機能です。1箇所を直せば設置したすべての場所に反映されるため、CTAや広告の管理が一気に楽になります。

カテゴリー単位でCTAを出し分ける設定もあるので、記事を1本ずつ編集する必要はありません。

スマホ画面下とサイドバーに、スクロールに追従するバナーを固定表示します。CTAの視認性が大きく変わります。

ブログパーツをポップアップで表示します。Micromodalを使った軽量な実装です。

特定のカテゴリーの記事にだけCTAを差し込みます。カテゴリー単位で出し分けられます。

アーカイブページにブログパーツを挿入します。カテゴリーページをハブにする際の土台になります。

記事中の広告をブログパーツにも対応させます。

人気記事・関連記事

標準の人気記事ウィジェットは投稿タイプが限られていたり、集計期間を選べなかったりします。この章では、自作して自由度を上げる方法を扱っています。

週間・月間・年間で切り替えられる人気記事ランキングを自作します。

カスタム投稿タイプの記事にも人気記事ウィジェットを表示します。

投稿タイプやカスタムタクソノミーを指定して関連記事を出し分けます。

関連記事を好きな場所に表示します。

カテゴリーページも含めた人気記事ランキングを作ります。

検索・絞り込み

記事数が増えてくると、カテゴリー分けだけでは目的の記事にたどり着けなくなります。絞り込み検索を用意すると、サイト内の回遊が変わります。

自作の絞り込み検索を実装します。記事数が増えたサイトで回遊が変わります。

検索結果が0件だったときの文言を変更します。

ドロップダウンの選択に応じて、カテゴリーの画像やテキストを切り替えて表示します。

検索結果に件数を表示します。

絞り込み検索の条件パネルを好きな場所に配置します。

検索窓に入力候補を表示します。

アーカイブ・カテゴリーページ

カテゴリーページは記事一覧が並ぶだけになりがちですが、SWELLはタイトル・サブタイトル・ブログパーツをターム単位で設定できます。うまく使うと、カテゴリーページ自体が入口として機能します。

アーカイブページのサブタイトルを非表示にします。

特定の記事だけ、ページタイトルの表示位置を変更します。

アイキャッチ画像をタイトルの上に表示します。

タイトルの下にカスタムタクソノミーを表示します。

カテゴリーページの記事タイトルのH1をdivに変更します。見出し構造を整えたい場合に使います。

特定のカスタム投稿タイプでアイキャッチ画像を非表示にします。

固定ページ・LP

LPや固定ページは、通常記事とは別のテンプレートで扱うと管理しやすくなります。パーマリンクの整理もあわせて行っておくと後々の運用が楽です。

固定ページのタイトル上にフックを作成して、コンテンツを差し込めるようにします。

LPページのパーマリンクを任意の名前に変更します。

LPページでカスタムテンプレートを使えるようにします。

フック・構造化データ

設定画面とCSSで届かない領域はフックの出番です。SWELLは79個のアクション・フィルターフックを公開しており、テンプレートを直接編集せずに機能を差し込めます。

テーマの更新で消えないカスタマイズにするには、子テーマのfunctions.phpかコードスニペットに書くのが基本です。

SWELLが出力する構造化データ（JSON-LD）の一覧です。SEO設定を詰める際の確認に使います。

SWELLのアクションフック・フィルターフック79個の一覧です。カスタマイズの起点になります。

フックを使ってコンテンツを挿入できる場所を、実際の画面位置とあわせてまとめました。

SWELLで使える専用ショートコード17個をまとめました。

EC・外部サービス連携

SWELLで物販を扱う場合、WooCommerceを入れる方法と、Shopifyなど外部カートに寄せる方法があります。運用負荷と決済まわりの要件で選び分けます。

SWELLにWooCommerceを導入する手順です。デモサイトつきで解説しています。

SWELLとShopifyを組み合わせてECサイトを作る方法です。

その他

どの章にも収まりきらないものの、実務で使う場面が多いカスタマイズです。

404ページをカスタマイズして、離脱を防ぎます。

記事の著者に応じてプロフィール情報を切り替えて表示します。

リンク付きのキャッチフレーズを挿入します。

特定のキーワードだけを非表示にします。

他テーマからSWELLへ乗り換える

他テーマからSWELLへ移行するとき、いちばん困るのが旧テーマ専用のショートコードや独自ブロックが崩れることです。記事数が多いほど手作業での修正は現実的でなくなります。

そこで、旧テーマの見た目と機能を再現する乗り換え支援プラグインを作りました。テーマごとに用意しているので、お使いのテーマの記事をご覧ください。

CocoonからSWELLへ移行する際の乗り換え支援プラグインです。

JINからSWELLへ移行する際の乗り換え支援プラグインです。

STORKからSWELLへ移行する際の乗り換え支援プラグインです。

SANGOからSWELLへ移行する際の乗り換え支援プラグインです。

AFFINGER5からSWELLへ移行する際の乗り換え支援プラグインです。

他テーマからSWELLへ移行する際に、旧テーマの見た目と機能を再現するプラグインの作り方を解説しています。移行の全体像はここから。

THORからSWELLへ移行する際の乗り換え支援プラグインです。