wordpressのテーマ作成で一通り必要そうな技術まとめ

環境

windows10
DockerDesktop for Win 3.5.x
PHP 8.x
VsCode
gitbash 2.32.0.1

基本

テンプレート階層

WordPress では、アクセスされた URL をもとに、各ページをテンプレートに基づいて出力しますが。複数のテンプレートの中から優先順位が高いものを表示する仕組みを「テンプレート階層」と呼びます。

外観図

https://wpdocs.osdn.jp/%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB:wp-template-hierarchy.jpg

概要

説明	テンプレート名	具体例
カスタム投稿一覧ページ	archive-{post_type}.php	archive-cooking.php
カスタム投稿詳細ページ	single-{post_type}.php	single-cooking.php
タクソノミー一覧	page-{taxonomy-slug}.php	page-genre.php
タクソノミー詳細	taxonomy-{taxonomy-slug}.php	taxonomy-genre.php
ヘッダー	header.php	header.php
フッター	footer.php	footer.php
トップページ	front-page.php	front-page.php
関数を記述するファイル	functions.php	functions.php
テンプレート階層に該当するファイルがなかった場合に表示されるファイル	index.php	index.php

サブクエリ

サブクエリ取得

※query_posts() というのもあるが、非推奨のため割愛

メソッド名(クラス名)	説明	補足
WP_Query	記事に関する情報のほか、is_pageなど、ページに関する情報も取得できる。返り値はクエリオブジェクト	基本的なループの書き方 `<?php if ($cooking_posts->have_posts()): while ($cooking_posts->have_posts()): $cooking_posts->the_post(); ?> <?php endwhile; wp_reset_postdata(); else: echo "記事がありません"; endif; ?>`
get_posts	記事に関する情報のみ取得できる。返り値は配列	基本的なループの書き方 `<?php foreach ($cooking_posts as $cooking_post): setup_postdata($cooking_post); ?> <?php endforeach; wp_reset_postdata(); ?>`

サブクエリの引数

概要	説明	補足
$args ※名前は任意	WP_Queryの生成やget_postsを呼び出す際に渡すことでほしい記事情報(並び順やページsi艇ネーションの)が取得できる	基本的な書き方 ※get_postsの場合でも引数は基本的に同じ `$args = [ 'posts_per_page' => 10, 'post_type' => 'reviews', 'order' => 'desc', 'orderby' => 'post_date', ]; return new WP_Query($args);`

クエリのリレーション

クエリに複数の条件を指定したい場合は以下のようにmeta_queryに配列で条件指定する

<?php

// 調理にかかる費用が500円から1000円の料理記事を取得
$args = [
    "post_type" => "cooking",
    "meta_query" => [
        "relation" => "OR", // OR もしくは　AND
        [
            "key" => "cooking_cost",
            "value" => [ 500, 1000 ]
            "compare" => "BETWEEN",
        ],
        // ほかにもある場合は、続けて配列で指定する

    ],
];
?>

ループ内でその記事に関する情報を取得

ループ内でよく使用する関数

the～と get_the～の違いは、前者はechoでデータの出力まで処理するが、後者は出力までは行わない(関数の返り値が格納される)

メソッド名	説明	補足
the_title	記事タイトル
the_permalink	パーマリンク
the_field	カスタムフィールド
the_content()	記事の本文
the_date	投稿日	the_timeとは異なり、同じ日に複数の記事がある場合、最初の記事のみに一度だけ日付が出力される」という仕様になっているので注意(同じ日に複数記事を投稿した場合に思ったように日付が表示されない)
the_post_thumbnail	サムネイル
the_terms	タクソノミー
the_time	投稿日	the_dateではなく基本的にはこちらを使用する
is_singular()、is_archive()、 is_tax()、 is_front_page()	個別記事か一覧ページかタクソノミーの一覧ページか、トップページかなどを取得できる	ページごとに処理を分けたり、読み込ませるcss、jsなどを分けることが可能

クラスの作成

wp-content/themes/テーマフォルダ/classes 内にクラスを作成する方法が一般的な様子。素のPHPのクラスと基本的には同じことができる模様(__constructやプロパティ、型など)

functions.phpについて

基本的にはこのファイルに関数を列挙していく

投稿タイプ

デフォルトの投稿タイプ以外に追加したい場合はfunctions.phpに追加する

<?php
/**
 * カスタム投稿タイプ
 */
add_action("init", "add_post_type");
function add_post_type()
{
    register_post_type("cooking", [
        "label" => "料理記事",
        "public" => true,
        "supports" => ["title", "thumbnail"],
    ]);
}
?>

タクソノミー ※タクソノミーの説明については下部に記載

カスタムタクソノミーを追加したい場合はfunctions.phpに追加する

<?php

/**
 * カスタムタクソノミー
 */
add_action("init", "add_taxonomy");
function add_taxonomy()
{
    register_taxonomy(
        "genre", //タクソノミースラッグ
        "cooking", //カスタム投稿タイプ
        [
            "label" => "ジャンル",
            // 割愛
        ]
    );
}
?>

