![](https://webrent.xsrv.jp/wp-content/uploads/2021/01/cat-question.png)
SWELLでオリジナリティーを出したい…
他の人はしていないようなオシャレな機能ってないかな…
そんな疑問に答えます。
WordPressテーマのSWELLはブロガーに人気の高いテーマ。調べてみたところ、SWELLのユーザー数は約2万人です。これだけユーザー数が多いと、ブログのデザインが似通ってしまうのは自然なことです。
オンリーワンのサイトに仕上げたい!
そんな人向けに、SWELLユーザーに知られていないオシャレで機能的なカスタマイズを紹介します!
【プロ監修】SWELLの拡張カスタマイズ
![【プロ監修】SWELLの拡張カスタマイズ](https://webrent.xsrv.jp/wp-content/uploads/2021/04/swell-lp-design.jpg)
今回紹介するのはSWELLのテーマを直接編集しないカスタマイズです。
フックや、CSSコードの調整などで実装しているのでSWELLの構造が大きく変わらない限りアップデートで設定が上書きされないよう配慮しています。
カスタマイズ
- 新着記事にカスタムフィールド・タームを表示
- 記事の順番を並び替えるボタン
- レイアウト切り替えボタン(1カラム⇔2カラム)
- アーカイブに任意のHTMLを追加表示
- カテゴリーページに楽天市場・Amzonのリンクを設置
![](https://webrent.xsrv.jp/wp-content/uploads/2021/02/new-profile.png)
それぞれのカスタマイズを紹介します
新着記事にカスタムフィールド・タームを表示
![投稿リストにターム情報を含めて表示するSWELLのカスタマイズ](https://webrent.xsrv.jp/wp-content/uploads/2022/08/show_cf-1024x455.jpg)
固定ページ上に、新着情報を表示させる時に便利なテクニックです。
「特定のカテゴリーを6件表示しよう」
そんな場合にSWELLの「投稿リストブロック」を使いますよね?投稿リストブロックは、絞り込み表示したいカテゴリーやタームを指定できるので便利な機能です。ですが、投稿リストブロックにはカスタムフィールドを表示するオプションはありません。
デザイン的に、カスタムフィールドやタームなど任意の情報を表示したいケースってけっこうあります。
例えば、不動産サイト。「家賃」「築年数」「間取り」などをカスタムフィールドで管理する構成の場合、投稿リストブロックにそれらの情報を表示できたら便利ですよね?
![投稿リストにターム情報を含めて表示するSWELLのカスタマイズ](https://webrent.xsrv.jp/wp-content/uploads/2022/08/show_cf-1024x455.jpg)
わざわざ詳細ページに移動しなくても、物件の情報が表示されているのでサイト訪問者にとってはストレスなく物件を探せる構成です。
![](https://webrent.xsrv.jp/wp-content/uploads/2021/02/new-profile.png)
賃貸物件を扱っている不動産サイト定番のデザインです。
コーポレートサイトだけでなく、アフィリエイトブログでも使えるテクニックです。
例えばガジェットレビュー系のブログなどで「色」「重さ」「価格」「メーカー」などの情報をカスタムフィールドやタームで管理している場合などに活用できます↓
![SWELLで投稿リストにカスタムフィールドをタームを表示](https://webrent.xsrv.jp/wp-content/uploads/2022/08/output_cf-1024x397.jpg)
カスタマイズしだいでは、楽天やAmazonへのアフィリエイトボタンを設置することも可能です↓
![SWELL投稿リストにアマゾンと楽天のリンクを設定](https://webrent.xsrv.jp/wp-content/uploads/2022/07/review_blog-1024x420.jpg)
「詳細記事にあるアフィリエイトリンクをなかなか踏んでもらえない」といった悩みを抱えている人にオススメです。
![](https://webrent.xsrv.jp/wp-content/uploads/2021/02/new-profile.png)
新着情報の出力をカスタマイズする方法は次の記事で解説しています。
![](https://assets.st-note.com/production/uploads/images/85160639/rectangle_large_type_2_8264155e98e2ffd017daaba72bfe6b9a.jpeg?fit=bounds&quality=85&width=1280)
記事の順番を並び替えるボタン
![SWELLの記事一覧ページで、投稿日や公開日、人気順で記事の並び替えを変更するボタン](https://webrent.xsrv.jp/wp-content/uploads/2022/07/change-1024x538.jpg)
記事が一覧で表示されているカテゴリーページで、記事の順番を更新順、アクセス数など並び替えるボタンを設置するカスタマイズです。
おすすめ度 | 4.5 / 5.0 |
難易度 | 4.5 / 5.0 |
このカスタマイズを実装したデモサイト
デモサイト①はオーソドックスな商品レビューブログです。
ブログ定番の「公開日」「更新日」「PV数」で並び替えするボタンを設置しています。
カスタムフィールドの値をキーに並び替え機能を拡張することもできます。例えば、レビュー系サイトで商品の「価格の高い順」「発売日の新しい順」などで並び替えする用途にも使えるテクニックです。
デモサイト②は不動産サイトです。カスタムフィールドで設定した「家賃」「築年数」で並び替えできるボタンを設置しています。
![](https://webrent.xsrv.jp/wp-content/uploads/2021/02/new-profile.png)
カテゴリーページに並び替えボタンを付ける方法は、次の記事で解説しています↓
![](https://assets.st-note.com/production/uploads/images/74073752/rectangle_large_type_2_86cb132eb3b74c07ba677f9fbd752464.jpg?fit=bounds&quality=85&width=1280)
レイアウト切り替えボタン(1カラム⇔2カラム)
PCサイト向けのカスタマイズです。
「サイドバーがジャマだなー」っ時ありますよね?
そんな時に切り替えボタンを押すだけでサイドバーが消えて1カラムのレイアウトになるというカスタマイズです。
![](https://webrent.xsrv.jp/wp-content/uploads/2021/02/new-profile.png)
このカスタマイズは次の記事で解説しています↓
![](https://assets.st-note.com/production/uploads/images/81039374/rectangle_large_type_2_02d8378ffc637035c95c0f2a41fef3ce.jpeg?fit=bounds&quality=85&width=1280)
アーカイブに任意のHTMLを追加表示
![](https://webrent.xsrv.jp/wp-content/uploads/2022/07/show_cf-1024x549.jpg)
カテゴリーページなど記事が一覧で表示されるアーカイブページに、任意のHTMLタグを表示させるカスタマイズです。
例えば「タグ、ターム、カスタムフィールドで入力した値を表示したい」なんて場合に使えるテクニックです。
このカスタマイズを実装したデモサイト
![](https://webrent.xsrv.jp/wp-content/uploads/2021/02/new-profile.png)
このカスタマイズは次の記事で解説しています↓
![](https://assets.st-note.com/production/uploads/images/76338787/rectangle_large_type_2_be64d7c286a2f9b498e376ee2f410ee4.jpg?fit=bounds&quality=85&width=1280)
カテゴリーページに「楽天市場」・「Amzon」へのリンクを設置
![カテゴリーページに「楽天市場」・「Amzon」へのリンクを設置](https://webrent.xsrv.jp/wp-content/uploads/2022/07/link_to_amazon.jpg)
このカスタマイズを実装したデモサイト
リンクはカスタムフィールドで設定する手法です。楽天市場や、Amzonに限らず任意のボタンを設置することができます。
![](https://webrent.xsrv.jp/wp-content/uploads/2021/02/new-profile.png)
このカスタマイズは以下の記事で紹介しています。
![](https://assets.st-note.com/production/uploads/images/81907561/rectangle_large_type_2_be63fb1dc4839778ca45b82d31bd3137.jpeg?fit=bounds&quality=85&width=1280)
リッチカラムブロックをオシャレに仕上げる
![【SWELL】リッチカラムに番号を付けたアレンジ](https://webrent.xsrv.jp/wp-content/uploads/2024/05/column_01-1024x516.gif)
リッチカラムの上部に、番号を表示するカスタマイズです。
![](https://webrent.xsrv.jp/wp-content/uploads/2021/02/new-profile.png)
カラム上段の罫線からちょっとはみ出す感じがオシャレですよね!
同様に、画像を少しリッチカラムからはみ出すデザインもSWELLの標準機能にはないデザインパターンです。
他のデザイナーと被らないオシャレな仕上げを求めるデザイナー向け↓
![【SWELL】リッチカラムから画像をはみ出すデザイン](https://webrent.xsrv.jp/wp-content/uploads/2024/05/column_02-1024x494.gif)
![](https://webrent.xsrv.jp/wp-content/uploads/2021/02/new-profile.png)
リッチカラムのカスタマイズは次の記事で解説しています。
![](https://assets.st-note.com/production/uploads/images/141307090/rectangle_large_type_2_4cc11dc1be26f878ccc12cfc634af9f8.jpeg?fit=bounds&quality=85&width=1280)
【印象度アップ】サイトの背景に固定動画を表示
![【SWELL】背景に固定動画を表示するカスタマイズ](https://webrent.xsrv.jp/wp-content/uploads/2022/07/movie-1024x626.jpg)
まずはデモサイトを開いて実物をご覧ください↓
サンプルサイトでは光の丸ボケ動画を配置しています。
「透明感のあるサイト」「高級感を出したい」そんな場合におすすめなカスタマイズです。
![](https://webrent.xsrv.jp/wp-content/uploads/2021/02/new-profile.png)
カスタマイズ方法は次の記事で解説しています。
![](https://assets.st-note.com/production/uploads/images/93649923/rectangle_large_type_2_bed75e0e054aec6bc3b6a3ad458843a9.jpeg?fit=bounds&quality=85&width=1280)
左右両方のサイドバーを表示して3カラムレイアウトを実現
![左右両方のサイドバーを表示して3カラムレイアウトを実現](https://webrent.xsrv.jp/wp-content/uploads/2023/01/sidebar-1024x547.jpg)
ガジェットブログなど、見せたい記事やカテゴリーが多いサイトで有効なカスタマイズです。SWELLで運営されているサイトを頻繁に見かけるようになりましたが、左右両サイドバーを表示しているサイトを見かけたことがありません。
かなりレア度の高いカスタマイズです。
![](https://webrent.xsrv.jp/wp-content/uploads/2021/02/new-profile.png)
カスタマイズ方法は次の記事で解説しています。
![](https://assets.st-note.com/production/uploads/images/93991238/rectangle_large_type_2_9c1f189747b5d8a29ad7f3e3bfd52b04.jpeg?fit=bounds&quality=85&width=1280)
固定ページごとにメインビジュアル画像を設定する
![【SWELL】固定ページごとにメインビジュアル画像を設定する](https://webrent.xsrv.jp/wp-content/uploads/2022/07/swell87-1024x436.jpg)
固定ページなどの下層ページに、透過式で大きめのメインビジュアル画像を設置するカスタマイズです!
コーポレートサイトでは、トップページだけでなく、固定ページを含む固定ページの作りこみも重要です。ファーストビューにメインビジュアルを設置し、印象をワンランクアップさせましょう!
![](https://assets.st-note.com/production/uploads/images/104737712/rectangle_large_type_2_8a319f8514e0308e2e952237f835d819.jpeg?fit=bounds&quality=85&width=1280)
まとめ
SWELLのカスタマイズを紹介しました。
今回紹介したのはSWELLのテンプレートファイルを編集しないカスタマイズです。テンプレートファイルを直接編集してしまうと、テーマのアップデートでカスタマイズが上書きされ消えてしまいます。
運用を考慮すると、できるだけテンプレートを編集しないのが理想です。
フック、CSS、スクリプトでカスタマイズを行い、運用でトラブルが起きないよう気をつけましょう!
カスタマイズ
- 投稿リストにカスタムフィールド・タームを表示
- 記事の順番を並び替えるボタン
- レイアウト切り替えボタン(1カラム⇔2カラム)
- アーカイブに任意のHTMLを追加表示
- カテゴリーページに楽天市場・Amzonのリンクを設置
![](https://webrent.xsrv.jp/wp-content/uploads/2021/02/new-profile.png)
ぜひチャレンジしてみてください!