令和にやるWordPress

昨今やや下火となってしまった（主観）WordPressですが、かつて世界のウェブサイトの4割がWordPressとまで言わしめたそれがある日突然消えてなくなるわけもなく、当然のように保守業務はやってきます。

以下では、これといって情熱を注ぐこともなく、ざっくり消極的にWordPressをやっつけるための雑な勘所をご紹介します。

ちなみに**私はWordPress好き**です。

# WordPressのテーマファイル

WordPressは根幹となるブログシステムに「Theme」と呼ばれるテンプレートファイル群を充てがうことでウェブサイトを構築します。

構成としては、下記のような形になっています。
なお、`assets`や`templates`等のディレクトリ名は特に制約のない部分なので、基本的には趣味です。
人によっては`common`だったり`template-parts`（たぶん関数名由来）だったりします。

```
theme
 └── ORIGINAL_THEME_NAME
     ├── assets
     │   ├── images
     │   │   ├── logo.png
     │   │   └── ...
     │   └── js
     │       ├── common.js
     │       └── ...
     ├── themlpates
     │   ├── navigation-header.php
     │   ├── share_button-sidebar.php
     │   └── information-article.php
     ├── 404.php
     ├── footer.php
     ├── funtions.php
     ├── header.php
     ├── index.php
     ├── page.php
     ├── README.md
     ├── screenshot.png
     ├── sidebar.php
     ├── single.php
     └── style.css
```

Git等で管理する場合、`ORIGINAL_THEME_NAME`をルートにするのがおそらく一般的です。

# 各ファイルの動き

突然ですが、WordPressが避けられる理由のひとつにその複雑さが挙げられるかと思います。

トレンドのJamstackなあれこれに対して、管理画面がむき出しでセキュリティ的なリスクが高いことがまずあって、そこをフォローしていこうと思うと適宜アップデートが求められ、そして特に精査されることなく選ばれていたThemeやプラグインの互換性で苦しむ……、というような構図です。
（書き出すとWordPressに限らずあるあるなような……。）

多くの場合、配布されているThemeはあらゆるユーザーに対応できるようがっつり作り込まれており、さらには競争原理に基づいて、これでもかと便利な機能が盛り込まれていたりします。
あくまで一例ですが、例えば管理画面からGoogle Analyticsが設定できるようになっていたりします。

確かに便利ではありますが、多くの開発者にとってはテンプレートに直接貼り付けてしまった方が楽で、勝手に変更されてしまうリスクもなく、若干といえども高速なはずです。

このように、自分や自社等の限られた範囲で利用するケースにおいては、ある程度汎用性を捨て、最小限の機能に絞ったシンプルなもので運用するのがおすすめです。

上記で紹介した構成が個人的に思う最小に近い構成のため、そちらをベースに簡単にご紹介します。

## assets

画像やJS、場合によってはSassファイル等を置くディレクトリ。
WordPressでは`get_template_directory_uri()`でThemeディレクトリのパスが取得できるため、下記のように記述できます。

```php:
<?php echo get_template_directory_uri(). '/assets/images/logo.png'; ?>
```

## templates

繰り返し使用するコンポーネント等を格納するディレクトリ。
WordPressでは、`header.php`や`footer.php`、`sidebar.php`はルートディレクトリに置く必要があるため、それ以外やもっと細かいコンポーネントを格納します。
（とはいえあまり粒度を上げても複雑になるのでざっくりやるのがおすすめです。）

なお、テンプレートファイルは下記のように呼び出せます。

```php:
<?php get_template_part('templates/navigation', 'header', $props); ?>
```

第1引数の`templates/navigation`はファイル名の`-`より前、第2引数は`-`より後、第3引数は俗に言うバケツリレー的なやつのためのプロパティで、第1引数以外は省略できますし、ファイル名に`‐`をつけるかどうかも任意です。
（`information-single.php`、`information-page.php`みたいな作りにした場合、`get_template_part`の可読性がやや上がるかも？ 程度。）

なお、`$props`で渡した値は、`$args`で受け取ります。

```php:
<?php // Propsは配列で渡す
  $props = array('type' => ' -single');
  get_template_part('templates/information', 'single', $props);
?>
```

```php:templates/information-single.php
<?php
  $type = isset($args) && isset($args['type']) ? $args['type']: ''; ?>
  <article class="article<?php echo $type; ?>">
    ...
  </article>

```

## footer.php

文字通りフッター。
下記のように呼び出します。

```php:
<?php get_footer(); ?>
```

なお、WordPressの機能であったり、各プラグインの機能であったりで`</body>`前にアレコレを差し込む処理等があるため、テンプレートには下記の関数が必要（？）です。

```php:footer.php
    <footer>
      ...
    </footer>
    <?php wp_footer(); ?>
  </body>
</html>
```

## funtions.php

割と重要なfunctionを詰め込むファイル。
アイキャッチ画像やカスタムメニューなどのメジャーな機能も`functions.php`経由で有効化しないとデフォルトでは使えなかったりします。

```php:functions.php
// アイキャッチ画像とか
add_theme_support('post-thumbnails');

// `<title>`生成とか
add_theme_support('title-tag');
```

その他にもオレオレプラグインをぶち込んだりもできますが、保守がしんどくなる最たる例なので多用しないことをおすすめします。
個人的には「コメントを書かなくてもパッと見で何をしているのか分かる程度」を意識しています（コメントを書かなくて良いという意味ではないです）。

