【SWELLの初期設定】テーマ導入直後にすべきことを初心者向けに解説

【事例と作り方】WP有料会員サイト|SWELLとWP-Membersプラグインで定額課金のデモサイトを自作してみた
初心者

SWELLを購入した!
初期設定をおしえて欲しい!

そんな人向けにSWELL購入直後の初期設定を解説します!

SWELL購入方法については別記事で解説しています。

テーマを購入したらこれをしよう!

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

SWELLテーマのアップロード

SWELLテーマのアップロード

SWELLをWordPressにアップロードし有効化することでWordPressでSWELLが利用できるようになります。

WordPressにSWELLをアップロードし有効化する手順

STEP
WordPressにログイン

ダッシュボードにログインします。

管理者権限でサイトにログインする

テーマのアップロードは管理者権限のユーザーでのみ実行できる作業です。複数のアカウントでサイトを運用している場合は、必ず管理者権限でWordPressにログインしてください。

STEP
テーマのページへ移動

WordPressダッシュボードにログインした後、

画面左手のメニューから「外観」→「テーマ」の順にクリックしてください。

アップロードするテーマのファイル形式

購入時にダウンロードしたzipファイルをそのままアップロードします。
zipファイルは事前にPC上で解凍する必要はありません。
テーマ名:swell-*-*-*.zip
*はバージョン版番号です。

STEP
テーマのアップロード

画面上部の「新規追加」をクリック。

次の画面で、画面上部の「テーマのアップロード」をクリック。

ファイルの選択画面が表示されます。

「ファイルの選択」をクリックし、パソコン上からSWELLのテーマを選択し「今すぐインストール」をクリック。

STEP
テーマを有効化

今すぐテーマを有効化をクリック。

以上の作業でテーマが有効化されました。

テーマがダッシュボードからアップロードできない場合

サーバーの設定やWordPressの設定など、環境によっては今回の方法でテーマをアップロードできない場合があります。その時は次の方法でテーマをWordPressにアップロードしてください。

  1. FTPアップロード
  2. レンタルサーバーの提供しているファイルアップロードツール(ファイルマネージャー等)

【任意】子テーマのアップロード

【任意】子テーマのアップロード

このステップは任意です。テーマファイルのプログラムコードを編集する場合のみ行ってください。

子テーマは公式サイトから無料でダウンロードできます

公式サイト:SWELL子テーマダウンロード

SWELL子テーマのアップロード方法

次の手順でSWELL子テーマをWordPressにアップロードできます。

STEP
WordPressにログイン

ダッシュボードにログインします。

管理者権限でサイトにログインする

テーマのアップロードは管理者権限のユーザーでのみ実行できる作業です。複数のアカウントでサイトを運用している場合は、必ず管理者権限でWordPressにログインしてください。

STEP
テーマのページへ移動

WordPressダッシュボードにログインした後、

画面左手のメニューから「外観」→「テーマ」の順にクリックしてください。

STEP
SWELL子テーマのアップロード

画面上部の「新規追加」をクリック。

次の画面で、画面上部の「テーマのアップロード」をクリック。

ファイルの選択画面が表示されます。

「ファイルの選択」をクリックし、パソコン上からSWELLの子テーマを選択し「今すぐインストール」をクリック。

STEP
テーマを有効化

今すぐテーマを有効化をクリック。

有効化するテーマは「子テーマ」

親・子両テーマアップロードしたら、「子テーマ」を有効化してください。

以上の作業でSWELL子テーマが有効化されます。

テーマのアップロード順に注意

子テーマと親テーマをアップロードする際、親テーマを先にアップロードする必要があります。親テーマがない状態だと子テーマをアップロードすることはできません。

パーマリンクの設定

パーマリンクの設定

パーマリンクはSEOでとても重要です。パーマリンクは後で変更しようとするとトラブルが発生しやすいので必ず設定しましょう

運用しているサイトで既にパーマリンクを設定している場合は、この設定は不要です。

初心者

パーマリンクって何?

かんた

パーマリンクは、「サイトのURL構造」のこと。

パーマリンクの設定手順

次の手順でパーマリンクの設定を行ってください。

STEP
WordPressにログイン

管理者権限でWordPressダッシュボードにログインします。

STEP
パーマリンクぺージへ移動

WordPressダッシュボード左手のメニューで、

「設定」→「パーマリンク設定」の順で進んでください。

STEP
パーマリンクの設定

上部の共通設定の項目から「投稿名」を選択。

画面の下にある「変更を保存」をクリックしてください。

オプションって何?

カテゴリーやタグの一覧ページのURL構造を指定するオプションです。
任意の値でも、何も指定しなくもOKです。

