田舎フリーランス養成講座サイト制作学習【WordPress編】

wordpressとは?

wordpressとは、簡単にいうと誰でもブログ機能を作ることができるもので、CMS(Webサイトの制作に必要な専門知識を必要とせず、テキストや画像などの情報を入力するだけで、サイト構築を自動的に行うことが出来るシステム)の一つです。

wordopressについては以下を参考にしてみてください。

【イラスト解説】WordPressでweb制作をするまでを宇宙一わかりやすく解説してみた

2018.09.11

wordpressのシェア率はとても多く、需要があり高単価を狙うことができます。wordpressの基本的な講座、開発方法について学び、案件獲得に繋げましょう。

 

MAMPをインストールしよう

wordpressはサーバー環境がないと起動できません。それをローカルで構築できるのがMAMPです。

まずはこちらからMAMPをダウンロードしましょう!

wordpressを開いてみよう

次にwordpressのフォルダ一式をダウンロードします。

 

データベースから設定しよう

wordpressはMysqlというオープンソースのデータベースが使われています。

詳しくはこちらを見てください。

まずMAMPの起動画面からOpen WebStart pageを選択します。

↓ToolsからphpMyAdminを選択します。

Databasesをクリックします。

Create databaseの欄にmarumoと入力し、utf8_general_ciを選択、Createをクリックします。

WordPressを起動しよう

次にwordpressを起動します。

↓MAMPのMyWebsiteをクリックします。

↓この画面に出たら「さあ、始めましょう!」をクリックします。

↓この画面になったらデータベース名の欄にmarumoと入力します。これは先ほどphpMyadminで設定したmarumoのことです。

ユーザー名、パスワードはrootと入力し、送信をクリックします。

インストールを実行をクリックします。

↓以下項目を各自で埋めて行きます。パスワードは今回は簡単なものでOKですが、実際のサーバーに置く時は複雑にしておくことだけ注意しておきましょう。

 

↓ユーザー名とパスワードを設定します。(各自の設定で大丈夫です)

これでwordpressが使えるようになったかと思います!

インストールについてはこちらの記事を参考にしてください

 

管理画面からいじってみよう

wordpressを使ってブログを書いている方は馴染みがあると思いますが、wordpressの管理画面を触って何ができるのか理解しましょう。

投稿してみよう

wordpressの一番の強みは投稿機能にあります。投稿画面から投稿をしてみましょう!

テーマを変えてみよう!

wordpressは見た目の着せ替えがとても簡単です。今回はオリジナルのテーマを作成して行きますが、その前にテーマについても触っておきましょう!

↓まず「外観」で「テーマ」をクリックします。

 

↓次になんでもいいので今適応されていないテーマを選んで「有効化」をクリックしてみてください。

 

これでテーマが変わり、サイトのデザインの着せ替えが完了したと思います!このようにwordpressはテーマという存在があり、変更が簡単にできます。

 

テーマを作ろう

いよいよここからテーマを作成していきます。

まず最初に最低限のテーマ 作りをしてみましょう。wordpressのテーマとして反映させるには

index.php

style.css

この2つさえあればテーマとして認識させることができます。まずはこれから作成していきましょう。

指定場所にフォルダを作る

今までに作ったコーディングのデータをMAMP内のwordpressに反映させるため、以下のようにフォルダを置きます。

↓まずアプリケーション内にあるMAMPをクリック。

↓この中にあるhtdocsを開きます。

 

↓その中にダウンロードしたwordpressのzipを入れます。

 

↓zipを解凍し、解凍されたデータをmarumoと名前変更します。

 

marumoを開き、wp-contentをクリックします。

↓その中のthemeを開きます。

↓中身はこんな風になっていると思います。

 

↓この中に新規フォルダを作成し、名前をmarumoとします。ここから先はこのフォルダのことをテーマフォルダと呼んでいきます!

テーマ のためのファイルを作る

次にこのmarumoというテーマがきちんと反映されるように中のファイルを作成して行きます。テーマを作成するには、先ほども説明した通り、index.phpとstyle.cssが必須になります。

まずはそれを作ります。

↓こちらのmarumoフォルダをVScodeで読み込みます。

その中にindex.phpとstyle.cssを作ります。

これでindex.phpとstyle.cssが作成できたので、テーマ として反映されているはずです!次はテーマ が反映されているかどうかを確認してみましょう。

ファイルの中身を入れよう

次にファイルの中身を作って行きます。まずは前回コーディングしたまるものサイトのデータを用意しましょう。

