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

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

wordpressでサイトを作る解説2回目、パーツの作り方

wordpressでサイトを作る解説2回目、パーツの作り方

2回目の解説の目標

2回目の解説の目標はヘッダーとメインとサイドバーに切り分けることです。

まずはMAMPを起動してwordpressの管理画面を開く所から説明します。

 

MAMPを起動してwordpressの管理画面を開く

まずはMAMPを起動しますがパソコン画面の下にあるバーの中のLaunchpadをクリックします。

パソコン画面の赤枠で囲まれた所がLaunchpad

 

そうするとアプリケーションがずらっと出てくるのでMAMPをクリックしてください。

赤枠の中がMAMPのアイコン

すると↓の画面が出るので赤枠をクリックしてください。

 

 

すると↓の画面になってあなたが付けた名前のファイルが表示されます。

黒色の部分は私のファイルなので隠しています

 

そしてあなたが付けた名前のファイルをダブルクリックすると矢印の画面になるので赤枠(サイト名)をクリックします。

赤枠はあなたがつけたサイトのタイトルです

赤枠が出ていなく↓の場合があります。

 

この場合は画面の上にあるURLを入力する所の最後に「wp-login.php」と入力してください。

赤枠を書き足してください

そうするとwordpressのログイン画面になってログインすれば赤枠(サイト名)が表示されます。

私が初めてwordpressを触った時に赤枠(サイト名)が表示されなくて相当焦りました。

万が一ログインできない場合は質問してください、ここで挫折するのはもったいないです。

本当はググった方がいいのですが初心者にとって何でもかんでもググれは私は間違っていると思いある程度慣れてからググる癖を付ければいいだけです。

赤枠(サイト名)をクリックしたら↓の画面になりますがこれがwordpressの管理画面です。

wordpressの管理画面

テーマを使えるようにする

そして↓の画面の赤枠の「テーマ」と書いてある所をクリックします。

テーマは何かですがWEBサイトってサイトによって見た目が違いますよね?

サイトの見た目を変える物という認識で大丈夫です、着せ替え人形の服みたいな感じです。

テーマをクリックすると画面の下に↓が表示されるはずです。

「名前」が3つ表示されていますがあなたの画面は1つしか表示されていないと思います

これをテーマにして使うのですがそのためには「index.php」「style.css(cssフォルダの中にあるstyle.cssではないです)」というファイルが必要と覚えてください。

コーディングデータの中に「index.html」がありますがダブルクリックしてファイル名を「index.php」に名前を変えます。

「style.css」は↓の画面の赤枠の中に作ります。

まだstyle.cssがない状態なので置きます

 

ファイルの作り方はvscodeを開いて「command+N」でできます。

style.cssですが↓を書きます。

そのまま使っても問題ないですが変更してもいい部分を説明します。

2行目のTheme Name:あなたのWEBサイトの名前を付けて下さい。

3行目のDescription:あなたのWEBサイトがどういうサイトかの説明です。

5行目のAuthor:あなたの名前を付けて下さい。

それが終わってテーマの画面をリロードしてください、ショートカットはcommand+Rです。

そしたらテーマが表示されますので有効化してください。

赤枠の中のテーマを有効化してください

そして管理画面の一番左上のサイト名をクリックするとトップページになります。

トップページですが↓になるはずです。

この画面はエラーではないです

こうなったのはCSSが読み込まれていないからです。

コーディングの時にCSSを読み込む時は例えばindex.htmlの中の<head></head>の中に↓の様にします。

しかしwordpressの時は書き方が変わります。

index.phpをvscodeで開いて「css/style.css」を「<?php echo get_template_directory_uri();?>/css/style.css」に変えてください。

コピペするのではなくちゃんとコードを書いてください、ちょっとしたことですが書いた方が定着がよくなります。

「<?php echo get_template_directory_uri();?>」でテーマフォルダまでを読み込むための記述と思っていいです。