新規投稿・新規固定ページを作る際の注意点

SEO(検索エンジン対策)を強めたい場合、記事やページを作成するに、必ず英文字のパーマリンクを指定しましょう。設定しない場合、作成した記事のURLが文字化けしてしまうので注意しましょう。

推奨プラグインのインストール

推奨プラグインのインストール

SWELLテーマ開発者の推奨するプラグインをインストールしましょう。

WordPressプラグインの基礎知識

初心者

『プラグイン』って何?

かんた

プラグインは拡張プログラムのこと。
テーマに付属していない機能を補助してくれるのが役割!

推奨プラグインって何?

「推奨プラグイン」は開発者がおススメだよ!というプラグインです。

推奨プラグインを入れてもOKですが、テーマと相性が悪く正しく動作しないだけでなく障害の原因となる可能性もあるので推奨プラグイン以外を入れる際は本当に必要かを考えましょう。

SWELL公式:推奨プラグイン一覧

初心者

推奨プラグインが、いっぱいあって大変!
全部入れたほうがいいの?

かんた

『推奨』であって『必須』ではありません。全部いれる必要なないです。個人的に次のプラグインはSEO上、入れたほうがいいと思います。

SEO対策プラグイン
  • SEO SIMPLE PACK
  • Google XML Sitemaps

『SEO SIMPLE PACK』はSWELL開発者さんが作成したプラグインです。当然ながらSWELLとの相性抜群です。SWELLテーマで設定できない、記事のMETAまわりの設定をサポートする役割です。SWELLを使うなら必須と言っていいプラグインです。

『Google XML Sitemaps』は検索エンジンにサイトの更新情報を伝えるsitemao.xmlを自動で作成してくれるプラグインです。SEO上とっとも重要な存在なので、このプラグインも入れておきましょう。

推奨以外のプラグインを使う場合の注意点

  • プラグインは最悪停止してもサイト運営に支障がでないもに限定する
  • 最終更新が1年以上前のものは使わない
  • 非推奨プラグインは使わない

特に「非推奨プラグイン」。SWELL開発者さんが「これをSWELLで使うと不具合が起きるよ」と判断しているプラグインです。

検索順位をあげるなら

これを入れたら検索エンジン上位に表示される!」といった怪しいプラグインはありません。

ただし、グーグルはページ読み込み速度を検索アルゴリズムにしています。SWELLはページ読み込みスピードがかなり早いテーマです。設定が適切かつコンテンツ内に重い画像や動画、過剰なSNSの埋め込みが無い限り問題はありません。

どうしてもページ読み込みスピードが遅いときは高速化プラグインを追加しましょう。

高速化プラグインの中にはSWELLと相性が悪いものがあります。色々試したなかで一番効果のあったのはヒトデブログでも使っている有料のWPロケットプラグインでした。お金がかかかるので、どうしても高速化ができない人は導入を検討してみてください。

かんた

当ブログでも導入しています。

【任意】SWELLデモサイトの着せ替えファイルを適用

SWELLデモサイトの着せ替えファイルを適用

このステップは必須ではありません。

SWELL公式サイトにはデモサイトが6個公開されています。SWELL購入者のみデモサイトの「着せ替えファイル」を利用できます。

初心者

着せ替えファイルって何?
僕はこの作業をしたほうがいいの?

かんた

着せ替えファイルは、デモサイトと同じデザインすることができるファイルだよ。必須じゃないけど、次の項目に当てはまるかチェックしてみて?

次に当てはまる人のみ、この作業を行ってください。

キャプション
  • デモサイトの中に好みのデザインがある
  • 「仮」のデザインを決めておきたい
  • デモサイトをベースにアレンジしたい
かんた

当てはまらない人は、テーマの設定を1から行っていけばOK。
私は着せ替えデータを使っていませんが、無事SWELLの設定ができました。

SWELLデモサイトの着せ替えデータを使う方法

SWELLのデモサイトと同じデザインに着せ替えする方法を解説します。

かんた

5分もあれば着せ替え完了です!

STEP
デモデータをダウンロードする

SWELL公式サイトから好みのデモサイトのデータをダウンロードします。

デモサイトのデータをダウンロードするにはSWELLのマイページにログインする権限が必要です。
テーマ購入時に受け取るメールを確認しましょう。

SWELL公式デモサイト

STEP
プラグインをインストールする

着せ替え作業には「Customizer Export/Import」プラグインが必須です。

Customizer Export/ImportはWordPress公式ディレクトリーに公開されている無料プラグインです。WordPressダッシュボード上から直接インストールするか、以下のリンクからファイルをダウンロードしてください。



WordPress公式ディレクトリー:Customizer Export/Import

