WP既存テーマの改修

カテゴリー絞り込み検索機能を作る

検索フォーム作成

refine_searchform.php

<form method="get" action="<?php bloginfo( 'url' ); ?>" class="refine_searchform">
    <label class="refine_searchform_label">絞り込み検索</label>
    <?php wp_dropdown_categories('orderby=name&hide_empty=-&show_option_all=カテゴリー&selected=0&class=refine_searchform_custom_dropdown'); ?>
    <div class="refine_searchform_box_button">
	    <input name="s" class="refine_searchform_box" id="s" type="text" placeholder="" />
	    <button class="refine_searchform_botton" type="submit">検索</button>
    </div>
</form>

wp_dropdown_categories

カテゴリーの一覧をセレクトボックス形式で表示する

orderby

name 名前順に並べる
date 投稿日時順
title タイトル順
rand ランダム
ID 投稿のID順

hide_empty

1 または true 非表示のカテゴリーを隠す
0 または false 非表示のカテゴリーを表示
-すべてのカテゴリーを表示

show_option_all

セレクトボックスの最初のオプション名
これを選択するとすべてのカテゴリーを対象とした検索になる(絞り込みしない状態)

初期で選択されている項目

0 カテゴリーIDが0の項目を選択

ショートコード作成

functions.php

function shortcode_refine_searchform () {
	get_template_part('refine_searchform');
}
add_shortcode('refine_searchform', 'shortcode_refine_searchform');

ウィジェットエリアに追加

外観→ウィジェット→サイドバー
ショートコードに[refine_searchform]と打つと完成

カテゴリー絞り込み検索機能を作る

 <?php $tags = get_tags(); if ( $tags ) : ?>
    <select name='tag' id='tag'  class='refine_searchform_custom_tag'>
        <option value="" selected="selected">タグ</option>
        <?php foreach ( $tags as $tag ): ?>
            <option value="<?php echo esc_html( $tag->slug); ?>"><?php echo esc_html( $tag->name ); ?></option>
        <?php endforeach; ?>
    </select>
<?php endif; ?>

タグの取得

get_tags()でタグを取得し、タグが存在するか条件分で確認

取得したタグをループさせる

foreachでループ

タグのスラッグをHTMLエスケープしてvalueに設定

esc_html( $tag->slug);

選択肢の表示されるテキストを表示

echo esc_html( $tag->name );

同じくHMLエスケープ

Contact Form 7を使ってお問い合わせフォームを模写

CSSの追加

お問い合わせ→フォームからフォームのHTMLをいじれる
はじめからついているフォーム全体のclass名は"wpcf7"

自動入力autocomplete

autocomplete属性を使用すると入力欄に自動的に値を提案してくれる
on/offで有効/無効
name email telなどそれぞれに関する値を提案してくれる

<label> お名前（全角）<span class=name-required>必須</span>
    [text* inquiry-name class:inquiry-name autocomplete:name id:inquiry-name "（例）山田　太郎"]</label>

<label> 電話番号 <span class=tel-required>必須</span>
    [text* your-tel class:inquiry-tel autocomplete:tel "（例）0312345678"] </label>

<label> メールアドレス <span class=email-required>必須</span>
    [email* your-email autocomplete:email "（例）example@mail"] 
    <div class="email-text">※会員登録をされている場合は、ご登録済みのメールアドレスを入力してください。</div>
    <div class="email-text">※HTMLメールで送信しますので、パソコンやWebメールのアドレスをおすすめします。</div>
    <div class="email-text">※迷惑メール対策をしている場合、受信許可リストに「ma@il.com」を登録してください。</div>
</label>

<label> お問い合わせの種類 <span class=inquiry-type-required>必須</span>
    [select* inquiry-type class:inquiry-type "種類の選択" "会員登録・ログインについて" "商品・注文について"] </label>

<label> 返信希望 <div class=reply-text>返信不要の場合は、チェックしてください。</div>
    [checkbox reply-checkbox class:inquiry-reply-checkbox "返信を希望しない"] </label>

<label> ご注文番号
    [text your-order-number] </label>

<label> お問い合わせ内容 <span class=message-required>必須</span>
    [textarea* your-message] </label>

[submit "お問い合わせ内容の確認"]

placeholderに変更

[text* inquiry-name placeholder"（例）山田　太郎"]

問い合わせ内容の確認画面を作成

Contact Form 7 Multi-Step Formsをインストール

確認画面のフォーム作成

お問い合わせ→コンタクトフォームから事前に作った「問い合わせフォーム」を複製
それぞれの名前をコピーして「multiform」の「name」欄にペーストしていく
送信の前に[previous "戻る"]を追加して前の画面に戻れるようにしておく

確認画面の固定ページ作成

ブロックから「Contact Form 7」を追加
確認画面を選択
URLを「contact-confirm」に変更

サンクス画面の固定ページ作成

確認画面と同様にする
URLを「contact-thanks」に変更

問い合わせフォームに確認画面へのページ遷移タグをつける

