記事を検索

WordPressでWeb制作する場合、自作のテーマを作ることが多い。

ただし初めはどこから触ればいいの…？とっかかりにくい😫

• wordpressフォルダ/wp-content/themes にテーマフォルダがある。
• 自作テーマを作る場合はwordpressフォルダ/wp-content/themesフォルダの中に空のテーマフォルダ「TestTheme（任意のテーマ名）」を作成する。

📄開発初心者向け！WordPressのざっくりとした構成を解説

• 「index.php」と「style.css」の2ファイルが必須。
  • テーマとして認識されるために必要。
  • 必ずこのファイル名。
  • テーマフォルダ直下に保存する。

「TestTheme（任意の名前）」フォルダを作成。

中に「index.php」と「style.css」を作成。

これだけでテーマとして認識される！

テーマを構成するファイルは大きく以下の3種類に分けられる。

アクセスしたページに応じて表示されるファイル。

例：index.php（トップページ）, single.php（投稿ページ）, page.php（固定ページ）など

この中でインクルードファイルファイルを読み込む。

【補足】どのファイルがどのページで使われるの？

「テンプレート階層」というものがWordPress側で定められている。

この階層によってどのページでどのファイルが使われるか決まっている。

テンプレート階層の詳細は以下を参照

📄WordPress開発初心者必見！テンプレートファイルとは何かを解説

WordPressのテンプレート階層を攻略せよ | ともすたmedia | ともすた

https://tomosta.jp

💡

「トップページ」と「投稿ページ」で見た目を変えたい！
↓
それぞれのページでメインテンプレートファイルを用意する。

テーマ独自の機能を実装するためのファイル。

ファイル名：functions.php のみ

詳細は以下を参照

🚫 ただいま記事作成中です💭

https://digitor.jp

💡

細かい機能を実装するときに使う！

【補足】イメージ

• インクルードファイルは各ページで共通
• 中身はページによって異なる

トップページ（index.php）

投稿ページ（single.php）

テンプレートファイルの簡単な説明は以下を参照。

📄WordPress開発初心者必見！テンプレートファイルとは何かを解説

1. wordpressフォルダ/wp-content/themesフォルダの中に自作のテーマフォルダ「TestTheme（任意のテーマ名）」を作成。
2. 「TestTheme」直下に「index.php」を作成。
3. 「TestTheme」直下に「style.css」を作成。
4. 共通部分をまとめるため、インクルードファイルを作成。
   • 「header.php」、「footer.php」など
5. ページの種類ごとに表示する内容を切り替えるため、メインテンプレートファイルを作成。
   • 「single.php」、「page.php」など
6. 細かい機能を実装するなら、さらにテーマ関数ファイル(functions.php)を作成。

• wordpressフォルダ/wp-content/themesフォルダの中に自作のテーマフォルダ「TestTheme（任意のテーマ名）」を作成。

• テーマとして認識させるため自作のテーマフォルダ「TestTheme」の中にindex.phpを作成する。

• テーマとして認識させるため自作のテーマフォルダ「TestTheme」の中にstyle.cssを作成する。

style.cssはただのcssファイルではない。

役割は以下の3つ。

• 以下のようにテーマの情報を書き、［外観－テーマ］の詳細画面でこれらの情報を表示できる。
• この書式をコメントヘッダーと呼ぶ。

Copy

/*
Theme Name: テーマの名前を記入します（必須）
Theme URI: テーマのURLを記入します
Author: テーマの作者（組織名）を記入します
Author URI: テーマの作者のURLを記入します
Description: ここにテーマの説明文を記入します
Version: 1.0
*/

コメントヘッダーなしのとき

テーマフォルダの名前がそのまま表示されるだけ。

コメントヘッダーありのとき

Copy

/*
Theme Name: テーマ名
Theme URI: テーマのURLを記入します
Author: ◯◯チーム
Author URI: テーマの作者のURLを記入します
Description: このテーマは〇〇のテーマです。
Version: 1.0
*/

【補足】主要なコメントヘッダー一覧

Theme Name:	テーマの名前
Theme URI:	テーマのURL
Author:	テーマの作者（組織名）
Author URI:	作者のURL
Description:	テーマの説明文
Version:	テーマのバージョン
License:	テーマのライセンス
License URL:	ライセンスのURL
Tags:	テーマに関連するタグ。カンマ区切りで複数設定可能。
Template:	親テーマの名前（子テーマの場合のみ）

• 各ページで共通化しておきたいパーツ（インクルードファイル）を作成する。

📄WordPressのテーマに必須！初心者でもわかるheader.php

📄WordPressのテーマに必須！初心者でもわかるfooter.php

📄WordPressの［検索フォーム］をパーツ化！初心者でもわかるsearchform.php

📄WordPressの［サイドバー］をパーツ化！初心者でもわかるsidebar.php

ちょっと応用！

• 各ページのメインとなる部分（メインテンプレートファイル）を作成する。
• ここまでできたら一旦完成

📄WordPressの［あらゆるページ］を表示！初心者でもわかるindex.php

📄WordPressの［投稿］を表示！初心者でもわかるsingle.php

📄WordPressの［固定ページ］を表示！初心者でもわかるpage.php

📄WordPressの［検索結果ページ］を表示！初心者でもわかるsearch.php

🚫 ただいま記事作成中です💭

🚫 ただいま記事作成中です💭

📄WordPress開発初心者必見！テンプレートファイルとは何かを解説

【WordPressでオリジナルサイトを作ろう】⑤パーツ構成編

WordPressのパーツ構成について説明しています。header.php、footer.php、sidebar.phpをはじめ、各テンプレートファイルの構成と、各ファイルに記述すべき内容について解説していきます。WordPressでオリジナルテーマを作る際は、wp_head()とwp_footer()の記述も忘れてはいけません。

https://code-step.com

• テーマをカスタマイズしていく場合に必要！
• テーマフォルダ直下に「functions.php」を追加する。

🚫 ただいま記事作成中です💭

すべてのテーマファイルの先頭に、直接テーマファイルにアクセスしたときは動作しない処理を書くといい。

if ( ! defined( 'ABSPATH' ) ) exit;