#WordPress #ワードプレス #wordpress
目的
WordPress化して、機能を充実させようと思います。
- WordPress化の練習
- カスタム投稿の使用
- カスタムタクソノミーの使用
- 検索機能の追加
ちなみにHTMLで作成していたサイトはこちらになります。見た目は同じにWordPress化した後、投稿をループ表示していきます。
open_in_newhttps://pf.web-im.com/
WordPress化のおおまかな流れは調べて確認しておき、作業時にChatGPTを活用して行います。
info全体のざっくりした流れだけをメモしていきます。
MAMPでの開発環境
MAMP上で予め作成していきます。
MAMP、WordPressはダウンロードして他サイトに使用していましたが、無料のMAMPだと1サイトしか作成できないのでリセットします。
- phpMyAdminから対象のテーブルを全て削除
- wp-contentの今回はuploadsフォルダを削除
- WordPressを再セットアップ
ざっくりですが、この流れで行いました。
WordPressテーマ作成
index.htmlを分割してテンプレートファイルに分けます。
- ヘッダー部分 →
header.php - メイン部分 →
front-page.php - フッター部分 →
footer.php
header.phpには<?php wp_head(); ?>を、footer.phpには<?php wp_footer(); ?>を忘れずに記述します。- CSSなどは
functions.phpで読み込み、jQueryはWordPress標準のものを使用します。
実装方法で迷ったり疑問に思う点は、都度ChatGPTとやりとりしてすすめます。
テーマ構成はおおよそこんな感じです。後で他にも追加していくと思います。
作品サイト/
├─ front-page.php ← トップページ用
├─ single-site.php ← カスタム投稿タイプ「site」用
├─ page.php ← 固定ページ用
├─ index.php ← フォールバック用（汎用）
├─ search.php ← 検索結果表示用
├─ searchform.php ← 検索フォーム部品
├─ archive.php ← アーカイブ一覧表示用
├─ header.php ← ヘッダー
├─ footer.php ← フッター
├─ functions.php ← テーマの関数/設定
├─ style.css ← メインCSS
├─ common.css ← 共通CSS
└─ その他（images/, js/, etc）
ここまででHTMLサイトと見た目を同じにしました。
ちなみに初めてオリジナルテーマを作成した時には、テンプレートファイルの構成がいまいち頭に入らず。このような図を作成して何度か見返していました。
カスタム投稿
作品種類によって投稿を分けます。
| 名前 | スラッグ |
|---|---|
| サイト制作 | site |
| デザイン | design |
| その他 | other |
functions.phpでカスタム投稿タイプの登録をして、使用できるようにします。
サイト制作から作成するので、テンプレートファイルsingle-site.phpを作成します。
- タイトル、投稿日を表示
- ヘッダー・フッターを表示
プログラムをChatGPTで記述して、適当なコンテンツを投稿に入れ表示確認をします。
投稿が表示されない・・？
確認すると、MAMPの設定上なのか、.htaccessで「mod_rewrite モジュールが無効化されている」ようです。コメントアウトをはずせば有効化できるようなので、修正します。この隠しファイルの見方が最初分からなかったのですが、今回はできました。
無事に表示されました！
不具合箇所は適宜調べて修正していきます。
ループ表示
サイト制作の投稿1つ目（このページ）が形になってきました。
ちなみに吹き出しのキャラクターは無料素材をアレンジ、アイコンはGoogle Material Symbolsを使用しました。
次は投稿をトップページに表示する仕組みを作ります。表示する内容はこのようにします。
- カードレイアウトで。
- アイキャッチ画像、タイトル、投稿日。
- 最新の投稿を4つ。
アイキャッチ画像が今は表示されていないので、functions.phpに記述して表示できるようにします。
トップページテンプレートにしたfront-page.phpに、ChatGPTで作成したループ表示を記述します。
見た目の微調整をして、こんな感じになりました。
次の投稿では、アーカイブページとカスタムタクソノミー関係についてメモしていきます。
最後に、今回知ったダッシュボードの使い方をメモします。
サイトの表示を見る時に、ツールバーが邪魔だなと思っていました。
プラグインで位置を下に移動していたこともあるのですが、ユーザー＞プロフィールの設定で非表示できるようです。