送信ボタン(入力内容の確認)の下に「multistep」を配置
「First Step」にチェックをつける
Next Page URLに「/contact-confirm」を入力

確認画面のフォームにサンクスページへの遷移タグをつける

送信ボタンの下に「multistep」を配置
「Last Step」にチェックをつける
Next Page URLに「/contact-thanks」を入力

確認画面のフォーム

<label> お名前（全角）
[multiform "inquiry-name"]</label>

<label> 電話番号
[multiform "your-tel"]</label>

<label> メールアドレス
[multiform "your-email"]</label>

<label> お問い合わせの種類
[multiform "inquiry-type"]</label>

<label> 返信希望
[multiform "reply-checkbox"]</label>

<label> ご注文番号
[multiform "your-order-number"]</label>

<label> お問い合わせ内容
[multiform "your-message"]</label>

[previous "戻る"]
[submit "送信"]
[multistep multistep-154 last_step send_email "/contact-thanks"]

参考

https://webliker.info/html/13381/

dl dt ddタグを使って確認画面を整える

dl dt ddタグとは

dl リスト(list)
dt 言葉 (term)
dd 説明(description)

dtが説明したいこと、ddがそれに関する説明

<dl>
 <dt>ソフトドリンク</dt>
 <dd>一般の飲料</dd>
 <dt>お酒</dt>
 <dd>アルコール入り飲料</dd>
</dl>

dlとulの使い分け

ulは単純な項目のリスト

<ul>
  <li>りんご</li>
  <li>ぶどう</li>
  <li>バナナ</li>
</ul>

dlは項目とその説明

<dl>
  <dt>りんご</dt>
  <dd>赤い果物</dd>
  <dt>ぶどう</dt>
  <dd>紫の果物</dd>
  <dt>めろん</dt>
  <dd>黄色の果物</dd>
</dl>

dtとddを横並びにする

dtにfloat: left;をつける
ddにはつけない
つけると全部が横並びになる

<div class="confirmation-screen">以下の内容でよろしければ「お問い合わせ内容の送信」ボタンを押してください。
  <dl>
    <dt>お名前</dt>
    <dd>[multiform "inquiry-name"] 様</dd>

    <dt>電話番号</dt>
    <dd>[multiform "your-tel"]</dd>

    <dt>メールアドレス</dt>
    <dd>[multiform "your-email"]</dd>

    <dt>お問い合わせの種類</dt>
    <dd>[multiform "inquiry-type"]</dd>

    <dt>返信希望</dt>
    <dd>[multiform "reply-checkbox"]</dd>

    <dt>ご注文番号</dt>
    <dd>[multiform "your-order-number"]</dd>

    <dt>お問い合わせ内容</dt>
    <dd>[multiform "your-message"]</dd>
  </dl>
</div>

<div class="submit_btn">
  <span class="go_back">[previous "前に戻る"]</span>
  <span class="submit">[submit "お問い合わせ内容の送信"]<span>
</div>
[multistep multistep-154 last_step send_email "/contact-thanks"]

参考

返信希望の欄にチェックがついていないときに「返信を希望する」と表示させる

はじめはJSを使ってIDを取得し、if文で分岐からの表示をさせようとしたが、取得がうまくいかず別のアプローチをとった。
うまくいかなかったコード

<dt>返信希望</dt>
<dd class="reply-checkbox">[multiform id:inquiry-reply-checkbox "reply-checkbox"]
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const replyCheckbox = document.getElementById('inquiry-reply-checkbox');
            if (!replyCheckbox) {
                const messageElement = document.createElement('p');
                messageElement.textContent = '返信を希望する';
                document.querySelector('.reply-checkbox').appendChild(messageElement);
            }
        });
    </script>
</dd>

いくらやっても
const replyCheckbox = document.getElementById('inquiry-reply-checkbox');
がnullになった

そこで「返信を希望する」と「返信を希望しない」2つのチェックボックス用意して表示させた

<label> 返信希望
    [checkbox reply-checkbox use_label_element exclusive class:inquiry-reply-checkbox id:inquiry-reply-checkbox "返信を希望する" "返信を希望しない"] 
</label>

どちらか1つだけ選択させたいときは「exclusive」をつけておくと複数選択ができなくなるので便利

CSSを整えて完成

フロントページの表示件数を5件にする

クエリとは

ワードプレスがデータベースに対して条件に合致するデータの取得を要求すること
「カテゴリ名」「投稿ID」「取得する順番」「取得投稿データ数」など

メインクエリとは

メインのコンテンツを表示するために行われるクエリ
ワードプレスによって自動的に作成・発行される
メインクエリが取得した情報に基づいて、ページや投稿のコンテンツが生成・表示される

サブクエリとは

メインクエリ以外のもの

functions.php

function custom_limit_front_page_posts($query) {
    if ($query->is_main_query() && is_front_page()) {
        $query->set('posts_per_page', 5);
    }
}
add_action('pre_get_posts', 'custom_limit_front_page_posts');

フロントページに表示されるカテゴリーを絞り込む

