LoginSignup
2
5

More than 1 year has passed since last update.

@9ever

何番煎じだっていう、HTMLをWordPress化する具体的な組み込み方

Last updated at Posted at 2022-05-22

特定の人に向けて書いていますが、この記事がそのまま誰かの役に立てばと思います。

今回使うコード
https://github.com/naka0000/kaigo-theme

具体的な前提

何番煎じとタイトルには書いてますが、冗長な構成にして初心者(HTMLとCSSでページが作れる層)にわかりやすくしたつもりです。

実践して、実戦に耐える構成を習得してからリファクタリングなどして本番に挑んでください。
パフォーマンスだったり、Wordpressらしい構成など他の方法を想像して読む記事になります。

簡単に言うと、この記事は間違いなく答えではありません。

本当の初学者が慣れるために作った題材です。
Web制作、Web開発は公開して終わりではありませんので、この記事を題材に少しずつ良いコードだったり構成が作れるようになればと思います。

今回の題材は「採用を目的としたコーポレートサイト」な気がしますです。

あれやこれや目的を入れたいところですが、主軸となる目的はしっかり定めましょう。
別の目的があれば別のホームページを作ればいいのです。

現段階でこんなファイル群でHTMLファイルの介護サイトのデザインまで作りました。

ページ内容 ファイル名
トップページ index.html
私たちについて about.html
サービス service.html
会社案内 company.html
新着情報 news.html
採用情報 (お問い合わせ) recuit.html
CSSフォルダ css/
Javascriptフォルダ js/
画像フォルダ image/

コンテンツは少ないですが、「マイクロコピー」なんていう単語で検索してみるといいじゃないでしょうか。
本とかもありますので図書館で借りて読みましょう。買わなくていいです。

Local by flywheelをインストールする。

日本語化ができないソフトですが、、、
HTMLを読めれば英語も読めるでしょう。
実戦でサーバーと戦うときには英語だけが頼りです。粘り強く読みましょう。

ローカルのテスト環境としてLocal by flywheelを使っていきます。
メールアドレスの入力だけでダウンロードできます。
もしイヤであれば、aaa@test.comとか入力すればダウンロードできます。

local_homepage.png
local_download.png

インストールしましょう。
ブラックボックス感満載ですが、余計なものを省いた仮想環境ソフトでしょう。VagrantとかVirtualBoxと同じだと思います。

WordPressを環境を作成。

起動します。

a.jpg

起動したらCreate New Siteで早速WordPressを作りたいところですが、ちょっとだけ設定を見てみます。
どこにWordPressが作られるんでしょうか。

左上ハンバーガーメニューからPreferenceに入り、
local_preference.png
New Site Defaultsを覗いてみます。
local_save_folder.png

サイトのパスの設定が~/Local Site/となっていますね。
~はホームフォルダという意味の省略語で、Windowsの場合は、ローカルディスク(C):\Users\userのフォルダですね。
そこにLocal Site というフォルダはまだありませんが、新しく作られて、Local Siteフォルダの中にWordPressのコードが入ります。

では、Create New Siteしましょう。
何度でも作り直せるのがLocal by flywheelのいいところなので、考えずに適当に入れていきます。

はい
local_my_first_test.png

次
local_my_first_test2.png

次
local_my_first_test3.png

初回は警告が出てきますが、OKするしか進めません。焦っていきましょう。良いことです。
keikoku1.png
keikoku4(1).jpg

keikoku2.png
keikoku3.png

出来上がりました。
画像のとおりクリックするとWordpressのテスト環境が見れます。
local_can_open_site.png

ここでいったんファイルエクスプローラを覗いてみます。
local_explorer.png

ホームフォルダにLocal Siteというフォルダができていて、そこの中にインストールされていることが確認できます。
設定どおりです。

HTMLをWordPressのテーマフォルダへ入れる

Local Site\myfirsttest\app\public\wp-content\themesのフォルダにテーマが入っています。

  • twentytwenty
  • twentytwentyone
  • twentytwentytwo
  • index.php

とありますが、これらは初期テーマです。
それに平行する形で今回の介護テーマを入れます。

kaigo-themeという新しくフォルダを作って冒頭のファイルをぶち込みます。
以下の図な感じのツリーです。

