えもんブログ

社内SEのひとりごと

【初心者向け】WordPressで簡単に良い感じのサイトを作成する【ローカル環境】

スポンサーリンク

こんにちは、えもんです。

 

今回は、WordPressでサクッと良い感じのサイトを作成したいと思います。

 

WordPressとは

WordPressとはCMSContent Management System)の一つで、おしゃれなブログやサイトをサクッと作ることができます。

WEB上の33%のサイトがWordPressで作成されているとも言われており、また、無料で利用可能なため、様々な場所で使われています。

 

 

ZOZOで有名なスタートトゥデイのHPもWordPressで作成されています。

 

corp.zozo.com

 

このようにかっこいいサイトをHTML,CSSの知識なし自分で一から作ることが可能です。

WordPressであっても、HTML,CSSの知識は持っておいたほうが良いです。

 

サイトを作ること自体はそこまで難しくは無いのですが、慣れるまでに少し時間がかかるので、実際に自分で手を動かして作ることをおすすめします。

 

WordPressを使ってサイト作ってみた

実際に作ってみました。公開する場合は自前でサーバを用意する必要がありますが、

今回はローカル環境(Vagrant)で構築したいと思います。

 

ローカル開発環境

OS:CentOS 6.8

DB:MySQL 5.6.44

Webサーバ:Apache/2.2.15

 

ローカル開発環境の構築は自分の好きなようにして良いと思いますが、はじめての方はドットインストールの講座をおすすめします。

ローカル開発環境の構築 [macOS編] (全14回)

 

インストールと設定

  1. WordPressの ダウンロード
    https://ja.wordpress.org/からWordPressの基本となるファイルをダウンロードします。

    f:id:emonnao:20190512121410p:plain

    リンク先のwordpress-5.2-ja.zip(2019/5/12時点)ファイルをダウンロードをして、任意のフォルダに保存してください。
    ちなみにファイルの構成は下記のようになっています。

               f:id:emonnao:20190512121640p:plain

  2. ローカル開発環境上でMySQLの設定
    開発環境が構築できたら、MySQLの設定をしていきます。

    mysqlにログインしてコンテンツを保存するデータベースを作成します。
    今回は「wordpress」というデータベースを作成しています。
    create database wordpress;
    作成したデータベースに対して操作権限をつけてあげます。
    事前にtest@localhostユーザを作成してパスワードを設定しています。
    grant all on wordpress.* to test@localhost IDENTIFIED BY 'password';
  3. ローカル開発環境上にWordPressのファイルを設置
    FTPソフトなどを利用して先程ダウンロードしたWordPressのファイル群をローカル開発環境に設置します。
    wordpress-5.2-ja.zipの中身をまるごと開発環境上の/var/www/html配下にコピーします。

           f:id:emonnao:20190512135003p:plain

  4. WordPressの設定ファイルを更新する
    MySQLの設定をwp-config-sample.phpに記述していきます。
    wp-config-sample.phpはwp-config.phpに名前を変更してください。
    先程作成したDBを基に、データベース名とユーザ名、パスワードの部分を変更します。
    // ** MySQL 設定 - この情報はホスティング先から入手してください。 ** //
    /** WordPress のためのデータベース名 */
    define('DB_NAME', 'wordpress');
    
    /** MySQL データベースのユーザー名 */
    define('DB_USER', 'test');
    
    /** MySQL データベースのパスワード */
    define('DB_PASSWORD', 'password');
    
    /** MySQL のホスト名 */
    define('DB_HOST', 'localhost');

    次に認証用のキーを更新します。

    define('AUTH_KEY',         'put your unique phrase here');
    define('SECURE_AUTH_KEY',  'put your unique phrase here');
    define('LOGGED_IN_KEY',    'put your unique phrase here');
    define('NONCE_KEY',        'put your unique phrase here');
    define('AUTH_SALT',        'put your unique phrase here');
    define('SECURE_AUTH_SALT', 'put your unique phrase here');
    define('LOGGED_IN_SALT',   'put your unique phrase here');
    define('NONCE_SALT',       'put your unique phrase here');


    https://api.wordpress.org/secret-key/1.1/salt/
    上記サイトにアクセスし、WordPress.org の秘密鍵を生成することも可能です。

    更新したあとにローカル開発環境にアクセスすると下記のようなWordPressの初期設定画面が現れるはずです。

    f:id:emonnao:20190512141734p:plain

     

  5. 必要情報を入力してWordPressをインストール

    サイト名、ユーザ名、パスワード、メールアドレス、等を入力し、WordPressをインストールボタンをクリックすると下記のような画面が現れます。

    f:id:emonnao:20190512142100p:plain

    ログインすると下記、WordPressの管理画面が現れます。

    f:id:emonnao:20190512142104p:plain

    左上の「サイトを表示」をクリックします。

    f:id:emonnao:20190512142738p:plain

    するとデフォルトで設定されているWordPressの画面が現れます。
    カスタマイズしておしゃれなサイトを作っていきましょう。
    f:id:emonnao:20190512142745p:plain
    テーマを変更するだけで、下記のように簡単に外観を変えることが可能です。

    f:id:emonnao:20190512143301p:plain

    このようにWordPressを使えば、HTML,CSSを直接触らずともおしゃれなサイトやブログを作成することができます。

    参考
    https://ja.wordpress.org/

    WordPress入門 (全23回) - プログラミングならドットインストール