WordPressテーマ「SWELL」の購入・インストール方法（初期設定も解説）

2022年10月20日2023年10月2日

人気のWordPress有料テーマSWELLの購入とインストールの方法、そして、導入後やるべきことについて初心者向けに分かりやすくご紹介します。

サーバーを契約し、WordPessを既にインストールしていることを前提で進めます。

サーバーの契約やWordPressのインストールがまだの方は以下の記事をご覧ください。

【エックスサーバー】簡単にWordPressブログを始める方法（登録からインストールまで）

【ConoHa WING】簡単にWordPressブログを始める方法（登録からインストールまで）

【ロリポップ】簡単にWordPressブログを始める方法（登録からインストールまで）

この記事では、SWELLの購入とインストール、導入後にやるべきことについて、以下の流れに沿って紹介します。

SWELLの購入からインストール

STEP

SWELLを購入する

STEP

SWELL会員サイトに登録する

STEP

SWELLテーマの本体と子テーマをダウンロード

STEP

SWELLテーマをインストールする

STEP

ユーザー認証する

SWELL導入後にやるべきこと

STEP

SWELLの初期設定をする

STEP

SWELL推奨のプラグインを導入する

STEP

WordPressの初期設定を行う

STEP

DiscordのSWELLコミュニティーに参加

STEP

SWELLのアフィリエイトプログラムに参加（任意）

SWELLとは

SWELLとは

SWELLは「シンプル美と機能性の両立 – 圧倒的な使い心地を追求」がキャッチフレーズの比較的新しいWordPressテーマです。

ブロックエディタに完全対応。ネット上での評価も高く、利用者が急増。国内のWordPressテーマシェアNo.1となっています。

SWELLの概要

リリース	2019年3月
開発者	了さん　 twitter
販売元	株式会社LOOS
価格	¥17,600（税込）
決済方法	クレジットカード ( VISA / Master / AMEX / JCB ) ※ 銀行振り込みでの購入は対応できません。
ライセンス	100％GPL（複数のサイトで使用可能）
サポート方法	会員専用フォーラム
公式サイト	公式サイト

「SWELL」公式サイトで詳しく見る

SWELLの特長

SWELLの特長

ブロックエディタ完全対応。使いやすく、効率的に記事作成ができる。
コードを書かずに本格的なデザイン、おしゃれなサイトができる
サイトの表示速度が高速
WordPressテーマの国内シェアNo.1（2022年1月・マニュオン調べ）

SWELLの特長を一言でいうと、欠点が少なく誰にでも使いやすいテーマだということ。

それは、万人向けの特徴のないテーマだということではなく、こだわりを持って作られています。

ユーザーに取って必要な機能や性能があるべきところにあると、実際に使ってみて感じました。

それでいて無駄な部分を極力落として身軽な設計になっています。

ただ無難に対応するだけではなく、
ブログを簡単に・楽しく・素早く書けるように、細部までこだわってカスタマイズしています。
「SWELL」公式サイト

SWELLの購入・インストールの手順

５つのステップを順を追ってご紹介します。

STEP

SWELLを購入する

STEP

SWELL会員サイトに登録する

STEP

SWELLテーマの本体と子テーマをダウンロード

STEP

SWELLテーマをインストールする

STEP

ユーザー認証する

1. SWELLを購入する

SWELLの購入方法を順を追って説明します。

①まず、「SWELL」公式サイトにアクセスし、真ん中の「DOWNLORD」または、右上の「購入する」ボタンをクリックします。

②以下のような画面に移ります。
　下の方の「利用規約」にチェックを入れ、「SWELLを購入する」ボタンをクリックします。

③クレジットカードの決済画面が表示されます。
　必要事項を記載の上、「支払う」ボタンをクリックします。

④購入完了画面が表示されたら購入完了です。
　完了後、２通のメールが届きます。

購入完了通知メール……SWELLのダウンロードリンクが掲載されている
領収書メール……販売元株式会社LOOSからの領収書

完了通知にダウンロードリンクがありますが、親テーマのみで、子テーマはダウンロードできません。
そのため、会員登録してユーザーページ上で、子テーマも合わせてダウンロードします。

子テーマはCSSやfunction.php等を使った独自カスタマイズに使います。
必要ない方は、ダウンロードリンクから親テーマだけをダウンロードするのでOKですが、将来的に使う可能性がある場合はインストールしておきましょう。
参考：子テーマとは? 基本や作り方を解説（初心者向け）

2. SWELLの会員サイトに登録

次にSWELLユーザー限定会員サイトに登録します。

テーマのダウンロードだけではなく、ユーザー認証に必要なので、会員サイトの登録は必須です。

ユーザー認証しないとSWELLの更新ができないよ

会員サイトに登録するとできること

SWELL利用中サイトからのユーザー認証
SWELLに関するご相談や不具合報告などを行うことができるフォーラムの利用
テーマ最新版や子テーマなど、SWELL製品のダウンロード
ユーザー限定に公開しているクローズドなSWELLアフィリエイトへの申込み

会員サイトの登録方法

①まず、「SWELL」公式サイトにアクセスし、右上の「フォーラム」をクリックします。

②次に、右側の「会員登録はこちらから」をクリック

③以下のような画面で、必要事項を入力して、「登録する」ボタンをクリックして登録完了です。

メールアドレスは購入時に使用したメールアドレスでのみ登録可能です。

3. SWELLテーマの本体と子テーマをダウンロード

次に会員専用サイトでSWELLテーマの本体と子テーマをダウンロードします。

独自カスタマイズせず、子テーマが必要ない方は本体（親テーマ）だけでOKです。

