WordPressの自作テーマを、超最小構成から順番に組み上げる講座です。全8回で一通り動くテーマが完成します。
既成テーマのカスタマイズで詰まったとき、テーマがどう動いているかを知っていると解決が早くなります。①から順番に進めてください。
フルサイト編集(FSE)についても最後にまとめています。
目次
自作テーマ制作 全8回
最小構成から始めて、ヘッダー・フッター、メニュー、トップページ、各種テンプレートを順に追加していきます。1本ずつ手を動かしながら進める構成です。
第1回。index.phpとstyle.cssだけの超最小構成から始めます。ここから読んでください。
あわせて読みたい


WordPress自作テーマ制作①│超最小構成で自作テーマを作る方法
対象はPHPテンプレートを使うクラシックテーマです。最小の認識条件と、記事を実際に表示できる状態を分けて説明します。ブロックテーマの作成手順ではありません。過去...
第2回。ヘッダーとフッターをテンプレートパーツに分けます。
あわせて読みたい


WordPress自作テーマ制作②│ヘッダーとフッターの作成
この回はクラシックテーマのheader.php・footer.phpへの分割と、index.phpからの読み込みを扱います。 編集前に対象ファイルを保存し、部分コードと末尾のまとめを重複...
第3回。ナビゲーションメニューとウィジェットエリアを登録します。
あわせて読みたい


WordPress自作テーマ制作③│メニューとウィジェットの作成
このページはクラシック形式の自作テーマ向けです。 ブロックテーマのサイトエディターやSWELLの親テーマへそのまま貼る手順ではありません。 作業前にテーマファイルを...
第4回。トップページのテンプレートを作ります。
あわせて読みたい


WordPress自作テーマ制作④│トップページ作成
自作クラシックテーマにロゴ・サイト名・コピーライトを配置し、最新投稿と固定ページで使うテンプレートを作成します。 ロゴ未設定時はサイト名リンクを表示します。 ...
第5回。投稿ページと固定ページのテンプレートを作ります。
あわせて読みたい


WordPress自作テーマ制作⑤│投稿ページ・固定ページの作成
パンくずを更新し、カテゴリーがない投稿の未定義変数と、検索語・タイトル等の未エスケープ出力を修正しました。旧breadcrumb関数とその呼び出しを削除して、以下の関...
第6回。アーカイブ(記事一覧)ページを作ります。
あわせて読みたい


WordPress自作テーマ制作⑥│アーカイブページ(記事一覧ページ)の作成
クラシックテーマのカテゴリー・タグ・日付などの一覧をarchive.phpで表示します。WordPressのメインクエリをそのまま使い、抜粋とページ送りを表示する例です。categor...
第7回。検索結果ページを作ります。
あわせて読みたい


WordPress自作テーマ制作⑦│検索結果ページの作成
クラシックテーマの検索フォームと検索結果ページを作ります。入力語をフォームに残し、未入力・結果なし・複数ページを分けます。既存テーマを直接書き換える前に、検...
第8回。style.cssで全体の見た目を整えて完成させます。
あわせて読みたい


WordPress自作テーマ制作⑧│見た目(style.css)の作成
まとめのPHP例をシリーズの修正版に合わせました。 未設定ロゴの画像参照、検索語の直接GET参照、未定義のメニューフィルター、パンくずの未エスケープ出力を置き換えて...
フルサイト編集(FSE)
ブロックでテーマ全体を編集する仕組みです。従来のPHPテンプレートとは考え方が異なります。
ブロックでテーマ全体を編集するフルサイト編集の基本です。従来のPHPテンプレートとは考え方が違います。
あわせて読みたい


フルサイト編集(FSE)とは|サイトエディターの使い方とブロックテーマ
フルサイト編集は、WordPressでヘッダーやフッターまで含めて、ブロックだけでサイト全体を組める機能です。かつては「フルサイト編集(FSE、Full Site Editing)」と呼...

