WordPressテーマの作り方を解説した無料チュートリアル
みなさんこんにちは、エンジニアのjonioです。
この記事はWordPressの最低限の機能を持ったオリジナルテーマのブログサイトを作るための無料のチュートリアルです。
完成サイトはこのサイトと同じになります。
パソコンはmacに対応していますのでwindowsユーザーの方はコマンドをwindows用に変換してください。
WordPressサイトを初めて作るのにプログラミングスクールで勉強すると10万とかかかりますがはっきり言って必要ないです。
無料で使って欲しいという気持ちでこのチュートリアルを作りました、サイトを作るのに必要なコーディングデータも無料で使えますのでぜひ使ってください。
ただ申し訳ないのですが2020年の3月に実務を始めて3ヶ月の段階で作ったサイトなのでcssの組み方が汚いです。
実務ではコーディングをする際にFLOCSSというスタイル設計をするのですがそんなのは知らなくSASSすら知らない時に作りましたがサイト自体は作ることができます。
経験が浅い段階で作ってるからW3Cの文法ルールにひっかかっているとSEO的（検索順位）に下がるらしいのですが問題ないです。
チュートリアルの内容でこのサイトを作っていますが検索順位的に問題ないので。
サイトを色々と作って自分の感覚では今の所（2022年4月の段階では）文法ルールはSEOに大きく影響がない感じがします。
またこのサイトをポートフォリオに使ってもいいです。
この記事だけで実務にも使えるサイトを作ることはできますが非常に長い解説になるので少しずつ完成させてください。
解説内容ですが随時追加したり編集します。
どうしてもエラーが解決できない場合はTwitterの私のアカウントにDMを送るなり連絡してください。
まずは下準備です。
Contents
- 1 コーディングをする時のおすすめのエディタ
- 2 オリジナルテーマの元のコーディングデータのダウンロード
- 3 開発環境（MAMP）
- 4 MAMPを起動してwordpressの管理画面を開く
- 5 テーマを使えるようにする
- 6 CSSが効くようにするための書き方
- 7 WordPressの初期設定
- 8 cssとJavaScriptの読み込み方
- 9 ヘッダー、サイドバー、フッターの分割（パーツにする）方法
- 10 サイト名を押したときのリンク
- 11 サイト名とサイト名の説明文をWordPressで書き換える
- 12 ループ（WordPress上で投稿の記事を増やす）の作り方
- 13 クラシックエディタの追加
- 14 アイキャッチ画像の追加
- 15 トップページに表示してある記事の中身の画面に入れるようにする
- 16 カテゴリー名をWordPressで変えることができるようにする
- 17 日付をWordPressで変えることができるようにする
- 18 記事のタイトルをWordPressで変えることができるようにする
- 19 ページネーション(次のページ)の実装
- 20 1ページで表示する記事数の変更
- 21 グローバルメニューの実装
- 22 投稿ページの中身の作成
- 23 記事を投稿する時に設定する内容
- 24 サイドバーの実装
- 25 固定ページの作成
- 26 404 Not Foundの実装
- 27 カテゴリーページとアーカイブページの作成
- 28 お問い合わせフォームの作り方
- 29 追加CSS
- 30 テーマが入っているファイルは圧縮して使う
- 31 WordPressテーマを作る演習用のデータ
コーディングをする時のおすすめのエディタ
エディタはVidual Studio Code(VScode)が使いやすいのと機能が充実しているのでおすすめです。
ここからダウンロードページに飛びます、すると↓の画面になるので赤色の枠で囲った所をクリックします。
Vscodeのダウンロードのやり方に関してはいっぱい解説があるはずですのでネットで「vscode ダウンロード」みたいな調べ方をしてください。
ではサイト作成で私が必要と思う機能だけ紹介します。
ちなみに拡張機能の追加はVSCodeを開いて画面左上のメニューの表示(英語の場合View)>拡張機能(英語の場合Extensions)から追加します。
そして画面左上の赤枠の所に追加したい拡張名（zenkakuを使いたいとします）を入力します。
すると↓の画面になるので赤枠をダウンロードしてください。
zenkaku
コードに全角でスペースを入れるとエラーにるのですがどこが全角スペースなのかがわからなくてイライラします。
でもこれがあると薄く白色が付いて気がつくようになります。
Auto Close Tag
これはHTMLの閉じタグを自動で入れてくれるのでコードを書く量を減らせます。
例えば<p>と書けば自動で</p>が付きます。
Emmet
これは本当におすすめです、例えばdisplay:flex;と入力する時「df+tab」でよくコードを書く量を大幅に減らせます。
ちなみにEmmetはVscodeに最初から入っているので拡張機能の追加はしなくていいです。
ショートカットキーは↓によく使う物が載っていますが「これはショートカットできないかな？」と思ったらググってください。
拡張機能で必要なのはこれ位だと思いますが他にもないか探したかったらググると色々見つかります、私は他にも何個か入れています。
オリジナルテーマの元のコーディングデータのダウンロード
ここからデータのダウンロードができます。
WordPressのチュートリアルのデータ (2 ダウンロード)
開発環境（MAMP）
ローカル環境(自分のパソコンのこと)でサイトを作りますが私はMAMPを使っているので今回のサイトを作る解説はMAMPで説明をします。
このやり方が恐らく一番簡単です。
MAMPをダウンロードしてデータベース(wordpressを使えるようにする場所みたいな物です)の作成をしてそこにwordpressを設置する方法はMAMPのバージョンが上がるとやり方が変わる可能性があるので他の人のサイトに載っているやり方を掲載します。
解説サイトはここから。
それが終わったらコーディングのデータをMAMPの中に入れます。
まずFinderを開きます。
Macの画面下にありますが↓の赤枠です。
そしてアプリケーション/MAMP/htdocs/あなたが付けたwordpressのフォルダ名/wp-content/themes /「 」の「 」の中にコーディングデータを起きます。
↓の赤枠の中にコーディングデータを置きます、↓にはtwentytwentyとtwentynineteenとindex.phpがありもしかしたらあなたは違うかもしれないですがそうだとしても気にしなくて大丈夫です。
それではサイト作りを始めます。
MAMPを起動してwordpressの管理画面を開く
まずはMAMPを起動しますがパソコン画面の下にあるバーの中のLaunchpadをクリックします。
↓の赤枠です。
そうするとアプリケーションがずらっと出てくるのでMAMPをクリックしてください。
すると↓の画面が出るので赤枠をクリックしてください。
すると↓の画面になって黒く塗りつぶした部分にあなたが付けた名前のファイルが表示されます。
そしてあなたが付けた名前のファイルをダブルクリックすると↓の画面になるので赤枠をクリックします、赤枠内に書いてある名前はMAMPでWordPressをダウンロードする際に付けた名前です。
画面左上にサイト名が表示されない場合
サイト名が表示されていなく↓の場合があります。
私がこれを初めて見た時は相当焦りました。
この場合は画面の左上にあるURLを入力する所の最後に「wp-login.php」と入力してください。
そうするとwordpressのログイン画面になって(WordPressをインストールする時に決めたユーザー名とパスワードで)ログインすれば赤枠(サイト名)が表示されます。
↑のログインをクリックしたら↓の画面になりますがこれがwordpressの管理画面です。
初めて見た時は私は訳が分からなかったのですがすぐ慣れますのでしばらくの間は我慢してください。
テーマを使えるようにする
↓の画面の赤枠の「テーマ」と書いてある所をクリックします。
テーマは何かですがWEBサイトってサイトによって見た目が違いますよね？
サイトの見た目を変える物という認識で大丈夫です、着せ替え人形の服みたいな感じです。
今のままではテーマが有効ではないので有効にする
テーマをクリックすると画面の下に↓が表示されるはずです。
こうなったのは「index.php」と「style.css（cssフォルダの中にあるstyle.cssではないです）」がないからです。
MAMPの中に置いたコーディングデータをWordPressのテーマとして認識されるにはindex.phpとstyle.cssがテーマフォルダの直下にないといけないことを覚えておきましょう。
MAMPのコーディングデータを置いてある中に「index.html」がありますがダブルクリックしてファイル名を「index.php」に名前を変えます。
「style.css」は↓の画面の赤枠の中に作ります。
ファイルの作り方はvscodeを開いてcommand+Nでできます。
style.cssですが↓を書きます。
そのまま使っても問題ないですが変更してもいい部分を説明します。
2行目のTheme Name:あなたのWEBサイトの名前を付けて下さい。
3行目のDescription:あなたのWEBサイトがどういうサイトかの説明です。
5行目のAuthor:あなたの名前を付けて下さい。（本名じゃなくてもいいです）
それが終わってテーマの画面をリロードしてください、ショートカットはcommand+Rです。
すると↓になるので赤枠をクリックして「有効化」してください。
そして管理画面の一番左上のサイト名をクリックするとトップページになります。
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で書き換える
サイト名とサイトタイトルの説明の変え方を説明します。
管理画面で「設定 > 一般」から入ります。
そうすると↓のように「サイトのタイトル」と「サイトのタイトルの説明」を変えることができます。
サイトタイトルとサイトタイトルの説明を書き換えたらトップページに戻ってあなたが変えた内容が表示されているかの確認をして下さい。
変わっていれば大丈夫です。
ではトップページ（サイト閲覧者が最初に訪れるページ）の作り方の解説をします。
ループ（WordPress上で投稿の記事を増やす）の作り方
トップページ（index.phpのことです）に記事の一覧が表示されていますがコーディングで表示されています。
この表示を変えたかったらコーデイングの部分を変えればいいですがあまりに面倒だし表示する内容を増やせば増やすほどコーディングの量が増えて大変になります。
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を見直して下さい。
クラシックエディタの追加
ループがちゃんと機能しているかの確認とコーディング部分を表示するために記事の投稿をしますがその前にプラグイン（追加機能のことです）の追加をします。
管理画面で「プラグイン > 新規追加」をクリックしてください。
すると↓の画面になるので画面右上の赤枠に「classic Editor」と入力すると画面の青枠が表示されるので「今すぐインストール」をクリックしてください。
インストールしたら「今すぐインストール」が「有効化」に変わるのでクリックすれば完了です。
classic Editorは投稿画面の記事を書き方を昔のやり方にできるのですが現在の投稿画面のエディタが直感的じゃなさすぎるので使っています。
ちなみに今のエディタ（グーテンベルグ）は不人気というか使う人はあまりに少ないと思います。
それでは記事の投稿をしますが管理画面で「投稿 > 新規追加」をクリックして下さい。
アイキャッチ画像の追加
そうすると記事を作るための画面になるのでタイトルとアイキャッチ画像を入れてください、画像は適当に入れてください。
アイキャッチ画像はトップページの記事のタイトルの上に付いている画像でYouTubeのサムネイル画像と同じ役割です。
アイキャッチ画像に使う画像ですがMAMPの中のコーディングデータがあるフォルダの下のimagesフォルダの中にあります。
設定が終わったら公開してください。
↓の公開ボタンを押せばいいです。
すると↓になりますが今は1つだけ投稿したので1つ分だけ表示されます。
あなたがアイキャッチ画像に何を選んだかは分かりませんが選んだ画像と同じではなく↑の画像(「パーツを作ろう」と書いてある画像)になっているはずです。
理由はindex.phpに画像を表示するためのコードがありますがimgタグのsrc属性の値が↓になっていてそれが表示されているからです。
表示されているアイキャッチ画像ですが記事を表示するための<!–ここから1つの記事–>〜<!–ここまで1つの記事–>の6つのかたまりの中で残したかたまりの中にあるコードの画像が表示されています。
このままだと画像を変えるためにコードを変えないといけないですがアイキャッチ画像の設定の意味がないのでアイキャッチ画像が表示されるようにします。
自分が選んだアイキャッチ画像が表示されるための記述
「<img src=”<?php echo get_template_directory_uri();?>/images/site-article1.jpg”>」を「<?php the_post_thumbnail();?>」に変えます。
これで設定したアイキャッチ画像が表示されますがアイキャッチ画像を設定してない場合は何も表示されないので微妙になります。
だからアイキャッチ画像がある場合はそれが表示されて、ない場合はない時の画像が表示されるようにします。
「<?php the_post_thumbnail(); ?>」を↓に変えてください。
コードが間違ってないかの確認として投稿画面から新規投稿をしてアイキャッチ画像を設定しないで投稿してください。
これでアイキャッチ画像を表示するための記述は完了です。
それでは他の部分の記述を説明します。
トップページに表示してある記事の中身の画面に入れるようにする
現在トップページは↓になっていますが記事をクリックしても記事の画面に入ることができません。
index.phpの14行目の「<a class=”article-link” href=”#”>」の「#」を「<?php the_permalink(); ?>」に変えます。
これでリンクになります。
そしてコーディングデータが入っている所にsingle.htmlがあるのでそれをsingle.phpに変えて下さい。
これで記事に入れますが記事に入ると↓になります、理由は投稿ページの中身を作ってないからです。
これは投稿記事のページを作る回で説明します。
カテゴリー名をWordPressで変えることができるようにする
トップページの記事のタイトル、カテゴリー、投稿日が今のままではコーディングで作った状態ですがwordpress側で変えることができるようにします。
まずはカテゴリー名です、index.phpの30行目の「カテゴリー」と書いてある部分を↓の32行目〜34行目にします。
今はカテゴリーの設定をしていないので設定をします。
投稿ページの記事の編集画面に入ります。
投稿画面に入ったら画面の右の真ん中あたりにカテゴリーを追加する所があります。
「+新規カテゴリーを追加」と書いてある所をクリックするとカテゴリーを追加する所が出てくるので自分の好きな名前を書きます。
カテゴリー名を書いたら「新規カテゴリーを追加」をクリックします。
日付をWordPressで変えることができるようにする
次は日付ですが37行目のdatetime=”2020年4月1日”の「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日’);?>」でいいです。
記事のタイトルをWordPressで変えることができるようにする
次は記事のタイトルですが38行目の「タイトルタイトルタイトルタイトルタイトルタイトル」と書いてある所を「<?php the_title();?>」に変えてください。
「<?php the_title();?>」で記事のタイトルを表示できます。
人によって投稿日、カテゴリー、タイトルは違うので私と同じでなくていいです。
ページネーション(次のページ)の実装
投稿の記事が複数個ある場合次のページが表示されるようにします、トップページの↓です。
index.phpの51行目から53行目を↓にします。
そしてトップページに戻ると↓になり次のページが表示されません。
こうなった理由は記事が一つしかないからです。
1ページで表示する記事数の変更
1つのページに表示する記事の数の設定をします。
管理画面で「設定 > 表示設定」をクリックします。
そして↓で1つのページに表示する記事の数を変えることができるのでとりあえず5に設定してください。
これで6記事以上なら次のページが表示されるようになったので投稿ページで記事を6つ以上投稿してください。
そしてトップページに戻ると↓になりますが6記事作って1ページで5記事を表示するので2ページ目までできます。
グローバルメニューの実装
この部分は実務で使うことは多分ありません。（私は1度も使ったことがありません）
参考書には作り方が載っているので一応解説しますが「実務で必要ないならいらない」という人は直接コーディングで作ってください。
グローバルメニューは何かというと↓の画面右上の4つのテキストのメニュー（お問い合わせ、プライバシーポリシー、WordPressサイト作成の解説をするブログへようこそ）で画面サイズをタブレット、スマホにした時はハンバーガーメニューになります。
↓はPC画面です。
↓はスマホ・タブレット画面です。
この設定をするためにはまずfunctions.phpに記述をしますが↓の記述をして下さい。
記述が終わったらwordpressの管理画面で「外観 > メニュー」に入ります。
そして↓の赤枠をクリックします。
メニュー名を何でもいいので決めて「メニューを作成」をクリックします。
グローバルメニューとして表示する内容はプロフィールやお問い合わせを使うのが一般的ですがまだ解説をしていないので投稿した記事の名前を表示することにします。
↓の左側の赤枠の「投稿」をクリックすると投稿した記事の名前が表示されるので3つ選んで下さい。
そして「メニュー設定」の赤枠(グローバル)をクリックして「メニューを保存」します。
そしてこれを表示させるための記述をします。
header.phpの25行目〜30行目を↓にします。
できたらトップページに移動してください、↓になりグローバルメニューの内容が表示されます。
投稿ページの中身の作成
↓のアイキャッチ画像をクリックすると投稿ページの中に入れますが中身をまだ作ってないので作ります。
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用のコードです。
全てのプラグインがコードを書かないといけないわけではなく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行目を↓に変えてタグの表示をします。
できたら投稿ページでタグを入れて記事の更新をして記事のページを見て下さい。
記事のページは↓から見ることができます。
タグは↓みたいになります。
改ページ
話が長い記事を読んでいると次のページがある時がありますが改ページは次のページのことです。
↓の「1」「2」の部分です。
これの実装はsingle.phpの36行目に↓を書きます。
改ページは「<?php wp_link_pages();?>」でできます。
今のままでは記事に改ページが表示されていません、投稿記事の編集画面で改ページが表示されるための記述をしないといけません。
投稿記事の編集画面が現在ヴィジュアルモードになっていると思いますがテキストモードにして下さい。
↓の赤枠をクリックしてください。
そしてどこでもいいので「<!–nextpage–>」と記述をしてください。
そして投稿記事の編集画面をヴィジュアルモードにして下さい。
改ページをした部分が↓になります。
これで改ページの完成です。
関連記事
記事をいっぱい投稿すると関連した記事が↓のように投稿内容の一番下に出ます。
関連記事がない場合は↓のように何も表示されません。
関連記事を表示させるためにsingle.phpの68行目〜110行目を↓にします。
カテゴリーが同じ記事がランダムで4件表示するようになっています。
書いたら投稿ページを作るためのコードは完成です。
記事を投稿する時に設定する内容
記事を設定する時に何をするかについて簡単に説明します。
記事の作り方はサイトを作ってから記事を投稿してブログを始める時になったら少しずつ調べて技術を上げて下さい。
まずは投稿ページに入ります。
タイトル
記事のタイトルですが28字以上32字以下にしましょう、33字以上はネットで検索した時に表示されません。
ネットで検索する人はタイトルでどの記事を読むかを判断するのでなるべく長いタイトルの方がいいです。
ありきたりなタイトルだと人の目を引かないので多少インパクトがある方がいいです。
例えばですが「このプログラミングスクールに通えばエンジニアになれる」よりも「このプログラミングスクールはエンジニアになれる確率100%」の方が「100%!?」って検索した人が感じるはずです。
実際はそんなスクールはないですが、、
検索するときに検索ボリュームというのがあり私はこのサイトを使って検索ボリュームを調べます。
検索ボリュームですが数値が多いほどよく検索に使われているキーワードということになりますが「数値が大きい＝ライバルが多い」と思ってください。
検索ボリュームは1000位がいいみたいです。
段落（h1タグとかのこと）
次は段落を付けますが↓で選びます。
最初は必ず「見出し2(h2タグのこと)」を選びます、そして話を展開させていくたびに「見出し3(h3タグ)」や「見出し4(h4タグ)」を使います。
ちなみに記事のタイトルは「見出し1(h1タグ)」になります。
話が変わる(段落が変わる)時は必ず最初に見出し2を使います。
初めてコーディングをした時にh1タグやh2タグって文字の大きさが変わるだけで何のために使うんだろう？って思いませんでした？(私は思いました)
ちゃんと意味があってコーディングをする時のhタグは必ずh1タグから使わないとSEO(検索順位)に影響します。
と一般的に言われていますがコーディングの文法ルールをかっちり守らないと検索順位に大きく影響する感じは全くないのでそんなに意識しない方がいいと思います。
パーマリンクとスラッグ
↓のURLのことをパーマリンクと言います、記事のURLの事です。
それとパーマリンクの中に「482-2」と書いてありますが自分で決めることができます。
必ず半角英数字にしましょう、私は見たことがないのですが半角英数字じゃないとサイトにアクセスできない時があるらしいです。
タグ
サイトを訪問した人がサイト内検索する時に同じタグがあると検索にひっかかるので設定しましょう。
でもサイト内検索はよっぽど検索で閲覧者が来るサイトではないと使われないので私は一応タグを入れますがそんなに重要とは思っていません。
カテゴリー
サイトを訪問した人がカテゴリーから記事に入るかもしれないので設定しましょう。
でもタグと同じで私はそんなに重要とは思っていません。
アイキャッチ画像
YouTubeのサムネイル画像と同じ役割です、これがあるとどんな記事があるかのイメージが湧きます。
以前はphotoshopを使って頑張って画像を作っていました。
でも画像検索からサイトに来る人はそういないので今は結構手抜きです 笑
実務をするにはphotoshopも使えないといけないので練習と思って画像を作るのもいいと思います。
サイドバーの実装
このセクションの解説で「ウィジェット」という物を使います。
2022年4月の段階ですがウィジェットの中身がこの記事を書いた時と表示が異なります。
この記事を書いた時と表示を同じにするには「Classic Widgets」というプラグインを使えばいいです。
サイトバーを作る時に参考書はウィジェットを使った解説をしますが実務でウィジェットを使いません。（少なくとも私は）
そんな面倒なことをせずにコードで直接書きます。
参考書でウィジェットを使うので一応ウィジェットを使った解説をします。
サイドバーは↓の赤枠のことで文字通り画面の左側か右側の部分です。
サイドバーが表示できるようにするにはまずfunctions.phpに↓の記述をします。
そうすると管理画面の外観の中に「ウィジェット」が表示されるのでクリックして下さい。
ウィジェットの画面に入るとサイドバーに色々追加できるのが分かります。
プラグインを使ってウィジェットを作ることもできるのですがプラグインは入れれば入れるほどサイトの読み込みが遅くなります。
サイトの読み込みが遅いと画面の表示が遅くなり、検索順位(ネットで検索した時の表示される順位)が下がる可能性があります。
Googleはサイトの読み込みも検索順位に関係することを発表しています。
だからプロフィールのみウィジェットを使ってあとは全部コードで表示できるようにします。
プロフィールの作り方
ウィジェットの画面で「カスタムHTML」を画面右の「サイドバー」と書いてある所にドラッグアンドドロップします。
すると↓になるので赤枠をクリックします。
クリックするとカスタムHTMLが開いてタイトルと内容が書けるようになるのでタイトルは空白のままで内容の所に↓のコードを書いて下さい。
画像のパスは人によって変わりますが探し方の説明をします。
管理画面で「メディア > 新規追加」をクリックします。
そうすると画像を登録できる画面になるので「ファイルを選択」をクリックします。
そして画像を選ぶのですがコーディングデータが入っているフォルダの中のimagesフォルダの中のsite-profile.jpgを選びます。
そして↓の「編集」と書いてある部分をクリックします。
すると赤枠の中にパス表示されるのでそれをコピーして画像のパスの所に貼って下さい。
「あなたのTwitterのURL」、「あなたのFacebookのURL」、「あなたのInstagramのURL」はあなたのURLを書いて下さい。
もしSNSをやってないならhref=”#”でいいですがブログの記事を発信して人から読んでもらうのにTwitterは有効です。
完了したらウィジェットが表示されるようにします。
sidebar.phpの6行目から23行目を↓にします。
書き終わったらトップページに戻ると↓になっています。
「検索フォーム」、「新着記事」、「アーカイブ(過去の記事)」は全て記述で表示しますが今の段階ではコピペがいいです。
検索フォーム
まずコーディングデータがあるフォルダの中にsearchform.phpを追加します。
そしてsidebar.phpの15行目〜25行目を切り取ってsearchform.phpに貼ります。
「action=”http://localhost/wordpress2/”」の「http://localhost/wordpress2/」はあなたのサイトのトップページのURLを書いてください、違うURLを書くとエラーになります。
sidebar.phpの消した15行目〜25行目を「<?php get_search_form();?>」に変えて下さい。
これで検索フォームの完成で次は検索フォームが機能するようにします。
コーディングデータが入っているフォルダの中にsearch.htmlがありますがそれをsearch.phpにします。
そしてsearch.phpの内容を書き換えますが今までにやったことはやり方を説明しないので自分でやってみて下さい、最後に答えのコードは載せます。
まずはヘッダー(<?php get_header();?>)とサイドバー(<?php get_sidebar();?>)とフッター(<?php get_footer();?>)を作って下さい。
それができたらパンくずリストを作って下さい。
それができたらsearch.phpの<!–ここから1つの記事–>上に「<?php if(have_posts()): while(have_posts()): the_post();?>」を書いて<!–1つの記事ここまで–>の下に「<?php endwhile; endif;?>」を書いて下さい(ループを作るということ)。
それができたら1つの記事の中のリンクの設定と画像の表示と日付の表示とタイトルの表示をして下さい。
「内容の抜粋内容の抜粋・・・」と続いている部分は「<?php the_excerpt();?>」でできますがこれで抜粋した文章の表示ができます。
デフォルトの状態だと本文の最初から110字で長すぎるので文字数を50字に変えます。
functions.phpを開いて↓のコードを追加します。
全てが終わった時の解答のコードが↓です。
書いたらトップページに戻って検索窓で記事の名前で検索をして表示されているかの確認をして下さい、↓になっていたら大丈夫です。
新着記事
今の状態はコーディングの内容が表示されていますが新しい記事が表示されるようにします。
sidebar.phpの18行目〜48行目を↓にして下さい。
書き終わったらトップページに戻って下さい、↓になっていれば大丈夫です。
アーカイブ(過去の記事)
今はコーディングの内容が表示されています。
記事を投稿した月を表示できるようにしますがsidebar.phpの50行目と51行目を↓に変えます。
トップページに戻ってアーカイブの確認をすると↓になります。
カテゴリー
今はコーディングの内容が表示されています。
投稿した記事のカテゴリーを表示しますが66、67行目を↓にして下さい。
コードを書いたらトップページに戻ってあなたが設定したカテゴリーが表示されているかを確認して下さい。
これでサイドバーの完成です。
固定ページの作成
固定ページは何かというと名前の通り中身を更新しないページのことです、主にプロフィールやお問合せのページに使います。
今のままで固定ページを作ることはできますが表示することができません。
確認をしますが管理画面で固定ページで新規追加して下さい。
そして適当に1つ記事を作って公開してその内容を表示して下さい、中身が表示されませんが固定ページを表示するためのファイルとコードがないからです。
だからそれを作ります。
まずはコーディングデータが入っているフォルダの中にあるpage.htmlをpage.phpに変えます。
そして「<?php get_header();?>」と「<?php get_footer();?>」を作るのとパンくずリストを作るのとループを作るのと1つの記事の中身を作って下さい。
新しい内容は何もないので説明を省きます、今まで解説した内容のどこかにあるので探して下さい。
できたら↓でコードが正しいかの確認をして下さい。
コードを書いたらさっき作ったページをリロードして下さい、書いた内容が表示されるはずです。
確認できたらプロフィールとお問い合わせの記事を作ってください。
お問い合わせはフォームを使いますが後で説明しますので中身は空っぽでいいです。
プロフィールは自分で好きな内容を書いて下さい。
スラッグは何でもいいですがプロフィールは「profile」でお問い合わせは「contact」にして下さい。
それができたらグローバルメニューに表示させて下さい、↓になっていれば大丈夫です。
404 Not Foundの実装
404は何かというとサイトのURLの所に適当に入力します、↓にしたとします。
サイトに存在しないURLを入力した場合↓の画面に切り替わります、「入力したページは存在しませんよ」という警告みたいな物です。
ちなみに今の状態で存在しないURLを入力すると↓になります。
れでは実装していきますがコーディングデータが入っているフォルダの中に404.htmlがあるので404.phpに変えて下さい。
そして「<?php get_header();?>」と「<?php get_footer();?>」を作って下さい。
そして65行目のhref=”#”の「#」を「<?php echo esc_url(home_url()); ?>」にして下さい。
解答のコードは↓です。
これで存在しないURLを入力すると404 Not Foundのページが表示されます。
カテゴリーページとアーカイブページの作成
トップページの右下にあるカテゴリーをクリックして下さい。
「2020年7月」をクリックすると↓になります。
ちゃんと表示されていますがアーカイブのページが表示されていません。
プラグインを使ってどのファイルが表示されているかを調べます。
「Show Current Template」を追加して有効にして下さい、このプラグインでどのファイルで表示されているかを調べることができます。
そしてもう一度トップページに戻り「2020年7月」をクリックすると画面上にどのファイルが表示されているかが分かります。
↓で表示されているページは画面右上の赤枠の中に書いてある「テンプレート:category.php」からcategory.phpが読み込まれていることが分かります
これが読み込まれた理由ですがwordpressのファイルはテンプレートと言いファイルが読み込まれる優先順位があります。(これをテンプレート階層と言います)
テンプレート階層はcodexを見た方がいいでが絶対にサイト作りに慣れてからがいいと思います。
index.phpが一番最後に読み込まれますが今はカテゴリーのページとアーカイブのページがないのでindex.phpが読み込まれています。
テンプレート階層はひとまず「そんなもんか」と思ってwordpressでサイトを作るのに慣れてから意識すればいいです。
カテゴリーのページとアーカイブのページがないので作ります。
コーディングデータがあるフォルダの中に「category.html」があるので「category.php」に変えます。
「<?php get_header();?>」と「<?php get_sidebar();?>」と「<?php get_footer();?>」とパンくずリストとループとページネーションを作って下さい。
やり方は今までで説明しているので省きます、最後に答えのコードを載せます。
コードの中に「カテゴリー名」と書いてある所(<div class=”related-title searchpage-title”>カテゴリー名</div>のこと)があるのですが↓に変えて下さい。
コードを書き終わったらトップページからカテゴリーをクリックして下さい、↓になったら大丈夫です。
category.phpのコードは↓です。
次はアーカイブを表示するテンプレートです。
コーディングデータが入っているフォルダの中にarchive.htmlはないのでarchive.phpを作ってcategory.phpの中身をそのままコピペして下さい。
コピペしたらカテゴリーを表示していた記述を↓に変えて下さい。
そしてトップページに戻ってアーカイブのページに入ってアーカイブの表示がされているかとテンプレートがarchive.phpになっているかの確認をして下さい。
ちゃんと表示されていたら大丈夫です。
お問い合わせフォームの作り方
まずプラグインのCONTACT FORM7をインストールします。
↓の赤枠の中がContact Form7です。
管理画面(ダッシュボードと言います)で「プラグイン > インストール済みプラグイン」をクリックします。
Contact Form7の設定をします。
そして↓の画面になるので赤枠をクリックします。
そうすると↓の画面になるので「フォームのタブ」を赤枠の中を編集します。
赤枠の中ですが↓をそのままコピペでいいです。
「普段は仕事をしているので返信は基本的に夜にさせて頂きます。」は好きに変えて下さい。
メールのタブは↓にして下さい、変えた方がいい部分は全て「 」を付けています。
「！」マークがついている部分は無視して下さい。
そして画面の下の方にスクロールすると「メール(2)」が出てくるのでクリックします。
さらに書き込む所が出てくるので↓の「 」の中を変えて下さい。
「メッセージ本文」は↓をコピペして下さい。
変えたら画面一番下の「保存」をして下さい。
できたらコンタクトフォームの編集画面の一番上にある青枠の中をコピペして下さい。
コピペしたら管理画面の固定ページの中にあるお問い合わせページの編集画面に入ります。
そしてコピペした内容を本文を書く所に貼り付けます。
そして公開して↓の画面が表示されたら設定はできています、「お問い合わせありがとうございます」と書いてある部分の画像はアイキャッチ画像です。
追加CSS
お問い合わせページですが今のままだとレイアウトの感じに違和感があります。
だからCSSで調節しますが管理画面で外観 > テーマエディターでできるけどwordpressはテーマの更新があると追加して書いた内容がリセットします。
だから通常は子テーマを使いますがもっと簡単にできる方法があり「追加CSS」を使います。
追加CSSはWordPressテーマのアップロードがあってもCSSのリセットは起きません。
どこにあるかというと管理画面で「外観 > カスタマイズ」から追加CSSがある画面に入れます。
追加CSSの画面に入ったら矢印のコードをコピペして下さい。
できたら保存してお問い合わせページに入り↓になっていたら設定が完了です。
テーマが入っているファイルは圧縮して使う
ここまでできたらあとは簡単です。
コーディングデータを右クリックすると圧縮できるのでして下さい。
圧縮したデータをwordpressで使う時はまずサーバーとドメイン契約をしないといけないです。
私も使っていておすすめはxserverです、ドメイン永久無料キャンペーンとかもあるし2年位使ってるけど今の所サーバーのトラブルもないです。
絶対にやめた方がいいのは「お名前.com」です、勧める人が結構いますがググると評判の悪さが分かります。
みんな何でオススメするかというとアフィリエイトをしてるからです。
アフィリエイトはAさんが貼ったリンクからBさんが契約するとAさんにお金が入る仕組みです。
xserverがリンクになっていますがアフィリエイトじゃないのでご安心を。
私は人を騙してお金を貰うのが大嫌いなんですよ。
サーバーとドメインを取得したら自分が作ったテーマを追加するのですが管理画面の「外観 > テーマ」に入ります。
そしたらテーマを選択する画面になるので↓の赤枠をクリックして青枠をクリックすると圧縮したテーマを追加できます。
圧縮したテーマを追加したらテーマを使うことができます。
これでサイト作成は終わりです、新しいことがいっぱい出てきて訳が分からなくなっていると思うので何度も同じサイトを作って慣れていって下さい。(私も最初はあなたと同じでした)
WordPressテーマを作る演習用のデータ
この記事でサイトを作る事ができるようになったら↓の記事でサイトを作る演習ができますので使ってください。
●いいねをつけてもらえると励みになります。
