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

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

wordpressでサイトを作る解説3回目、メインページの作り方

wordpressでサイトを作る解説3回目、メインページの作り方

3回目の解説の目標

この回ではトップページを作るための解説をします。

まずは記事の表示からです。

 

 

ループの作り方

トップページに記事の一覧が表示されていますがコーディングで表示されています。

青枠の部分はコーディングで表示されています

 

この表示を変えたかったらコーデイングの部分を変えればいいですがあまりに面倒だし表示する内容を増やせば増やすほどコーディングの量が増えて大変になります。

wordpressではそういうことをしないためにループというものを使います。

ループを使えば表示するための記述は1つだけでいいです。

それではやり方を説明します。

index.phpをエディタで開くと13行目から22行目までに<!–ここから1つの記事–>〜<!–ここまで1つの記事–>のかたまりがありこれが全部で6つありますが5つは消してください。

そうすると↓になります。

 

そして13行目の<!–ここから1つの記事–>の上に<?php if(have_posts(): while(have_posts(): the_post(); ?>を付けて22行目の<!–ここまで1つの記事–>の下に<?php endwhile; endif; ?>をつけて下さい。(「:」と「;」の付け間違いに気をつけて下さい)

<?php if(have_posts(): while(have_posts(): the_post(); ?>〜<?php endwhile; endif; ?>をループと言いますが記事を表示するための物と思って下さい。

するとコードは↓になります。

 

この状態でトップページを見ると↓です。

wordpressはデフォルトで一つ記事があるのであなたのパソコンの画面では一つ記事が表示されますが私は削除しているから表示されていません

 

コーディングした部分が表示されてないですが記事を投稿してないからです。

この画面が画面崩れをしていたらコードを間違っている可能性があるので今書いたindex.phpを見直して下さい。

 

 

ループの確認とアイキャッチ画像の設定

ループがちゃんと機能しているかの確認とコーディング部分を表示するために記事の投稿をします。

管理画面で投稿 > 新規追加をクリックして下さい。

 

そうすると記事を作るための画面になるのでタイトルとアイキャッチ画像を入れてください。

ここにタイトルを入力する

 

ここにアイキャッチ画像を入れる

 

アイキャッチ画像はトップページの記事のタイトルの上に付いている画像です。

YouTubeのサムネイル画像と同じ役割です。

 

アイキャッチ画像ですがMAMPの中のコーディングデータがあるフォルダの下のimagesフォルダの中にあります。

赤枠の中に画像があります

 

設定が終わったら公開してください。

投稿画面の右側にあります

 

すると↓になりますが今は1つだけ投稿したので1つ分だけ表示されます。

 

あなたがアイキャッチ画像に何を選んだかは分かりませんが選んだ画像と同じではないはずです。

理由はindex.phpに画像を表示するためのコードがありますが↓になっているからです。

画像はsite-article1.jpgが表示されています。

 

表示されているアイキャッチ画像ですが記事を表示するための<!–ここから1つの記事–>〜<!–ここまで1つの記事–>の6つのかたまりの中で残したかたまりの中にあるコードの画像が表示されています。

このままだと画像を変えるためにコードを変えないといけないですがアイキャッチ画像の設定の意味がないのでアイキャッチ画像が表示されるようにします。

 

 

アイキャッチ画像が表示されるための記述

<img src=”<?php echo get_template_directory_uri();?>/images/site-article1.jpg”>を<img src=”<?php the_post_thumbnail();?>”  alt=””>に変えます。

これで設定したアイキャッチ画像が表示されますがアイキャッチ画像を設定してない場合は何も表示されないので微妙になります。

だからアイキャッチ画像がある場合はそれが表示されて、ない場合はない時の画像が表示されるようにします。

<img  src=”<?php the_post_thumbnail(); ?>を↓に変えてください。

 

コードが間違ってないかの確認として投稿画面から新規投稿をしてアイキャッチ画像を設定しないで投稿してください。

↓になれば大丈夫です。
コードが正しい場合こう表示されます、これはアイキャッチ画像を設定していません

 

これでアイキャッチ画像を表示するための記述は完了です。

それでは他の部分の記述を説明します。

 

 

トップページに表示してある記事に入れるようにする

現在トップページは↓になっていますが記事をクリックしても記事の画面に入ることができません。

画像の左側の投稿の部分をクリックしても記事に入れません

 

index.phpの14行目の<a class=”article-link” href=”#”>の「#」を<?php the_permalink(); ?>に変えます。

これでリンクになります。

14行目を変えています

 

そしてコーディングデータが入っている所にsingle.htmlがあるのでそれをsingle.phpに変えて下さい。

記事に入れるかの確認をして欲しいのですが記事に入ると↓になりますがcssが反映されていないからです。

これは投稿記事のページを作る回で説明します。

 

 

記事のタイトル、カテゴリー名、投稿日を変えることができるようにする

トップページの記事のタイトル、カテゴリー、投稿日が今のままではコーディングで決めた状態ですがwordpress側で変えることができるようにします。

オレンジ色、紫色、黄色の枠の中をwordpressで変えることができるようにします

 

まずはカテゴリー名です、index.phpの30行目の「カテゴリー」と書いてある部分を↓の32行目〜34行目にします。

 

これは今の所はそのままコピペでいいです、どうしても気になるならググればいいですがこういうのでいちいち悩んでいると挫折する可能性があります。

私としてはある程度慣れてから調べて欲しいです。

今はカテゴリーの設定をしていないので設定をします。

投稿ページの記事の編集画面に入ります、これはやり方が分からなかったらググってください。

「wordpress 投稿一覧」とかでググれば分かると思います、どうしてもダメなら私に質問してください。

投稿画面に入ったら画面の右の真ん中あたりにカテゴリーを追加する所があります。

 

「+新規カテゴリーを追加」と書いてある所をクリックするとカテゴリーを追加する所が出てくるので自分の好きな名前を書きます。

赤枠の中にカテゴリー名を書きます

 

カテゴリー名を書いたら「新規カテゴリーを追加」をクリックします。

次は日付ですが37行目のdatetime=”2020年4月1日”の「2020年4月1日」を<?php the_time(‘Y-m-d’);?>に変えて

<time class=”article-time” datetime=”2020年4月1日”>2020年4月1日</time>の「2020年4月1日」を<?php the_time(‘Y年m月d日’);?>に変えて下さい。

<?php the_time();?>で記事の投稿日を表示できtime()のカッコの中を変えることで表示方法を変えることができますが今はとりあえず<?php the_time(‘Y-m-d’);?>と<?php the_time(‘Y年m月d日’);?>でいいです。

次は記事のタイトルですが38行目の「タイトルタイトルタイトルタイトルタイトルタイトル」と書いてある所を<?php the_title();?>に変えてください。

<?php the_title();?>で記事のタイトルを表示できます。

書き終わったらトップページの記事のタイトル、カテゴリー、投稿日を比べて欲しいのですが↓になりました。
人によって投稿日、カテゴリー、タイトルは違うので私と同じでなくていいです

 

ページネーション(次のページ)の実装

投稿の記事が複数個ある場合次のページが表示されるようにします、トップページの↓です。

赤枠の中は今はコーディングで表示していますが機能していなです、自動的に表示して機能するようにします

 

index.phpの51行目から53行目を↓にします。

 

そしてトップページに戻ると↓になります。

次のページが表示されないです

 

こうなった理由は記事が一つしかないからです。

1つのページに表示する記事の数の設定をします。

管理画面で設定 > 表示設定をクリックします。

 

そして↓で1つのページに表示する記事の数を変えることができるのでとりあえず5に設定してください。

赤枠の中ですが5以上なら何でもいいです

 

これで6記事以上なら次のページが表示されるようになったので投稿ページで記事を6つ以上投稿してください。

そしてトップページに戻ると↓になります。

1ページ目

 

2ページ目、私は6記事投稿しています

 

これでページネーションの完成です。

 

 

グローバルメニューの実装

グローバルメニューは何かというと↓の画面右上のメニューで画面サイズをタブレット、スマホにした時はハンバーガーメニューになります。

画面右上の「お問い合わせ」、「プロフィール」、「portfolio」と書いてある部分がグローバルメニューです。

 

タブレットの画面ではハンバーガーメニューになります

 

スマホの画面ではハンバーガーメニューになります

 

この設定をするためにはまずfunctions.phpに記述をしますが↓の記述をして下さい。

 

記述が終わったらwordpressの管理画面で外観 > メニューに入ります。

 

そして↓の赤枠をクリックします。

メニュー名を何でもいいので決めて「メニューを作成」をクリックします

 

グローバルメニューとして表示する内容はプロフィールやお問い合わせを使うのが一般的ですがまだ解説をしていないので投稿した記事の名前を表示することにします。

↓の左側の赤枠の「投稿」をクリックすると投稿した記事の名前が表示されるので3つ選んで下さい。

そして「メニュー設定」の赤枠(グローバル)をクリックして「メニューを保存」します。

 

そしてこれを表示させるための記述をします。

header.phpの25行目〜30行目を↓にします。

できたらトップページに移動してください、↓になります。

これでグローバルメニューの設定は完了です。

3回目の解説が終わりましたがここまででも結構な情報量だと思います。

頭の中が情報でいっぱいになっていたら今まで作ったデータを消してまた1から始めてもいいと思います

私が初めてサイトを作った時はいきなり全部を作らず途中まで作ってデータを消してまた最初からサイト作るのを何回か繰り返しています

まずは少しづつサイト作りに慣れていき確実にサイトを作れるようにして下さい。

ここまでの説明を読んでくれてありがとうございました。