WordPressで自作テーマを作ってブログ運営をしよう Vol.1

Hello World!!
杉山です。

WordPressで、自作テーマを作ってブログを運営する方法について、今日からシリーズ物でブログを書いていきます。

ブログを作ってみたいけれど、お金もないし。

自分のデザイン通りのものを作れるのか心配…。

そんな人は、自分で作ってみましょう!

PHPやMySQLの知識が深くなくても、コピペで、だいたいのものを作れるようなものにしていきたいと思いますので、考えられている方は是非チャレンジしてみてはいかがでしょうか?

まず、今回は第一弾ということで…

自分のパソコン上にローカル開発環境を構築して、そこにワードプレスをインストールするところから始めていきましょう。

Vol.1ですることは以下です

Vol.1でする事

  • ローカル開発環境を整える
  • WordPressをインストールする

ローカル開発環境を整える

では、さっそくローカル開発環境を整えましょう。

と…その前に、ローカル環境ってなにか理解することから始めていきましょう。

まず、我々が普段目にするホームページがどうゆう構造で見ることができているか。から理解しましょう。

例えば、ここにエンジニアのA君がいたとします。

A君

A君は、ホームページ作成の為、パソコンを使用してプログラミングのコードを書きます。

コーディングの結果、文字の羅列の一つのファイルが出来上がります。

この、文字の羅列こそがプログラミングそのもので、簡単に言うと「命令」です。

文字の羅列一つ一つに意味があって、一つ一つがサーバーへの命令なのです。

「文字を表示させなさい」という命令であったり、「色を赤色にしなさい」よいう命令であったり、その命令の数は無限にあります。

そして、その命令に使用されている言語が「プログラミング言語」と言います。

我々が普段使っている、「日本語」ではサーバーに命令しても通じません

なので、プログラミングという言語を使って、手紙という名の「ファイル」を作って、それを渡さないといけません。

それを、サーバーにアップロードと言います。

そうすると、サーバーは理解してその命令どおりに世界中の人にホームページとして映し出してくれます。

これが、インターネットでホームページが見られる仕組みです。

しかし、今回WordPressのテーマを自作していく上で、いちいちその度にサーバーに送って、確認作業をするには非効率ですし。

しかも、サーバーにアップするということは、誰でも見れてしまうわけで…

未完成のままのサイトをインターネット上にアップするのも気が引けます。

そこで、必要なのが「ローカル環境」というものになります。

簡単に言うと、あなたのパソコン上でだけ動くサーバー環境のことを言います。

なので、すごく効率的に自分のパソコン上でだけWordPressテーマの作成が行えます。

この「ローカル環境」をまずは構築していきましょう。

Windowsの方

まずは、Windowsの方から「ローカル環境」を構築していきましょう。

Macの方は飛ばして、下にスクロールしてください。

Windowsの方はXAMPPというソフトを使って「ローカル環境」を構築しましょう。以下のサイトよちXAMPPをダウンロードできます。

XAMPP

上記の画面通りにダウンロードしてください。

あとは、ほかのソフトをダウンロードするのと同じように「次へ」を連打してあなたのパソコン上にインストールしてください。

インストールが完了したら、さっそく起動してください。

起動したら、下記のボタンをクリックしてください。

これで、ローカル環境が起動しました。

めちゃくちゃ簡単でしょ?ちなみに、こうなっていたら成功です。

そして、次にデータベースを作るので、「Admin」ボタンを押してください。

このページなったら成功です。

デフォルトでは、英語だと思うので日本語に変えておきましょう。

Macの方

Windowsの方はこのまま飛ばして、下にスクロールしてください。

Macの方は、MAMPというソフトを使ってローカル環境を構築していきましょう。

以下より、MAMPをダウンロードしてインストールしてください。

MAMP

上記のようにクリックしてください。

Macマークをクリックしてダウンロードして、インストールまで終わらせてください。

インストールが終わったら、さっそく起動していきましょう。