最初は違和感があると思いますが何度も書いている内に勝手に覚えます。

書き換えるとトップページが↓になります。

この状態はまだ画像が読み込まれていないので画像が表示されていません。

だから画像を読み込む為のパスを変えます。

CSSを読み込んだ時とやり方が同じです。

「index.php」の中の<!–ここから1つの記事–>〜<!–ここまで1つの記事–>の「〜」にパスはあります、4行目の「images/site-article1.jpg」を変えます。

<img src=”<?php echo get_template_directory_uri();?>/images/site-article1.jpg”>に変えるのですが変える部分を何度も探して変えると変更する場所が多いと大変になりますよね?

こういう時は↓の様に6ヶ所ある変更するコードの一番最初の部分を探してなぞります。(最初は61行目にあります)

薄く白くなっている部分が変更するコードです

そしてcommand+Dで同じコードを自動的に選ぶことができますので何度もこれをしましょう。

commandを押した状態で何度もDを押せばいいです。

↑の薄く白くなっている部分ですが「1」も含むと同じコードがなくなるので含まないようにして下さい。

最初になぞった部分のコードを変更すると他の同じ部分のコードも自動的に変わります。

変更後のコードは↓です。

コードを変えると↓になります。

画像のパスのコードを変えた状態

それではまず初期設定をします。

初期設定

「index.php」と同じ階層に「functions.php」という名前のファイルを作ってください。

functions.phpですので気を付けてください、私が初めてこのファイルを作った時sを付けるのを忘れていて上手くいかなくてかなり焦りました。

functions.phpに↓のコードを書いて下さい。

コードですが最初は絶対コピーしないで書いて下さい。

 

4、5、6、7行目に「add_theme_support」がありますがググるとcodexが出てきます。

ネットを見ると「codexを見てください」みたいなのをよく見ますが初めてサイトを作る段階では見ない方がいいです。

理由はadd_theme_support( )の( )の中についてですがcodexにはずらーーっと書いてあって「はぁ?」ってなり訳が分からなくなるかもしれないからです。

だからある程度慣れてから見た方がいいです。

最初は↑の画像みたいに出てきたコードだけ「そんなもんか」と思っておけばいいです。

add_theme_supportですが本当は何ができるのかを知って欲しいですが気になるならググってください。

今の段階でググらなくても問題はないです。

↑の画像はfunctions.phpに丸写しでいいですが4行目と6行目だけちょっと理解した方がいいので説明します。

4行目はアイキャッチ画像についてですがアイキャッチ画像は何かというとトップページに読むことができる記事がありますが記事のタイトルの上にある画像のことです。

青枠の中の画像がアイキャッチ画像です

 

4行目のコードでアイキャッチ画像が設定できるようになります。(設定のやり方はあとで説明をします)

6行目ですがコーディングをする時に<head></head>の中に<title>~</title>を付けますよね?

これを自動的に出力します。

19行目のコードです

 

だからindex.phpの19行目の「<title>index.html</title>」は必要ないので消してください。

 

 

wordpressでのcssとJavaScriptの読み込み方

コーディングする時のjQueryとcssの読み込みは<head></head>の中に書きます。

コーディングの時の読み込みはここに書きます

 

しかしwordpressの場合はここではなくfunctions.phpに記述すると思いましょう。

functions.phpに↓と書きますがwordpressでのcssとJavascriptの読み込み方と思って下さい。

wp_enqueue_styleとwp_enqueue_scriptとadd_actionはwordpressに慣れてからググって下さい。

add_actionはフックと言います。

↑のコードを書き終わったらindex.phpの9、10行目と16、17、18行目を削除して下さい。

それではヘッダー、フッター、サイドバーの分割をします。

 

 

wordpressではヘッダー、サイドバー、フッターは分割する

コーディングする時ですがヘッダー、サイドバー、フッターってファイルごとに書きますよね?