$category_slug

特定のカテゴリーを絞り込むための変数
$category_slugに表示したいカテゴリーを代入して$query->setでセットする

pre_get_posts

pre_get_postsフィルターフックはクエリが実行される前に呼び出されるので、このフックを使ってクエリを変更するとよい

function custom_limit_front_page_category($query) {
    if ($query->is_main_query() && is_front_page()) {
        $category_slug = 'カテ1';
        $query->set('category_name', $category_slug);
    }
}
add_action('pre_get_posts', 'custom_limit_front_page_category');

フロントページに表示されるカテゴリーを絞り込む(複数表示)

implode関数

配列の要素を文字列に結合

$category_slugs = ['category1', 'category2', 'category3'];
implode(',', $category_slugs)
// 'category1,category2,category3'になる

これで複数のカテゴリーを表示できるようになる

function custom_limit_front_page_categories($query) {
    if ($query->is_main_query() && is_front_page()) {
        $category_slugs = ['カテ1', 'カテゴリー2'];
        $query->set('category_name', implode(',', $category_slugs));
    }
}
add_action('pre_get_posts', 'custom_limit_front_page_categories');

フロントページに表示する数やカテゴリーを管理画面の設定画面から選択できるようにする

テーマの設定画面の作り方は以下の通り

functions.php

function frontpage_options_menu() {
    add_menu_page(
        'フロントページ設定',         // メニューのページタイトル
        'フロントページ設定',         // メニューの表示名
        'manage_options',        // 権限
        'theme-options',         // ページのスラッグ
        'frontpage_options_page' // ページの表示関数
    );
}
add_action('admin_menu', 'frontpage_options_menu');

function frontpage_options_page() {
    echo '<h2>フロントページ設定</h2>';
}

設定項目の入力と保存のためのform生成

settings_fields()

設定を保存するときのセキュリティ
CSRF攻撃対策になる

do_settings_sections('frontpage-options')

後に出てくる'frontpage-options'というスラッグの設定項目を表示する

submit_button()

設定を保存するボタンの生成

functions.php

function frontpage_options_page() {
    ?>
    <div class="wrap">
        <h2>フロントページ設定</h2>
        <form method="post" action="options.php">
            <?php
            settings_fields('frontpage_options_group');
            do_settings_sections('frontpage-options');
            submit_button();
            ?>
        </form>
    </div>
    <?php
}

管理画面にメニューを追加、その中に「ページごとの表示件数」と「表示するカテゴリー」2つの項目を追加

register_setting

$option_group

グループ名
テーマやプラグインごとに独自のグループ名を指定
複数の設定がある場合、それらをグループ別にまとめるために使う

$option_name

オプション名
データベースに保存される時のキーになる名前

$sanitize_callback

サニタイズコールバック関数
オプションが保存される前に入力データを安全に変換する関数

設定の保存→オプションの値をデータベースに格納→ get_optionで取得できるようになる

functions.php

register_setting(
    'frontpage_options_group',   // グループ名
    'frontpage_options',         // オプション名
    'frontpage_options_sanitize' // 入力データのサニタイズコールバック
);

サニタイズとエスケープの違い

どちらもデータを安全な形に変換する

サニタイズ

悪意のあるものを無効にする
データを保存する前に適用

エスケープ

入力されたものをHTMLやJSのコードとして解釈されないようにする
データを表示する際に適用

functions.php

add_settings_field(
    'posts_per_page',             // フィールドID
    'ページごとの表示記事数',          // フィールドのラベル
    'posts_per_page_callback',    // フィールドのコールバック関数
    'frontpage-options',          // ページスラッグ
    'front_page_settings_section' // セクションID
);

設定ページのセクションを追加

add_settings_section

$id

セクションID

$title

セクションのタイトル
<h3>で表示される
今回は必要ないため空欄

$callback

セクションを表示するためのコールバック関数
説明文や補足情報を表示するために使われる
今回は機能の使い方について記述した

$page

セクションが表示される設定ページのスラッグ
スラッグとは識別用にURLの末部につけるもの
https://...themes.php?page=frontpage-optionsの「frontpage-options」の部分

functions.php

add_settings_section(
    'front_page_settings_section',          // セクションID
    '',                                     // セクションのタイトル
    'front_page_settings_section_callback', // セクションのコールバック関数
    'frontpage-options'                     // ページスラッグ
);

設定ページに表示させる項目を作成

今回は「ページごとの表示記事数」と「表示するカテゴリー」の2つのフィールドを作成

add_settings_field

$id

フィールドID

$title

項目に表示されるタイトル

$callback

設定項目を表示するためのコールバック関数
入力欄や説明文を表示させる
今回は入力欄のみ表示させる

$page

設定項目が表示される設定ページのスラッグ
add_settings_sectionの$pageのスラッグと同じものを使用

$section

設定項目のセクションのID
add_settings_sectionの$idと同じIDを使用

functions.php

