田舎フリーランス養成講座サイト制作学習【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タグに指定していない方はしておきましょう。)に埋め込みます。

これで完了です。

 

 

ブログ部分を表示させよう

次にこのブログの部分を更新に合わせて変化するように作っていきましょう。

この部分がwordpressの管理画面の投稿に合わせて変化するようにコードをいれていきます。今回はトップページに3記事、新着記事を表示させるという仕組みを作っていきます。これは実案件でもよくあります。

functions.phpを作成しよう

functions.phpとは、wordpressの脳のようなものです。こちらにコードを追加していくことで、様々な機能を追加することができます。

今回のブログ部分でもアイキャッチ画像が出てくるので必須の部分です。では作成していきましょう。

まず、functions.phpというファイルを作成します。

ここでは投稿時にアイキャッチ画像を入れることができるように設定していきます。

管理画面の投稿に行き、確認してみましょう。

現時点では、 投稿にアイキャッチ画像を表示という項目がありません。

 

これを表示できるような項目をfunctions.phpから作成してみます。

 

functions.phpを開き、以下のコードをペーストします。

 

管理画面の投稿に戻り、アイキャッチが追加されているか確認してみましょう。

このように追加されていることが確認できます!

次に新規投稿から3記事以上何か投稿してみましょう!

タイトルとアイキャッチを適当にいれて3記事ほど作ってみましょう

投稿一覧から見て、こんな感じになればOKです。

 

ブログ表示のループを入れよう

ブログの表示をさせて行きましょう。

今回に必要な表示は

①ブログのパーツをクリックすると内容のページに飛ぶ

②アイキャッチ画像を表示させる

③ブログの日にちを表示させる

④ブログのタイトルを表示させる

この4つです。これでなんの実装が必要か明確になりました。

次にindex.phpにあるこのパーツ↓の部分はコードのどこなのか確認しましょう。

見本コードの場合、ここにあたります。

 

現在はこれが3つ分書かれていますが、今回の実装ではループ処理で自動的に3記事表示されるので、1つにします。

 

このパーツが一つになるように残りの2つを消してみましょう

このように表示されていれば大丈夫です。

このパーツを先ほどのループの中にいれます。

まず最初にループというものを作ります。今回の場合は最新の記事を3記事表示させる処理ですので、サブループというものを使ってこのコードをいれます。この辺は難しいのでなんとなくの理解で大丈夫です。

コードは以下です。

 

これをコピーして、先ほどのパーツのすぐ上にペーストしましょう。見本コードの場合、この位置になります。

次にループの中にある「この中にパーツをいれます」の中にブログのパーツをいれます。

「この中にパーツをいれます」という文を消して、先ほど確認したパーツをこの中に移動させましょう。

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

ループで必要なタグを埋め込もう

次に投稿のリンク、アイキャッチ画像、タイトルが表示されるようにタグをいれて行きましょう。

投稿のリンク(url)を作るタグを入れよう

まず最初にこのパーツをクリックするとそのページに飛ぶように処理をします。

この時点でパーツを囲っているものがaタグでない時はaタグにして、リンク先が指定できるように直しましょう。

見本コードだとこの部分に、タグを埋めます。

この中に以下のコードをいれます。

↓投稿のリンク(url)を作るタグ

こうなればOKです。

 

アイキャッチ画像を表示させるタグを入れよう

次にアイキャッチを入れましょう。

見本コードでいうとこの部分を入れ替えます。

以下のコードをいれます。

↓投稿のアイキャッチを表示させるタグ

 

こうなればOKです。

投稿のブログの日にちを表示させるタグを入れよう

次に日にちをいれましょう。見本コードでいうとこの部分を入れ替えます。

ここに以下のコードをいれましょう。

↓投稿のブログの日にちを表示させるタグ

 

 

投稿のブログのタイトルを表示させるタグを入れよう

最後に投稿のブログのタイトルを表示させるタグをいれましょう。

ここに以下のコードをいれます。

↓投稿のブログのタイトルを表示させるタグ

 

これで必要な情報はループの中に入れることができました。ホーム画面に戻り、表示を確認してみましょう。

このように表示されていればOKです!新着順に3記事表示させることができました。アイキャッチや日にちなども投稿したものが反映されているかと思います。

ループについてはこちらの記事も参考にしてください

 

 

個別ページを作ろう

次に投稿したブログの中身が見れるように phpのファイルを追加していきます。

bodyにタグを入れよう

たくさんのphpを作る前に、以下のことを行いましょう。