ローカルディスク(C):\Users\userLocal Site\myfirsttest\app\public\
wp-content\themes\kaigo-theme
                          |- css/
                          |- js/
                          |- image/
                          |- about.html
                          |- company.html
                          |- index.html
                          |- news.html
                          |- recuit.html
                          |- service.html

ここまでではまだテーマは表示されません。次の項目に行きます。

テーマフォルダへscreenshot.pngを追加する。

※上ではmyfirstTestという名前で環境を作ってましたが、削除して作り直したため、ここからはkaigoというLocal by flywheelの環境で作業を行っていきます。気になりそうな方は削除して同じ名前で作り直してください。

まずはindex.htmlをブラウザで開きましょう。
キレイにできている今のうちにスクリーンショットを撮ってサムネイルを作ります。大事。

Windowsボタン＋PrintScreenでスクリーンショットを撮ります。
Windowsボタンを押して、"paint"と入力してペイントでも開いて、
Ctrl＋Vで貼り付け。
範囲選択してCtrl＋Shift＋Xでトリミングしましょう。
Ctrl＋Sで保存は書かなくてもいいですね。

kaigo.png

こんな風にスクリーンショットが撮れたら、Wordpressのテーマフォルダkaigo-themeへぶち込みます。
名前を変更してscreenshot.pngとすることでサムネイルとして自動で読み込んでくれます。
まだ表示はされません。次の項目へ行きましょう。

index.htmlをindex.phpに名前変更し、さらにstyle.cssを追加する。

ここからの作業はタイトルごとにGitのcommitを重ねていけばキレイなんじゃないでしょうか。
developって名前でブランチなんて切っておくと、動くコードになるまでそのdevelopブランチで作業できるので、単独での開発でもそう言った開発でいいんじゃないですかね。
今回はファイルをいじる量が多いので、どっちにしろチーム作業ではコンフリクト（チーム作業において、同じコード行を修正して衝突すること）起きると思うのであまり意味はありませんが。
Gitを使ってない方はどんどん進んでいきましょう。

ここまでで、HTMLファイル群がWordpressのテーマフォルダに入って、サムネイル用のscreenshot.pngが追加できましね。
さらに少し手を加えます。
index.htmlをindex.phpと名前の変更し、style.cssというファイルを新規作成します。

ローカルディスク(C):\Users\user\Local Site\kaigo\app\public\
wp-content\themes\kaigo-theme
                          |- css/
                          |- js/
                          |- image/
                          |- about.html
                          |- company.html
                          |- index.php 👈ファイル名を変更
                          |- news.html
                          |- recuit.html
                          |- service.html
                          |- style.css 👈 Ｎｅｗ！

style.cssを開いて4行だけ書いて保存しましょう。

kaigo-theme\style.css
@charset "UTF-8";
/*
Theme Name: 介護テーマ
*/

では、Local by flywheelを起動してWordpressを開いて、見てみましょう。
local_open_site.png

左サイドバーから外観→テーマを選ぶと「介護テーマ」が追加されています！
wp_added_theme.png

ではテーマを有効化する前にライブプレビューでもしてみましょう。

wp_add_new.png

はい、ぐちゃぐちゃです。
ここからビビらず直していきましょう、というのがこの記事で、ここからが本番です。
初心者はこうなっちゃうと壊れたと思っちゃいますが、なんというか、何も壊れてないので落ち着きましょう。

壊れてはいませんが、コードをWordpressに合わせて追加、改変していきます。
大丈夫です。直しますが、壊れていません。

CSS、JS、画像の参照先を修正する。

ここから先の作業は簡便な方法なので、冒頭で書いた通りリファクタリングなりするつもりでやっていきましょう。
とりあえず見た目だけでも先にキレイに表示して安心したいですね。

結論から言うと、これが原因です。

kaigo-theme\index.php
<link href="css/style.css" rel="stylesheet" type="text/css">
<link href="css/responsive.css" rel="stylesheet" type="text/css">
<link href="css/anm.css" rel="stylesheet" type="text/css">

Wordpressではすでにindex.phpを表示していません。
特にトップページはkaigo.local/というアドレスにindex.phpの内容を差し込んでるだけです。
つまり参照元ファイルが変わっているので、相対参照のアドレスでは参照先が見つからないということですね。
F12でコンソール(標準出力)を見てみましょう。

