【WordPress】Katawaraで本格的な会社ホームページを超高速で作る！！　第１回目

皆さん、こんにちは！！
今日はWordPressで企業サイトを作るのにお勧めの【Katawara】を使用して、企業サイトを爆速で、しかも今どきのおしゃれでかっこいいサイトを作り上げる方法を書いていきたいと思います。

また、今回作る【Katawara】のデモサイトを利用して、何回かに分けてカスタマイズしておしゃれで本格的な企業サイトを作っていきたいと思っています。

5回位でカスタマイズ含め出来上がるかと思いますので、皆さん是非、一緒にやってみてください！！

【Katawara】というテーマは皆さんあまり、比較的新しいテーマなのでご存知ないかもしれませんが、WordPressの世界では超有名な株式会社ベクトル（Lightningが有名ですね。）が作成した全く新しいテーマです。

アイコン名を入力

【Katawara】は、有料テーマにしては金額がかなり安く、機能が豊富で使い放題なので今一番お勧めのテーマです。

サブスクリプションだと更新の度にお金がかかるので、フリーランスの方などは、お客さんに勧めにくいかと思いますが、【Katawara】なら買い切りなので安心してすすめられます！！

Katawaraの特徴などは、下記の記事にまとめてありますので一度読んでみてください。

それでは、さっそっく始めていきましょう！！

ローカル環境にWordPressのインストール

今回は、サンプルサイトなので私はローカル環境にWordpressを構築していきたいと思います。

LAMP環境の準備

私はXAMPPを使用しますが、WordPressを動かせる環境であればどんな環境でも構いません。
XAMPPのインストールは、下記記事で行っていますので気になる方は読んでください。非常に簡単です。

【Windows10 PHPローカル環境構築】学習用途や、開発のテスト環境のために、わざわざサーバーを用意したりVagrantや VirtualBoxの様な初心者には扱いが難しいソ...

参考までに下記の記事でXSERVERでのWordPressの始め方をまとめてありますので、ローカル環境で作らずにWEBサーバー上の環境に構築したい方は一度読んでみてください

【エックスサーバーへWordPressをインストール】 WordPressに関しては、「難しい」「使うまでが大変」といった意見を聞くことも少なくありませんが、この記事を読んでいただけば、まず...

LAMP環境にWordPressのインストール

それでは、WordPressをLAMP環境にインストールしていきます。

WordPressインストール手順

公式サイトから最新のWordPressをダウンロード
ダウンロードしたフォルダの解凍
ルートディレクトリへWordPressフォルダの移動

まず、公式サイトへアクセスし最新版のWordPressをダウンロードしてください。

ダウンロードしたZipを展開してください。

展開した「wordpress-5.5.3-ja」の中に、「wordpress」というフォルダがあるので、ルートディレクトリ（XAMPPの場合、C:¥xampp¥htdocs）直下に移動してください。

データベースの作成

XAMPPの場合、MySQLを立ち上げて「http://localhost/phpmyadmin」へアクセスし、新規データベースを作成してください。
※名前はなんでも良いです。

WordPressでは、Webサーバーだけではなく、データベースも使用するので、XAMPPの「Apache」「MySQL」は起動したままにして下さい。

WordPressのインストール

それでは、Webブラウザから下記へアクセスして下さい。

http://localhost/wordpress

WordPressのインストール画面が開くと思うので、データベース名（先程作成したもの）、ユーザー名、パスワード、（データベースへアクセスするための）ホスト名、テーブル接頭辞を入力し、インストールしてください。

XAMPP環境のデフォルトユーザーは「root」パスワードなしです。

テーブル接頭辞は、セキュリティー対策で「wp_」以外のものを使用する事をお勧めします。

これで、WordPressのインストールは終了です。
お疲れ様です。

Lightning クイックスタート

Katawaraをインストールして、一からサイトを構築しても良いのですが、Lightningのデモサイトを再現するデータが、株式会社ベクトルより提供されていますので、それを使います。

Lightningのインストール

LightningはWordPress公式ディレクトリに登録されているので管理画面から簡単にインストールする事ができます。

管理画面の「外観」→「テーマ」画面で、画面上部の「テーマ」の文字の右の「新規追加」をクリック
画面右上の入力欄に「Lightning」と入力してEnter（Return）
Lightning が表示されるので、クリックしてインストールを完了します。
インストール後、テーマを「有効化」して下さい。

デモサイトのデータをダウンロード

こちらよりよりダウンロードしてください。

プラグイン All-in-One WP Migration をインストール

セットアップに必要なプラグインをインストールします。

管理画面の【プラグイン】>【新規追加】ページを開く
右上の検索窓に「All-in-One WP Migration」と入力
All-in-One WP Migration のプラグインが検索結果として表示されるので「今すぐインストール」をクリック
インストール後「有効化」する

管理画面の左側のメニューに「All-in-One WP Migration」が追加されているのが確認でるかと思います。

デモサイトのデータをインポート

データのインポート前に、WordPressの「最大アップロードファイルサイズ」を確認してください。

変更はphp.iniの設定を変更します。
下記の様に変更してください。

memory_limit = 500M
post_max_size = 400M
upload_max_filesize = 100M

上限値が、100MBになりました。

XAMPPの場合、「C:\xampp\php\」にphp.iniファイルがあります。

変更後、設定反映のためにApacheの再起動を行ってください。

Yuu

デモサイトのデータは70MB位あります。
恐らく、php.iniを編集する必要があるので、変更してください。

【 All-in-One WP Migration 】>【インポート】画面を開く
最初にダウンロードしたファイルをドラッグ & ドロップ
あるいは、画面中央の「インポート元」のメニューを開いて「ファイル」からダウンロードファイルを選択してインポートを開始。

これでデータのインポートが完了します。
デモサイトを再現できたかと思います。

インポートが完了したら、一度ページを更新（リロード）してください。
ユーザー名とパスワードを入力する画面になりますので、

ユーザー名：vektor
パスワード：vektor

にてログインし直します。
※ログイン後、新規管理ユーザーを作成してください。

Katawaraのインストール

それでは、Katawaraをインストールして行きます。
難しいことは無く、

管理画面の【テーマ】>【新規追加】> 【テーマのアップロード】ページを開く
ダウンロードしたKatawaraのZipファイルを選択する
「今すぐインストール」をクリック
インストール後「有効化」する

これで下記の様な画面になります。

ページの構成はデモサイトのままですが、テーマをKatawaraへ変更することにより、左メニューの美しいサイトが出来上がったかと思います。

併せて、「VK Blocks Pro」もプラグインの追加インストールしておいてください。

併せてパーマリンクの更新もしておいてください。

まとめ

今回は、第1回目なので準備としてデモサイトの再現までを行いました。
Lightningのデモデータを使用する事で、ビジネスサイトに必要な構成が瞬時に出来上がるので、後は、テーマを差し替えて画像や文章を変更するだけで、公開出来るレベルになります。便利ですね！！
次回からCSSなどを使用して本格的なカスタマイズをしていきたいと思います。

ここでKatawaraのメリットまとめておきたいと思います。

Katawaraを使用するメリット