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

【比較】独自フックの違い
初心者

SWELLでオリジナリティーを出したい…
他の人はしていないようなオシャレな機能ってないかな…

そんな疑問に答えます。

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

オンリーワンのブログに仕上げたい!

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

この記事を書いた人
  • IT業界22年のベテラン エンジニア
  • WordPressで企業サイトの構築しています
  • 取り扱いWordPressテーマは300個オーバー
SWELLマニアの かんた です
目次

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

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

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

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

カスタマイズ

  1. 投稿リストにカスタムフィールド・タームを表示
  2. 記事の順番を並び替えるボタン
  3. レイアウト切り替えボタン(1カラム⇔2カラム)
  4. アーカイブに任意のHTMLを追加表示
  5. カテゴリーページに楽天市場・Amzonのリンクを設置
かんた

それぞれのカスタマイズを紹介します

投稿リストにカスタムフィールド・タームを表示

投稿リストにターム情報を含めて表示するSWELLのカスタマイズ

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

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

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

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

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

投稿リストにターム情報を含めて表示するSWELLのカスタマイズ
不動産サイトでカスタムフィールドを表示している例

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

かんた

賃貸物件を扱っている不動産サイト定番のデザインです。

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

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

SWELLで投稿リストにカスタムフィールドをタームを表示

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

SWELL投稿リストにアマゾンと楽天のリンクを設定
新着一覧に楽天市場とAmzonへのリンクを設定した例

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

かんた

新着情報の出力をカスタマイズする方法は次の記事で解説しています。

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

SWELLの記事一覧ページで、投稿日や公開日、人気順で記事の並び替えを変更するボタン

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

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

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

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

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

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

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

かんた

カテゴリーページに並び替えボタンを付ける方法は、次の記事で解説しています↓

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

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

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

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

かんた

このカスタマイズは次の記事で解説しています↓

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

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

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

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

かんた

このカスタマイズは次の記事で解説しています↓

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

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

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

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

かんた

このカスタマイズは以下の記事で紹介しています。

まとめ

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

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

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

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

カスタマイズ

  1. 投稿リストにカスタムフィールド・タームを表示
  2. 記事の順番を並び替えるボタン
  3. レイアウト切り替えボタン(1カラム⇔2カラム)
  4. アーカイブに任意のHTMLを追加表示
  5. カテゴリーページに楽天市場・Amzonのリンクを設置
かんた

ぜひチャレンジしてみてください!

よかったらシェアしてね!
  • URLをコピーしました!
目次