プログラム関係の備忘録。技術系記事1000記事以上を目指すブログ
NO IMAGE

【WordPress】 WordPressで超簡単にサイト作りをするための環境設定

この記事の目的

1.簡単にローカル環境にWordpressを設定する。
2.Gitでバージョン管理ができるように設定。
3.簡単にコードを書けるようにエディターを入手する
4.簡単にサイトを作るためにWordpressでbootstrapを使えるようにする。
5.ちょっとした動きなどを簡単に作るためにwow.jsとanimate.cssを使えるようにする。
6.製作がさらに捗るようにツールを入手する
7.実際に作っていく

1.簡単にローカル環境にWordpressを設定する

XAMPP(ザンプ)を使った開発環境の構築、とかではなく、以下のInstantWordpressを使えば5分でローカルに開発環境を作ることができる。(Windowsのみなので、Macの場合はMAMP等で設定が必要)
InstantWordpressのインストールと設定方法などは無数に記事があるため割愛。
設定方法などの記事。
https://nelog.jp/instant-wordpress
Instant WordPressのダウンロードは以下より。
http://www.instantwp.com/

2.Gitの設定

Gitを使えるようにすることでバージョン管理ができるようになるため、開発環境がかなり便利になる。
Gitについての簡単に解説は以下の記事を参照。
Gitって?
個人でバージョン管理をするなら以下の設定で簡単にできる。
Windowsで一番簡単なGit導入方法とは?

3.エディターを入手する

使いやすいものを入手する。
おすすめはこちら
【高機能エディタ】 ATOMが一番使いやすいかもしれない

4.簡単にサイトを作るためにWordpressでbootstrapを使えるようにする

フレームワークを読み込むようにしておけば、簡単に今風のデザインでレイアウト作成ができるので、bootstrapの設定をしておく。
【wordpress】 BootStrapを使ってwordpressテーマを自作する方法1

5.ちょっとした動きなどを簡単に作るためにwow.jsとanimate.cssを使えるようにする。

上記と同じくcssのフレームワークを使ってちょっとしたアニメーションをクラス指定のみで実装することができるように、以下wow.jsとanimate.cssの設定をする。
【HTML/CSS】 簡単にアニメーション効果を与えるAnimate.cssとwow.jsの使い方

6.製作がさらに捗るようにツールを入手する

ツールは探すといくらでもあると思うが、特に使いやすいツールを2つ紹介。

clibor

クリップボードをいくつも記録しておくことができるので、コピペがかなり使いやすくなる。定型文の読み込みも容易。
http://forest.watch.impress.co.jp/library/software/clibor/

screen presso

スクショを撮って注釈を加えるときに便利なツール
https://nelog.jp/screenpresso

gimp

photoshopのフリーソフト版のような立ち位置のソフトで、使い方などは似ている。photeshopを触ったことがある場合は使いやすいと思うが、そうでない場合は学習コストがかかるが、覚えて損はないと思う。
http://forest.watch.impress.co.jp/library/software/gimp/

7.実際に作っていく