wordpressで修正するときにページが少ないとファイルごとにいちいち書き換えてもいいですがページがいっぱいあると書き換えの漏れが出るかもしれません。

ページが少なかったとしても書き換えるのは面倒ですよね。

wordpressではヘッダー、サイドバー、フッターはパーツにしてそれぞれのファイルを作ってそこで管理します

↓の赤枠の中に「header.php」と「footer.php」と「sidebar.php」を作ってください。(ヘッダー、サイドバー、フッターの設定が終わってからトップページに移動してください、そうしないと画面崩れします)

赤枠の中に作ります

 

まずはheader.phpから中身のコードを書きます。

index.phpを開いてください。

46行目から上全てを切り取りコピーします、ショートカットはcommand+Xです。(切り取る部分がどこからどこまでかをindex.phpにも書いています)

そして切り取りコピーしたコードを全てheader.phpに貼り付けます。

そうするとheader.phpは↓になります。

 

そして45行目の</header>の上に<?php wp_head();?>を付けて下さい、あとでfooter.phpで</body>の上に<?php wp_footer();?>をつけるのですが<?php wp_head();?>と<?php wp_footer();?>がないとcssが反映されません。

<?php wp_head();?>を付けると↓になります。

 

そしてindex.phpのコードを切り取った部分に<?php get_header();?>と書いてください、これはヘッダーを読み込むための記述と思っていいです。

index.php

 

header.phpを少し書き換えます。

16行目の<body>を<body <?php body_class();?>にします。

 

これを付けるとページの種類ごとに勝手にclass名が付きます、cssをセレクタに当てる時に<body>についているclass名が必要な場合が出てくるのですが今は「そんなもんか〜」と思っていいです。

これでheader.phpの編集は終わりです。

次はsidebar.phpの中身のコードを書きます。

index.phpの99行目から191行目までを切り取りコピーしてsidebar.phpに貼り付けます。

そうするとsidebar.phpは↓になります。

 

そしてindex.phpのコードを切り取った部分に<?php get_sidebar();?>と書いてください、これはサイドバーを読み込むための記述と思っていいです。

sidebar.php

 

最後はfooter.phpの中身のコードを書きます。

index.phpの109行目から115行目のコードを切り取りコピーします。

それをfooter.phpに貼り付けます。

footer.php

 

そして5行目の</body>の上に<?php wp_head();?>を付けます。

すると↓になります。

 

そしてindex.phpのコードを切り取った部分に<?php get_footer();?>と書いてください、これはフッターを読み込むための記述と思っていいです。

できたらトップページをリロードしてください、ショートカットはcommand+Rです。

トップページに戻って画面が崩れてなければ<?php get_header();?>、<?php get_sidebar();?>、<?php get_footer();?>の読み込みはできています。

最後はこれです。

サイト名ですがクリックするとトップページに戻るサイトがありますよね?これができるようにします。

それとサイト名とその下のサイトタイトルの説明を自由に変えることができるようにします。

赤枠の中がサイト名です

 

header.phpの19行目と20行目を↓のように変えます。

 

<?php echo esc_url(home_url()); ?>でトップページへ飛べるためのリンクと思ってください。

<?php bloginfo(‘name’);?>でサイトのタイトルを変えることができて<?php bloginfo(‘description’);?>でサイトタイトルの説明を変えることができると思ってください。

サイト名とサイトタイトルの説明の変え方を説明します。

管理画面で設定 > 一般から入ります。

 

そうすると↓のようにサイトのタイトルとサイトのタイトルの説明を変えることができます。

赤枠がサイトのタイトルで青枠がサイトのタイトルの説明です

 

サイトタイトルとサイトタイトルの説明を書き換えたらトップページに戻ってあなたが変えた内容が表示されているかの確認をして下さい。

変わっていれば大丈夫です。

それでは2回目の説明を終わります、ここまで説明を読んでくれてありがとうございました。