Fラン大卒の海外就職

英語、カナダ生活、ウェブデザイン、学校とか趣味も

ローカル開発環境でワードプレスオリジナルデザインを開発しよう1開発環境編【HTML, CSS, JavaScript, PHP, WordPress初心者】

f:id:sgwshu:20181128184319j:plain
はい、こんにちは。自分的には学んだことメモなんですがワードプレスのコード解説とかフォルダ構成とかいろいろ解説できたらいいなと思います。
まずは今日はとりあえずワードプレスって何?ってとこからです。

ちなみにこのシリーズでは

  • HTML5
  • CSS3
  • JavaScript(例えばJavaScriptで言うとこのみたいな書き方をするかもしれないのでwでもほとんどいらないです)
  • PHP(超基本、もしくは、不要)

が必要です。

ワードプレスとは

WordPress - Wikipedia
ウィキ参照で、簡単にまとめるとPHP(プログラミング言語)とMySQL(データベース)できたブログを作ることにコンテンツマネージメントシステムです。ちなみにはてブもコンテンツマネージメントシステムなんですが、ワードプレスはタダでさらにある程度知識さえあれば基本なんでも改造しちゃえます。
さて、今回の記事ではとりあえずローカルサーバーを使ってワードプレスで
”こんにちは世界”
を表示するまでやってみようと思います。

必要なもの

  • Mac(全部Mac基準で話進めます)
  • MAMP ダウンロードはこちら→MAMP & MAMP PRO
  • なんかエディター(VScode, Sublime Textとか)
  • WordPressそのもの ダウンロードはこちら→日本語 — WordPress
エディター

VScode→Visual Studio Code - Code Editing. Redefined
SublimeText→Sublime Text - A sophisticated text editor for code, markup and prose
ちなみに僕のエディターはVScodeです

セットアップ

最初にすること

ダウンロードしたワードプレスを解凍

MAMPを起動

ファインダー>アプリケーション>MAMP(灰色のフォルダみたいなアイコン)>htdocs
と開いてhtdocsの中に解凍したワードプレスのフォルダを入れます。
そしてこのOpen Web Start Pageを押して
f:id:sgwshu:20181128172444p:plain
このURLをクリック
f:id:sgwshu:20181128172651p:plain
するとこのごちゃごちゃしたとこにリンクするのでDatabaseというとこをクリックします。
f:id:sgwshu:20181128172500p:plain
Create databaseの下のバーに名前を入れます。(今回は適当でいいですが次回からはサイト名等を入れるとわかりやすいと思います)
f:id:sgwshu:20181128172506p:plain
またMAMPのOpen Web Start Pageより先ほどのページに戻り今度は左上のMy Websiteをクリック
f:id:sgwshu:20181128173415p:plain
そしてこの真っ白なページからwordpressをクリック(もしフォルダ名を変えてる場合は違う名前)
f:id:sgwshu:20181128173420p:plain
するとワードプレスが起動して言語を聞いてきます。わかりづらいけどどこかに日本語があるので探してねw
f:id:sgwshu:20181128173426p:plain
インストールをクリック。
f:id:sgwshu:20181128173510p:plain
するとデータベース名とか聞かれるのでこの画像の通りに入力してください。

  • データベース:先ほどCreate Databaseで作った名前
  • ユーザー名:root
  • パスワード:root
  • データベースのホスト:localhost
  • 接頭辞:wp_

f:id:sgwshu:20181128173515p:plain
そしてサイト情報を入力。今回はサイトのタイトルを適当にサンプルにしてますがなんでもOKです。
あとユーザー名とパスワードはログインする際に必要なので覚えやすいのを指定して、メールアドレスはそれらのログイン情報を忘れた時にリセットするために必要なので入力します。検索エンジンでの表示は今回はローカルでの開発になるのでチェック不要です。
f:id:sgwshu:20181128173500p:plain
ワードプレスをインストールするとログイン画面に移るので今作ったユーザ名(もしくはアドレス)とパスワードを入力します。
f:id:sgwshu:20181128173451p:plain
はい、これでダッシュボードに入りました。
あなたのサイトはここをクリックすると見れます!!!!(デフォルトですが)
f:id:sgwshu:20181128175941p:plain

記事を投稿する

ではラストスパート。
またダッシュボードに戻り、投稿にマウスをホバーさせて投稿一覧をクリック。
f:id:sgwshu:20181128180530p:plain
するとHello Worldと出てきます。日本語でダウンロードしたのに英語とは...
新規追加をクリックして
f:id:sgwshu:20181128180646p:plain
っと言うことでこんにちは世界と言う記事を追加します。
f:id:sgwshu:20181128180853p:plain
そしてまた左上のサイトタイトルをクリックしてサイトをチェックするとなんとこんにちは世界が登場。
f:id:sgwshu:20181128180933p:plain

これでローカル開発環境にワードプレスをセッティングしました。
今回、コーディングはありません。次回から本格的にウェブサイト+ワードプレスでサイトを作っていきましょう!!!

See Yaaaaaaaaaaaaa!!!!!!