add_settings_field(
    'posts_per_page',             // フィールドID
    'ページごとの表示記事数',          // フィールドのラベル
    'posts_per_page_callback',    // フィールドのコールバック関数
    'frontpage-options',          // ページスラッグ
    'front_page_settings_section' // セクションID
);

add_settings_field(
    'selected_category',
    '表示するカテゴリー',
    'selected_category_callback',
    'frontpage-options',
    'front_page_settings_section'
);

管理画面にアクセスするときにフックする

function.php

add_action('admin_init', 'frontpage_options_init');

「ページごとの表示記事数」のフィールドを表示させる

function posts_per_page_callback()

add_settings_fieldで指定したもの

保存されている設定オプションを取得

get_option('frontpage_options')を使用
保存されている場合、その値を取得
保存されていない場合、デフォルト値を取得

取得したオプションが配列かつ['posts_per_page']が存在するかを確認

get_option('frontpage_options')で取得される値はfrontpage_optionsグループ内の全ての設定項目を含む連想配列であるため、期待通り配列になっているかを確認
その上で['posts_per_page']がある場合に処理をする

設定オプションが存在する場合は<input>を生成し、その中に取得した値を表示させる

このときにesc_attrを使用してエスケープ処理も行う

設定オプションが存在しない場合はデフォルト値を設定しておき表示する

functions.php

function posts_per_page_callback() {
    $options = get_option('frontpage_options');

    if (is_array($options) && isset($options['posts_per_page'])) {
        echo '<input type="number" name="frontpage_options[posts_per_page]" value="' . esc_attr($options['posts_per_page']) . '" />';
    } else {
        echo '<input type="number" name="frontpage_options[posts_per_page]" value="5" />';  // デフォルト値などを設定
    }
}

「表示するカテゴリー」のフィールドを表示させる

function selected_category_callback()

上と同様にadd_settings_fieldで指定されたもの

設定オプションを取得

get_categories()ですべてのカテゴリーを取得

<div>タグの生成

echo'<div>'でチェックボックス全体を囲む<div>タグを出力

各カテゴリーをループしカテゴリーが選択されているかどうかを確認

issetで配列内にselected_categoryが存在するかを確認
is_arrayでselected_categoryの値が配列であるかの確認、複数選択の可能性があるため
in_arrayでカテゴリーIDがselected_category'配列内に含まれているかを確認

in_array()

指定した値が配列に存在するかどうかを確認する関数

in_array($category->term_id, $options['selected_category'])

$category->term_idは現在のループで取得したカテゴリーのID
$options['selected_category']は選択されたカテゴリーのIDが格納されている配列

三項演算子を使用して、カテゴリーが選択されているかどうか(上の条件が真かどうか)を確認し、選択されていれば'checked'、そうでなければ空の文字列を代入

それぞれのカテゴリーに対して、チェックボックスを生成

esc_attrとesc_htmlの違い

どちらもエスケープをしてくれる関数

esc_attr

HTMLのタグの属性値をエスケープ
タグの属性値とは<div style="color:red;">本文</div>のcolor:red;の部分のこと
今回の場合はvalue=""の""の中身をエスケープしている

esc_html

HTML本文内のテキストをエスケープ
今回の場合はカテゴリー名をエスケープして表示している

functions.php

function selected_category_callback() {
    $options = get_option('frontpage_options');
    $categories = get_categories();

    echo '<div>';
    foreach ($categories as $category) {
        $checked = isset($options['selected_category']) && is_array($options['selected_category']) && in_array($category->term_id, $options['selected_category']) ? 'checked' : '';
        echo '<label><input type="checkbox" name="frontpage_options[selected_category][]" value="' . esc_attr($category->term_id) . '" ' . $checked . ' />' . esc_html($category->name) . '</label><br>';
    }
    echo '</div>';
}

セクションの説明を表示させる

add_settings_sectionでセクションのコールバック関数に指定したものを使用する

functions.php

function front_page_settings_section_callback() {
    echo '<p>フロントページに表示する記事数とカテゴリーを選択してください</p>';
}

入力されたデータを安全な形に変換

frontpage_options_sanitize

サニタイズしたあとのデータを入れる空の配列を作成

$sanitized_input = array();

input配列内に'posts_per_page'が存在する場合、整数に変換し$sanitized_input配列に格納

absint

引数を絶対値の整数に変換するための関数
与えられた値を整数に変換
数値でないものはデフォルトで0になる

if (isset($input['posts_per_page'])) {
    $sanitized_input['posts_per_page'] = absint($input['posts_per_page']);
}

input配列内に'selected_category'が存在する場合、整数に変換し$sanitized_input配列に格納

上の'posts_per_page'のときと異なり、'selected_category'が複数のカテゴリーIDの配列である可能性があるためarray_mapを使用する

array_map

与えられた配列のすべての要素に適用して新しい配列を生成する
今回は全てのカテゴリーIDにabsint関数を適用して新しい配列を生成している

if (isset($input['selected_category'])) {
    $sanitized_input['selected_category'] = array_map('absint', $input['selected_category']);
}