bodyタグに以下のコードを埋めることにより、より効率的にクラス名を当てやすくなります。詳しくはまた出てくるので、まずは導入してみましょう。

↑これをbodyタグにいれます。

header.phpを開き、<body>タグの中に

↓以下のようにいれます。

 

single.phpを作ろう

投稿のページを作るにはsingle.phpという名前でファイルを作成します。phpの名前はwordpressの規則により決められており、それにしたがって作成することによってwordpressが自動的にファイルを当てはめてくれます。

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

まずテーマフォルダ内に新たにsingle.phpを作成します。

その中に以下のコードをコピペしましょう。

 

このページをクリックしてみましょう。

↓するとこのように表示されていると思います。(見本コードは<div class=”inner”>でinnerに幅指定、中央寄せにしているのですが、みなさんのコードでinnerに幅指定をしていない場合、文字がぴったり画面の端によっているかもしれません。)

ここで簡単にコードの解説です。

ここから少しcssでスタイルを調節して行きましょう。

cssをつけよう

まず、このページ(single.php)を検証機能でみてみましょう。

bodyのタグをみてみます。すると、このように指定した覚えのないクラスがつけられていることがわかります。

これは先ほどつけた<body <?php body_class(); ?>が反映されたからです。各ページごとで自動でクラスを付与してくれるので、制作の効率をあげることができます。

このページのh2(見出しタグ)のみにcssを追加しましょう。今回はこんな感じにつけてみます。(今回のは最低限ですので、また時と場合によってcssを追加してくださいね)

 

このように個別ページに対してcssをつけていくことができます。反映されたか確かめたら次に行きましょう。

page.phpを作ろう

先ほどのsingle.phpを作った時と同じように、page.phpも作成します。

次に先ほど作ったsingle.phpの中身をコピーし、page.phpに貼り付けましょう。

これで、固定ページができているか確認してみます。管理画面の固定ページを選択→表示から中身をみてみましょう。

 

同じようになればOKです!

 

 

トップページと記事一覧ページを作ろう

次にトップページと記事一覧ページを作ってみましょう。投稿ページと固定ページ、トップページと記事一覧ページでは何が違うのか混乱しがちですが、詳しくはこちらの記事をみてみましょう

front-page.phpでトップページをつくろう

まず最初にトップページを作成しましょう。トップページにはfront-page.phpのファイル名が適しています。

テーマの中に新たにfront-page.phpを作成し、index.phpの記述を全てコピーして貼り付けましょう。

 

home.phpでブログ一覧ページを作ろう

次にブログが一覧で並ぶページを作ってみたいと思います。ブログ一覧ページを作るにarchive.phpを作ります。テーマの中にhome.phpを作りましょう。

ここに一覧を表示させるための簡単な実装をしてみましょう。

テーマの中にhome.phpを作成し、home.phpに以下の記述をします。

 

この中に含まれるコードはループというもので、wordpressのデフォルトのループ処理にの新着の投稿記事を出力します。

これで投稿記事の一覧の表示はできるようになったはずです。次はこれを実際にページを作って確かめてみましょう。

管理画面から設定しよう

次に管理画面から一覧ページの設定をしていきます。

wordpressは本来、ブログ記事一覧ページがトップにくるような仕様になっていると思います。しかし、コーポレートサイトなど、トップページを記事一覧にしない仕様にするには少し設定が必要です。

 

 

まず固定ページから新規追加で、トップblogというページを作ります。中身は空っぽで大丈夫です。合計2つ作ります。

blogページにはスラッグ名がblogになるように設定してください。

 

次に設定>表示設定に行き、以下のように設定しましょう。赤枠のようにできたら変更を保存をします。

 

 

ブログページのメニューのリンクを作ろう

メニューのBlogという部分をクリックすると記事一覧ページに飛ぶようにリンクを設定しましょう。

記事一覧ページはblogというスラッグ名のはずなので、そのページに紐付けします。

以下のコードをBlogのリンク部分に書き換えます。

これでBlogページをクリックすると記事一覧に飛ぶと思います!

 

 

 

ここまでで最低限ですが、実務で使うwordpressのサイトの作り方を説明してきました。まだまだ理解しきれないところがあると思いますが、何回も繰り返してやっと身についていくものですので、コーディングでしたら5サイトの模写、wordpressのテーマ作成でしたらもう一回作成すれば身についてくると思います。

wordpressの教本について、一番おすすめしたい本を紹介します。WordPress標準デザイン講座は実務で使うところを豊富に取り入れていてわかりやすい本なので、とてもおすすめです!時間があればぜひやってみてください!