STEP
デモデータをインポートする

デモサイトのデータをWordPressサイトの読み込みます。

「外観」→「カスタマイズ」をクリック。

一番下の「Export/Import」をクリック。

デモサイトの着せ替えデータファイル(.dat)を指定しインポートします。

以上でSWELLの着せ替え作業は終了です。

SWELLの着せ替え作業完了後、Customizer Export/Importはいりません。無効化して削除して構いません。

初心者

簡単でした!

かんた

着せ替えは何度でも行えます。
気に入ったデザインが見つかるまで何度でも着せ替えできるので、気軽に試してください。

デモサイトの着せ替えデザインの使いかたは、次の記事で詳しく解説しています。

SWELLデモサイトの使い方

ヘッダーエリア(ロゴ、メニュー等)

サイトの上部は「ヘッダー」、または「ヘッダーエリア」といいます。ロゴマークやメニューを表示するエリアです。

ヘッダーのフォント、背景色を指定する方法

ヘッダーの文字の色、ヘッダーの背景色を指定する手順です。

「外観」→「カスタマイズ」→「ヘッダー」をクリック。

表示されるメニューのカラー設定から好みの色を指定できます。

かんた

フォント、背景色ともにカラーパレットから好きな色を選べます。

ロゴ画像を設置する方法

「外観」→「カスタマイズ」→「ヘッダー」をクリック。

ヘッダーロゴの設定から、ロゴ画像をアップロードし表示サイズを 指定することができます。

表示サイズのオプション

  • PCでの表示サイズ(通常)
  • PCで追従ヘッダー上での表示サイズ
  • スマホサイトでの表示サイズ

メニューの設定方法

「外観」→「カスタマイズ」→

トップページの設定

トップページは何も設定しなくても、SWELL標準のデフォルトページが表示されます。

他のページのようにエディターで編集可能なページにする方法を解説します。

SWELL公式のトップページや当サイトはこの設定を使っています。

トップページを任意の固定ページに変更する手順

STEP
新規ページを作る

ダッシュボード左手のメニューから「固定ページ」→「新規追加」をクリック。

STEP
ページを作成

適当なタイトルを入力し、ページを保存ます。

今回の例では「ホーム」とします。

ページの本文は後ほど入力しましょう。本文として入力した内容がトップページに表示されることになります。

もしトップページをサイドバー無しのデザインにしたい場合、編集画面の右手のメニューの「SWELL設定」の中にあるサイドバーを「非表示」にしましょう。

STEP
トップページに指定

先ほど作成した固定ページ「ホーム」をトップぺーに指定します。

ダッシュボード左手のメニュー「設定」→「表示設定」をクリック。

ホームページの表示で「固定ページ」を選択、

ホームページ:で先ほ作成した「ホーム」を指定し、変更を保存。

以上の手順で作成したホームがトップページに表示されます。

メインビジュアルの設定

トップページの顔として表示されるメインビジュアルの設定方法について解説します。

SWELLでは3種類のメインビジュアルから好みのタイプを選択できます。

  • 静止画像
  • スライドショー(最大5枚)
  • 動画(当ブログはコレです!)

「外観」→「カスタマイズ」→「トップページ」→「メインビジュアル」をクリックすると、設定画面が表示されます。

Font Awesomeの設定

Font Awesome(フォントオウサム)を使いたい人向けの設定です。

初心者

Font Awesomeって何?

かんた

オシャレなアイコンをサイトに表示できるサービスのことだよ。


有料のアイコンもあるけど、ほとんど無料で使えるのでブログをオシャレに装飾したい人にはおススメ!

当サイトでも使ってます。

Font Awesome公式サイト

Font AwesomeをSWELL上で使う設定方法

WordPress左手の「SWELL設定」→「Font Awesome」タブをクリック。

Font Awesomeの読み込みオプションで、「読み込まない」以外を選択し変更を保存。

初心者

「CSSで読み込む」と、「JSで読み込む」の違いは?

かんた

CSSはCSS+Webフォントでの出力。
JSはJS+SVGでの出力。
CSSはその名の通りCSSなので、古いIEにも対応してるけどJSはIE10非対応。それ以外にも技術的に結構違うけど、アイコンを表示したいだけならどちらを選んでもOK。

SWELLER’S IDの設定

SWELLにはSWELLテーマ販売アフィリエイトプログラムがあります。

自分のブログでSWELLを紹介し、ブログの読者がクリックしその先のページでSWELLを購入すると報酬が貰えるシステムでしす。

かんた

アフィリエイトに感心がない人・企業ブログを作っている人はこのステップはスルーでOKです。

アフィリエイトの報酬や、アフィリエイトプログラムの参考方法などを詳しく知りたい人は次の記事で詳しく解説しています。