wp_new_console.png

404 （Not Found）がでていますね。
この表示されているファイルの参照箇所を書き換えていけばキレイに表示されます。
（あとでリファクタリングは必要）

CSSのHTML参照先(html reference)をWordpressに合わせて<?= get_template_directory_uri(); ?>/追記します。

kaigo-theme\index.php
<link href="<?= get_template_directory_uri(); ?>/css/style.css" rel="stylesheet" type="text/css">
<link href="<?= get_template_directory_uri(); ?>/css/responsive.css" rel="stylesheet" type="text/css">
<link href="<?= get_template_directory_uri(); ?>/css/anm.css" rel="stylesheet" type="text/css">

ちなみに<?=の読み方はPHPエコーです。
省略しない形が<?php echoなので、そう呼んでいます。

3行だけでもだいぶキレイになって、安心して作業が進められそうですね。
wp_css_daibu_anshin.png

では、同様にJavascriptと画像のリンクを修正していきましょう。

CSSのリンクを直したのと同じ作業をします。

F12でコンソールを確認しながらリンク切れ(404NotFound)だけ直して行きましょう。
まだ3行しか直していないので、Javascriptと画像がリンク切れが残ったままですね。
Ctrl＋Fでjs/と検索して直して、同じようにimages/も検索して、置き換えるのがいいですね。

コンソールがキレイに問題なしになります。
wp_console_no_wenti.png

もしかすると他にエラーが出る可能性もありますが、今回は404NotFoundのエラーだけ消せればOKです。

ページ遷移のリンク切れを修正する

トップページから別のページへのリンクも、相対参照しているため、リンク切れを起こしています。
現象としては、リンク切れページすらも用意していないので、Wordpressがindex.phpを表示してくれています。
つまり、トップページを表示してくれる状態ですね。
でも、たとえば「私たちについて」のページをクリックしてから、アドレスバーを見てください。
address.jpg
でも表示されてるデザインは、トップページのはずです。おかしいですね。

このままではエラーリンクに気付きにくいので、まず簡易的に404 Not Foundのページを作りましょうか。

404.phpを追加する。

テーマフォルダ内に404.phpというファイルを追加します。デザインはあとで直すとして、次のようにします。

kaigo-theme\404.php
<?php
/**
 * The template for displaying 404 pages (not found)
 */
?>
<h1>404 Not Found</h1>
<p>ページが見つかりませんでした</p>
<a href="<?= get_site_url(); ?>">トップページへ戻る</a>

これのファイルを追加した状態でトップページを開いて「私たちについて」のリンクをクリックしてみましょう。

Not Found.png

これで一旦、すべてのリンク切れはWordPressがよしなにしてくれます。

デザインはあとで修正するとして、これで作業を進めましょう。

about.htmlを修正する。

about.htmlを例に変更していきます。

まずはabout.htmlをabout.phpに名前変更します。
しかしこのままではWordpressがまだ認識してくれません。
そこで、ファイルの先頭に次の5行を追記します。

kaigo-theme\about.php
<?php
/**　　　　　　　　　　　　　　　　　
 * Template Name: 私たちについて
 */
?>
<!doctype html>   👈ここ以下はひとまずそのままで。
<html lang="ja">
︙

これでWordPressが認識してくれますので、ページ作成をしてそのページに紐づけます。

Wordpress管理画面の左サイドバー、固定ページに入って、新規追加します。
wp_new_add.png

  • タイトルにページ名を記載 (私たちについて)
  • テンプレートを指定 (私たちについて)
  • アドレスを指定 (about)

３つを指定して公開します。

wp_new_template.png

アドレスにkaigo.local/about/を指定したので、アドレスバーにkaigo.local/about/と入れれば開けます。

index.phpのリンクを書き換えましょう。

kaigo-theme\index.php
<a href="about.html" class="animoBubble5">

書き換えます。

kaigo-theme\index.php
<a href="kaigo.local/about/" class="animoBubble5">

違いますね。

Wordpressの関数を使いましょう。
今回はトップページのアドレスが返ってくる関数<?= get_site_url(); ?>/を使います。

