WEBサイトを一から作るための解説ブログ

あなたが初めてサイトを作るための解説をします

wordpressでサイトを作る解説1回目、まずは準備しよう

wordpressでサイトを作る解説1回目、まずは準備しよう

1回目の解説の目標

1回目の解説の目標はこのサイトを作成するにあたって使うエディタの設定とサイトを作成するための開発環境の作成です。

まずはエディタの設定からです。

 

エディタはVidual Studio Codeがお勧め

エディタはVidual Studio Code(VScode)が使いやすいのと昨日が充実しているのでおすすめです、実務経験を始めてからも使うと思うし私は使っています。

ここからダウンロードページに飛びます、すると↓の画面になるので赤色の枠で囲った所をクリックします。

すると↓の画面になるので赤色の枠で囲った部分からダウンロードします、うまくいかない時は私に質問するかググって下さい。

Vscodeのダウンロードのやり方に関してはいっぱい解説があるはずです。

VSCodeは拡張機能が便利で私はずっと使っていますがいっぱいあるのでサイト作成で私が必要と思う機能だけ紹介します。

 

zenkaku

これを入れないとコードに全角でスペースを入れてエラーになったらどこが間違っているか分からなくてイライラしますが白色が付いて気がつくようになっています。

ちなみに拡張機能の追加はVSCodeを開いて画面左上のメニューの表示(英語の場合View)>拡張機能(英語の場合Extensions)から追加します。

そして画面左上の赤枠の所に「zenkaku」と入力します。

すると↓の画面になるので赤枠をダウンロードしてください。

Auto Close Tag

これはHTMLの閉じタグを自動で入れてくれるのでコードを書く量を減らせます

例えば<p>と書けば自動で</p>が付きます。

 

Emmet

これは本当におすすめです、例えばdisplay:flex;と入力する時「df+tab」でよくコードを書く量を大幅に減らせます

display:flexをEmmetで入力した場合

普段コーディングする時にずーっとやってると肩の凝りが凄いですがEmmetを使ってから肩の凝りを減らすことができました。

ちなみにEmmetはVscodeに最初から入っているので拡張機能の追加はしなくていいです。

ショートカットキーは↓によく使う物が載っていますが「これはショートカットできないかな?」と思ったらググってください。

よく使う物はここから

拡張機能で必要なのはこれ位だと思いますが他にもないか探したかったらググると色々見つかります、私は他にも何個か入れています。

LPを作るなどのコーディングをする時はlive serverがめっちゃおすすめです。

コーディングして画面を更新(リロード)する時はcommand+Rですがコードを変えれば勝手に画面が更新されます。

 

開発環境

ローカル環境(自分のパソコンのこと)でサイトを作りますが私はMAMPを使っているのでそれで説明をしますが他にもあるので気になる人はググってください。

MAMPをダウンロードしてデータベース(wordpressを使えるようにする場所みたいな物です)の作成をしてそこにwordpressを設置する方法はMAMPのバージョンが上がるとやり方が変わる可能性があるので他の人のサイトに載っているやり方を掲載します。

https://www.expexp.jp/wordpress-mamp/

それが終わったらコーディングのデータをMAMPの中に入れます。

まずFinderを開きます。

Finder

 

そしてアプリケーション > MAMP > htdocs > あなたが付けたwordpressのフォルダ名 > wp-content > themes >「 」の「 」の中にコーディングデータを起きます。

赤枠の中にコーディングデータを置きます。

 

最初は探すのに時間がかかると思いますが私も最初は探すのに時間がかかっていました、でもその内慣れるから大丈夫です

それでは解説を終わりますが2回目の解説から開発が始まり知識がいーっぱい入ってきて大変だとは思いますが慣れますので諦めずに根気強く頑張って下さい。

それと頭が情報でいっぱいになったら少し休憩した方がいいです。

ここまで説明を読んでくれてありがとうございました。