【プロ監修】SWELLのオシャレかつ実用的なカスタマイズ

そんな疑問に答えます。

WordPressテーマのSWELLはブロガーに人気の高いテーマ。調べてみたところ、SWELLのユーザー数は約2万人です。これだけユーザー数が多いと、ブログのデザインが似通ってしまうのは自然なことです。

オンリーワンのサイトに仕上げたい！

そんな人向けに、SWELLユーザーに知られていないオシャレで機能的なカスタマイズを紹介します！

【プロ監修】SWELLの拡張カスタマイズ

今回紹介するのはSWELLのテーマを直接編集しないカスタマイズです。

フックや、CSSコードの調整などで実装しているのでSWELLの構造が大きく変わらない限りアップデートで設定が上書きされないよう配慮しています。

カスタマイズ

新着記事にカスタムフィールド・タームを表示

固定ページ上に、新着情報を表示させる時に便利なテクニックです。

「特定のカテゴリーを6件表示しよう」

そんな場合にSWELLの「投稿リストブロック」を使いますよね？投稿リストブロックは、絞り込み表示したいカテゴリーやタームを指定できるので便利な機能です。ですが、投稿リストブロックにはカスタムフィールドを表示するオプションはありません。

デザイン的に、カスタムフィールドやタームなど任意の情報を表示したいケースってけっこうあります。

例えば、不動産サイト。「家賃」「築年数」「間取り」などをカスタムフィールドで管理する構成の場合、投稿リストブロックにそれらの情報を表示できたら便利ですよね？

わざわざ詳細ページに移動しなくても、物件の情報が表示されているのでサイト訪問者にとってはストレスなく物件を探せる構成です。

コーポレートサイトだけでなく、アフィリエイトブログでも使えるテクニックです。

例えばガジェットレビュー系のブログなどで「色」「重さ」「価格」「メーカー」などの情報をカスタムフィールドやタームで管理している場合などに活用できます↓

カスタマイズしだいでは、楽天やAmazonへのアフィリエイトボタンを設置することも可能です↓

「詳細記事にあるアフィリエイトリンクをなかなか踏んでもらえない」といった悩みを抱えている人にオススメです。

記事の順番を並び替えるボタン

記事が一覧で表示されているカテゴリーページで、記事の順番を更新順、アクセス数など並び替えるボタンを設置するカスタマイズです。

おすすめ度	4.5 / 5.0
難易度	4.5 / 5.0

このカスタマイズを実装したデモサイト

デモサイト①はオーソドックスな商品レビューブログです。

ブログ定番の「公開日」「更新日」「PV数」で並び替えするボタンを設置しています。

カスタムフィールドの値をキーに並び替え機能を拡張することもできます。例えば、レビュー系サイトで商品の「価格の高い順」「発売日の新しい順」などで並び替えする用途にも使えるテクニックです。

デモサイト②は不動産サイトです。カスタムフィールドで設定した「家賃」「築年数」で並び替えできるボタンを設置しています。

レイアウト切り替えボタン（1カラム⇔2カラム）

PCサイト向けのカスタマイズです。

「サイドバーがジャマだなー」っ時ありますよね？

そんな時に切り替えボタンを押すだけでサイドバーが消えて1カラムのレイアウトになるというカスタマイズです。

アーカイブに任意のHTMLを追加表示

カテゴリーページなど記事が一覧で表示されるアーカイブページに、任意のHTMLタグを表示させるカスタマイズです。

例えば「タグ、ターム、カスタムフィールドで入力した値を表示したい」なんて場合に使えるテクニックです。

このカスタマイズを実装したデモサイト

カテゴリーページに「楽天市場」・「Amzon」へのリンクを設置

このカスタマイズを実装したデモサイト

リンクはカスタムフィールドで設定する手法です。楽天市場や、Amzonに限らず任意のボタンを設置することができます。

リッチカラムブロックをオシャレに仕上げる

リッチカラムの上部に、番号を表示するカスタマイズです。

同様に、画像を少しリッチカラムからはみ出すデザインもSWELLの標準機能にはないデザインパターンです。

他のデザイナーと被らないオシャレな仕上げを求めるデザイナー向け↓

【印象度アップ】サイトの背景に固定動画を表示

まずはデモサイトを開いて実物をご覧ください↓

サンプルサイトでは光の丸ボケ動画を配置しています。

「透明感のあるサイト」「高級感を出したい」そんな場合におすすめなカスタマイズです。

左右両方のサイドバーを表示して3カラムレイアウトを実現

ガジェットブログなど、見せたい記事やカテゴリーが多いサイトで有効なカスタマイズです。SWELLで運営されているサイトを頻繁に見かけるようになりましたが、左右両サイドバーを表示しているサイトを見かけたことがありません。

かなりレア度の高いカスタマイズです。

固定ページごとにメインビジュアル画像を設定する

固定ページなどの下層ページに、透過式で大きめのメインビジュアル画像を設置するカスタマイズです！

コーポレートサイトでは、トップページだけでなく、固定ページを含む固定ページの作りこみも重要です。ファーストビューにメインビジュアルを設置し、印象をワンランクアップさせましょう！

まとめ

SWELLのカスタマイズを紹介しました。

今回紹介したのはSWELLのテンプレートファイルを編集しないカスタマイズです。テンプレートファイルを直接編集してしまうと、テーマのアップデートでカスタマイズが上書きされ消えてしまいます。

運用を考慮すると、できるだけテンプレートを編集しないのが理想です。

フック、CSS、スクリプトでカスタマイズを行い、運用でトラブルが起きないよう気をつけましょう！

カスタマイズ