kaigo-theme\index.php
<a href="<?= get_site_url(); ?>/about/" class="animoBubble5">

これで動きます。

wp_return_home.png

またCSSがリンクが切れてますけど、動いてることが確認できたら、index.php内のすべてのhref="about.html"を書き換えましょう。
すべて書き換えたらindex.php内で検索を書けても、about.htmlは検索に引っかからないはずですので、そこまで書き換えましょう。

また逆方向のリンクとして、index.htmlへのリンクになっている箇所も変更しましょう。
このリンクのみ少し特殊でindex.htmlをindex.phpに名前の変更をした時点でWordpressがindex.phpをルートドメインとして表示するようになったため、以下のように変更しましょう。

kaigo-theme\about.html
<a href="index.html">

上のindex.htmlを次のように書き換えます。

kaigo-theme\about.html
<a href="<?= get_site_url(); ?>">

この記載でドメイン（正確には違いますが）であるkaigo.localというアドレスが返ってくるので、トップページにアクセスできます。
（このあたりも正確ではありませんが）

一度、書き換えたアドレスをF12を押して、ブラウザのデベロッパーツールで確認してみましょう。
<?= get_site_url(); ?>と記載した箇所が、実際のホームページでは、どういう文字列に変換されて出力されているかをその目で確認しましょう。

kaigo.localであったり、http://localhost:10003/だったり、環境によりますが、Wordpressのルートドメインが出力されているはずです。

遷移のリンクの修正が済んだら、
トップページでやったようにabout.php内のCSS、Javascript、画像のリンクに<?= get_template_directory_uri(); ?>/を追記しましょう。
コンソールでエラー箇所を確認すると良いでしょう。

キレイになるはずです。

service.htmlを修正する

あとは同じ作業を各ページ、各リンクで繰り返していくだけです。

Wordpressに呼んでもらえるように拡張子をphpに変更して、テンプレート化しましょう。忘れずに、

<?php
/**　　　　　　　　　　　　　　　　　
 * Template Name: サービス
 */
?>

を先頭にいれましょう。
WordPressのルーティングの設定ができたらアドレス直打ちでWordPressから呼び出せるかを確認しましょう。
テストができたらGitコミットできますよね。

また、リンクを直す際は、

  • ページ内遷移の#を使った箇所のアドレス
  • アドレスに.htmlが残ったままになっていないか
  • index.htmlが<?= get_site_url(); ?>に置き換える

あたりを注意して直すと良いでしょ
終わったらきちんとテストしましょう。

company.htmlを修正する

同じですね。
Template Nameはかぶっても動きますが、わけがわかんなくなるので、適切に名前をつけましょうね。

同じような作業ですが、一気に作業せず、なるべく細かい単位でテスト、コミットしましょう。
Wordpress自体がクソ面倒くさいですからね。自分が使いたくないからこんなマニュアルを書いているわけで

recuit.htmlを修正する。

この機会にスペルミスを直しましょう。recruitのことですよね。
「修正: スペルミス」で1文字の修正でコミットしましょう。どうせリンクは切れてますから。

ページのCSS、JS、画像のリンクを修正しましょう

ここからやっとPHPを使う意味が出てきたところになりますね。

リンクを修正していく前に、問い合わせフォームを作りましょう。
その後リンクを貼る手順で作業を進めていきます。

Contact Form 7プラグインを入れます。
wp_contact_form_7.png

recruit.phpのすでに作ってあるフォームの下に埋め込みコードを追記します。
追記して、CSSを移して、今あるフォームを削除する手順で行きますので。

kaigo-theme\recruit.php
  <section id="form">
    ︙
  </section>
</main>

あとでセクションにぶち込みますが、

kaigo-theme\recruit.php
  <section id="form">
    ︙
  </section>

  <?= apply_shortcodes(''); ?>　　👈New!

</main>

実際のショートコードを('')の中に埋め込みます。
次の画像の箇所に埋め込むべきショートコードが記載されています。

form7.jpg
form7_shortcode.jpg

これを('')埋め込んで次の形にしましょう。idとかは環境によると思います。

kaigo-theme\recruit.php
  <section id="form">
    ︙
  </section>

  <?= apply_shortcodes('[contact-form-7 id="20" title="コンタクトフォーム 1"]'); ?>　　👈New!

