#WordPress #ワードプレス #wordpress
カスタムタクソノミー
カスタム投稿は理解できましたが、カスタムタクソノミーとは・・・？なんだか難しいです。ChatGPTに何度も質問して、このような表になりました！
| 用途 | 実体 | タクソノミーの 名前 |
|---|---|---|
| カテゴリー | 標準タクソノミー | category |
| タグ | 標準タクソノミー | post_tag |
| ジャンル | カスタムタクソノミー | genre |
（厳密には違うかもしれませんが）投稿ではカテゴリー、カスタム投稿ではジャンル（＝カスタムタクソノミー）、みたいなイメージでしょうか。定義さえすれば、カスタム投稿でもカテゴリーも使用できるようですが、ややこしくなるので今回はカスタム投稿でジャンル（＝カスタムタクソノミー）とタグを使用することにします。
タイトルの下にジャンルを表示して、リンクできるようにしました。
投稿を種別などで区切って管理しやすいのですね。
目次の作成
投稿の上部に目次を作成します。
- 今回はプラグインではなく、jQueryで実装します。
またまたChatGPTに出力してもらい、この流れになりました。
- 記事本文のHTMLから対象を抽出。
- 目次用のHTMLを作成。
- 本文の h2 タグにアンカー（id）を付与。
- ページ内に目次を表示。
デザインを整えて完成です！
アーカイブページ
作成したカスタムタクソノミーからアーカイブページへリンクできるようにします。
アーカイブページはarchive.phpを使用することとし、以下の内容で作成していきます。
- 選択したジャンルの投稿を表示。
- 下にはジャンルを表示。
以前、標準の投稿でアーカイブページを作成した時と手順が異なりましたのでメモです。
標準の投稿では、
- 設定＞表示設定＞ホームページの表示＞固定ページ
ここでアーカイブページ（一覧ページ）として作成した固定ページのタイトルを選択して表示できたと思います。いろいろ違うようですね、、。
ページはできましたが、要素が少ないのでフッターが画面上部にあがってきてしまいました。
どんな方法が良いかChatGPTに聞いてみると、 flexを使用してmainをflex: 1;にするのが今風で簡単だそうです。
要素が少なくてもフッターの調整ができました。
検索機能
全体的に整ってきたので、次は検索機能を実装します。
今回はプラグインは使用せずに自前で実装してみます。
2つ、テンプレートファイルを追加作成します。
-
search.php
→ 検索結果を表示するテンプレートファイル。
→ 検索実行後にユーザーに見せるページの中身を制御するもの。 -
searchform.php
→ 検索フォーム（＝ユーザーがキーワードを入力する検索窓そのもの）のテンプレートファイル。
→ なくても動くが、あればget_search_form()で呼び出される。
get_search_form()で標準の検索フォームを呼び出す。- 標準では投稿のみだが、カスタム投稿タイプ検索対象に含めるため
functions.phpへ記述。 - 検索フォームはヘッダーに設置。
- アイキャッチと抜粋を表示するよう
search.phpで記述。 - 検索ボタンをアイコンにするため
searchform.phpで記述。
検索してみると、”ワードプレス”では検索にヒットしません。。
WordPressの標準検索の仕様では、
- ⚪︎ WordPress と wordpress
- × ワードプレス と WordPress
となっているようです。
“表記ゆれ”を含めておきたいと思います。
いろんな方法があるようですが、投稿文に単語を記述する方法で、SNS風の#ハッシュタグスタイルで記述することにします。
これで検索にヒットしやすくなりました！
WordPressの引越し（サーバーアップ）
ローカルで開発した環境をサーバーにアップします。
Udemyの講座を受講しているのでやり方を再度確認します！
プラグイン、All-in-One WP Migrationを使用します。
- サイトのエクスポート
- サイトのインポート
これだけで良いのですが、無料版でデータ容量が超えてしまいましたので、高度な設定で「テーマファイルは除く」にして軽量化してからエクスポートしました。
無事に本番環境へのアップが完了しました！
表示を確認してみると、Google Fontsで読み込まれていないものがあるようです。
Italianaというフォントを見出しに使用していたのですが、フォールバック用のsans-serifが使用されています。PCでは問題ないのですが、スマホで見られた不具合です。
- フォントの読み込みを1種類ずつに分割して、記述することで解決しました。
最初からサーバー上で開発する場合は、noindexの指定と、Basic認証もかけておこうと思います。次回はその件をメモしていきます！
以上でHTMLサイトのWordPress化のメモ終了としたいと思います。