サニタイズされたデータが格納された$sanitized_input配列を返す

functions.php

function frontpage_options_sanitize($input) {
    $sanitized_input = array();

    if (isset($input['posts_per_page'])) {
        $sanitized_input['posts_per_page'] = absint($input['posts_per_page']);
    }

    if (isset($input['selected_category'])) {
        $sanitized_input['selected_category'] = array_map('absint', $input['selected_category']);
    }

    return $sanitized_input;
}

メインクエリの変更

custom_front_page_query

メインクエリかつフロントページの場合にオプションを取得

get_option('frontpage_options');

オプションが設定されていればクエリオブジェクトのsetメソッドを使って「表示する記事数」と「カテゴリー」を設定

クエリオブジェクトのsetメソッド

$query->set( $parameter, $value );

parameterは設定したいクエリのパラメータ
valueはそのパラメータに対する値

表示する記事数を10件に設定したいときは

$query->set( 'posts_per_page', 10 );

if (isset($frontpage_options['posts_per_page'])) {
    $query->set('posts_per_page', $frontpage_options['posts_per_page']);
}

if (isset($frontpage_options['selected_category'])) {
    $query->set('category__in', $frontpage_options['selected_category']);
}

メインクエリが実行する前にクエリに変更を加える

add_action('pre_get_posts', 'custom_front_page_query');

functions.php

function custom_front_page_query($query) {
    if ($query->is_main_query() && is_front_page()) {
        $frontpage_options = get_option('frontpage_options');

        if (isset($frontpage_options['posts_per_page'])) {
            $query->set('posts_per_page', $frontpage_options['posts_per_page']);
        }

        if (isset($frontpage_options['selected_category'])) {
            $query->set('category__in', $frontpage_options['selected_category']);
        }
    }
}
add_action('pre_get_posts', 'custom_front_page_query');

フロントページを固定ページにして最新投稿一覧を表示させる

固定ページを作成する

WPの管理画面の固定ページから新規の固定ページを作成
名前を「フロントページ」にする

フロントページの表示設定を固定ページに変更する

設定→表示設定→ホームページの表示
固定ページにチェックをつけ、ホームページに「フロントページ」を選択する

ブロックエディターとクラシックエディターで作り方が違うので注意！

クラシックエディターの場合はテンプレートファイルを作成しそこにコードを書く

固定ページにコメント欄を表示させる

投稿へのコメントを許可する

設定→ディスカッション→デフォルトの投稿設定
新しい投稿へのコメントを許可にチェックをつける

固定ページでもコメントを許可する

固定ページの編集画面の右にある「ディスカッション」の「コメントを許可」にチェックがついてあるかを確認する
設定画面で許可している場合はデフォルトでチェックがついてある

コメント欄を表示

ブロックエディターから「投稿コメントフォーム」を選択
右にある「ブロック」でテキストの色や大きさなどを変更可

管理画面に作ったメニューに「表示するタグ」を選べる機能を追加する

全体の流れ

「表示するカテゴリー」を作ったときと同じ流れで作る
今回は複数選択前提で作り始める

フィールドを追加

ページスラッグを上と同じ「frontpage-options」に設定

functions.php

add_settings_field(
    'selected_tags',
    '選択したタグ',
    'selected_tags_callback',
    'frontpage-options',
    'front_page_tags_section'
);

コールバック関数追加

get_option()とget_tags()で情報を取得
タグが存在すればforeachでタグを回しつつ出力していく
エスケープも忘れずに！

functions.php

function selected_tags_callback() {
    $options = get_option('frontpage_options');
    $tags = get_tags();

    echo '<div>';
    foreach ($tags as $tag) {
        $checked = isset($options['selected_tags']) && is_array($options['selected_tags']) && in_array($tag->term_id, $options['selected_tags']) ? 'checked' : '';
        echo '<label><input type="checkbox" name="frontpage_options[selected_tags][]" value="' . esc_attr($tag->term_id) . '" ' . $checked . ' />' . esc_html($tag->name) . '</label><br>';
    }
    echo '</div>';
}

サニタイズ関数も追加

サニタイズも忘れずに！

functions.php

if (isset($input['selected_tags'])) {
    $sanitized_input['selected_tags'] = array_map('absint', $input['selected_tags']);
}

クエリを更新して「表示するタグ」を表示させるようにする

これで設定画面に表示されるようになる

functions.php

if (isset($frontpage_options['selected_tags'])) {
    $query->set('tag__in', $frontpage_options['selected_tags']);
}

「全てのカテゴリー」チェックボックスを作成

はじめは「全てのカテゴリー」用のセクションとコールバック関数を作成したが、UIがよくなかった（分かりにくかった）ので「表示するカテゴリー」欄の一番目のチェックボックスとして「全てのカテゴリー」チェックボックスを作成することに変更

コールバック関数にチェックボックスを追加

「全てのカテゴリー」チェックボックスが選択されているかで場合分け
選択されていればチェックボックスにチェックをつける
echoでチェックボックスとラベルを生成する

functions.php

