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

NOMAD購入からテーマのダウンロードまでの流れ
初心者

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

そんな疑問に答えます。

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

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

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

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

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

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

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

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

カスタマイズ

  1. 記事の順番を並び替えるボタン
  2. レイアウト切り替えボタン(1カラム⇔2カラム)
  3. アーカイブに任意のHTMLを追加表示
  4. カテゴリーページに楽天市場・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. レイアウト切り替えボタン(1カラム⇔2カラム)
  3. アーカイブに任意のHTMLを追加表示
  4. カテゴリーページに楽天市場・Amzonのリンクを設置
かんた

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

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