まず、その中のindex.htmlの中身を全てコピーして、今回のテーマフォルダのindex.phpにペーストします。

次にコーディングデータのstyle.cssを全てコピーし、テーマフォルダのstyle.cssにペーストします。

画像フォルダを入れよう

画像フォルダもテーマフォルダの中にいれておきましょう。コーディングデータの画像フォルダをフォルダごとコピー、テーマフォルダ内にペーストします。

以上のように,marumoというテーマフォルダの中に、index.phpとstyle.cssとimgが同じ階層にあることを確認しましょう。

style.cssにテーマの反映のためのコードを書こう

ここまでできたら、テーマフォルダのstyle.cssの先頭(一行目)に以下のコードを追加します。そうすることでテーマとして認識されます。

管理画面から確認してみましょう。

外観→テーマに進み、以下のようにmarumo-themeが追加されていれば成功です!

↓こちらの有効化をクリックし、

↓ここからホーム画面に移動します。(表示や名前は一致していなくて問題ないです笑)

するとこんな画面になったかと思います。

あれっcssが適応されていないですね。

これはwordpressではファイルパスの記述を変えなければならないのが理由です。次でcssを再度適応させていきましょう。

ファイルパスをし変更しよう

wordpressでは独自のタグでファイルパスを変更する必要があります。

cssのファイルパスの部分に以下のコードをいれます。

 

↓現状、以下のようになっているcssパスの部分を

↓cssのリンクを以下のように反映させてみましょう。

今回はstyle.cssはcssフォルダの中に入っていない点に注意しながら、同じファイルパスになるようにしてみましょう。

phpのタグの最後にスラッシュ(/)を入れることも忘れずに。

これで更新し、再びホーム画面をみてみます。

どうやらcssは繋がったようですが、今度は画像がまだのようです。こちらも同じタグを埋め込むことによって表示させることができます。

画像を表示させる

画像も同じようにパスをつなぎ直す必要があります。

imgタグのファイルパス部分にも同じコードを埋め込みます。

↓これを

↓こうします。

これで画像が表示されたかと思います!

もし背景画像などでcssに書いた画像が表示されない場合は、ファイルパスを見直してみましょう。(../になっているなど)

このようにwordpress専用のタグがいくつか存在し、それを使うことによってwordpressとの連動することができます。詳しくはこちらも参考にしてください。

使うとこだけ!WordPressでよく使うPHPまとめ

2018.12.04

パーツ分けをしよう

次にパーツ分けをしていきます。このブログ自体もwordpressですが、たくさんのページで構成されていても、ヘッダー、フッターなどは一緒ですよね。

これは共通して使うものにパーツを分けておくと何度も繰り返し使用しやすくなりますし、コードも見やすく短縮できます。そのための処理をおこなっていきましょう。

まず、共通部分となるheader.phpとfooter.phpのファイルを作成します。

このようになれば大丈夫です!

index.phpの中身を移動させよう

次にindex.phpの中身を切り分けていきます。まずはheader部分(大きい画像の前まで)を洗濯し、切り取り、header.phpに貼り付けます。

なので、index.phpのメタ情報等含め、上からこのパーツまでのコードに当たります。

 

次にfooterも移動させます。footerのこのパーツに当たるコードと、index.phpのコードの最後までを切り取り、footer.phpに貼り付けます。

 

これで一旦ホーム画面をのぞいてみましょう。

cssが外れ、ヘッダーのナビゲーション、フッターが表示されない作りになっているかと思います。これを紐づけてみます。

index.phpを開き、一番上に以下をいれます。これはheader.phpを呼び出すためのコードです。

 

次にindex.phpの一番下に以下をいれます。これはfooter.phpを呼び出すためのコードです。

 

これでもう一度表示を確認して見ましょう。

これで表示が元に戻ったと思います。

wordpressの情報を読み込むためのコードを入れよう

このままでも表示されるのですが、wordpressにはプラグインなどがあり、それがオリジナルテーマでもしっかり反映されるようにコードをいれていきましょう。

まずheader.phpを開き、</head>の直前に以下のコードをいれます。

↓この場所になります。

 

次にfooter.phpを開き、</body>の直前に以下をいれます。

↓この場所になります。

詳しくはこちらを参考にしてください。

 

ロゴのリンク先をトップページにしよう

ロゴをクリックするとトップ画面に行くように設定しましょう。

ホーム画面のためのタグはこちらです。

header.phpを開き、ロゴのリンク先になっている部分(aタグに指定していない方はしておきましょう。)に埋め込みます。

これで完了です。