$all_checked = isset($options['select_all_categories']) && $options['select_all_categories'] ? 'checked' : '';
echo '<label><input type="checkbox" id="select_all_categories" name="frontpage_options[select_all_categories]" ' . $all_checked . ' /> 全てのカテゴリー</label><br>';

サニタイズ追加と他のチェックボックスのチェックを外す

「全てのカテゴリー」と他のチェックボックスどちらもチェックがついているときにどちらが優先かわかりにくいので、「全てのカテゴリー」のチェックボックスが選択されたときに他のカテゴリーチェックボックスの選択を外すようにする
これで「全てのカテゴリー」が優先されていることがわかる

functions.php

 if (isset($input['select_all_categories'])) {
    $sanitized_input['select_all_categories'] = (bool) $input['select_all_categories'];
    if ($sanitized_input['select_all_categories']) {
        $sanitized_input['selected_category'] = array();
    }
}

「全てのタグ」チェックボックス作成

「全てのカテゴリー」と同じ要領で進めていく

コールバック関数にチェックボックスを追加

「全てのタグ」チェックボックスにチェックが選択されているかを確認し、チェックをつける
echoでチェックボックスとラベルを生成

functions.php

$all_checked = isset($options['select_all_tags']) && $options['select_all_tags'] ? 'checked' : '';
echo '<label><input type="checkbox" name="frontpage_options[select_all_tags]" ' . $all_checked . ' /> 全てのタグ</label><br>';

サニタイズの追加と他のチェックボックスのチェックを外す

「全てのタグ」が選択されたとき他のチェックボックスの選択を外し、同時にチェックも外す

functions.php

if (isset($input['select_all_tags'])) {
    $sanitized_input['select_all_tags'] = (bool) $input['select_all_tags'];
    if ($sanitized_input['select_all_tags']) {
        $sanitized_input['selected_tags'] = array();
    }
}

フロントページの記事の順番を変更する

記事の順番を昇順の更新日時順にする

管理画面でなくメインクエリであるかの確認

functions.php

function sort_postdata( $query ) {
    if ( is_admin() || ! $query->is_main_query() ) {
        return;
    }
}

クエリの変更

$query->set()を使用してクエリのパラメータを変更

$query->set( 'order', 'ASC' )は記事の並び順を昇順にしている
降順は'DESC'

$query->set( 'orderby', 'modified' )は記事を更新日時に並び替えている
デフォルトは'date'の日付順
'comment_count'がコメント数
'rand'がランダム　など

$query->set( 'order', 'ASC' );
$query->set( 'orderby', 'modified' );

メインクエリが実行する前に変更

add_action( 'pre_get_posts', 'sort_postdata' )

まとめると

functions.php

function sort_postdata( $query ) {
	if ( is_admin() || ! $query->is_main_query() ) {
		return;
	}
	$query->set( 'order', 'ASC' );
	$query->set( 'orderby', 'modified' );
}

add_action( 'pre_get_posts', 'sort_postdata' );

設定画面から投稿記事の順番を選択できる機能を実装する

複数選択ではないのでチェックボックスは適さず
ラジオボタンとプルダウンどちらにしようか考えたが、まずは4種類だけなのでラジオボタンで実装することにした
増える可能性も考えて今後はプルダウンにするかも

コールバック関数に並び順を選択するラジオボタンを追加する

オプション設定を取得

$options = get_option('frontpage_options');

配列を作る

今回は「投稿日時」「更新日時」「コメント数」「ランダム」の4つの並び順を選択できるようにする

$order_options = [
    'post_date'     => '投稿日時',
    'post_modified' => '更新日時',
    'comment_count' => 'コメント数',
    'rand'          => 'ランダム',
];

foreachでループを回してラジオボタンを生成し、選択されている場合はチェックをつける

$order_options配列に対してループさせる

foreach ($order_options as $value => $label)

選択されたものと$valueが一致している場合'checked' を設定する
これによって以前に選択されたものが選択された状態になる

$checked = isset($options['front_page_order']) && $options['front_page_order'] === $value ? 'checked' : '';

ラジオボタンとラベルの名前を表示させる

echo '<label><input type="radio" name="frontpage_options[front_page_order]" value="' . esc_attr($value) . '" ' . $checked . ' />' . esc_html($label) . '</label><br>';

全体

foreach ($order_options as $value => $label) {
    $checked = isset($options['front_page_order']) && $options['front_page_order'] === $value ? 'checked' : '';
    echo '<label><input type="radio" name="frontpage_options[front_page_order]" value="' . esc_attr($value) . '" ' . $checked . ' />' . esc_html($label) . '</label><br>';
}

コールバック関数に並び方向を選択するラジオボタンを追加する

デフォルトが「降順」なので「降順」を上に配置する

並び順と同じ流れで作る

配列を作り、foreachでループを回して、ラジオボタンとラベルの名前を表示させる