</main>

これでフォームが表示されるはずです。

ここからはかなり具体的に今回の例に合わせていますので、環境によって対処しましょう。

ContactForm7の初期設定では自動で<p> <span>などが追加されますが、今回は必要ありませんどころか邪魔です。（あくまで今回不要で邪魔なだけで毎回必要な作業ではありません）

ContactForm7に標準でカスタマイズするための受け口（フック）が用意されています。

  • wpcf7_autop_or_not
  • wpcf7_form_elements

これを利用します。

kaigo-themeフォルダにfunctions.phpという名前でファイルを作り、以下の12行だけのファイルを作ります。
どちらも第二引数に無名関数を取る書き方をしています。ちょっとむずかしい書き方ですが面倒なので。

kaigo-theme\functions.php
// Contact Form 7の自動pタグ無効
<?php
add_filter('wpcf7_autop_or_not', function () {
    return false;
});

// Contact Form 7の自動spanタグ無効
add_filter('wpcf7_form_elements', function($content) {
    $content = preg_replace('/<(span).*?class="\s*(?:.*\s)?wpcf7-form-control-wrap(?:\s[^"]+)?\s*"[^\>]*>(.*)<\/\1>/i', '\2', $content);

    return $content;
});

今回作っている<form>にはidが振られていますので、コンタクトフォームで表示されるフォームにもidを加えます。

kaigo-theme\recruit.php
<?= apply_shortcodes('[contact-form-7 id="20" title="コンタクトフォーム 1" html_id="form"]'); ?>

コンタクトフォーム7の画面でフォームを作ります。
作っているHTMLフォームはこんな形ですね。

<form action="" method="post">	
  <div class="Form-Item">
    <p class="Form-Item-Label">
      <span class="Form-Item-Label-Required">必須</span>ご用件
    </p>
    <select class="Form-Item-Select" name="choice" id="yoken-select">
      <option class="Form-Item-Select" value="選んでください▽">選んでください</option>
      <option class="Form-Item-Select" value="介護保険サービスについて">介護保険サービスについて</option>
      <option class="Form-Item-Select" value="障害福祉サービスについて">障害福祉サービスについて</option>
      <option class="Form-Item-Select" value="採用情報について">採用情報について</option>
      <option class="Form-Item-Select" value="その他">その他</option>
    </select>
  </div>
  <div class="Form-Item">
    <p class="Form-Item-Label"><span class="Form-Item-Label-Required">必須</span>お名前</p>
    <input type="text" class="Form-Item-Input" placeholder="例）山田 太郎">
  </div>
  <div class="Form-Item">
    <p class="Form-Item-Label"><span class="Form-Item-Label-Required">必須</span>メールアドレス</p>
    <input type="email" class="Form-Item-Input" placeholder="例）example@gmail.com">
  </div>
  <div class="Form-Item">
    <p class="Form-Item-Label"><span class="Form-Item-Label-Required">必須</span>電話番号</p>
    <input type="text" class="Form-Item-Input" placeholder="例）000-0000-0000">
  </div>
  <div class="Form-Item">
    <p class="Form-Item-Label">件名</p>
    <input type="text" class="Form-Item-Input">
  </div>
  <div class="Form-Item">
    <p class="Form-Item-Label isMsg"><span class="Form-Item-Label-Required">必須</span>お問い合わせ内容</p>
    <textarea class="Form-Item-Textarea"></textarea>
  </div>
  <input type="submit" class="btn Form-Btn" value="送信する">
</form>

この中のインプット要素<select> <input> <textarea>をContactForm7のGUIで作って置き換えて行きます。
Form要素とインプット要素を消して、

  <div class="Form-Item">
    <p class="Form-Item-Label">
      <span class="Form-Item-Label-Required">必須</span>ご用件
    </p>
👉
  </div>
  <div class="Form-Item">
    <p class="Form-Item-Label"><span class="Form-Item-Label-Required">必須</span>お名前</p>
👉
  </div>
  <div class="Form-Item">
    <p class="Form-Item-Label"><span class="Form-Item-Label-Required">必須</span>メールアドレス</p>
👉
  </div>
  <div class="Form-Item">
    <p class="Form-Item-Label"><span class="Form-Item-Label-Required">必須</span>電話番号</p>
