![見出し画像](https://assets.st-note.com/production/uploads/images/171240185/rectangle_large_type_2_7af3e269edeaf483e74986fad8cfaddc.png?width=1200)
WordPressセットアップその3 ー初期設定編②ー
わだっつです。
前回は、WordPressの初期設定である一般設定をはじめとした各種設定について解説していきましたが、今回はWordPressテーマの導入方法について書いていこうと思います。
また、テーマの導入方法は各テーマ別に紹介します。
1つは無料で利用が出来る「Cocoon」を、もう1つは有料テーマの「SWELL」をそれぞれ紹介します。
WordPressのインストールや基本設定(一般設定や表示設定など各種設定)が済んでない場合は以下の記事を参考にして先に実施しておきましょう。
テーマの導入(Cocoon)
以下はWordPressのテーマ「Cocoon」の導入方法です。
SWELLの導入方法およびプロフィールの設定方法は「テーマの導入(SWELL)」からご覧ください。
Cocoonのダウンロード
まずは「Cocoon」のダウンロードから。Cocoonは親テーマと子テーマの2つあります。
ダウンロードは以下のページから行います。
アクセスしたら、水色の「ダウンロードはこちら」ボタンをクリック。
![](https://assets.st-note.com/img/1737505502-sjyv1Juw0cFatXL5AIUCNrpq.png?width=1200)
画面下にスクロールして、「"Cocoonテーマ"をダウンロード」をクリックすると、親テーマのダウンロードが始まります。
![](https://assets.st-note.com/img/1737505584-QukH6VdcR8e92z4wFxZLTnYq.png?width=1200)
ダウンロードしたら、次に子テーマをダウンロードします。
画面下にスクロールして「"Cocoon子テーマ"をダウンロード」をクリックすると、子テーマのダウンロードが始まります。
![](https://assets.st-note.com/img/1737505723-j1mtwodIEDPHqMOJkAZQGi2c.png?width=1200)
Cocoonのインストール
ダウンロードが終わったら、WordPress上からCocoonをインストールします。
メニューから「外観」⇒「テーマ」の順にクリック。
![](https://assets.st-note.com/img/1737506005-HfXiDep065UMK1B89YAPCnsJ.png)
「新しいテーマを追加」をクリック。
![](https://assets.st-note.com/img/1737506005-0uPLr7eQo9X6xi8qTchjHDvt.png)
「テーマのアップロード」⇒「ファイルを選択」の順にクリック。
![](https://assets.st-note.com/img/1737506005-VXaU9CgSrYt5jnsEiRf2DweF.png?width=1200)
「Cocoon-master.zip」を選択して「開く」をクリック。
![](https://assets.st-note.com/img/1737506005-WaJCZ0zl5rX6N2sQvqTBF3iS.png?width=1200)
「今すぐインストール」をクリック。
![](https://assets.st-note.com/img/1737507025-rIOpJdm9V6owUKYEQ85eL4fs.png?width=1200)
テーマのインストールが始まります。「テーマのインストールが完了しました」と表示されたら親テーマのインストールが完了です。
続いて子テーマをインストールするため「テーマページへ移動」をクリック。
![](https://assets.st-note.com/img/1737507025-z4AbP2IMpocREDmgwvhaZi3S.png?width=1200)
「新しいテーマを追加」をクリック。
![](https://assets.st-note.com/img/1737507025-Y7dsgAcpQuiIlG2RxWf5CwET.png)
「テーマのアップロード」⇒「ファイルを選択」の順にクリック。
![](https://assets.st-note.com/img/1737506005-VXaU9CgSrYt5jnsEiRf2DweF.png?width=1200)
「Cocoon-child-master.zip」を選択して「開く」をクリック。
![](https://assets.st-note.com/img/1737509654-kjnHhlvM5D0SsLBogXAeE47w.png?width=1200)
「今すぐインストール」をクリック。
![](https://assets.st-note.com/img/1737507025-YiBAgtybNUPw6jl2V4I3QLs0.png?width=1200)
子テーマのインストールが始まります。「テーマのインストールが完了しました」と表示されたら子テーマのインストールが完了です。
インストール完了後、「有効化」をクリック。
![](https://assets.st-note.com/img/1737507025-CYSTUwAQIrXv5ZNxJidpehLH.png?width=1200)
「Cocoon Child」が有効化されていればOKです。
![](https://assets.st-note.com/img/1737507025-7aMYJ2eLnv9s3OlSR4QNFiTX.png?width=1200)
子テーマ「Cocoon Child」を有効化する理由は、親テーマを直接有効化すると、アップデート時(バージョンアップや不具合修正等のマイナーアップデートなど)にカスタマイズ内容がすべてリセットされてしまうためです。この問題を防ぐために、子テーマ「Cocoon Child」を使用します。
テーマの導入(SWELL)
以下はWordPressのテーマ「SWELL」の導入方法です。
Cocoonの導入方法およびプロフィールの設定方法は「テーマの導入(Cocoon)」からご覧ください。
また、SWELLは有料となっており、税込みで17,600円です。また、テーマ導入の際、フォーラムへの会員登録が必要となります。
SWELLのダウンロード
以下のページから、SWELLをダウンロードします。
アクセス後、右上の「フォーラム」をクリック。
![](https://assets.st-note.com/img/1737591809-UwSdy0vFYO17XAfijC83lJgG.png?width=1200)
右上の「ログイン」をクリック。
![](https://assets.st-note.com/img/1737591809-93mi5PIoNpGrnOzhTgfytxjR.png?width=1200)
「メールアドレス」「パスワード」「CAPTHA コード」をそれぞれ入力して「ログイン」をクリック。
![](https://assets.st-note.com/img/1737591809-7gBxIGE8dazAhj9tceVNbfy1.png?width=1200)
ログイン後、画面下にスクロールして「SWELL製品ダウンロード」内にある親テーマ(swell-x-xx-x.zip)と子テーマ(swell_chile.zip)をそれぞれダウンロードします。
![](https://assets.st-note.com/img/1737591809-GMvhZNYm8jz7lEodSrfJgtbX.png?width=1200)
SWELLのインストール
ダウンロードが終わったら、WordPress上からSWELLをインストールします。
メニューから「外観」⇒「テーマ」の順にクリック。
![](https://assets.st-note.com/img/1737506005-HfXiDep065UMK1B89YAPCnsJ.png)
「新しいテーマを追加」をクリック。
![](https://assets.st-note.com/img/1737506005-0uPLr7eQo9X6xi8qTchjHDvt.png)
親テーマ(swell-x-xx-x.zip)を選択して「開く(O)」をクリック。
![](https://assets.st-note.com/img/1737591809-wr0J9tjn7DyI8vLMKdfg2AZC.png?width=1200)
「今すぐインストール」をクリック。
![](https://assets.st-note.com/img/1737591809-4ZPs1rJoCQylUnNVvgXbIRGe.png?width=1200)
「テーマのインストールが完了しました」と表示されたら、続いて子テーマをインストールするため「テーマページへ移動」をクリック。
![](https://assets.st-note.com/img/1737591809-uRCJA7E2Dtp9f0PvT5HnojhW.png?width=1200)
「新しいテーマを追加」をクリック。
![](https://assets.st-note.com/img/1737507025-Y7dsgAcpQuiIlG2RxWf5CwET.png)
「テーマのアップロード」⇒「ファイルを選択」の順にクリック。
![](https://assets.st-note.com/img/1737506005-VXaU9CgSrYt5jnsEiRf2DweF.png?width=1200)
子テーマ(swell_chile.zip)を選択して「開く(O)」をクリック。
![](https://assets.st-note.com/img/1737591809-SoD5fgG3ILHqQbxkljsWP0iN.png?width=1200)
子テーマのインストールが始まります。「テーマのインストールが完了しました」と表示されたら子テーマのインストールが完了したので、「有効化」をクリック。
![](https://assets.st-note.com/img/1737591809-LtZeB7PGaYUO9H8VXQv5sz3A.png?width=1200)
続いてSWELLのユーザ認証を行います。「SWELLのユーザ認証」をクリック。
![](https://assets.st-note.com/img/1737591809-CSusUJtenjlzZAFLmrDciOh1.png?width=1200)
フォーラムの会員登録時に登録したメールアドレスを入力して「認証リクエストを送信」をクリック。
![](https://assets.st-note.com/img/1737591809-dYIDPLmSblgzMQZefN5Bv1oT.png?width=1200)
登録したメールアドレス宛に以下のメールが送られますので、本文内のURLをクリック。
![](https://assets.st-note.com/img/1737591809-PmDSdnZNRAuU0wzeq7KXExjt.png?width=1200)
「メールアドレス」「パスワード」「CAPTHA コード」をそれぞれ入力して「ログイン」をクリック。
![](https://assets.st-note.com/img/1737591809-7gBxIGE8dazAhj9tceVNbfy1.png?width=1200)
認証済みサイト一覧にサイトURLが表示されていることを確認します。
![](https://assets.st-note.com/img/1737591809-IzpfFaP73WmBAL1tg9ZNJkVr.png?width=1200)
確認後、「アクティベートを完了」をクリック。
![](https://assets.st-note.com/img/1737591809-5iyXofIWnbLETurAZxtUVGzR.png?width=1200)
「認証完了」と表示されたら、導入作業は完了です。
![](https://assets.st-note.com/img/1737591809-fjzGZ8JR1S4kThMwdrcmOoqY.png)
以上がCocoonおよびSWELLのテーマ導入方法です。