function front_page_order_direction_callback() {
    $options = get_option('frontpage_options');
    $direction_options = [
        'desc' => '降順',
        'asc'  => '昇順',
    ];

    foreach ($direction_options as $value => $label) {
        $checked = isset($options['front_page_order_direction']) && $options['front_page_order_direction'] === $value ? 'checked' : '';
        echo '<label><input type="radio" name="frontpage_options[front_page_order_direction]" value="' . esc_attr($value) . '" ' . $checked . ' />' . esc_html($label) . '</label><br>';
    }
}

サニタイズを追加する

並び替えオプションのサニタイズ

$inputオプションが送信かつ値が許可されたものの場合sanitize_text_field()関数を使って配列に格納する

if (isset($input['front_page_order']) && in_array($input['front_page_order'], ['post_date', 'post_modified', 'comment_count', 'rand'])) {
    $sanitized_input['front_page_order'] = sanitize_text_field($input['front_page_order']);
}

並び替え方向オプションのサニタイズ

値が'desc'または'asc'の場合のみ並び替えオプションのサニタイズと同じようにする

if (isset($input['front_page_order_direction']) && in_array($input['front_page_order_direction'], ['desc', 'asc'])) {
    $sanitized_input['front_page_order_direction'] = sanitize_text_field($input['front_page_order_direction']);
}

クエリを変更する

並び順のクエリの変更

フロントページの記事の並び順が選択されている場合'orderby'を選択されている値に設定する

if (isset($frontpage_options['front_page_order'])) {
    $query->set('orderby', $frontpage_options['front_page_order']);
}

並び方向順のクエリの変更

並び順と同様にフロントページの記事の並び方向順が選択されている場合'order'を選択されている値に設定する

if (isset($frontpage_options['front_page_order_direction'])) {
    $query->set('order', $frontpage_options['front_page_order_direction']);
}

記事の並び順をラジオボタンからプルダウンに変更する

プルダウンメニューを作る

function front_page_order_callback()のラジオボタンの部分をプルダウンに変更

<select>タグをechoする

echo '<select name="frontpage_options[front_page_order]">';

foreachでループを回して<option>タグで囲み、オプションを追加していく

このとき現在の選択と$options['front_page_order']が同じ場合、選択されてある状態にする
エスケープも行う

foreach ($order_options as $value => $label) {
    $selected = isset($options['front_page_order']) && $options['front_page_order'] === $value ? 'selected' : '';
    echo '<option value="' . esc_attr($value) . '" ' . $selected . '>' . esc_html($label) . '</option>';
}

</select>をechoして閉じる

echo '</select>';

コメントがある記事のみフロントページに表示する

設定画面にチェックボックスを作り、チェックがついてある場合コメントがある記事のみを表示させる

チェックボックスのフィールドを追加

カテゴリーとタグのチェックボックスの下にフィールドを生成

add_settings_field(
    'show_commented_posts_only',
    'コメントがある記事のみ表示',
    'show_commented_posts_only_callback',
    'frontpage-options',
    'front_page_settings_section'
);

チェックボックスのコールバック関数を作る

show_commented_posts_onlyが存在し、trueの場合$checkedもtrueにする

function show_commented_posts_only_callback() {
    $options = get_option('frontpage_options');
    $checked = isset($options['show_commented_posts_only']) && $options['show_commented_posts_only'] ? 'checked' : '';
    echo '<input type="checkbox" name="frontpage_options[show_commented_posts_only]" value="1" ' . $checked . ' />コメントがある記事を表示する';
}

サニタイズを行う

if (isset($input['show_commented_posts_only'])) {
    $sanitized_input['show_commented_posts_only'] = (bool) $input['show_commented_posts_only'];
}

クエリの変更

get_posts()関数でコメントがある記事のIDを取得する

post_type

取得する投稿タイプを指定
記事のIDを取得したいのでpostを指定

post

普通の記事

page

固定ページ

attachment

画像、音声、動画などのメディアファイルの添付ファイル

revision

記事やページのリビジョン
リビジョンとは変更内容を記録したもの

nav_menu_item

ナビゲーションメニューの項目

custom_css

カスタムCSS

wp_block

Gutenbergのブロック

posts_per_page

取得する投稿の数を指定
-1にすることですべての投稿を取得することができる

fields

取得するフィールドを指定
ここでIDを指定する

post_status

取得する投稿の状態を指定
公開しているものだけを取得していのでpublishを指定

publish

公開されているもの

pending

公開待ち、保留中のもの

draft

下書き

future

予約投稿されているもの

private

ログインしているユーザーのみが見れる非公開のもの

trash

削除されたが、ゴミ箱に残っているもの

has_password

パスワード保護された投稿を含めるかどうかを指定

suppress_filters

フィルターを抑制するかどうかを指定
フィルターフックを一時的に無効にするためのパラメータ
クエリの結果に影響を与えるすべてのフィルタリングが無効化され、コメントがある記事のみを表示するためのクエリの構築を邪魔しないようにしている

no_found_rows

ページネーションに関連するSQLクエリを実行しないようにするもの