SWELLアフィリエイトプログラムの参加方法

SWELLER’S IDの設定方法

SWELLER’S IDをWordPressサイトに設定する方法を解説します。

STEP
自身のSWELLER’S IDを確認する

SWELLERS’S IDはSWELL会員とのマイページから確認できます。

SWELLマイページ

STEP
SWELLER’S IDを貼り付ける

WordPressダッシュボードの左手のメニュー「SWELL設定」→「SWELLER’S」をクリック。

SWELLER’S IDを貼り付けて保存します。

STEP
反映を確認

SWELLR’S IDが正しく入力されているかを確認します。

SWELLマイページの「登録ドメイン」に、自身のさ愛とが表示されているかを確認しましょう。

SWELLの高速化設定

SWELL固有の機能として「サイトの高速化」があります。

高速化の作業は『テーマの設定後』にする

これ本当に重要です。もう一度いいます。テーマのデザインなんかを終わらせた後にサイトの高速化設定をしましょう。

理由はサイトの高速化はキャッシュを利用するシステムだからです。

SWELL高速化の設定方法

WordPressダッシュボード左のメニューで「SWELL設定」→高速化タブを選択。
各種にチェックを入れて設定を保存。

高速化オプション
  • キャッシュ機能
  • 遅延読み込みの機能
  • ページ遷移高速化

レンタルサーバーですべき設定

WordPress以外でのおすすめ設定を紹介します。

PHPを最新バージョンにする

PHPのバージョンを適切なバージョンにすることでサイトの安全性とページに表示速度が向上します。

PHPのバージョンについてはレンタルサーバーのコントロールパネルから行えます。

PHPバージョン変更時の注意点

利用しているSWELLテーマのバージョンごとに、推奨するPHPのバージョンが異なります。

SSLの設定

SSL(エス・エス・エル)はサーバーとユーザー間の通信を安全にする技術です。

SSL対応のもう一つのメリットはSEOです。

グーグルがSSLはSEO対策の1つになると明言しています。

HTTPS をランキング シグナルに使用します

アルゴリズムでのシグナルとして、暗号化された安全な接続をサイトで使用しているかを考慮に入れたテストを実施してきました。この実験ではよい結果が得られているため、ユーザーがもっと安全にサイトを閲覧できるよう、すべてのサイト所有者の皆様に

HTTP から HTTPS への切り替えをおすすめしたいと考えています。

グーグル公式ウェブマスタ向けブログ

最近のレンタルサーバーはほとんど無料でSSLを利用可能です。

SSL化の手順

WordPressブログをSSL化するにては次の手順です。

STEP
レンタルサーバーでSSLの設定をする

レンタルサーバーのコントロールパネルにログインしてSSLの設定をしましょう。

SSLは共有SSL、独自SSLの2種類があります。今回の設定では独自SSLです。

無料のSSLと有料のSSLがありますが、無料版のSSLで問題ありません。

SSLの反映までしばらく待ちます。レンタルサーバーによってはSSLが利用できるまで1時間程度かかるものがあります。

STEP
WordPressでSSLの設定をする

WordPressにログインしサイトのアドレスをSSLに切り替えます。

ダッシュボード左手のメニューから「設定」→「一般」を選択。

WordPressアドレス(URL)と、サイトアドレス(URL)をhttp://からhttps://に変更しましょう。

この作業はレンタルサーバーのSSL設定が完了した後に行ってください。
サイトが表示されなくなります。

STEP
常時SSLの設定をする

常時SSL化の方法は2種類あります。

.htaccessファイルにコードを追加する

常時SSL化プラグインを使う

どちらでもOKです。

個人的にプラグインを増やすのは好きではないので、.htaccessでの設定をお勧めします。

レンタルサーバーによってSSL化の手順が異なります。

かんた

無料独自SSL化の方法について、各レンタルサーバーの情報をまとめました。

レンタルサーバー独自のWordPressセキュリティー設定

レンタルサーバーごとに独自のWordPressセキュリティー設定があります。

例えばエックスサーバーは次の独自設定でWordPressのセキュリティーを強化可能です。

エックスサーバー固有のセキュリティー機能

  • ログイン画面への海外ネットからのアクセス遮断
  • ログイン施行回数の制限
  • WAF(Web Application Firewall)

レンタルサーバーごとに固有の機能があります。

利用しているレンタルサーバーで使用できるセキュルティー機能があれば有効化しましょう。

まとめ

SWELLの初期設定について解説しました。

新規テーマをの導入直後は、やることがたくさんあって大変です。

1つずつを見れば、それほど難しいことはありません。落ち着いて作業しましょう!

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