①まず会員専用サイトにアクセスし、上部の「ログイン」をクリックします。

②会員登録したメールアドレスとパスワードでログインします。

③ログインすると「マイページ」が開きます。
そして、下の方にスクロールすると製品のダウンロードリンクがあります。

ここで、SWELL本体最新版と子テーマの両方（zipファイル）をダウンロードします。

4. SWELLテーマをインストールする

今度はダウンロードした２つのテーマファイルをインストールします。

swell-*-*-*-*.zip（親テーマ）⇒ swell_child.zip（子テーマ）の順にインストールします。
※親テーマがインストールされていないと、子テーマをインストールできません。

２つのzipファイルは解凍せず、そのまま使います。

①WordPress管理画面で、外観＞テーマと進み、上部の「新規追加」をクリック

②上部のテーマの「アップロード」をクリックすると、以下のような画面になります。

ここで、「ChooseFile」クリックして、ダウンロードしたswell-*-*-*-*.zip（親テーマ）を選択。
そして、「今すぐインストール」をクリックします。

③以下のような画面になるので、「有効化」をクリック

④続いて、親テーマと同じ方法で、子テーマをインストールします。

親テーマと子テーマのインストールが終わったら以下のように表示されます。

子テーマが有効になっているのが正しいかたちです。
これで子テーマと親テーマの両方が有効になっています。

4. SWELLのユーザー認証をする

SWELLのインストールが完了しましたが、まだユーザー認証が完了しておらず、更新ができない状態となっています。

最後にユーザー認証を行います。

①上部に画像のように注意書きが表示されています。
その中の「ユーザー認証」をクリックします。

②会員登録（購入に使用）したメールアドレスを入力し、「認証リクエストを送信」をクリック

②入力したアドレスにメールが届くので、メールに記載している認証URLをクリックします。

③そして、以下の画面に戻って「アクティベートを完了」をクリック

これで完了です！

SWELLは複数サイトの認証が可能で、会員サイトのマイページには、認証されたサイトの一覧があります。

ここで、認証解除もできます。

「SWELL」公式サイト

SWELLのインストール後にやるべきこと

SWELLのインストールが終わったら、初めにやるべきことを以下の手順でご紹介します。

STEP

SWELLの初期設定をする

STEP

SWELL推奨のプラグインを導入する

STEP

WordPressの初期設定を行う

STEP

DiscordのSWELLコミュニティーに参加（任意）

STEP

SWELLのアフィリエイトプログラムに参加（任意）

1. SWELLの初期設定をする

SWELLテーマ独自の「SWELL」設定には、ページ表示速度を高速化する設定があります。

ここでは高速化設定の「キャッシュ機能」「ファイルの読み込み」「遅延読み込み機能」の3つを行います。

SWELL設定の他の項目は、とりあえずデフォルトのままでOKです。

管理画面内の「SWELL設定」＞「高速化」タブで設定

キャッシュ機能

全てにチェック

SWELLのキャッシュ機能
Transients API というものを使っており、ブラウザではなくデータベースにキャッシュ情報を保存。Cookieの設定に左右されることなく利用できます。
一度管理者側がサイトを表示させてキャッシュを作成すれば他のユーザーが初めて訪れた時でもキャッシュデータを利用できます。

キャッシュの利用により、カスタマイズした時、変更が反映されない場合があります。
そのような時はSWELL設定で、キャッシュクリアを行います。

ファイルの読み込み

以下の画像の通り2箇所にチェック。
「フッター付近のCSS遅延読み込み」は「SWELLのCSSをインラインで読み込む」にチェックの場合無効なので、チェックを入れません。

遅延読み込み機能

コンテンツの遅延読み込みと画像等のLazyLoadは以下の画像の通り

遅延読み込みとは
サイトに表示されるコンテンツや画像を一度に読み込まず、必要に応じて必要な分だけ読み込むという技術です。
不必要な部分の読み込みを後回しにして、出来る限り短い時間でサイトを表示し、表示速度を速くすることができます。

スクリプトの遅延読読み込み

遅延読み込み機能の下の方に「スクリプトの遅延読読み込み」の設定があります。

SNSや広告、バナーなどスクリプトタグで呼び出す外部のJavaScriptファイル等は、サイトの表示を遅くさせます。このようなプログラムを遅延読み込みさせる機能です。

アドセンス広告やツイッターの埋め込み等は読み込み速度にかなり影響することを実感していたので、この機能によって効果があったと思います。

スプリプト遅延読み込みをONにして、以下画像のようにスクリプトのキーワードを入力します。
下部の遅延させる秒数は「５秒」にしました。（デフォルトは3秒）

各スクリプトのキーワードは何の遅延に使われるか

当サイトで入力しているキーワード一覧です。
twitterからピンタレストまでは、デフォルトで入っており、公式サイトを参考にそれ以下のキーワードを追加しました。　参考：「スクリプトの遅延読み込み」機能の使い方について（SWELL公式サイト）

twitter.com/widgets.js,	Twitterの埋め込みやいいねボタン
instagram.com/embed.js,	インスタグラムの埋め込み
connect.facebook.net,	Facebookの埋め込みやフォローボタン
assets.pinterest.com,	ピンタレストの埋め込みやピンボタン
adsbygoogle.js,	Googleアドセンス
googletagmanager.com/gtag/js, gtag(,	Googleアナリティクス
clipboard.min.js,	URLコピーボタン関係
set_urlcopy.min.js,	画像をクリックで拡大させる機能
prism.js, hcb_script.js,	プラグインHilighting Code Block（記事内のソースコードを見やすくするプラグイン）