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

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

wordpressでサイトを作る解説4回目、投稿ページの作り方

wordpressでサイトを作る解説4回目、投稿ページの作り方

4回目の解説の目標

この回では投稿ページの中身を作るための解説をします。

 

ヘッダー、サイドバー、フッターに分割する

single.phpを開いてindex.phpの様に<?php get_header();?>と<?php get_sidebar();?>と<?php get_footer();?>を作って下さい、どこを変えればいいか分からなかったらindex.phpを見れば分かります。

それでも分からないなら↓を見て下さい。

 

パンくずリスト

まずはパンくずリストを作りますがこれは何かというと現在のページがどこにあるかを示す物です、あるサイトに入った時に↓をよく見ますよね。

赤枠の中がパンくずリストです

 

ヘンデルとグレーテルで帰り道が分かるようにパンくずをばらまいて道しるべを作りましたがそこから来ているみたいです。

これを実装するにはプラグインのBreadcrumb NavXTを使います、これは何かというとwordpressの拡張機能みたいなやつです。

プラグインのインストールをするのですが管理画面からやります。

管理画面でプラグイン > 新規追加をクリックします。

 

↓の赤枠の所にBreadcrumb NavXTと書いてダウンロードして「有効化」して下さい。

赤枠の中をクリックして有効化して下さい

 

それができたらsingle.phpの8行目〜34行目を↓に変えて下さい。

 

全てのプラグインがコードを書かないといけないわけではなくBreadcrumb NavXTはコードが必要なプラグインです。

 

 

投稿ページにもループは必要

3回目の解説でindex.phpにループを作りましたが投稿ページでもループを作らないといけないと覚えておきましょう。

single.phpの20行目の<!–ここから記事–>の上に<?php if(have_posts()): while(have_posts()): the_post();?>を付けて101行目の</div><!–/.related-article–>の上に<?php endwhile; endif;?>を付けて下さい。

できたら記事のタイトルの変更、アイキャッチ画像を入れる、記事の内容の表示の設定をします。

 

 

タイトルの変更

今の状態はコーディングした内容が表示されますがこれをwordpressの投稿ページのタイトルに変えます。

22行目の「タイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトルタイトル」と書いてある所を<?php the_title();?>に変えて下さい。

 

 

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

今の状態はコーディングした画像が表示されますがこれをwordpressの投稿ページのアイキャッチ画像に変えます。

やり方はindex.phpの時と全く同じで23行目を↓にします。

 

 

記事の内容の表示

今の状態はコーディングした内容が表示されますがこれをwordpressの投稿ページの記事の内容に変えます。

33行目の「テキストテキスト・・・」と続いている部分を<?php the_content();?>に変えます。

 

 

タグを入れる

タグは投稿画面から入れることができます。

ここからタグを入れることができます

 

何に使うかですがサイト閲覧者がサイト内検索をする時の検索フォームの検索に引っかかるキーワードです。

40行目〜43行目を↓に変えてタグの表示をします。

 

<?php the_tags();?>でタグの表示をします。

できたら投稿ページでタグを入れて記事の更新をして記事のページを見て下さい。

 

記事のページは↓から見ることができます。

赤枠から投稿したページに飛べます

 

タグは↓みたいになります。

赤枠に自分で設定したタグ名が表示されます

 

次は改ページです

話が長い記事を読んでいると次のページがある時がありますが改ページは次のページのことです。

改ページは投稿記事の中の次のページのことです

 

これの実装はsingle.phpの36行目に↓を書きます。

 

改ページは<?php wp_link_pages();?>でできますがひとまずコピペで大丈夫です。

今のままでは記事に改ページが表示されていません、投稿記事の編集画面で改ページが表示されるための記述をしないといけません。

投稿記事の編集画面が現在ヴィジュアルモードになっていると思いますがテキストモードにして下さい。

赤枠をクリックして下さい

 

そしてどこでもいいので↓の記述をしてください。

赤枠の中の記述が改ページのための記述です

 

そして投稿記事の編集画面をヴィジュアルモードにして下さい。

改ページをした部分が↓になります。

 

できたら投稿ページを表示して↓で次のページが表示されていたら大丈夫です。

これで改ページは終わりです。

 

 

関連記事

記事をいくつか投稿すると関連した記事が出てきますがその表示です。

関連記事がない場合は↓です。

関連記事がない場合

 

関連記事がある場合は↓です。

関連記事がある場合

 

関連記事を表示させるためにsingle.phpの68行目〜110行目を↓にします。

カテゴリーが同じ記事がランダムで4件表示するようになっています。

これは完全にコピペで大丈夫です、今は理解するのをやめた方がいいです。

書いたら投稿ページを作るためのコードは完成です。

 

 

記事を投稿する時に設定する内容

記事を設定する時に何をするかについて簡単に説明します。

記事の作り方はサイトを作ってから記事を投稿してブログを始める時になったら少しずつ調べて技術を上げて下さい。

まずは投稿ページに入ります。

 

 

タイトル

記事のタイトルですが28字以上32字以下にしましょう、33字以上はネットで検索した時に表示されません。

ネットで検索する人はタイトルでどの記事を読むかを判断するのでなるべく長いタイトルの方がいいです。

段落

次は段落を付けますが↓で選びます。

赤枠をクリックします

 

最初は必ず「見出し2」を選びます、そして話を展開させていくたびに「見出し3」や「見出し4」を使います。

 

 

パーマリンクとスラッグ

↓のURLのことをパーマリンクと言います、記事のURLの事です。

それとパーマリンクの中に「482-2」と書いてありますが自分で決めることができます。

必ず半角英数字にしましょう、私は見たことがないのですが半角英数字じゃないとサイトにアクセスできない時があるらしいです。

 

タグ

サイトを訪問した人がサイト内検索する時に同じタグがあると検索にひっかかるので必ず設定しましょう。

 

カテゴリー

サイトを訪問した人がカテゴリーから記事に入るかもしれないので必ず設定しましょう。

 

アイキャッチ画像

YouTubeのサムネイル画像と同じ役割です、これがあるとどんな記事があるかのイメージが湧きます。

これで4回目の解説を終わります、ここまで記事を読んでくれてありがとうございました。