ノンエンジニアによるWordPress開発 〜ローカル環境の作り方[XAMPP]

f:id:sharpb9c42f:20210906161251j:plain

こんにちはデザインチームオカベです。
自分は開発の人間ではないのですが、WordPress周りを担当する機会が多いため動作確認や追加要件に対応できるようローカル上に開発環境を用意しています。自社オウンドメディア「BiND CAMP」(Webのノウハウ等を扱うブログ)を構築する際などもこちらの方法で行っています。
そこで今回は普段利用しているXAMPP(ザンプ)というツールの導入方法と、WordPressのインストールまで簡単に紹介したいと思います。

WordPressの開発環境(サーバー)の用意

一般的なHTMLとCSSJavaScriptで構成されたWebサイト、いわゆる静的サイトであれば開発環境として用意するのはブラウザだけで大丈夫ですが、WordPressのように記事の保存やアカウントの管理など、データベースの連携が必要な動的サイトの場合は少なくともデータベースと、プログラミング言語PHPなど)を処理できるサーバー環境が必要になります。WordPressもこのPHP言語が使用されています。
サーバーの用意といっても物理的に用意するわけではないのでご安心ください。費用もかかりません。

ローカル環境を構築するXAMPPをインストール

XAMPPは、Apache(Webサーバ)、データベース、PHP、データベースの管理ツール(phpMyAdmin)などウェブアプリケーションの実行に必要なものがパッケージングされており、インストールするだけで、すぐに開発が開始でき便利です。

以下はMacの場合の手順です。

XAMPPのダウンロード

XAMPPのダウンロードページ」から必要ファイルをダウンロードします。

基本的には最新バージョンで大丈夫だと思いますが、利用するWordPressのバージョンによってはPHPのバージョンのズレでうまくいかない場合もありますのでご注意ください。
※ここではWordPressの関係で古いバージョン(5.6.39)を利用しています。過去バージョンはこちらからダウンロードできます。

XAMPPのインストール

ダウンロードできたら、インストーラーを起動し手順に沿ってXAMPPをインストールします。

XAMPP(サーバーとデータベース)の起動

XAMPPを起動し画面上メニュー「Manage Servers」を選択したら画面したの「Start ALL」(またはRestart ALL)をクリックしります。各項目のランプが赤から緑に変われば、正常に起動したことになります。

f:id:sharpb9c42f:20210906151250j:plain

XAMPPでサーバーとデータベースをまとめて起動

さらにメニュー「Welcome」から画面した「Go to Application」をクリック(あるいは「http://localhost/dashboard/」にアクセス)、して以下のような画面が表示されれば、より確実に正常動作していることを確認できます。

f:id:sharpb9c42f:20210906151254j:plain

正しく起動できているとXAMPPのダッシュボードが表示される

データベースの作成

次にWordPressを利用するためにデータベースをあらかじめ作成しておきます。

先ほどアクセスしたXAMPPのダッシュボードのメニューから「phpMyAdmin(http://localhost/phpmyadmin/)」にアクセスします。この画面がデータベースの管理画面になり、今後WordPressで作成した記事情報などは全てここで確認できます。

データベースの作成

「データベース」タブをクリックすると現在設定中のデータベース一覧が表示されます。(サイドメニューも同様)
その画面から新しく利用するデータベース名を記入し「作成」ボタンをクリックするとデータベースを新規作成できます。

f:id:sharpb9c42f:20210906151303j:plain

phpMyAdminでデータベースの作成
データベースアカウントの設定・確認

次にWordPressでデータベースを紐づける時に必要な情報を設定・確認しておきます。
先ほどの一覧画面から該当の「Check privileges」をクリック。

f:id:sharpb9c42f:20210906151307j:plain

データベースのアカウント情報

そのまま「localhost」の「 Edit privileges」から「ログイン情報」へと遷移すると、このデータベースを利用する時に必要な情報が出てきます。
ただデフォルトではパスワードなどは未設定で、実際使用する時も特に不要なので必要であれば設定してください。

※この先ではパスワードは未設定のまま進めます。

WordPressのインストール手順

WordPressのダウンロード

XAMPPがインストールできたら一旦離れてWordPressを「WordPressのダウンロード」ページからダウンロードします。
※ここではWordPress 4.9.18を利用しています。過去バージョンはこちらからダウンロードできます。

WordPressデータの設置

「アプリケーション」→「XAMPP」→「htdocs」フォルダへと移動しその中で新しくフォルダを作ります。このフォルダ名が開発中に使用するURLになります。
そして作成したフォルダの中に先ほどダウンロードしたWordPressデータを移行させます。

f:id:sharpb9c42f:20210906151316j:plain

WordPressデータの移行

この時、「wp-content」フォルダのアクセス権を全て「読み/書き」にしておくと後々のトラブルが減るかなと思います。

f:id:sharpb9c42f:20210906151320j:plain

wp-contentのアクセス権を変更
WordPressとデータベースの連携

先ほど移行したWordPressデータの中に「wp-config-sample.php」というファイルがありますので、そちらから-sampleを削除して「wp-config.php」に変更します。

その後ファイルを開き、データベース管理画面で確認したデータベースのアカウント情報を該当箇所(3箇所)に記述します。

f:id:sharpb9c42f:20210906151326j:plain

wp-config.phpでデータベース連携

保存したらデータベースの連携は完了です。

WordPressのインストール

正しくデータベース連携がされていれば、ブラウザ上で「localhost/〇●〇●」(〇●〇●はWordPressデータを移行したフォルダ名)にアクセスするとWordPressインストーラー画面が表示されます。

あとは指示に従い進むと、インストールが完了します。

f:id:sharpb9c42f:20210906151332j:plain

WordPressのスタート画面

あとはオリジナルのテーマを作成するなり好きにしてください。
追加でWordPressが必要になった際には、またデータベースを作成しWordPressをインストールすることで増やすことができます。

オカベ カテゴリーの記事一覧 -