👉
  </div>
  <div class="Form-Item">
    <p class="Form-Item-Label">件名</p>
👉
  </div>
  <div class="Form-Item">
    <p class="Form-Item-Label isMsg"><span class="Form-Item-Label-Required">必須</span>お問い合わせ内容</p>
👉
  </div>
👉

それを、コンタクトフォーム7の画面へいったん貼り付け。
wp_contact_form.png

で、作っていきます。
セレクトボックスですね。
セレクトボックスがあった位置にカーソルを合わせてから、、ドロップダウンメニューを選択。
wp_contact_form.jpg

選択肢やid,classを書き加えます。
wp_contact_form_select.png

そしたらContactFormが読める様式で書き出されますので、似たような感じのことを繰り返します。

実際に送信はされませんが、必須項目を入力して、ありがとうございましたが表示されればコードとしては完成です。
なんかよくわかりませんが、バリデーションエラーのCSSなどを後で整えれば良いでしょう。

実際の送信の機能はローカル環境ではなく、サーバー環境じゃないと入れにくいと思います。

では忘れないように、他ページからのリンク切れを修正もしておきましょう。

ブログページを修正する

news.html(記事一覧)を修正する。

ここらからWordpressに組み込んだ意味が出てきますね。

とりあえず、他のページと同じように、CSS、JS、画像のリンクを直してたりして、普通にリンクが表示されるようにしてみましょう。
その後、仮で入れてあるブログ記事部分にWordpressのブログ表示用コードを埋め込みます。

ブログ表示ページを追加する。

初期のブログページが表示できるようにしましょう。
テーマフォルダにsingle.phpというページを作ると表示されます。
Wordpressらしい書き方ではないですが、コード自体は勉強してください。

kaigo-theme\single.php
<?php
/**
 * The template for displaying all single posts
 */
?>
<main>
	
	<?php the_title( '<h1 class="entry-title">', '</h1>' ); ?>

        <div class="post">
            <?php if(have_posts()): ?>
                <?php while(have_posts()): ?>
                    <?php the_post(); ?>
                    <div class="date"><?php the_time('Y年n月j日'); ?></div>
                    <?php the_content(); ?>
                <?php endwhile; ?>
            <?php endif; ?>
        </div>
	
</main>
<?php

とりあえずこれを保存するとブログ記事が表示できるはずです。
管理画面からリンクを踏んでみましょう。

wp_single.jpg
wp_single_slug.jpg

デザインは組んでないので、デザインのかけらもないブログページが表示されます。
wp_single_hello_world.png

ヘッダーとフッターだけindex.phpからコピペして<main>タグを挟み込むと、、

wp_single.php.png

素直に動きます。
CSS当てていけば、キレイになりそうですよね。

一覧画面に表示する。

まず今回はWordpressのブログ機能を「新着情報」と「ブログ」というカテゴリを2つ作って運用しそうです。
wp_blog_category.png

なので、Wordpressの管理画面から2つのカテゴリを作っておきましょう。
新着情報 → news
ブログ → blog
とスラッグをつけて作成しました。
サンプルデータとして2記事ずつ作成していますので、カウントがそれぞれ2になっています。

wp_category_add.jpg

さきほどのデザインの表示されている中身のコードはこうなっています。

kaigo-theme\news.php
<div class="news-sub">
  <dl>
    <dt>2022.02.04</dt>
    <dd>新型コロナウイルスによる当社事業所の運関事業所の運営に関...</dd>
    <dt>2022.02.04</dt>
    <dd>新型コロナウイルスによる当社事業所の運関事業所の運営に関...</dd>
    <dt>2022.02.04</dt>
    <dd>新型コロナウイルスによる当社事業所の運関事業所の運営に関...</dd>
    <dt>2022.02.04</dt>
    <dd>新型コロナウイルスによる当社事業所の運関事業所の運営に関...</dd>
  </dl>
</div>

Wordpressらしくない書き方ですが、次のように書き換えました。