## header.php

先述の`footer.php`と似たようなやつ。
下記で呼び出して、

```php:
<?php get_header(); ?>
```

そして、お約束の`<?php wp_head(); ?>`を`</head>`前に入れておく感じ。

```php:header.php
<!doctype html>
<html <?php language_attributes(); ?>>
  <head>
    ...
    <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" type="text/css" />
    <?php wp_head(); ?>
  </head>
  <body <?php body_class(); ?>>
    <header>
      ...
    </header>
```

## index.php

WordPressでは各ページごとに**テンプレートが読み込まれる順番**があるのですが、そこでもっとも後ろで読み込まれがちなのがこの`index.php`です。
例えばトップページでは、まず`front-page.php`が読み込まれ、なければ`home.php`が、それもなければ`index.php`が読み込まれます。
そして、記事ページではまず`single.php`（一旦カスタム投稿タイプは除外）が読み込まれ（中略）なければ`index.php`が読み込まれます。

個人的には、アーカイブ（一覧）ページ系の

- トップページ`home.php`
- カテゴリページ`category.php`
- タグページ`tag.php`
- 検索結果ページ`search.php`

をまるっと`index.php`に任せてしまう構成がおすすめです。

```php:index.php
<?php get_header(); ?>
<div class="container">
  <main class="main">
    <?php if(have_posts()):while(have_posts()): the_post(); // そのページの主要な情報あれこれを呼び出しますよ的なやつ ?>
      <section class="section">
        ...
        <h1 class="section_title"><?php echo $title; ?></h1>
        <div class="section_content">
          <?php get_template_part('templates/article', 'archive'); // ループする記事カードとか ?>
        </div>
      </section>
    <?php endwhile; endif; wp_reset_postdata(); // ループを終わりつつ主要な情報あれこれのリセット ?>
    <?php get_sidebar(); ?>
  </main>
</div>
<?php get_footer(); ?>
```

使い回す都合上`$title`はしこたま`if`をあれこれしなくてはなりません。

```php:
<?php
$title = '';

if (is_home()): // トップページの場合
  $title = '新着記事一覧';

elseif (is_category()): // カテゴリページの場合
  $title = '「'. single_cat_title('', false). '」の記事一覧';

elseif (is_tag()): // タグページの場合
  $title = '「'. single_tag_title('', false). '」の記事一覧';

elseif (is_search()): // 検索結果ページの場合
    $title = '「'. get_search_query(). '」の検索結果';

else:
  $title = 'なんもわからんかったときのタイトル';

endif; ?>
<h1 class="section_title"><?php echo $title; ?></h1>
```

なお、先ほどは省略しましたが、`header.php`の`<meta>`系の記述等でも上記のような`if`を駆使する形になるかも知れません。

## page.php

俗に言う「固定ページ」を表示するためのテンプレート。
多くの場合、「記事ページ」を表示する`single.php`と似たような形になるかと思います。

```php:page.php
<?php get_header(); ?>
<div class="container">
  <main class="main">
    <?php if(have_posts()):while(have_posts()): the_post(); // そのページの主要な情報あれこれを呼び出しますよ的なやつ
      <section class="section">
        ...
        <h1 class="section_title"><?php the_title(); ?></h1>
        <div class="section_content">
          <?php the_content(); ?>
        </div>
      </section>
    <?php endwhile; endif; wp_reset_postdata(); // ループを終わりつつ主要な情報あれこれのリセット ?>
    <?php get_sidebar(); ?>
  </main>
</div>
<?php get_footer(); ?>
```

## screenshot.png

画像ファイルを入れておくと管理画面のテーマ選択画面でサムネイルとして表示されます。
気持ちやった感がでます（といいつつ毎回面倒で用意しない）。

## sidebar.php

`header.php`や`footer.php`と同じく、文字通りのサイドバー。

先ほどもしれっと出ましたが、下記のように呼び出せます。

```php:
<?php get_sidebar(); ?>
```

## style.css

文字通りですが、WordPressでは`style.css`にコメントアウトする形でThemeファイルの情報等が書けます。

```css:style.css
/*
Theme Name: Twenty Twenty
Theme URI: https://wordpress.org/themes/twentytwenty/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Our default theme for 2020 is designed to take full advantage of the flexibility of the block editor. Organizations and businesses have the ability to create dynamic landing pages with endless layouts using the group and column blocks. The centered content column and fine-tuned typography also makes it perfect for traditional blogs. Complete editor styles give you a good idea of what your content will look like, even before you publish. You can give your site a personal touch by changing the background colors and the accent color in the Customizer. The colors of all elements on your site are automatically calculated based on the colors you pick, ensuring a high, accessible color contrast for your visitors.
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu, editor-style, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready, block-styles, wide-blocks, accessibility-ready
Version: 1.3
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwenty
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/
```

https://developer.wordpress.org/themes/basics/main-stylesheet-style-css/

# さいごに

かつて一時代を築いた（？）WordPressなので今更な感じも否めませんが、HTMLに毛が生えた程度の構成であれば運用負荷もある程度は下げられますよ的な主旨でした。
「そういうことじゃねーんだよ！」みたいなのも……あるとは……思いますが…………。

よいWordPressを！