管理方法

投稿タイプが多いと肥大化しがちなので、投稿タイプごとに分けるのが一般的な様子

wp-content\themes\テーマフォルダ\functions
wp-content\themes\テーマフォルダ\functions.php
└投稿タイプ1.php
└投稿タイプ2.php
・・・・

基本的な書き方

cookingという投稿タイプの場合

wp-content\themes\テーマフォルダ\cooking\functions.php

function get_cooking_posts()
{
    $args = [
        // 割愛
    ];

    return new WP_Query($args);
}

functions.phpで読み込む

<?php

require_once __DIR__ . '/functions/cooking.php';
・・・

タクソノミー

カスタム投稿タイプにおけるカテゴリを指す。例えば料理の記事なら、登録するジャンル(中華・和食)や必要食材など。

登録方法

これらを登録することでそのタクソノミーが関連付けられている記事を取得することが可能になる。functions.phpに記述するコードは以下のような感じ。(hide_emptyがfalseだと、タクソノミーが登録されている記事が存在していなくてもタクソノミーを取得する)

<?php

function get_genres()
{
　　// get_terms(タクソノミー名, 引数)
    return get_terms("genre", [
        "hide_empty" => false,
    ]);
}
?>

引数

記事の取得と同様に、取得件数やソート順等の引数を指定することが可能

$genres = get_genres([
  'orderby' => 'post_date',
  'order' => 'desc',
  'number' => 10,
]);

タクソノミーのリレーション

タクソノミーの条件も複数指定することができる

<?php

// genreというタクソノミーのタームID1と3が登録されている記事データのみ取得

$args = [
    "post_type" => "cooking",
    "tax_query" => [
        "relation" => "AND",
        "taxonomy" => "genre",
        "field" => "term_id",
        "terms" => [1, 3],
    ],
];
?>

フック処理

特定のタイミングで処理を実行することができる。例えば、記事の保存時に特定の処理を行いたい場合は以下のようにfunctions.phpに記述する。

フック処理時は、「アクティブな記事の情報」を引数($post等)として受け取ることができる

<?php

add_action("save_post", "something_action", 99, 2);
function something_action($post_id, $post)
{
    // something_function()

    // 記事の特定のフィールドを更新するupdate_post_metaなどもよくつかわれる
    update_post_meta($post_id, 'something_field', something_function;
}
?>

グローバル変数の取得

get_query_var関数を使用することで、wp_queryオブジェクトが持っているグローバル変数を取得することができる

例えば、get_query_var(‘paged’)と指定すると、現在のページ番号が取得できる(厳密には、1ページ目だと0が返る)

$paged = get_query_var('paged') ? get_query_var('paged') : 1;

Advanced Custom Fields使用時の画像最適化

特に指定しない場合はサイズが小さくてもよい箇所でも大きい画像が使用されてしまったりする。

カスタムフィールド名 image
フィールドタイプ画像
返り値　配列

上記の条件であれば以下のようにget_field()の返り値の配列の中にsizesという各サイズの画像urlが格納されているのでこちらを用途に分けて使用する

array $urlSizelist = get_field("image")["sizes"];

共通コードのテンプレート化

呼び出す側

wp-content/themes/テーマフォルダ名/cooking.php

// 料理記事内でgenreというタクソノミーをループする
// 第一引数と第二引数を合わせてテーマディレクトリからのパスにする必要がある

<?php get_template_part('templates/loop', 'genre', $genres); ?>

呼び出される側

※呼び出す側で指定している変数名とは異なり、呼び出される側では$argsという名称で受け取る必要があるので注意

wp-content/themes/テーマフォルダ名/templates/loop-genre.php

<?php

foreach ($args as $genre): ?>
  <!-- <?php something loop ?> -->
<?php endforeach; ?>

その他便利メソッド

メソッド名	内容
esc_html	ユーザー入力値を無害化できる
home_url	ホームURLの取得 urlが “https://example.com/wp” ・・・なら “https://example.com” が取得できる
get_template_directory_uri	テーマフォルダのあるディレクトリ URIを取得できる
get_site_icon_url()	サイトのファビコンurlを取得
add_theme_support(‘title-tag’);	functions.phpに記載すると、headタグにtitleタグ(個別の記事のタイトル)を出力できる
add_query_arg()	現在のURLに応じてクエリパラメーターを動的に生成してくれる引数にURLに付けたいパラメータを「パラメータ名 => 値」で指定する例) recipes/?category=pasta add_query_arg([‘category’=>’pasta’])
wp_get_environment_type()	wp-config.phpにあらかじめ以下のように環境を設定しておくことで、wp_get_environment_type()でこの値を取得し、環境によって処理を分ける等が可能。 ※デフォルトはproduction `define( 'WP_ENVIRONMENT_TYPE', 'development' );`
get_post_meta()	記事のメタ情報(カスタムフィールドなどのメタデータを取得)
get_term_meta()	タクソノミーのメタ情報(カスタムフィールドなどのメタデータを取得)