この記事にはXAMPPにWordPressをインストールし、テーマをCocoonに設定する方法が書いてあります。
方法の概要は次の通りです。
- XAMPPのダウンロード、インストール
- XAMPPにWordPress用のデータベースを作成する
- WordPressのダウンロード、インストール
- Cocoonの親、子両テーマのダウンロードとWordPressのテーマへの設定
環境 : Windows8.1
XAMPPのダウンロード、インストール
XAMPPのダウンロード
XAMPPの公式サイトから「Windows向けXAMPP」をクリックしてダウンロードします。
![XAMPP公式サイト](https://nagaragawa-r.com/wp-content/uploads/2021/04/xampcox.jpg)
XAMPPをインストール
エクスプローラーで今ダウンロードした実行ファイルをクリックして起動します。
![ダウンロードした実行ファイル](https://nagaragawa-r.com/wp-content/uploads/2021/04/xampco_1x.jpg)
注意、警告のウィンドウが出る
次のようなウィンドウが表示されると思います。
![アンチウィルスソフトをインストールしていることによりXAMPPのインストールに干渉するかもしれないという警告表示](https://nagaragawa-r.com/wp-content/uploads/2021/04/xampco_2.png)
ウィンドウの翻訳結果
アンチウイルスを実行しているようです。場合によっては、これはソフトウェアのインストールを遅くするか、干渉します。詳細については、次のリンクにアクセスしてください。
インストールを続行しますか?
PCにインストールされているセキュリティソフトの影響でインストールが遅くなったりすると注意が表示されました。
それを踏まえ「yes」をクリックしてインストールを開始します。
そうすると次のようなウィンドウが表示されると思います。
![C:\ Program Files にXAMPPをインストールしないように注意を促す](https://nagaragawa-r.com/wp-content/uploads/2021/04/xampco_3.png)
ウィンドウの翻訳結果
警告
重要!有効化されたユーザーアカウント制御(UAC)が
システムXAMPPの一部の機能が制限されている可能性があります。 UACを使用
XAMPPをC:\ Program Filesにインストールしないでください(書き込みがありません)
権限)。または、この設定後にmsconfigを使用してUACを非アクティブ化します。
XAMPPを「C:\ Program Files」にインストールすると何か問題が発生するようです。
「C:\ Program Files」以外の場所にインストールすることを覚えておきます。
「OK」をクリックします。
インストールを開始
Setupウィンドウが開きます。「Next」をクリック。
![Setupウィンドウが開く](https://nagaragawa-r.com/wp-content/uploads/2021/04/xampco_4x.png)
チェックボックスはいじらずこのままの状態で「Next」をクリック。
![インストールするコンポーネントの設定はデフォルトのままで「Next」](https://nagaragawa-r.com/wp-content/uploads/2021/04/xampco_5x.png)
先ほどの警告に従い「C:\Program Files」以外の場所にインストールします。デフォルト状態で「C:\xampp」が表示されているのでここにインストールします。「Next」をクリック。
![XAMPPをインストールする場所はデフォルトのC:\xampp](https://nagaragawa-r.com/wp-content/uploads/2021/04/xampco_6x.png)
ウィンドウは以下のように表示されたと思います。
![XAMPPコントロールパネルはさまざまな言語をサポートしている](https://nagaragawa-r.com/wp-content/uploads/2021/04/xampco_7.png)
ウィンドウの翻訳結果
XAMPP Control Panel for Windowsは、さまざまな言語をサポートしています。
とのことですが選択肢は英語かドイツ語(deutschはドイツ語で「ドイツ語」と書いてあるようです。)なので英語を選択します。
ウィンドウは以下のように表示されたと思います。
![Bithami for XAMPPは多くの人気のあるオープンソースアプリをインストールできる無料のインストーラーを提供](https://nagaragawa-r.com/wp-content/uploads/2021/04/xampco_8.png)
ウィンドウの翻訳結果
Bithami for XAMPPは、既存のXAMPPインストールに加えて、Drupal、Jaomlal、WordPress、およびその他の多くの人気のあるオープンソースアプリをインストールできる無料のインストーラーを提供します。
チェックが入っているとインストーラーの紹介ページがブラウザで開かれます。
チェックを外して「Next」をクリック。
![チェックを外して「Next」](https://nagaragawa-r.com/wp-content/uploads/2021/04/xampco_9x.png)
ウィンドウは以下のように表示されたと思います。
![XAMPPをインストールする準備が整った](https://nagaragawa-r.com/wp-content/uploads/2021/04/xampco_10.png)
ウィンドウの翻訳結果
これで、コンピューターへのXAMPPのインストールを開始する準備が整いました。
ということなので「Next」をクリック。
インストールが開始されます。
![XAMPPのインストール開始](https://nagaragawa-r.com/wp-content/uploads/2021/04/xampco_11.png)
セットアップが完了しました。
![XAMPPのセットアップ完了](https://nagaragawa-r.com/wp-content/uploads/2021/04/xampco_12.png)
ウィンドウの翻訳結果
XAMPPセットアップウィザードの完了
セットアップは、コンピューターへのXAMPPのインストールを完了しました。
今すぐコントロールパネルを起動しますか?
ということなのでチェックを入れて「Finish」をクリック。
XAMPPのコントロールパネルが起動しました。コントロールパネルは後で使うので閉じないでください。
![XAMPPコントロールパネルが起動される](https://nagaragawa-r.com/wp-content/uploads/2021/04/xampco_13.png)
WordPressをXAMPPのローカル環境にインストールしていく
WordPressのダウンロード
WordPressの公式サイトから日本語版をダウンロードします。
ブラウザで公式サイトのページを開いたら画面右上の「WordPressを入手」をクリック。
![WordPress公式サイト](https://nagaragawa-r.com/wp-content/uploads/2021/04/xampco_14x.png)
画面を下へスクロールしていくと「WordPress5.7をダウンロード」(記事を書いている時点のバージョンです)とあるのでそれをクリックします。
![WordPress5.7をダウンロード](https://nagaragawa-r.com/wp-content/uploads/2021/04/xampco_15x.png)
ダウンロードしたzipファイルを解凍します。解凍されてできるフォルダ名は後で使うのでメモっておいてください。(この記事ではフォルダ名は「wordpress」となりました)
![ダウンロードしたzipファイルを解凍](https://nagaragawa-r.com/wp-content/uploads/2021/04/xampco_16x.png)
WordPress用のデータベースを作成
WordPressをインストールするためのデータベースを作成していきます。
XAMPPコントロールパネルの「 Apaceh」 と 「MySQL」の「Start」ボタンをクリックします。
![XAMPPコントロールパネルで「 Apaceh」 と 「MySQL」の「Start」ボタンをクリック](https://nagaragawa-r.com/wp-content/uploads/2021/04/cq005_22x.png)
Apaceh、 MySQLの背景が画像のように薄い緑色になれば稼働しています。
![Apaceh とMySQLが稼働中](https://nagaragawa-r.com/wp-content/uploads/2021/04/xampco_18x.png)
MySQLの 「Admin」をクリックして「phpMyAdmin」を開きます。
![「phpMyAdmin」を開く](https://nagaragawa-r.com/wp-content/uploads/2021/04/xampco_18y.png)
「phpMyAdmin」がブラウザで開かれます。
![「phpMyAdmin」がブラウザで開かれる](https://nagaragawa-r.com/wp-content/uploads/2021/04/xampco_19x.png)
データベースをクリックします。
![データベースをクリック](https://nagaragawa-r.com/wp-content/uploads/2021/04/xampco_19y.png)
「データベース名」とその隣のデータベースの文字セットの入力をします。
この記事ではデータベース名は「Wp」にしました。文字セットは「utf8_general_ci」にします。「作成」をクリック。
![データベース名の入力と文字セットの指定](https://nagaragawa-r.com/wp-content/uploads/2021/04/xampco_20x.png)
今作成したデータベースが左カラムに表示されています。WordPress用のデータベースが作成できました。
![WordPress用のデータベースが作成された](https://nagaragawa-r.com/wp-content/uploads/2021/04/xampco_21x.png)
WordPressをXAMPPにインストール
WordPressをXAMPPにインストールしていきます。
エクスプローラーで C:\xampp\htdocs を開きます(XAMPPをC:\xamppにインストールした場合)。
![エクスプローラーで C:\xampp\htdocs を開く](https://nagaragawa-r.com/wp-content/uploads/2021/04/xampco_22x.png)
先ほど解凍してできたWordPressのフォルダを上記のフォルダにコピペします。(この記事では「wordpress」フォルダ)
![wordPressフォルダをコピペ](https://nagaragawa-r.com/wp-content/uploads/2021/04/xampco_23x.png)
ブラウザでの作業
ブラウザのアドレスバーに http://localhost/wordpress と入力してenterします。
アドレスバーに入力したアドレスの wordpress(この記事では)はC:\xampp\htdocsにコピペしたフォルダ名です。適宜変更してください。
![ブラウザのアドレスバーに http://localhost/wordpress と入力してenter](https://nagaragawa-r.com/wp-content/uploads/2021/04/xampco_24x.png)
「さあ、始めましょう!」をクリックします。
![「さあ、始めましょう」をクリック](https://nagaragawa-r.com/wp-content/uploads/2021/04/xampco_25x.jpg)
必要事項の入力1
必要事項を入力します。
データベース名は先ほど設定した名前です。この記事だと「Wp」です。 ユーザー名は「root」 。
パスワードは入力しません。 データベースのホスト名はデフォルトの「localhost」。
テーブル接頭辞もデフォルトのままです。入力が終わったら「送信」をクリックします。
![必要事項の入力。データベース名。ユーザー名。データベースのホスト名。テーブル接頭辞。](https://nagaragawa-r.com/wp-content/uploads/2021/04/xampco_26x.png)
「インストール実行」をクリック
![インストール実行をクリック](https://nagaragawa-r.com/wp-content/uploads/2021/04/xampco_27x.png)
必要事項の入力2
必要事項をすべて入力します。
パスワードは自動で作成されていると思うのでそれを使用します。このパスワードでWordPressの管理画面にログインするのでメモっておきます。
WordPressをインストールをクリック。
![必要事項を入力したらWordPressをインストール](https://nagaragawa-r.com/wp-content/uploads/2021/04/xampco_28x.jpg)
WordPressのインストールが成功しました。ログインをクリックします。
![WordPressのインストールに成功](https://nagaragawa-r.com/wp-content/uploads/2021/04/xampco_31x.png)
先ほど設定したユーザー名とパスワードを入力して「ログイン」をクリックします。
![WordPressログイン画面](https://nagaragawa-r.com/wp-content/uploads/2021/04/xampco_32x.png)
ログインが成功しました。WordPressの管理画面が開かれました。
![WordPress管理画面](https://nagaragawa-r.com/wp-content/uploads/2021/04/xampco_33x.png)
テーマをCocoonにする
ではWordPressのテーマをCocoonに設定していきます。
Cocoonをダウンロード
Cocoonをダウンロードします。
親テーマ、子テーマ両方ともダウンロードします。ブラウザでCocoonのダウンロードページを開きます。まず親テーマをダウンロードします。
![Cocoon親テーマのダウンロード](https://nagaragawa-r.com/wp-content/uploads/2021/04/xampco_35x.jpg)
「Cocoonテーマをダウンロード」をクリックします。
次に子テーマをダウンロードします。
下へスクロールし 「Cocoon子テーマをダウンロード」をクリック。
![Cocoon子テーマのダウンロード](https://nagaragawa-r.com/wp-content/uploads/2021/04/xampco_36x.jpg)
Cocoonをインストールする
親テーマ、子テーマの順番にインストールします。
親テーマをインストール
WordPress管理画面の左カラムから 「外観」 → 「テーマ」 をクリック。
![外観→テーマ](https://nagaragawa-r.com/wp-content/uploads/2021/04/xampco_34x.png)
新規追加をクリック
![新規追加をクリック](https://nagaragawa-r.com/wp-content/uploads/2021/04/xampco_38x.png)
「テーマのアップロード」 → 「ファイルを選択」から今ダウンロードした親テーマを選択します。
![親テーマを選択する](https://nagaragawa-r.com/wp-content/uploads/2021/04/xampco_39x.png)
今すぐインストールをクリック。
![今すぐインストール](https://nagaragawa-r.com/wp-content/uploads/2021/04/xampco_45x.png)
インストールが完了したらテーマページへ戻ります。「テーマページへ移動」をクリック。
![「テーマページへ移動」をクリック](https://nagaragawa-r.com/wp-content/uploads/2021/04/xampco_42x.png)
子テーマをインストール
「新規追加」をクリックします。
![新規追加をクリック](https://nagaragawa-r.com/wp-content/uploads/2021/04/xampco_43x.png)
先ほどと同様に「テーマのアップロード」 → 「ファイルを選択」から今ダウンロードした子テーマを選択します。 そのあとで「今すぐインストール」をクリック。
![子テーマファイルを選択](https://nagaragawa-r.com/wp-content/uploads/2021/04/xampco_45y.png)
子テーマのインストールが完了したら 「有効化」をクリックします。
![子テーマを有効化する](https://nagaragawa-r.com/wp-content/uploads/2021/04/xampco_46x.png)
画像のように Cocoon Child が「有効」となっていればオーケーです。
![子テーマが有効化されているか確認](https://nagaragawa-r.com/wp-content/uploads/2021/04/xampco_47x.png)
管理画面右上の「ブログ(この記事で作成したブログ名)」 → 「サイトを表示」をクリックしてCocoonがテーマに設定されたかを確認してみます。
![Cocoonがテーマに設定されたかの確認](https://nagaragawa-r.com/wp-content/uploads/2021/04/xampco_48x.png)
Cocoonが適用されたブログが表示されました。
![Cocoonブログが表示された](https://nagaragawa-r.com/wp-content/uploads/2021/04/xampco_49x.png)
以上でXAMPP環境にCocoonブログを作成する手順は終了です。
この記事は以上です。