もんちゃんブログ 
この記事はweb制作を学んでいる際に、自分が調べて学べたことや、メンターさんに指導をもらったことを自分の復習としてまとめています。
Progateをやった後や、コーディングで悩んだ方の参考になれば嬉しいです。
また、他の方のブログ記事をたくさん記載させて頂いています。
いつも参考にさせていただいており、感謝いたします！！
学習中であり不完全なところも多くありますので、気になる所があれば先輩方にアドバイスをいただけると嬉しいです！
今回はトップページ以外のページの作り方についてまとめていきます。
復習帳：WordPress編②
ブログこそ書いてはいますがWordPress初挑戦であった私が、複数ページのHTML・CSSをWordPress化していく際に学んだ流れをまとめていきます！
前回のワードプレス編でトップページを表示させるまでをまとめたため、
今回はトップページ以外のページの作成方法についてまとめていきます！！
こちらのブログの記事を見ればほぼできてしまいますが…(￣∀￣)
自分用にも一応まとめておきます…
参考記事↓
https://briarpatch.co.jp/wordpress-fixedpage
phpへ書き換えを行う
前回作ったテーマファイルの中にindex以外のページのHTMLファイルを入れます。
その後、トップページの時と同様に、ファイルの名前を
.html→.php
へ書き換えを行う。
また、さらに前回同様それぞれのコードを書き直していきます。
ヘッダーとフッター部分を切り取り、その部分に
<?php get_header(); ?>
<?php get_footer(); ?>
をつけてテンプレート化した部分を読み込みます。
また、画像がある場合は
<?php echo get_template_directory_uri(); ?>
をつけて前回同様画像の読み込みを行ってください。
※コードエディタにて⌘+Fでimgやsrcで検索をかけると見落としにくくなります(*´∇｀*)
テンプレートを作成する
それぞれのページの
<?php get_header(); ?>
の前に
<?php
/*
Template Name: about（テンプレート名）
*/
?>
<?php get_header(); ?>
と入力することで、テンプレートを作ることができます。
上の例ではaboutという固定ページを作りたいときの場合になります。
リンク要素の書き換え
aタグなどでhrefにてページ内を行き来できるようにしている箇所
<a href=”index.html”>
このような箇所は
<a href=”<?php echo home_url(); ?>/パーマリンク名“>
とすることでリンクを書き換えることができます。
例えば先ほどのように”about”というページに飛ばしたい時は
<a href=”<?php echo home_url(); ?>/about“>
となります！
ヘッダーなどでメニューを作っている方は忘れずに書き換えをしてください！
固定ページの作成
htmlで作っているページの数だけ固定ページを作成していきます。
投稿画面、固定ページ作成画面がはじめに紹介したブログ記事と違う…
という方はClassic Editorというプラグインを入れ有効化してみてください！
この時、ブログの投稿内容のページは作らなくていいです。
固定ページ作成時は
・タイトルはページのタイトルを入れる
・パーマリンクも忘れずに確認を行う
・その他本文など、内容はからのままでOK
・右側のページ属性、テンプレートから先ほど作ったページ属性を選択する
という流れでトップページ以外のそれぞれのページを表示させることができました！！
ホーム画面の設定
前回トップページ（ホーム画面）の説明の際に説明していませんでしたが、
今回のトップページ以外のページを表示させる方法で
<?php
/*
Template Name: home（またはtopなど）
/*
get_header(); ?>
としテンプレートを作成しHomeで固定ページを作成します。
ダッシュボードの
設定＞表示設定から
ホームページの設定＞固定ページを選択して
どの固定ページをホームページにするかを設定することができます！！
おまけ
なぜかcssが反映されない…
一部分だけcssがおかしい…
となっている方は、もしかすると
bodyにid
などをつけ、cssを設定していると、
headerを切り取った際に一緒に切り取られてしまっている可能性がありますので、ご確認ください！
私は、またもや気づくまでに時間がかかってしまいました。
今回はこの辺りまで！
わかりにくいところや記載内容に不備がありましたらコメント欄にてご指摘いただけると嬉しいです。
メインクエリやサブクエリ、検索ウィジェットやカテゴリー一覧の表示の方法はこちらから↓
最後まで読んでいただきありがとうございました！
広告