WPはクエリの実行時にページネーションの計算を行い、結果の総数を取得するためにSQLクエリを2回実行
1回目は実際のデータの取得
2回目はページネーションに関連する情報を取得
trueにすることで2回目を実行しなくなる

大量のデータがある場合やページネーションを使用しない場合はtrueにすることで時間短縮につながる

comment_count

コメントの数を表す
1にすることでコメントがある記事のみを抽出する

if (isset($frontpage_options['show_commented_posts_only']) && $frontpage_options['show_commented_posts_only']) {
    $posts_with_comments = get_posts([
        'post_type'      => 'post',
        'posts_per_page' => -1,
        'fields'         => 'ids',
        'post_status'    => 'publish',
        'has_password'   => false,
        'suppress_filters' => true,
        'no_found_rows' => true,
        'comment_count' => 1,
    ]);
    $query->set('post__in', $posts_with_comments);
}

入力した数値以上のコメント数がある記事のみをフロントページに表示させる機能を作る

フィールドを追加

add_settings_field(
    'min_comment_count',
    '記事のコメント数',
    'min_comment_count_callback',
    'frontpage-options',
    'front_page_settings_section'
);

コールバック関数を追加

最低コメント数を入力する欄を生成
数値を入力していない場合はデフォルトの0件になるように（つまり全部表示されるように）した

function min_comment_count_callback() {
    $options = get_option('frontpage_options');

    if (isset($options['min_comment_count'])) {
        echo '<input type="number" name="frontpage_options[min_comment_count]" value="' . esc_attr($options['min_comment_count']) . '" />件以上';
    } else {
        echo '<input type="number" name="frontpage_options[min_comment_count]" value="0" />件以上';
    }
}

サニタイズを行う

absint()を使ってサニタイズをする
絶対値にして整数に変換されるため安全にデータを扱えるようになる

if (isset($input['min_comment_count'])) {
    $sanitized_input['min_comment_count'] = absint($input['min_comment_count']);
}

クエリの変更

`intval()`を使って入力されたデータを整数に変換する

文字列として取得されても整数に変換するため安心

$min_comment_count = intval($frontpage_options['min_comment_count']);

`get_posts()`を使ってすべての投稿を取得する

$all_posts = get_posts(['post_type' => 'post', 'posts_per_page' => -1]);

`wp_count_comments()`を使って各投稿のコメント数を取得する

approvedプロパティを使うことで承認済みコメントの数のみ取得できる

$comment_count = wp_count_comments($post->ID)->approved;

入力された数値以上の場合IDを配列に格納していく

if ($comment_count >= $min_comment_count) {
    $posts_with_enough_comments[] = $post->ID;
}

配列が空でない場合はそのIDを使ってクエリを変更

配列が空の場合は[0]をセットして何も表示しないようにする

0をセットしないと通常のコンテンツが表示されてしまうので注意が必要

if (!empty($posts_with_enough_comments)) {
    $query->set('post__in', $posts_with_enough_comments);
} else {
    $query->set('post__in', [0]);
}

全体のコード

if (isset($frontpage_options['min_comment_count'])) {
    $min_comment_count = intval($frontpage_options['min_comment_count']);
    $posts_with_enough_comments = [];

    $all_posts = get_posts(['post_type' => 'post', 'posts_per_page' => -1]);
    foreach ($all_posts as $post) {
        $comment_count = wp_count_comments($post->ID)->approved;
        if ($comment_count >= $min_comment_count) {
            $posts_with_enough_comments[] = $post->ID;
        }
    }

    if (!empty($posts_with_enough_comments)) {
        $query->set('post__in', $posts_with_enough_comments);
    } else {
        $query->set('post__in', [0]);
    }
}

サムネイルが設定されている記事のみをフロントページに表示させる機能を追加する

チェックボックスのフィールドを追加

add_settings_field(
    'show_thumbnail',
    'サムネイルがある記事のみ',
    'show_thumbnail_callback',
    'frontpage-options',
    'front_page_settings_section'
);

コールバック関数を追加

'show_thumbnail'が空、つまり設定されていないときはチェックがつかないようにした
さらにチェックボックスの生成も行った

function show_thumbnail_callback() {
    $options = get_option('frontpage_options');
    $checked = empty($options['show_thumbnail']) ? '' : 'checked';

    echo '<label><input type="checkbox" name="frontpage_options[show_thumbnail]" ' . $checked . ' /> サムネイルがある記事のみ表示する</label><br>';
}

サニタイズを行う

チェックボックスなので(bool)で値をtrue,falseのみにする

if (isset($input['show_thumbnail'])) {
    $sanitized_input['show_thumbnail'] = (bool) $input['show_thumbnail'];
}

クエリの追加

サムネイルを表示するチェックボックスが有効になっている場合、クエリにmeta_queryを追加
サムネイルが存在するかをキーで確認している

if (!empty($frontpage_options['show_thumbnail'])) {
    $query->set('meta_query', [
        [
            'key'     => '_thumbnail_id',
            'compare' => 'EXISTS',
        ],
    ]);
}