下記の画面になっていたら成功です。

これが、完了したら、真ん中の「Open WebStart page」をクリックしましょう。

ページの真ん中くらいの「phpMyadmin」をクリックしましょう。

このような画面が表示されていたら成功です。
英語だとわかりにくいので、ついでに日本語にしておきましょう。

WordPressをインストールする

では、いよいよワードプレスをあなたのローカル環境にインストールしていきましょう。

Windowsの人も、Macの人も現在「phpMyadmin」というサイトが開かれていると思います。

とりあえず、それはそのままにしておいて、ワードプレスをダウンロードしましょう。

では、ワードプレスのダウンロードをしていきましょう。

以下の公式サイトからダウンロードしていきます。

WordPress公式サイト

上記のように進みます。

ダウンロードが、完了したら先ほど放置していた「phpMyadmin」にもどりましょう。

ここで、ワードプレス用にデータベースを作りましょう。

あまり、詳しく理解しなくて大丈夫です。

とりあえず手順通りに進めてください。

上記の通り、順番に進めてください。

これが終われば、この画面はもう使わないので閉じても大丈夫です。

次に、ワードプレスと、今作成したデータベースを接続しないといけませんので、その作業をしていきましょう。

いよいよ、コードを書いていきますが…。

ファイルエディタはありますでしょうか?

ファイルエディタとは、コーディングをしていくための助けをしてくれるソフトのことです。

こんなやつです。

私はAtomを使用しておりますが、別になんでもいいと思うので、とりあえずまだない方は、同じAtomをインストールしておきましょう。

Atom

では、そのファイルエディタを使用して、データベースとワードプレスを接続していきましょう。

ダウンロードしたワードプレスのフォルダの中のファイルをいじっていきましょう。

先ほど、ダウンロードしたワードプレスのフォルダを開くと、こんな感じになっていると思います。

これは、Windowsの画面ですがMacの人も同じです。

この中の、「wp-config-sumple.php」というファイルを先ほどのテキストエディタで開きましょう。

このような画面になったと思います。

これを、書き換えていきましょう。

29行目の

これを、以下のように書き換えます

次に32行目

これを、以下のように書き換えます

そして、最後35行目

こちらをWindows(XAMPP)の人は下記のように書き換えてください。

Mac(MAMP)の人は下記のように書き換えてください。

以上で書き換え終了です。保存してAtomを終了させてください。

そして、保存したファイルの名前を「 wp-config-sumple.php」から「
wp-config.php 」に変更しておいてください。

では、そのワードプレスのフォルダをローカルサーバー上に移動させましょう。

Windowsの人

下記の画像の通り、行っていきましょう。

そして、「htdocs」というフォルダの中に、先ほどダウンロードして書き換えを行った「wordpress」のフォルダを投下してください。

Macの人

finderを開いてください。そして下記の画像通り進めてください。

そして、「htdocs」というフォルダの中に、先ほどダウンロードして書き換えを行った「wordpress」のフォルダを投下してください。

では、いよいよ待ちにまったインストールです。

お使いのブラウザを開いてください。

そして、それぞれに以下のURLを入力してください。

Windowsの方(XAMPP)
http://localhost/wordpress/wp-admin/install.php

Macの方(MAMP)
http://localhost:8888/wordpress/wp-admin/install.php

成功すると、下記のような画面になるはずです。

それぞれの項目に入力していきましょう。

「サイトのタイトル」…好きなタイトルにしましょう。

「ユーザー名」…ログインの際必要になるので覚えられる物にしましょう。

「パスワード」…こちらも、ログインの際に必要になるので覚えられるもので設定しましょう。

「メールアドレス」…あなたのメールアドレスを入力しましょう。

「検索エンジンでの表示」…こちらはローカル環境なのでチェックを外しておきましょう。

すべての項目を入力いただければ、一番下のwordpressをインストールをクリックしましょう!

これで無事インストールすることができました。

今回はここまでです。お疲れさまでした。