WordPressサイト作成チュートリアル②CSSの反映〜トップページの修正
762 回閲覧されました
みなさんこんにちは、WEB制作のエンジニアのjonioです。
前回はコーディングデータをテーマとして認識させる所までを解説しました。
今の状態はトップページに移動するとCSSが効いてないので画面が変な表示になっていますがCSSが効くようにする解説からトップページのヘッダー・サイドバー・フッターを分割して管理する事ができるようにする所までの解説をします。
目次
CSSが効くようにするための書き方
トップページですが↓になり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();?>」でテーマフォルダまでを読み込むための記述と思ってよく丸暗記でいいです、私も丸暗記しています。
一応言うと「<?php echo get_template_directory_uri();?>/css/style.css」で絶対パスです。
書き換えるとCSSが反映されてトップページが↓になります。
この状態はまだ画像が読み込まれていないので画像が表示されていません。
だから画像を読み込む為のパスを変えますがCSSを読み込んだ時とやり方が同じです。
「index.php」の中の<!–ここから1つの記事–>〜<!–ここまで1つの記事–>の「〜」にパスはあります、4行目の「images/site-article1.jpg」を変えます。
「<img src=”<?php echo get_template_directory_uri();?>/images/site-article1.jpg”>」に変えるのですが変える部分を何度も探して変えると変更する場所が多いと大変になりますよね？
こういう時は↓の様に6ヶ所ある変更するコードの一番最初の部分を探してなぞります。
そしてcommand+Dで同じコードを自動的に選ぶことができますので何度もこれをしましょう。
commandを押した状態で何度もDを押せばいいです。
実務でも頻繁に使うので覚えておいて損はないです。
↑の薄く白くなっている部分ですが「1」も含むと同じコードがなくなるので含まないようにして下さい。
最初になぞった部分のコードを変更すると他の同じ部分のコードも自動的に変わります。
変更後のコードは↓です。
コードを変えると↓になります。
それではまず初期設定をします。
WordPressの初期設定
「index.php」がある所に「functions.php」という名前のファイルを作ってください。
functions.phpですので気を付けてください、私が初めてこのファイルを作った時sを付けるのを忘れていて上手くいかなくてかなり焦りました。
functions.phpに書くコード
functions.phpに↓のコードを書いて下さい。
コードの内容ですがコピペでいいです、私もいつもコピペです。
↑の画像はfunctions.phpに丸写しでいいですが4行目と6行目だけちょっと理解した方がいいので説明します。
4行目はアイキャッチ画像についてですがアイキャッチ画像は何かというとトップページに読むことができる記事がありますが記事のタイトルの上にある画像のことです。
↓の青枠です。
4行目のコードでアイキャッチ画像が設定できるようになります。(設定のやり方はあとで説明をします)
6行目ですがコーディングをする時に「<head></head>」の中に「<title>~</title>」を付けますよね？
これを自動的に出力します。
だからindex.phpの19行目の「<title>index.html</title>」は必要ないので消してください。
cssとJavaScriptの読み込み方
コーディングする時のjQueryとcssの読み込みは「<head></head>」の中に書きます。
しかしwordpressの場合はここではなくfunctions.phpに記述すると思いましょう。
functions.phpに↓と書きますがwordpressでのcssとJavascriptの読み込み方と思って丸暗記でいいです。
↑のコードを書き終わったらindex.phpの9、10行目と16、17、18行目(CSSとjQueryの読み込みの部分)を削除して下さい。
トップページに戻ると画面崩れしていますのでまだ戻らないで下さい。
それではヘッダー、フッター、サイドバーの分割をします。
ヘッダー、サイドバー、フッターの分割（パーツにする）方法
コーディングする時ですがヘッダー、サイドバー、フッターってファイルごとに書きますよね？
wordpressで修正するときにページが少ないとファイルごとにいちいち書き換えてもいいですがページがいっぱいあると書き換えの漏れが出るかもしれません。
ページが少なかったとしても書き換えるのは面倒ですよね。
wordpressではヘッダー、サイドバー、フッターはパーツにしてそれぞれのファイルを作ってそこで管理します。
他にもパーツにできますがとりあえずヘッダー、サイドバー、フッターに分割できればいいです。
↓の赤枠の中に「header.php」と「footer.php」と「sidebar.php」を作ってください。
index.htmlがありますが手違いで別のスクショを使っています。
index.phpと思ってください。
header.phpの書き方
まずはheader.phpから中身のコードを書きます。
index.phpを開いてください。
46行目から上全てを切り取りコピーします、ショートカットはcommand+Xです。(切り取る部分がどこからどこまでかをindex.phpにも書いています)
そして切り取りコピーしたコードを全てheader.phpに貼り付けます。
そうするとheader.phpは↓になります。
そして45行目の</head>の上に「<?php wp_head();?>」を付けて下さい、あとでfooter.phpで</body>の上に「<?php wp_footer();?>」をつけるのですが「<?php wp_head();?>」と「<?php wp_footer();?>」がないとcssが反映されないので必ずつけてください。
「<?php wp_head();?>」を付けると↓になります。
そしてindex.phpのコードを切り取った部分に「<?php get_header();?>」と書いてください、これはヘッダーを読み込むための記述と思っていいです。
header.phpを少し書き換えます。
header.phpの16行目の<body>を「<body <?php body_class();?>>」にします。
ページの種類（投稿ページ、固定ページなど）によってクラスを指定したい時があるのですがこれを付けるとページの種類ごとに勝手に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_footer();?>」を付けます。
すると↓になります。
そして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’);?>でサイトタイトルの説明を変えることができると思ってください。
サイト名とサイト名の説明文をWordPressで書き換える
サイト名とサイトタイトルの説明の変え方を説明します。
管理画面で「設定 > 一般」から入ります。
そうすると↓のように「サイトのタイトル」と「サイトのタイトルの説明」を変えることができます。
サイトタイトルとサイトタイトルの説明を書き換えたらトップページに戻ってあなたが変えた内容が表示されているかの確認をして下さい。
変わっていれば大丈夫です。
今回の説明はここまでにします。
新しい事が色々と出てきて頭が飽和すると思いますがサイトを作る時は同じことの繰り返しでその内勝手に覚えるので継続してください。
次の解説は↓で読む事ができます。