kaigo-theme\news.php
<div class="news-sub">
  <dl>
    <?php $the_query = new WP_Query(['category_name' => 'news', 'post_status' => 'publish' ]); ?>
    <?php if ( $the_query->have_posts() ) : ?>
      <?php while ( $the_query->have_posts() ) : ?>
        <?php $the_query->the_post(); ?>
        <a href="<?php the_permalink(); ?>">
          <dt><?php the_time('Y.m.d'); ?></dt>
          <dd><?php the_title(); ?></dd>
        </a>
      <?php endwhile; ?>
    <?php endif; ?>
  </dl>
</div>

非常にWordpressらしくない書き方ではありますが、Wordpressが異常なので、苦肉の策な書き方で、なんかいい方法あったら教えて欲しいです。そうだ！Wordpressを使わなければいいんじゃ・・・

WP_Queryにカテゴリ名newsでかつ公開中のものを指定して$the_queryという名前の変数にWP_Queryのインスタンスを格納しています。（使い方だけ調べてなんとなく使えたらいいと思います。果てしない道だと思うので。）
その$the_queryから記事を一つ一つ取り出すのを、ループで回しています。
（ページネーションなどする場合は、WP_Queryにページ番号や、ページごとの取得件数を引き渡したりします。）

同じように、配列のキーcategory_nameに対する値をblogに書き換え、ブログのコード箇所にコピーすると動くでしょう。

wp_kanseikei.png

トップページの新着一覧も同じように変更しましょう。トップページからはページネーションではなく、最新の6件だけ表示するようにposts_per_pageの値を6にする設定をWP_Queryのインスタンス作成の引数に設定しましょう。
また、カテゴリ分けをしないため、category_nameの設定を外しましょう。
できればカテゴリ名を取得して、カテゴリ名の表示もしてみましょう。

kaigo-theme\index.php
<?php $the_query = new WP_Query(['posts_per_page' => 6, 'post_status' => 'publish' ]); ?>
<?php if ( $the_query->have_posts() ) : ?>
  <?php while ( $the_query->have_posts() ) : ?>
    <?php $the_query->the_post(); ?>
    <a href="<?php the_permalink(); ?>">
      <dt class="bounceInLeftTrigger animated.slower"><?php the_time('Y.m.d'); ?>
        <span><?= get_the_category()[0]->cat_name ?></span>             👈New‼
      </dt>
      <dd><?php the_title(); ?></dd>
    </a>
  <?php endwhile; ?>
<?php endif; ?>

新着情報カテゴリか、ブログかが判別できるように表示されていますね。

index.php.png

ここまででGitのコミットが22〜28コミットくらいになっていれば、細かく分けられていていいと思いますね。
Web制作だとそれくらいの粒度だと思います。

最低限まだ直すところ

最低限は動いたので、説明はこのあたりにします。
あとの項目は調べて独自で直していってみましょう。

  • news.phpである記事一覧ページにページネーションを組み込む。かなり難しいかもしれませんが。
  • category.phpを用意して新着情報だけの記事一覧、ブログだけの記事一覧ページを作成する。
  • ヘッダーをheader.phpに、フッターをfooter.phpに分ける。
  • functions.phpをもっと書く。
    • 無駄なデフォルトのコードを消すために、消すためのコードを書く。
    • CSSの読み込みコードを書いてwp_footer関数を各ページに追加し、link rel="stylesheet"を消す。
    • Javascriptの読み込みコードを書いてwp_head関数を各ページに追加し、script srcを消す。
    • jsフォルダのJQueryとWordpress組み込みのJQueryが二重になっているのでどちらかを消す。
    • JQuery使わない
  • index.phpをfront-page.phpに直す。テンプレート化もする。
  • テンプレートページをpage-slug.phpとかにする。slugとはRoutingのこと。
  • 定数を使ったり（Wordpressの機能でもあるかも）打ち間違いしやすい電話番号などをphpで出力する

これから先について

圧倒的にこの本をおすすめします。
https://www.amazon.co.jp/%E3%82%A8%E3%83%B3%E3%82%B8%E3%83%8B%E3%82%A2%E3%81%AE%E3%81%9F%E3%82%81%E3%81%AEWordPress%E9%96%8B%E7%99%BA%E5%85%A5%E9%96%80-Engineers-Library-%E9%87%8E%E5%B3%B6-%E7%A5%90%E6%85%88/dp/4774187062

2
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
2
5