中小企業などのホームページの制作時に、採用関連のページの内容を「募集中 / 停止中」で切り替えたいことがあったため、備忘録として残しておきます。
例えば、採用中・募集中のときは募集要項の内容を表示して、
逆に募集していないときは「現在、募集していません」といったことを表示させます。
固定ページをブロックで制作している場合でも、カスタムHTMLで制作している場合でも、この方法が使えます。（ただし、functions.phpを触るので、初心者には向いていません）
機能追加の流れ
①管理画面の「設定」→「一般」の項目の一番下に、「採用中」ボタンを作成
②以下の制御をするコードを追加
「採用中」がオンになっているとき：「if-hiring」というクラスがついている部分を出力し、「if-not-hiring」というクラスが付いている部分を出力しない
「採用中」がオフになっているとき、「if-not-hiring」というクラスが付いている部分を出力し、「if-hiring」というクラスが付いている部分を出力しない
③制御したいブロックにクラスを付与
この機能のメリット
採用時/非採用時のタイミングで、毎回ブロックを作り直すのは手間がかかります。
またどちらかをコメントアウトしておいて、毎回コメントアウトを外す/コメントアウトを付ける、というやり方もありますが、無駄なコメントアウトはあまりよくありません。
「検証」などでソースコードを見られたときに、コメントアウトの中身も表示されてしまったり、ファイルサイズが無駄に大きくなります。
このやり方だと、設定のオンオフで表示が切り替わり、PHPから出力の制御をしているので非表示の部分の内容が見られたりしません。
以下から、この機能の追加方法を説明します。
①管理画面に「採用中」チェックを作る
「functions.php」に以下のコードを追加する。
// 管理画面[設定]→[一般]に「採用中」チェックを追加
add_action('admin_init', function () {
register_setting('general', 'site_is_hiring', [
'type' => 'boolean',
'sanitize_callback' => function ($v) { return (bool)$v; },
'default' => 0,
]);
add_settings_field(
'site_is_hiring',
'採用中',
function () {
$value = get_option('site_is_hiring');
echo '<label><input type="checkbox" name="site_is_hiring" value="1" ' .
checked(1, $value, false) . '> 採用中（ONで表示）</label>';
},
'general'
);
});
これで「設定」→「一般」の一番下に、以下のような項目が追加されます。
②クラスごとに出力を制御する
「functions.php」に以下のコードを追加する。
// ブロック出力を条件で抑止（フロントのみ）
add_filter('render_block', function ($block_content, $block) {
if (is_admin()) return $block_content; // エディター内は常に表示
$class = $block['attrs']['className'] ?? '';
if (!$class) return $block_content;
$is_hiring = (bool) get_option('site_is_hiring');
// "採用中のときだけ"表示
if (strpos($class, 'if-hiring') !== false && !$is_hiring) {
return '';
}
// "採用中以外のときだけ"表示
if (strpos($class, 'if-not-hiring') !== false && $is_hiring) {
return '';
}
return $block_content;
}, 10, 2);
③制御したいブロックにクラスを追加
制御したいブロックに以下のクラスを付与します。
募集中・採用中に表示したいブロック：if-hiring
採用停止中に表示したいブロック：if-not-hiring
・ブロックで制作している場合
サイドバーから「高度な設定」→「追加CSSクラス」に追加
・カスタムHTMLで制作している場合
該当箇所にクラスを付与
注意点
実際の失敗談ですが、ショートコード自体にクラス付与したときに表示・非表示を制御できませんでした。
×ダメな例
[contact-form-7 id="○○" title="△△△" html_class="if-hiring"]↓
ショートコードを入れたブロック自体を、一度「グループ化」します。
グループ化すると、「高度な設定」ができるようになるので、ここでクラスを追加します。
