【初心者向け】Wordpressテーマを自作する際に分かってると良いかもしれないこと

お客様からの要望で「自分で更新を行いたい」と言われる事が多く、最近はどこのWEBサーバでもWordPressのインストール機能がついていたりするので、99%の確率でWordPressでWEBサイトを構築しています。（残りの1%は、他CMSだったりHTMLだったり）
フルスクラッチだと、工数が多くなりがちなので、工数を減らすための最小限のテーマファイルだったり、コードだったりを常に考えています。
この記事は、その**工数を減らす目的で簡単にそれっぽいWEBサイトがWordpress（以下、WP）で作れること**をテーマとして書きました。自分であちこち探す手間を減らすため、備忘録も兼ねています。

:::note info
コードを入れてしまうと長くなるので、コードと解説は別記事にしています。
説明はいらないから、コードだけ欲しいと言う方は、ページ最後の[各ファイル内コード](#各ファイル内コード)をご覧ください。
:::

## ファイル構造
WordPress Codexを参考にした最小のファイル構造です。
```
../themes/original/
        ├─images/（画像用）
        |　　├─***.jpg
        |　　├─***.png
        |　　└─***.svg...
        ├─inc/（パーツ用）
        |　　├─parts-***.php
        |　　├─parts-***.php
        |　　└─parts-***.php...　※必要なパーツごとファイル化
        ├─fnc/（functionsのパーツ用）
        |　　├─fnc-admin-control.php
        |　　├─fnc-custom-post.php
        |　　└─fnc-bredcrumb.php...
        ├─js/（jsファイル用）
        |　　└─***.js...
        ├─css/（cssファイル用）
        |　　├─style-small.css
        |　　├─style-medium.css
        |　　├─style-large.css
        |　　└─style-navigation.css...
        ├─index.php    
        ├─home.php
        ├─header.php
        ├─footer.php
        ├─sidebar.php
        ├─archive.php
        ├─singular.php
        ├─search.php
        ├─style.css
        └─functions.php
```
### 参考
https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E9%9A%8E%E5%B1%A4

## フォルダおよびファイル解説
### images/
WEBサイトの画像素材はすべてここに格納。
WPからアップロードするのは、`wp-content/uploads`に自動的に格納されるので、投稿や固定ページの記事中に入れている画像はここには入れません。あくまでも`WEBサイトのデザインに関わる画像のみ`です。

### inc/
出来るだけメンテナンスしやすくするために、`投稿のnewsカテゴリを表示`や`おすすめ記事の表示`等、一般的なWEBサイトで使うloopを記載したファイルをパーツ化しています。
表示させるページによってデザインの調整が日必要な場合は、パーツの中で条件分岐させます。
コードを見た時に、パーツファイルだとわかるようにファイル名の頭には`parts-`を必ず付与しています。

### fnc/
`functions.php`に入れなきゃないけど、あまりにも長くなりすぎて、メンテナンス性が悪くなるから別ファイルにした方が良いよねってコードを、ファイル名の頭に`fnc-`を付与して保存してるフォルダ。
大体、`パンくずリスト（fnc-breadcrumb.php）`と`カスタム投稿（fnc-custom-post.php）`周り。

#### パンくずリスト（fnc-breadcrumb.php）
`パンくずリスト（fnc-breadcrumb.php）`は、プラグインもあるけど、過去にPHPのバージョンが古いサーバにあるサイトの改修をする時があって、プラグインの導入ができなかったと言う教訓と、作ってみたら案外簡単！と言うので、最近はずっとプラグインは使ってないです。
自分で書いていれば、表示の仕方のカスタムも簡単にできるので、プラグインの設定でごたごたしなくて済むのも良いです。

#### カスタム投稿（fnc-custom-post.php）
`カスタム投稿（fnc-custom-post.php）`は、`パンくずリスト`同様、プラグインでやった方が手軽だけど、欲しい機能によっては有料になることが多々ある。
事前にパーツとして用意しておけば、コードを全部書かなくて良いし、テーマファイルを読み込めばすぐに使えるようになるので、敷居はぐっと下がるかなと言う理由で。

#### 管理画面（fnc-admin-control.php）
`fnc-admin-control.php`は、管理画面のコントロールをする部分を別ファイルにしています。
ログイン画面の色やロゴマークだったり、ダッシュボードのWPのバージョン非表示、コメントの非表示、投稿一覧へのアイキャッチ表示等、ブログとしてではなく、コーポレートサイトとしてWPを使用する場合に活用できるファイル。

### js/
jsファイルの格納用フォルダ。

### css/
CSSファイルの格納用フォルダ。
私の場合は、PC表示、タブレット表示、スマホ表示でCSSを分けていますが、基本（色や画像の表示等）は`style.css`に書いて、表示するサイズに関わる部分をそれぞれのCSSファイルに書くといった形にしています。
なので、ディスプレイサイズに依存しないスタイルは`style.css`に書きます。
ただ、汎用性の高いパーツ、例えばカスタムナビをドロワーメニューにすると言ったコードは、別ファイルにして、流用しやすくしています。

**CSSだけでドロワーメニューを実装したい人は、こちらの過去に書いた「CSSだけでドロワーメニューを実装する」をどうぞ**

https://qiita.com/makkie/items/53b4325d0c0b5184629b


### index.php
これがないと始まらない。テーマファイルのベース。
テーマを読み込む時一番最初に読み込むので、自作テーマを作る上で**必須ファイル**になります。

私の場合は、`404 エラー`の際も`index`内で分岐させているので、`elseif('404'):`も書いてます。
`404.php`は別に用意することもできます。

### home.php
TOPページ専用テーマファイル。
`index.php`よりも優先されてTOPページとして利用されます。

`front-page.php`と言うのもありますが、`index.php`の方が優先度が高いので`index.php`使うかなぁ。
`front-page.php`使用用途がイマイチ分かってないです。

### header.php
自作テーマを作る上で**必須ファイル**になります。
直接コードを書くと、行数が増えてしまいメンテナンス性が損なわれるのと、お客様側でもある程度編集ができるようにするために、出来るだけWP関数で情報を読み込んでいます。
WebフォントやCSS等ファイルlinkは`functions.php`で読み込むようにしています。

サイトのデザインによって、ナビゲーションのコードやメインビジュアル等読み込みますが、`<head>`の中には`wp_head();`を忘れずに。（私も良く忘れてしまうので）
```diff_php
<html <?php language_attributes(); ?>>
<head>
    <meta charset="<?php bloginfo('charset'); ?>" />
    <title><?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?></title>
    <meta name="viewport" content="width=device-width">
    <meta name="description" content="<?php bloginfo('description'); ?>">
    <?php
    //StylesheetやWebfontはfunctions
    wp_head(); ?>
</head>
```
ちなみにGoogleFontsを利用するために必要な
```
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
```
は、`functions.php`で読み込ませることができなかったので、`header.php`に書いています。
複数のGoogleFontsを利用する場合でも、これだけ記載していれば大丈夫です。

### footer.php
自作テーマを作る上で**必須ファイル**になります。
WEBサイトの一番下の部分「フッター」用のファイルです。
jQueryで`body`タグ内で読み込まなければならないコードは、基本的にここに記載します。

```diff_php
<span id="copy">&copy; 2022 <?php bloginfo('name'); ?></span>
```
最近、`CopyRight`に`AllRightReserved.`がいらなくなったことを知ったので、`copy`部分はシンプルです。
`2022`も入れる必要がなかったのですが、このサイトが作られた記録として入れています。
（リニューアルの場合は、新規で立ち上げた「年」を入れています）

さらに私はよくカスタム投稿が乱立しているサイトの条件分岐の確認（どのテーマファイル使われてるか）のために、以下のコードをおまじないで入れてます。
```diff_php
<p>
<?php
//なんのテンプレート使ってる？
global $template;
$template_name = basename($template, '.php');
?>
ここで使用しているテンプレートは「<?php echo $template_name; ?>」です
</p>
```
このままだと`ここで使用しているテンプレートは～`の部分が普通にフッター部分に表示されてしまうので、コメントアウトするのを忘れずに。

### sidebar.php
自作テーマを作る上で**必須ファイル**になります。
ワンカラムサイトでは不要なのですが、このファイルがないとWPで「sidebar.phpがありません」的なエラーメッセージを出すので、空のファイルを置いておきます。
ナビゲーション、サイドバーウィジェット等のコードを記載します。

### archive.php
`category.php` `taxonomy.php` `tag.php` `date.php`を兼用できるファイル。
それぞれのファイルを作成すると、そちらが優先されて読み込まれます。
カスタム投稿のアーカイブの場合は`archive-***.php`（***はカスタム投稿名）

カテゴリ―や年、月等の様々な条件で一覧表示するためのファイルです。
特にカテゴリ名等指定しなくても、一覧表示の際にはこのファイルを読み込みます。
例／`category/news/`を一覧表示等

### singular.php
`single.php`（個別ページ） `page.php`（固定ページ）を兼用できるファイル。
各投稿ページで作成した記事をそのまま表示するだけなら、このファイルひとつでOK。
カスタム投稿の個別ページも兼用できます。

### style.css
自作テーマを作る上で**必須ファイル**になります。
私の場合は、前述した通り、色や画像表示等、表示サイズに依存しないスタイルをこのファイルに書いて、表示サイズに関連するスタイルは`/css/`内のファイルに書いています。

### functions.php
WPの管理画面から投稿画面、WEBサイトの表示に至るまで、色んなコントロールをしてくれるファイル。
自作テーマを作る上では必須ではありませんが、カスタマイズしていくと必ずと言っていいほど`functions.php`と言われるので、**実質必須ファイル**じゃないかと思ってます。

私は、CSSファイルの読み込み、WebフォントのCDN読み込みの他、カスタムナビゲーション、アイキャッチ、ウィジェットのON`add_theme_support`をこのファイルに書いています。
他の長文になりがちな、前述した[パンくずリスト](#パンくずリスト（fnc-breadcrumb.php）)、[管理画面のカスタマイズ](管理画面（fnc-admin-control.php）)は`fnc`フォルダに格納して、`functions.php`内で`get_template_part`で読み込んでいます。

## 各ファイル内コード
各ファイル内に書いているコードについては、記事が煩雑になってしまうのを避けるため、別記事にしています。
以下のリンクから参照ください。

:::note info
記事を投稿したら都度更新します。（2023Jan10tue）
+ [index.php](https://qiita.com/makkie/items/b5231a9f63b076c70af8)
+ [header.php](https://qiita.com/makkie/items/6d19ec0da990486ec6ab)
+ [footer.php](https://qiita.com/makkie/items/65cd4be0e9c4ccbf7776)
+ [singular.php、single.php、page.php](https://qiita.com/makkie/items/1b7f1961f5970b4f6f21)
+ [archive.php、category.php、taxonomy.php](https://qiita.com/makkie/items/26119759117b22108cc8)
:::


▼パンくずリストはこちらで記事にしています。

https://qiita.com/makkie/items/c7597343e0d040ab08b0

## まとめ
WPのテーマと言うとどうしてもファイル数が多くなりがちなので、兼用できるファイルは出来るだけ兼用して、`loop`は出来るだけ再利用する様に汎用性の高いものはパーツ化するを徹底すると、工数が減って幸せになれるよと言う記事でした。

ただ、関数等はWPのバージョンや対応PHPのバージョンが変わったりすると使えなくなったりするので、再利用する時は、コードの見直しも定期的に行うようにすると良いです。