WordPressでNEWS配信システムを作る初心者向け実践講座｜第4回：NEWS候補にカスタムフィールドを追加する

第3回では、WordPressの中に「NEWS候補」という専用の保存先を作りました。

通常の記事や固定ページとは別に、NEWS候補専用のカスタム投稿タイプを作ることで、TECN NEWS候補管理 V1の土台ができました。

ただし、この段階では、まだ「NEWS候補を保存する箱」ができただけです。

NEWS候補1件に、元記事URL、カテゴリ、NEWS表示文、表示先NEWS、表示フラグ、承認ステータス、X投稿文案、X投稿ステータス、メモなどを入力するための専用項目は、まだ用意されていません。

そこで第4回では、第3回で作成したNEWS候補用カスタム投稿タイプに、実務で使うための入力項目を追加していきます。

このときに使う考え方が、カスタムフィールドです。

カスタムフィールドとは、WordPressの投稿や固定ページ、カスタム投稿タイプに、標準のタイトルや本文以外の追加情報を持たせる仕組みです。

ただし、今回のシリーズでは、Advanced Custom Fields、ACFなどのカスタムフィールド作成プラグインは使いません。

また、WordPress標準のカスタムフィールド欄を、担当者が手作業で追加していく方法でもありません。

今回は、Code SnippetsにPHPコードを登録し、NEWS候補の編集画面に専用の入力欄を表示する方法で進めます。

つまり、作成者や担当者が「カスタムフィールドを自分で作る」必要はありません。

担当者が行う作業は、WordPress管理画面でNEWS候補を開き、画面に表示された入力欄に必要な情報を入力して保存することです。

一方で、PHP側では、入力欄を表示する処理、入力された値を保存する処理、保存済みの値を再表示する処理、保存時に安全にデータを扱う処理を行います。

このように、仕組みを作る部分はPHPで対応し、日々の運用はWordPress管理画面で行う、という役割分担にします。

この方針にしておくと、余計なプラグインに依存せず、TECN NEWS候補管理 V1に必要な項目だけをシンプルに作ることができます。

第4回の達成目標は、NEWS候補1件に必要な項目を入力・保存できる状態にすることです。

ここまでできると、TECN NEWS候補管理 V1は、単なる保存先から、実際に業務で使えるNEWS候補管理画面へ一歩近づきます。

第4回では、まずカスタムフィールドの考え方を整理し、そのうえで、どこまでをPHPで作り、どこからを管理画面で操作するのかを分かりやすく確認していきます。

完成形をイメージするためにデザインをはっておきますね。

H2-1 第4回で行うこと

第3回では、WordPressの中に「NEWS候補」という専用の保存先を作りました。

通常の記事や固定ページとは別に、NEWS候補専用のカスタム投稿タイプを作ることで、TECN NEWS候補管理 V1の土台ができました。

ただし、第3回で作ったのは、あくまで「NEWS候補を保存する箱」です。

この段階では、NEWS候補を1件登録することはできますが、元記事URL、カテゴリ、NEWS表示文、表示先NEWS、表示フラグ、承認ステータス、X投稿文案、X投稿ステータス、メモなどを入力する専用の欄は、まだ用意されていません。

そこで第4回では、このNEWS候補の編集画面に、実務で使うための入力項目を追加していきます。

第2回では、NEWS候補1件に持たせる項目を設計しました。

第3回では、そのNEWS候補を保存するための箱を作りました。

そして第4回では、その箱の中に入れる項目を、実際にWordPress管理画面で入力できるようにしていきます。

ここで使う考え方が、カスタムフィールドです。

カスタムフィールドとは、WordPressの投稿や固定ページ、カスタム投稿タイプに、標準のタイトルや本文以外の追加情報を持たせる仕組みです。

ただし、今回のシリーズでは、Advanced Custom Fields、ACFなどのカスタムフィールド作成プラグインは使いません。

また、WordPress標準のカスタムフィールド欄を担当者が手作業で追加していく方法でもありません。

今回は、Code SnippetsにPHPコードを登録し、NEWS候補の編集画面に専用の入力欄を表示する方法で進めます。

つまり、担当者が「カスタムフィールドを作る」のではありません。

担当者は、WordPress管理画面でNEWS候補を開き、画面に表示された入力欄に必要な情報を入力して保存するだけです。

一方で、PHP側では、入力欄を表示する処理、入力された値を保存する処理、保存済みの値を再表示する処理、安全にデータを扱う処理を行います。

このように、仕組みを作る部分はPHPで対応し、日々の入力作業はWordPress管理画面で行う、という役割分担にします。

第4回で目指すのは、NEWS候補1件に必要な情報を入力・保存できる状態にすることです。

たとえば、NEWS候補の編集画面で、元記事URLを入力する。

NEWS表示文を書く。

表示先NEWSを選ぶ。

表示するかどうかを切り替える。

承認ステータスを選ぶ。

X投稿文案を入力する。

X投稿ステータスを選ぶ。

メモを書く。

このような入力欄を用意できれば、NEWS候補管理はかなり実務的な形に近づきます。

第4回では、まずカスタムフィールドの考え方を整理し、そのうえで、どの項目をどの入力形式で作るのかを決めます。

その後、Code Snippetsに貼り付けるPHPコードを用意し、NEWS候補編集画面に入力欄を表示できるようにします。

ここまでできれば、TECN NEWS候補管理 V1は、単なる保存先から、実際に運用できる管理画面へ一歩進みます。

H2-2 カスタムフィールドとは何か

カスタムフィールドとは、WordPressの投稿や固定ページ、カスタム投稿タイプに、追加情報を持たせるための仕組みです。

WordPressの通常の記事には、最初からタイトルや本文があります。

タイトル欄に記事タイトルを入力し、本文欄に記事の内容を書きます。

カテゴリやタグ、アイキャッチ画像なども、WordPressの標準機能として用意されています。

しかし、業務で使う小さな管理システムを作ろうとすると、標準のタイトルや本文だけでは足りないことが多くあります。

今回のTECN NEWS候補管理 V1でも同じです。

NEWS候補1件には、タイトルや本文だけでなく、次のような情報を持たせたいと考えています。

元記事URL。

カテゴリ。

NEWS表示文。

表示先NEWS。

表示フラグ。

承認ステータス。

X投稿文案。

X投稿ステータス。

メモ。

これらは、通常の記事本文とは少し性質が違います。

たとえば、元記事URLは、NEWS候補の元になった記事を確認するためのURLです。

NEWS表示文は、実際にNEWS枠に表示するための文面です。

表示先NEWSは、TECN NEWS、ダイソーNEWS、どこの国NEWS、LDAC / Bluetooth NEWS、在庫管理 / DX NEWSなど、どのNEWS枠に出すかを選ぶための項目です。

承認ステータスは、未確認、修正中、承認済み、非表示など、担当者の確認状態を管理するための項目です。

X投稿文案は、Xに投稿するための文面です。

このような情報を、すべて本文欄に手で書いてしまうと、あとから扱いにくくなります。

たとえば、本文欄の中に、

元記事URL：〇〇

表示先NEWS：在庫管理 / DX NEWS

承認ステータス：承認済み

のように書くこともできなくはありません。

しかし、その方法では、あとからPHPで取り出して一覧表示したり、承認済みのNEWS候補だけを抽出したり、表示先NEWSごとに分けて表示したりするのが難しくなります。

そこで、項目ごとにデータを分けて保存します。

このように、投稿やカスタム投稿タイプに追加情報を持たせる仕組みが、カスタムフィールドです。

ただし、ここで注意したいのは、今回のシリーズでは、担当者がWordPress管理画面でカスタムフィールドを手作業で作るわけではないという点です。

また、Advanced Custom Fields、ACFなどのプラグインを使って入力欄を作るわけでもありません。

今回の方針では、PHPでNEWS候補専用の入力欄を作ります。

具体的には、Code SnippetsにPHPコードを登録し、NEWS候補の編集画面に、元記事URL、NEWS表示文、表示先NEWS、承認ステータスなどの入力欄を表示します。

担当者は、その入力欄に必要な情報を入力して保存します。

保存された情報は、WordPressの投稿メタ情報として保存されます。

投稿メタ情報という言葉は少し難しく聞こえるかもしれませんが、ここでは「NEWS候補1件に紐づく追加データ」と考えれば十分です。

たとえば、あるNEWS候補に対して、

元記事URLはこのURL。

表示先NEWSは在庫管理 / DX NEWS。

承認ステータスは未確認。

X投稿ステータスは未投稿。

という追加情報を持たせるイメージです。

カスタムフィールドを使うことで、NEWS候補1件ごとに必要な情報を整理して保存できます。

そして、将来的には、その情報を使って、固定ページにNEWS候補一覧を表示したり、承認済みのものだけをNEWS枠に出したり、表示先NEWSごとに出し分けたりできるようになります。

つまり、カスタムフィールドは、NEWS候補管理を実務で使える形にするための重要な部品です。

第3回で作ったカスタム投稿タイプが「NEWS候補を入れる箱」だとすれば、第4回で追加するカスタムフィールドは「その箱の中に入れる項目」です。

箱だけでは、まだ十分な管理はできません。

箱の中に、元記事URL、NEWS表示文、表示先NEWS、承認ステータスなどの項目を持たせることで、NEWS候補管理として使える形になります。

第4回では、このカスタムフィールドを、PHPで専用入力欄として作っていきます。

これにより、担当者は難しい仕組みを意識せず、WordPress管理画面上で必要な情報を入力できるようになります。

H2-3 今回はACFなどのプラグインを使わずPHPで入力欄を作る

カスタムフィールドを使う方法はいくつかあります。

WordPressでカスタムフィールドという言葉を調べると、Advanced Custom Fields、通称ACFというプラグインがよく出てきます。

ACFは、カスタムフィールドを管理画面から作成しやすくするための有名なプラグインです。

テキスト入力、テキストエリア、セレクトボックス、チェックボックス、画像、繰り返し項目など、さまざまな入力欄を管理画面から作ることができます。

そのため、WordPressで本格的にカスタムフィールドを使う場合、ACFを使う方法はとても有力です。

ただし、このTECN NEWS候補管理 V1では、ACFなどのカスタムフィールド作成プラグインは使わない方針にします。

理由は、今回作る項目が比較的シンプルだからです。

必要な項目は、元記事URL、カテゴリ、NEWS表示文、表示先NEWS、表示フラグ、承認ステータス、X投稿文案、X投稿ステータス、メモなどです。

これらは、PHPで専用の入力欄を作れば十分に対応できます。

また、アピスminiの応用系として考えた場合、できるだけ余計なプラグインに依存しない形にしておくと、仕組みを理解しやすくなります。

プラグインを使えば便利ですが、プラグインの設定画面で何を作ったのか、どの項目がどの名前で保存されているのかが見えにくくなることもあります。

今回のシリーズでは、WordPressで何がどのように動いているのかを、初心者にも分かりやすく見せることを大切にしています。

そのため、NEWS候補の入力欄は、Code SnippetsにPHPコードを登録して作ります。

ここで誤解しやすいのは、担当者がWordPress管理画面で「カスタムフィールドを手作業で追加する」わけではないという点です。

担当者が行うのは、NEWS候補の編集画面を開き、表示された入力欄に情報を入れて保存することです。

たとえば、画面に元記事URLの入力欄が表示されます。

そこにURLを入力します。

NEWS表示文の入力欄が表示されます。

そこにNEWS用の文面を入力します。

表示先NEWSの選択欄が表示されます。

そこから、TECN NEWS、ダイソーNEWS、どこの国NEWS、LDAC / Bluetooth NEWS、在庫管理 / DX NEWSなどを選びます。

承認ステータスの選択欄が表示されます。

そこから、未確認、修正中、承認済み、非表示などを選びます。

このように、担当者は通常の入力画面として操作するだけです。

一方で、PHP側では、その入力欄を表示する処理、入力された値を保存する処理、保存済みの値をもう一度表示する処理を行います。

つまり、カスタムフィールドという仕組みは裏側で使いますが、担当者はカスタムフィールドそのものを意識する必要はありません。

これは、実務で使ううえではとても大切です。

操作する人に、毎回「これはカスタムフィールドです」「このメタキーに保存されています」と意識させる必要はありません。

担当者が迷わず入力できる画面になっていれば、それで十分です。

今回の方針を整理すると、次のようになります。

ACFなどのプラグインは使わない。

WordPress標準のカスタムフィールド欄を手作業で追加しない。

Code SnippetsにPHPコードを登録する。

PHPでNEWS候補編集画面に専用入力欄を表示する。

担当者は表示された入力欄に入力して保存する。

保存された値は、WordPressの投稿メタ情報として管理する。

この形にすることで、仕組みを作る側と、実際に運用する側の役割を分けることができます。

仕組みを作る側は、PHPで入力欄や保存処理を作ります。

運用する側は、WordPress管理画面でNEWS候補を開き、必要な情報を入力します。

この分担にしておくと、担当者にとっては使いやすく、作成者にとっては管理しやすい仕組みになります。

TECN NEWS候補管理 V1では、まずこのシンプルな方針で進めます。

将来的に入力項目が増えたり、より複雑な画面が必要になったりした場合は、ACFなどのプラグインを使う選択肢もあります。

しかし、V1では、まず必要な項目だけをPHPで作り、余計な依存を増やさずに小さく始めます。

この考え方は、WordPressを使ったアピスmini系の小さな業務改善システムにも向いています。

大きなシステムをいきなり作るのではなく、必要な入力欄を作り、実際に使いながら改善していく。

これが、第4回で行うカスタムフィールド追加の基本方針です。

H2-4 PHPで行うことと管理画面で行うこと

ここで、PHPで行うことと、WordPress管理画面で行うことを整理しておきます。

第4回では、カスタムフィールドという言葉が出てきます。

ただし、実際の作業は、すべてを管理画面で手作業するわけではありません。

また、すべてをPHPだけで完結するわけでもありません。

PHPで仕組みを作り、WordPress管理画面で担当者が入力する。

この役割分担で進めます。

まず、PHPで行うことから整理します。

PHPで行う1つ目の作業は、NEWS候補編集画面に入力欄を表示することです。

第3回で作ったNEWS候補用カスタム投稿タイプの編集画面に、元記事URL、カテゴリ、NEWS表示文、表示先NEWS、表示フラグ、承認ステータス、X投稿文案、X投稿ステータス、メモなどの入力欄を追加します。

この入力欄は、PHPコードによって表示します。

担当者が管理画面で項目を作るのではなく、あらかじめPHPで用意しておく形です。

PHPで行う2つ目の作業は、入力された値を保存することです。

担当者がNEWS候補編集画面で情報を入力し、保存ボタンを押したときに、その値を受け取ってWordPressに保存します。

たとえば、元記事URLに入力された値は、元記事URL用の保存場所に保存します。

表示先NEWSで選ばれた値は、表示先NEWS用の保存場所に保存します。

承認ステータスで選ばれた値は、承認ステータス用の保存場所に保存します。

PHPで行う3つ目の作業は、保存済みの値を再表示することです。

一度保存したNEWS候補をもう一度開いたときに、前回入力した内容が入力欄に表示されていなければ困ります。

元記事URLが空欄に戻ってしまったり、表示先NEWSの選択が消えてしまったりすると、実務では使いにくくなります。

そのため、PHPで保存済みの値を取得し、編集画面に再表示します。

PHPで行う4つ目の作業は、選択肢を固定することです。

表示先NEWSや承認ステータス、X投稿ステータスのような項目は、手入力ではなく選択式にします。

表示先NEWSなら、TECN NEWS、ダイソーNEWS、どこの国NEWS、LDAC / Bluetooth NEWS、在庫管理 / DX NEWS、TECNおすすめ、非表示などです。

承認ステータスなら、未確認、修正中、承認済み、非表示などです。

X投稿ステータスなら、未投稿、投稿済み、投稿しないなどです。

これらの選択肢は、PHP側で決めておきます。

そうすることで、入力者による表記ゆれを防げます。

たとえば、ある人は「LDAC NEWS」と入力し、別の人は「LDAC/Bluetooth」と入力し、さらに別の人は「Bluetoothニュース」と入力してしまうと、あとで抽出するときに困ります。

選択式にしておけば、表記が統一され、後からショートコードで表示先NEWSごとに取り出しやすくなります。

PHPで行う5つ目の作業は、安全な保存処理です。

管理画面から送られてきた入力値を、そのまま保存するのではなく、必要なチェックや整形を行います。

たとえば、URLの項目にはURLとして扱いやすい形で保存します。

テキスト項目は、不要なタグや危険な入力が入らないように処理します。

保存ボタンが正しい画面から押されたものかどうかも確認します。

このような安全処理も、PHP側で行います。

次に、WordPress管理画面で行うことを整理します。

管理画面で担当者が行うのは、日々の入力作業です。

NEWS候補を新規追加する。

NEWS候補のタイトルを入力する。

元記事URLを入力する。

カテゴリを入力する。

NEWS表示文を書く。

表示先NEWSを選ぶ。

表示フラグを切り替える。

承認ステータスを選ぶ。

X投稿文案を入力する。

X投稿ステータスを選ぶ。

メモを書く。

保存する。

これらは、担当者が通常のWordPress管理画面で行う作業です。

担当者は、PHPコードを触る必要はありません。

カスタムフィールドの保存先を意識する必要もありません。

画面に表示された入力欄を使うだけです。

この役割分担を分かりやすく整理すると、次のようになります。

PHPで行うことは、入力欄を作ること、入力値を保存すること、保存済みの値を再表示すること、選択肢を固定すること、安全に保存することです。

管理画面で行うことは、NEWS候補を追加し、表示された入力欄に必要な情報を入力し、保存することです。

つまり、作る部分はPHP。

使う部分は管理画面。

このように考えると分かりやすくなります。

この分担にしておくことで、TECN NEWS候補管理 V1は、担当者にとって使いやすい管理画面になります。

同時に、作成者にとっても、必要な項目や保存処理をPHPでまとめて管理しやすくなります。

第4回では、この方針に沿って、NEWS候補編集画面に必要な入力欄を追加していきます。

H2-5 第2回で設計した項目を振り返る

ここで、第2回で設計したNEWS候補1件の項目を振り返っておきます。

第4回では、NEWS候補編集画面に入力欄を追加していきます。

しかし、いきなりPHPコードを書き始める前に、どの項目を入力できるようにするのかを再確認しておくことが大切です。

第2回では、TECN NEWS候補管理 V1で使う項目として、次の10項目を整理しました。

・元記事タイトル
・元記事URL
・カテゴリ
・NEWS表示文
・表示先NEWS
・表示フラグ
・承認ステータス
・X投稿文案
・X投稿ステータス
・メモ

この10項目が、V1で扱う基本項目です。

まず、元記事タイトルは、どの記事をNEWS候補として扱っているのかを判断するための項目です。

ただし、元記事タイトルについては、WordPress標準のタイトル欄を使うこともできます。

NEWS候補のタイトル欄に、元記事タイトルやNEWS候補名を入れておけば、一覧画面でも分かりやすくなります。

次に、元記事URLです。

これは、NEWS候補の元になった記事を確認するためのURLです。

担当者がNEWS候補を見たときに、元記事をすぐ開けるようにしておくために必要です。

次に、カテゴリです。

元記事がどのカテゴリの記事なのかを確認するための項目です。

在庫管理、ダイソー、どこの国、LDAC / Bluetoothなど、元記事のカテゴリが分かると、表示先NEWSを判断しやすくなります。

次に、NEWS表示文です。

これは、実際にNEWS枠へ表示する文面です。

元記事タイトルをそのまま使う場合もありますが、NEWS枠では少し短くしたり、読者がクリックしやすい文面に直したりすることがあります。

そのため、元記事タイトルとは別に、NEWS表示文を入力できるようにします。

次に、表示先NEWSです。

これは、そのNEWS候補をどのNEWS枠に出すかを選ぶ項目です。

たとえば、TECN NEWS、ダイソーNEWS、どこの国NEWS、LDAC / Bluetooth NEWS、在庫管理 / DX NEWS、TECNおすすめ、非表示などを選べるようにします。

次に、表示フラグです。

これは、そのNEWS候補を実際に表示するかどうかを管理する項目です。

NEWS候補としては保存しておくが、読者向けのNEWSにはまだ出さない、という場合に使います。

次に、承認ステータスです。

未確認、修正中、承認済み、非表示などの状態を管理します。

NEWS候補が作成されても、担当者が確認するまでは承認済みにしない方が安全です。

この項目があることで、未確認の候補がそのままNEWS表示されることを防ぎやすくなります。

次に、X投稿文案です。

V1ではXへのAPI自動投稿は行いません。

ただし、X投稿文案をあらかじめ作っておくことで、担当者がコピーして投稿しやすくなります。

次に、X投稿ステータスです。

未投稿、投稿済み、投稿しないなどを管理します。

これにより、どのNEWS候補をXに投稿したのか、まだ投稿していないのかが分かりやすくなります。

最後に、メモです。

メモは、担当者が判断理由や注意点を残すために使います。

たとえば、「今回はTECNおすすめに出す」「X投稿は後日」「NEWS表示文を短くする」などの補足を書いておけます。

このように、第2回で整理した10項目は、NEWS候補を実務で管理するための基本項目です。

ただし、第4回では、この10項目をすべて同じ方法で入力欄にするわけではありません。

WordPress標準のタイトル欄を使えるものもあります。

PHPで専用の入力欄を追加するものもあります。

選択式にした方がよいものもあります。

テキストエリアにした方がよいものもあります。

そのため、次のH2では、WordPress標準のタイトル欄で管理する項目と、PHPで追加する入力欄として管理する項目を分けて整理します。

H2-6 タイトル欄で管理する項目とPHPで追加する項目

第4回では、NEWS候補編集画面に入力欄を追加していきます。

ただし、すべての項目をPHPで新しく作る必要はありません。

WordPressには、もともとタイトル欄や本文欄があります。

第3回で作成したNEWS候補用カスタム投稿タイプでも、タイトル欄と本文欄を使えるようにしました。

そのため、標準機能で使えるものは標準機能を使い、不足する項目だけをPHPで専用入力欄として追加する方針にします。

まず、NEWS候補のタイトル欄です。

ここには、NEWS候補の内容が一覧で分かるような名前を入れます。

たとえば、元記事タイトルをそのまま入れてもよいです。

または、NEWS表示文に近い短いタイトルを入れてもよいです。

管理画面の一覧で見たときに、どのNEWS候補なのか分かることが大切です。

たとえば、

在庫管理システムを無料で試せるアピスmini活用記事を公開しました

というように、NEWS候補の概要が分かるタイトルを入れておくと便利です。

このタイトル欄は、WordPress標準の項目なので、PHPで新しく作る必要はありません。

第4回では、元記事タイトルやNEWS候補名に近い情報は、まず標準のタイトル欄で管理する方針にします。

一方で、元記事URLや表示先NEWS、承認ステータスなどは、標準のタイトル欄や本文欄だけでは管理しにくい項目です。

これらは、PHPで専用の入力欄を追加します。

たとえば、元記事URLは、タイトル欄に入れるものではありません。

URL専用の入力欄を作った方が分かりやすくなります。

カテゴリも、NEWS候補一覧で確認するための情報として、専用欄にしておくと扱いやすくなります。

NEWS表示文は、実際にNEWS枠に表示する文面です。

タイトルとは別に調整したい場合があるため、専用のテキストエリアとして作ります。

表示先NEWSは、手入力ではなく選択式にします。

TECN NEWS、ダイソーNEWS、どこの国NEWS、LDAC / Bluetooth NEWS、在庫管理 / DX NEWS、TECNおすすめ、非表示などから選べるようにします。

手入力にすると、表記ゆれが発生しやすくなります。

たとえば、ある担当者が「LDAC NEWS」と入力し、別の担当者が「LDAC / Bluetooth NEWS」と入力すると、あとで表示先ごとに抽出するときに困ります。

そのため、表示先NEWSはPHPで選択肢を固定します。

表示フラグは、表示するかどうかを切り替える項目です。

これはチェックボックスのような形にすると分かりやすいです。

承認ステータスも、選択式にします。

未確認、修正中、承認済み、非表示などから選ぶ形にしておけば、担当者による表記ゆれを防げます。

X投稿文案は、少し長めの文章になる可能性があるため、テキストエリアにします。

X投稿ステータスは、未投稿、投稿済み、投稿しないなどから選ぶ形にします。

メモも、担当者が自由に書けるようにテキストエリアにします。

このように整理すると、第4回で扱う項目は次のように分けられます。

WordPress標準のタイトル欄で管理する項目は、NEWS候補のタイトルです。

PHPで追加する入力欄として管理する項目は、元記事URL、カテゴリ、NEWS表示文、表示先NEWS、表示フラグ、承認ステータス、X投稿文案、X投稿ステータス、メモです。

ここで大切なのは、担当者がカスタムフィールドの仕組みを意識しなくてよい形にすることです。

担当者から見ると、NEWS候補編集画面に必要な入力欄が並んでいるだけです。

元記事URLを入力する欄がある。

NEWS表示文を書く欄がある。

表示先NEWSを選ぶ欄がある。

承認ステータスを選ぶ欄がある。

X投稿文案を書く欄がある。

このように、画面を見れば何を入力すればよいか分かる状態を目指します。

一方で、裏側ではPHPが入力欄を表示し、入力された値を保存し、再編集時に保存済みの値を表示します。

つまり、標準のタイトル欄はWordPressの機能を使う。

それ以外のNEWS候補管理に必要な項目は、PHPで専用入力欄として追加する。

この役割分担で進めます。

この整理ができると、次にどの項目をどの入力形式にするかを決めやすくなります。

H2-7 V1で追加する入力項目一覧

ここまでで、WordPress標準のタイトル欄で管理する項目と、PHPで専用入力欄として追加する項目を分けて整理しました。

第4回では、NEWS候補編集画面に、V1で必要な入力項目を追加していきます。

ここで追加する入力欄は、Advanced Custom Fields、ACFなどのプラグインで作るのではありません。

また、担当者がWordPress標準のカスタムフィールド欄を手作業で追加するわけでもありません。

Code SnippetsにPHPコードを登録し、そのPHPコードによってNEWS候補編集画面に専用の入力欄を表示します。

担当者は、表示された入力欄に必要な情報を入力して保存するだけです。

V1でPHPによって追加する入力項目は、次の9項目です。

・source_url：元記事URL
・source_category：カテゴリ
・news_text：NEWS表示文
・news_target：表示先NEWS
・display_flag：表示フラグ
・approval_status：承認ステータス
・x_post_text：X投稿文案
・x_post_status：X投稿ステータス
・memo：メモ

第2回で設計した10項目のうち、元記事タイトルにあたる部分は、WordPress標準のタイトル欄を使う方針にしました。

そのため、PHPで新しく追加する入力欄は、上記の9項目です。

まず、source_url は元記事URLです。

これは、NEWS候補の元になった記事を確認するためのURLです。

担当者がNEWS候補を見たときに、すぐ元記事を開けるようにしておくために必要です。

次に、source_category はカテゴリです。

元記事がどのカテゴリに属しているかを記録します。

在庫管理、ダイソー、どこの国、LDAC / Bluetoothなど、カテゴリが分かると、表示先NEWSを判断しやすくなります。

次に、news_text はNEWS表示文です。

これは、実際にNEWS枠に表示するための文面です。

元記事タイトルをそのまま使うのではなく、NEWS枠に合うように短くしたり、読者がクリックしやすい文面に調整したりするために使います。

次に、news_target は表示先NEWSです。

TECN NEWS、ダイソーNEWS、どこの国NEWS、LDAC / Bluetooth NEWS、在庫管理 / DX NEWS、TECNおすすめ、非表示などから選ぶ項目です。

これは手入力ではなく、選択式にします。

選択式にすることで、担当者ごとの表記ゆれを防ぎ、あとからショートコードでNEWS枠ごとに抽出しやすくなります。

次に、display_flag は表示フラグです。

これは、そのNEWS候補を実際に表示するかどうかを管理する項目です。

NEWS候補として保存はするが、まだ読者向けには表示しない、という運用もあります。

そのため、表示する / 表示しないを切り替えられるようにします。

次に、approval_status は承認ステータスです。

未確認、修正中、承認済み、非表示などの状態を管理します。

NEWS候補が登録されても、担当者が確認するまでは未確認として扱い、確認後に承認済みにする流れを想定します。

次に、x_post_text はX投稿文案です。

V1ではX APIを使った自動投稿は行いません。

ただし、X投稿文案を入力しておけば、担当者が内容を確認し、コピーして手動投稿や予約投稿を行いやすくなります。

次に、x_post_status はX投稿ステータスです。

未投稿、投稿済み、投稿しないなどを管理します。

この項目があると、どのNEWS候補をXに投稿したのか、まだ投稿していないのかが分かりやすくなります。

最後に、memo はメモです。

担当者が判断理由や注意点を自由に書ける欄です。

たとえば、「今回はTECNおすすめに出す」「X投稿は後日」「NEWS表示文を短くする」「非表示にした理由」などを残しておけます。

このように、V1で追加する9つの入力項目は、NEWS候補を実務で管理するための基本項目です。

ここまで用意できれば、NEWS候補1件に対して、元記事の確認、NEWS表示文の調整、表示先NEWSの選択、承認状態の管理、X投稿文案の管理まで行えるようになります。

ただし、ここでも大事なのは、最初から欲張りすぎないことです。

表示開始日、表示終了日、確認者、確認日、クリック数、表示回数などは、あると便利です。

しかし、V1ではまだ追加しません。

まずは、毎日のNEWS候補確認に必要な項目を優先します。

第4回では、この9項目をPHPで入力欄として追加し、NEWS候補編集画面で入力・保存できる状態を目指します。

H2-8 入力形式を決める

次に、それぞれの項目をどのような入力形式にするかを決めます。

同じカスタムフィールドでも、すべてを同じ入力欄にする必要はありません。

短い文字を入力する項目もあれば、長めの文章を入力する項目もあります。

決まった選択肢から選ぶ項目もあります。

表示する / 表示しないのように、オン・オフで管理したい項目もあります。

そのため、項目ごとに入力形式を分けます。

第4回では、次のように考えます。

・元記事URL：テキスト入力
・カテゴリ：テキスト入力
・NEWS表示文：テキストエリア
・表示先NEWS：セレクトボックス
・表示フラグ：チェックボックス
・承認ステータス：セレクトボックス
・X投稿文案：テキストエリア
・X投稿ステータス：セレクトボックス
・メモ：テキストエリア

まず、元記事URLはテキスト入力にします。

URLは1行の文字列なので、通常のテキスト入力欄で十分です。

将来的には、記事IDから自動でURLを取得することも考えられます。

しかし、V1ではまず担当者が元記事URLを入力できる形にします。

次に、カテゴリもテキスト入力にします。

本来であれば、元記事のカテゴリを自動取得したり、カテゴリ一覧から選択したりする方法も考えられます。

ただし、V1ではまずシンプルに、元記事のカテゴリを入力できる欄として用意します。

将来的に自動化する余地は残しておきます。

次に、NEWS表示文はテキストエリアにします。

NEWS表示文は、1行で済むこともありますが、少し説明を加えたい場合もあります。

そのため、1行テキストではなく、複数行入力できるテキストエリアにしておく方が使いやすいです。

次に、表示先NEWSはセレクトボックスにします。

表示先NEWSは、自由に手入力させるより、決められた選択肢から選ぶ方がよい項目です。

たとえば、TECN NEWS、ダイソーNEWS、どこの国NEWS、LDAC / Bluetooth NEWS、在庫管理 / DX NEWS、TECNおすすめ、非表示などです。

これを手入力にしてしまうと、表記ゆれが起きます。

ある担当者は「LDAC / Bluetooth NEWS」と入力し、別の担当者は「LDAC NEWS」と入力するかもしれません。

また、別の人は「Bluetoothニュース」と入力するかもしれません。

このように表記がばらつくと、あとから表示先NEWSごとに抽出するときに困ります。

そのため、表示先NEWSはセレクトボックスにして、選択肢をPHP側で固定します。

次に、表示フラグはチェックボックスにします。

表示フラグは、そのNEWS候補を実際に表示するかどうかを切り替えるための項目です。

表示する場合はチェックあり。

表示しない場合はチェックなし。

このようにすると、担当者にも分かりやすくなります。

ただし、実際の表示判定では、表示フラグだけでなく承認ステータスも組み合わせて考える予定です。

たとえば、表示フラグがオンで、承認ステータスが承認済みのものだけをNEWS表示対象にする、といった使い方ができます。

次に、承認ステータスはセレクトボックスにします。

承認ステータスには、未確認、修正中、承認済み、非表示などの決まった状態があります。

これも手入力にすると表記ゆれが起きやすいため、選択式にします。

次に、X投稿文案はテキストエリアにします。

X投稿文案は、短い一文で済む場合もありますが、少し説明を加えることもあります。

そのため、複数行入力できるテキストエリアが向いています。

V1ではX APIによる自動投稿は行いません。

しかし、ここに投稿文案を保存しておけば、担当者がコピーしてX公式画面で手動投稿や予約投稿を行いやすくなります。

次に、X投稿ステータスはセレクトボックスにします。

未投稿、投稿済み、投稿しないなど、決まった状態から選べるようにします。

これにより、どのNEWS候補がまだX未投稿なのか、どれが投稿済みなのかを確認しやすくなります。

最後に、メモはテキストエリアにします。

メモ欄には、担当者が自由に補足を書けるようにします。

たとえば、表示先を迷っている、X投稿は後日にする、今回は非表示にする理由を残す、といった使い方ができます。

このように入力形式を分けておくと、担当者が迷いにくくなります。

1行でよいものはテキスト入力。

文章を書くものはテキストエリア。

決まった選択肢から選ぶものはセレクトボックス。

オン・オフで判断するものはチェックボックス。

このように考えると分かりやすいです。

また、入力形式を決めておくことは、PHPコードを書くうえでも重要です。

テキスト入力、テキストエリア、セレクトボックス、チェックボックスでは、HTMLの書き方や保存処理が少しずつ違います。

第4回では、この入力形式に沿ってPHPコードを作り、NEWS候補編集画面に必要な入力欄を表示していきます。

H2-9 表示先NEWSの選択肢を決める

次に、表示先NEWSの選択肢を決めます。

表示先NEWSは、TECN NEWS候補管理 V1の中でも、とても重要な項目です。

なぜなら、この仕組みの目的は、公開した記事をただ新着順に並べることではなく、記事の内容に合わせて適切なNEWS枠へ振り分けることだからです。

たとえば、在庫管理の記事を読んでいる人には、在庫管理や業務改善に関するNEWSが表示された方が自然です。

ダイソーの記事を読んでいる人には、ダイソー関連のNEWSが表示された方が分かりやすいです。

イヤホンやBluetooth関連の記事を読んでいる人には、LDAC / Bluetooth NEWSが表示された方が関連性が高くなります。

このように、記事の内容に合わせてNEWS枠を分けることで、読者にとって関係のある情報を届けやすくなります。

そのため、表示先NEWSは手入力ではなく、セレクトボックスで選ぶ形にします。

V1では、次の選択肢を用意します。

・TECN NEWS
・ダイソーNEWS
・どこの国NEWS
・LDAC / Bluetooth NEWS
・在庫管理 / DX NEWS
・TECNおすすめ
・非表示

TECN NEWSは、TECNサイト全体として読者に知らせたい記事を表示する枠です。

特定のカテゴリだけでなく、サイト全体に関係するお知らせ、アピスmini、WordPress活用、業務改善、シリーズ記事の案内などに使います。

ダイソーNEWSは、ダイソー関連の記事を表示する枠です。

ダイソー商品、便利グッズ、比較記事、使ってみた記事など、ダイソーに関心がある読者向けに使います。

どこの国NEWSは、メーカーやブランドの国籍、企業情報、製品背景に関する記事を表示する枠です。

「このメーカーはどこの国のブランドなのか」「この製品はどこの会社が作っているのか」といった記事に向いています。

LDAC / Bluetooth NEWSは、イヤホン、ヘッドホン、Bluetooth、音声コーデック、音質関連の記事を表示する枠です。

ここでは、表記を必ず「LDAC / Bluetooth NEWS」に統一します。

以前の完成イメージ画像では、画像内の文字として表記ミスが起きる可能性がありました。

そのため、最終実装では、文字を画像に埋め込むのではなく、HTMLテキストとして管理する方針にします。

表示先NEWSも、PHP側の選択肢として固定しておけば、表記ゆれやスペルミスを防ぎやすくなります。

在庫管理 / DX NEWSは、在庫管理、業務改善、WordPressを使ったミニシステム、アピスmini、DX化に関する記事を表示する枠です。

今回のTECN NEWS候補管理 V1のような記事も、この枠に表示する候補になります。

TECNおすすめは、カテゴリをまたいで読者に案内したい記事を表示する枠です。

たとえば、無料ダウンロード、シリーズ記事、アピスminiの紹介、複数カテゴリに関係する重要記事などに使います。

最後に、非表示も選択肢として用意します。

NEWS候補として保存した記事であっても、必ず読者向けに表示するとは限りません。

記事としては公開するが、NEWS枠には出さない。

候補として残しておくが、今回は表示しない。

このような運用もあります。

そのため、表示先NEWSの選択肢に「非表示」を入れておくと、管理しやすくなります。

ここで大切なのは、表示先NEWSを自由入力にしないことです。

もし自由入力にすると、担当者によって表記がばらつく可能性があります。

たとえば、同じ意味でも、

LDAC NEWS
LDAC / Bluetooth NEWS
Bluetooth NEWS
LDAC・Bluetoothニュース

のように入力されてしまうかもしれません。

人間が見るだけなら、多少の違いは分かります。

しかし、あとでPHPやショートコードで「LDAC / Bluetooth NEWSだけを表示する」という処理を行うときには、表記が統一されていないと困ります。

そのため、表示先NEWSはセレクトボックスにし、PHP側で選択肢を固定します。

担当者は、表示された選択肢から選ぶだけです。

カスタムフィールドの細かい仕組みを意識する必要はありません。

入力欄を作るのはPHPです。

担当者が行うのは、管理画面で該当するNEWS枠を選ぶことです。

このようにしておくと、運用時の入力ミスを減らし、将来的な一覧表示やNEWS枠ごとの出し分けもしやすくなります。

V1では、まずこの7つの表示先NEWSを基本選択肢として進めます。

運用していく中で、新しいカテゴリやNEWS枠が必要になった場合は、PHP側の選択肢を追加すれば対応できます。

H2-10 承認ステータスとX投稿ステータスの選択肢を決める

次に、承認ステータスとX投稿ステータスの選択肢を決めます。

NEWS候補管理では、どのNEWS枠に表示するかだけでなく、その候補が今どの状態なのかを管理することも重要です。

記事が公開されたからといって、すぐにNEWSとして表示してよいとは限りません。

担当者が内容を確認し、NEWS表示文を整え、表示先NEWSを選び、必要に応じてX投稿文案も確認してから表示する方が安全です。

そのため、V1では承認ステータスを持たせます。

承認ステータスは、NEWS候補が今どの作業状態にあるかを示す項目です。

V1では、次の選択肢を用意します。

・未確認
・修正中
・承認済み
・非表示

未確認は、まだ担当者が内容を確認していない状態です。

新しく作成されたNEWS候補は、まず未確認として扱います。

未確認の状態では、まだ読者向けのNEWS表示には出さない方針にします。

修正中は、担当者が内容を見ている途中、または文面や表示先を調整している状態です。

たとえば、NEWS表示文を短くしたい、表示先NEWSを迷っている、X投稿文案を直したい、といった場合に使います。

承認済みは、担当者が確認し、NEWSとして表示してよいと判断した状態です。

将来的にショートコードでNEWS表示を行うときは、基本的に「表示フラグがオン」で、かつ「承認ステータスが承認済み」のものを表示対象にする考え方が分かりやすいです。

非表示は、NEWS候補としては残すが、NEWSには表示しない状態です。

記事としては公開されていても、NEWS枠には出さない方がよい場合があります。

また、候補として残しておきたいが、今回は表示対象から外す場合にも使えます。

承認ステータスも、自由入力ではなくセレクトボックスにします。

自由入力にすると、担当者によって、

承認
承認済
承認済み
OK
確認済み

のように表記がばらつく可能性があります。

人間が見るだけなら意味は分かりますが、PHPで条件抽出するときには不便です。

そのため、承認ステータスはPHP側で選択肢を固定し、担当者はセレクトボックスから選ぶだけにします。

次に、X投稿ステータスを決めます。

TECN NEWS候補管理 V1では、XへのAPI自動投稿は行いません。

ただし、X投稿文案をNEWS候補に持たせることで、担当者がコピーして手動投稿や予約投稿を行いやすくします。

そのため、X投稿についても状態を管理できるようにします。

V1では、X投稿ステータスとして次の選択肢を用意します。

・未投稿
・投稿済み
・投稿しない

未投稿は、まだXに投稿していない状態です。

新しく作成されたNEWS候補は、基本的に未投稿として扱います。

投稿済みは、担当者がXに投稿した、または予約投稿した状態です。

投稿済みにしておけば、あとから「このNEWSはXに投稿したか」を確認しやすくなります。

投稿しないは、そのNEWS候補についてはX投稿を行わない状態です。

すべてのNEWS候補をXに投稿する必要はありません。

サイト内NEWSには表示するが、Xには出さない記事もあります。

そのような場合に「投稿しない」を選べるようにしておくと便利です。

X投稿ステータスも、自由入力ではなくセレクトボックスにします。

未投稿、投稿済み、投稿しないという選択肢を固定することで、担当者ごとの表記ゆれを防げます。

このように、ステータス項目は運用の見える化に役立ちます。

承認ステータスがあれば、どのNEWS候補が未確認で、どれが承認済みなのか分かります。

X投稿ステータスがあれば、どれをXに投稿済みで、どれが未投稿なのか分かります。

これは、小さな管理項目ですが、日々の運用ではかなり効きます。

特に記事数が増えてくると、タイトルやURLだけでは状況を把握しにくくなります。

ステータスがあることで、担当者は次に何を確認すればよいか分かりやすくなります。

今回の実装では、これらの選択肢もPHP側で定義します。

担当者が選択肢を作るわけではありません。

担当者は、NEWS候補編集画面に表示されたセレクトボックスから、現在の状態を選ぶだけです。

仕組みを作る部分はPHPで対応し、日々の操作は管理画面で行う。

この方針をここでも徹底します。

V1では、承認ステータスとX投稿ステータスをシンプルな選択肢に絞ります。

運用していく中で、さらに細かい状態管理が必要になれば、後から選択肢を追加できます。

まずは、未確認、修正中、承認済み、非表示。

そして、未投稿、投稿済み、投稿しない。

このくらいのシンプルな状態管理から始めるのが分かりやすいです。

H2-11 Code Snippetsで入力欄を追加する方針

第4回では、NEWS候補編集画面に、元記事URL、カテゴリ、NEWS表示文、表示先NEWS、表示フラグ、承認ステータス、X投稿文案、X投稿ステータス、メモなどの入力欄を追加します。

この入力欄は、Advanced Custom Fields、ACFなどのプラグインを使って作るのではありません。

また、担当者がWordPress標準のカスタムフィールド欄を手作業で追加する方法でもありません。

今回は、第3回と同じように、Code Snippetsを使ってPHPコードを登録します。

Code SnippetsにPHPコードを登録することで、NEWS候補の編集画面に専用の入力欄を表示し、入力された値を保存できるようにします。

ここで作るPHPコードの役割は、大きく3つあります。

1つ目は、NEWS候補編集画面に入力欄を表示することです。

第3回で作成したNEWS候補用カスタム投稿タイプの編集画面に、専用の入力欄を追加します。

担当者がNEWS候補を開いたときに、元記事URL、NEWS表示文、表示先NEWS、承認ステータスなどを入力できる画面が表示されるようにします。

2つ目は、入力された値を保存することです。

担当者が入力欄に情報を入れて保存ボタンを押したときに、その値をWordPressに保存します。

たとえば、元記事URL欄に入力されたURLは、元記事URL用の保存場所に保存します。

表示先NEWSで選ばれた値は、表示先NEWS用の保存場所に保存します。

承認ステータスで選ばれた値は、承認ステータス用の保存場所に保存します。

3つ目は、保存済みの値を再表示することです。

一度保存したNEWS候補をもう一度開いたときに、前回入力した内容が画面に表示されるようにします。

もし保存済みの値が再表示されなければ、担当者は毎回同じ内容を入力し直さなければなりません。

それでは実務では使えません。

そのため、PHPで保存済みの値を取得し、入力欄に反映します。

また、保存時には安全処理も行います。

管理画面から送られた値を、そのまま保存するのではなく、必要に応じて整形します。

URLはURLとして保存しやすい形にします。

テキストは不要なタグや危険な入力が入りにくいように処理します。

複数行の文章は、必要な改行を残しながら保存します。

さらに、保存処理が正しい画面から行われたものかを確認するために、nonceという仕組みも使います。

nonceとは、WordPressでフォーム送信の正当性を確認するための仕組みです。

難しく考える必要はありません。

ここでは、NEWS候補編集画面から正しく保存ボタンが押されたかを確認するための安全確認だと考えれば十分です。

このように、今回のPHPコードでは、入力欄の表示、値の保存、保存済みデータの再表示、安全確認をまとめて行います。

担当者は、PHPコードを触る必要はありません。

Code Snippetsで仕組みを登録しておけば、担当者はWordPress管理画面でNEWS候補を開き、表示された入力欄に情報を入力するだけです。

つまり、第4回の作業は、次のように分けて考えると分かりやすいです。

仕組みを作る作業は、Code SnippetsにPHPコードを登録すること。

日々の運用作業は、NEWS候補編集画面で必要な情報を入力して保存すること。

この分担にしておくことで、作成者にも運用担当者にも分かりやすい仕組みになります。

また、Code Snippetsで管理しておけば、後から修正する場合も、どのコードがNEWS候補管理用なのか分かりやすくなります。

たとえば、今回のスニペット名は、

TECN NEWS候補管理 V1：カスタムフィールド入力欄

のようにしておくとよいです。

第3回のカスタム投稿タイプ登録コードとは別のスニペットにしておくと、役割が分かりやすくなります。

第3回のスニペットは、NEWS候補という箱を作るためのコードです。

第4回のスニペットは、その箱の中に入れる項目を入力できるようにするコードです。

このように分けておくと、あとから見直すときにも迷いにくくなります。

第4回では、この方針で、NEWS候補編集画面に入力欄を追加するPHPコードを作成します。

H2-12 入力欄を追加するPHPコード

それでは、NEWS候補編集画面に入力欄を追加するPHPコードを用意します。

このコードは、Code Snippetsに登録して使う前提です。

第3回で作成したカスタム投稿タイプ apice_news_candidate に対して、専用の入力欄を追加します。

追加する項目は、次の9項目です。

・元記事URL
・カテゴリ
・NEWS表示文
・表示先NEWS
・表示フラグ
・承認ステータス
・X投稿文案
・X投稿ステータス
・メモ

このコードを有効化すると、NEWS候補の編集画面に「NEWS候補 詳細情報」という入力エリアが追加されます。

そこに各項目を入力し、保存できるようになります。

<?php
/**
 * TECN NEWS候補管理 V1
 * カスタムフィールド入力欄追加
 *
 * 第3回で作成したカスタム投稿タイプ apice_news_candidate に、
 * NEWS候補管理用の入力欄を追加します。
 */

/**
 * NEWS候補編集画面にメタボックスを追加
 */
function apice_add_news_candidate_meta_box() {
    add_meta_box(
        'apice_news_candidate_meta_box',
        'NEWS候補 詳細情報',
        'apice_render_news_candidate_meta_box',
        'apice_news_candidate',
        'normal',
        'high'
    );
}
add_action( 'add_meta_boxes', 'apice_add_news_candidate_meta_box' );


/**
 * メタボックスの入力欄を表示
 */
function apice_render_news_candidate_meta_box( $post ) {

    // 保存時の安全確認用
    wp_nonce_field( 'apice_save_news_candidate_meta', 'apice_news_candidate_nonce' );

    // 保存済みの値を取得
    $source_url       = get_post_meta( $post->ID, 'source_url', true );
    $source_category  = get_post_meta( $post->ID, 'source_category', true );
    $news_text        = get_post_meta( $post->ID, 'news_text', true );
    $news_target      = get_post_meta( $post->ID, 'news_target', true );
    $display_flag     = get_post_meta( $post->ID, 'display_flag', true );
    $approval_status  = get_post_meta( $post->ID, 'approval_status', true );
    $x_post_text      = get_post_meta( $post->ID, 'x_post_text', true );
    $x_post_status    = get_post_meta( $post->ID, 'x_post_status', true );
    $memo             = get_post_meta( $post->ID, 'memo', true );

    // 初期値
    if ( $approval_status === '' ) {
        $approval_status = '未確認';
    }

    if ( $x_post_status === '' ) {
        $x_post_status = '未投稿';
    }

    ?>
    <style>
        .apice-news-meta-table {
            width: 100%;
            border-collapse: collapse;
        }
        .apice-news-meta-table th {
            width: 180px;
            text-align: left;
            vertical-align: top;
            padding: 12px 10px 12px 0;
            font-weight: 600;
        }
        .apice-news-meta-table td {
            padding: 10px 0;
        }
        .apice-news-meta-table input[type="text"],
        .apice-news-meta-table input[type="url"],
        .apice-news-meta-table select,
        .apice-news-meta-table textarea {
            width: 100%;
            max-width: 760px;
        }
        .apice-news-meta-table textarea {
            min-height: 90px;
        }
        .apice-news-help {
            color: #666;
            font-size: 12px;
            margin-top: 4px;
        }
    </style>

    <table class="apice-news-meta-table">

        <tr>
            <th><label for="source_url">元記事URL</label></th>
            <td>
                <input type="url" id="source_url" name="source_url" value="<?php echo esc_attr( $source_url ); ?>">
                <div class="apice-news-help">NEWS候補の元になった記事のURLを入力します。</div>
            </td>
        </tr>

        <tr>
            <th><label for="source_category">カテゴリ</label></th>
            <td>
                <input type="text" id="source_category" name="source_category" value="<?php echo esc_attr( $source_category ); ?>">
                <div class="apice-news-help">例：在庫管理、ダイソー、どこの国、LDAC / Bluetooth など。</div>
            </td>
        </tr>

        <tr>
            <th><label for="news_text">NEWS表示文</label></th>
            <td>
                <textarea id="news_text" name="news_text"><?php echo esc_textarea( $news_text ); ?></textarea>
                <div class="apice-news-help">実際にNEWS枠へ表示する文面を入力します。</div>
            </td>
        </tr>

        <tr>
            <th><label for="news_target">表示先NEWS</label></th>
            <td>
                <select id="news_target" name="news_target">
                    <?php
                    $news_target_options = array(
                        ''                       => '選択してください',
                        'TECN NEWS'              => 'TECN NEWS',
                        'ダイソーNEWS'            => 'ダイソーNEWS',
                        'どこの国NEWS'            => 'どこの国NEWS',
                        'LDAC / Bluetooth NEWS'  => 'LDAC / Bluetooth NEWS',
                        '在庫管理 / DX NEWS'      => '在庫管理 / DX NEWS',
                        'TECNおすすめ'            => 'TECNおすすめ',
                        '非表示'                  => '非表示',
                    );

                    foreach ( $news_target_options as $value => $label ) {
                        echo '<option value="' . esc_attr( $value ) . '" ' . selected( $news_target, $value, false ) . '>' . esc_html( $label ) . '</option>';
                    }
                    ?>
                </select>
                <div class="apice-news-help">どのNEWS枠に表示するかを選びます。</div>
            </td>
        </tr>

        <tr>
            <th>表示フラグ</th>
            <td>
                <label>
                    <input type="checkbox" name="display_flag" value="1" <?php checked( $display_flag, '1' ); ?>>
                    このNEWS候補を表示対象にする
                </label>
                <div class="apice-news-help">実際の表示では、承認ステータスと組み合わせて判定します。</div>
            </td>
        </tr>

        <tr>
            <th><label for="approval_status">承認ステータス</label></th>
            <td>
                <select id="approval_status" name="approval_status">
                    <?php
                    $approval_status_options = array(
                        '未確認'   => '未確認',
                        '修正中'   => '修正中',
                        '承認済み' => '承認済み',
                        '非表示'   => '非表示',
                    );

                    foreach ( $approval_status_options as $value => $label ) {
                        echo '<option value="' . esc_attr( $value ) . '" ' . selected( $approval_status, $value, false ) . '>' . esc_html( $label ) . '</option>';
                    }
                    ?>
                </select>
                <div class="apice-news-help">担当者の確認状態を選びます。</div>
            </td>
        </tr>

        <tr>
            <th><label for="x_post_text">X投稿文案</label></th>
            <td>
                <textarea id="x_post_text" name="x_post_text"><?php echo esc_textarea( $x_post_text ); ?></textarea>
                <div class="apice-news-help">Xに投稿する文案を入力します。V1では自動投稿は行いません。</div>
            </td>
        </tr>

        <tr>
            <th><label for="x_post_status">X投稿ステータス</label></th>
            <td>
                <select id="x_post_status" name="x_post_status">
                    <?php
                    $x_post_status_options = array(
                        '未投稿'     => '未投稿',
                        '投稿済み'   => '投稿済み',
                        '投稿しない' => '投稿しない',
                    );

                    foreach ( $x_post_status_options as $value => $label ) {
                        echo '<option value="' . esc_attr( $value ) . '" ' . selected( $x_post_status, $value, false ) . '>' . esc_html( $label ) . '</option>';
                    }
                    ?>
                </select>
                <div class="apice-news-help">Xへの投稿状況を管理します。</div>
            </td>
        </tr>

        <tr>
            <th><label for="memo">メモ</label></th>
            <td>
                <textarea id="memo" name="memo"><?php echo esc_textarea( $memo ); ?></textarea>
                <div class="apice-news-help">担当者用のメモを入力します。</div>
            </td>
        </tr>

    </table>
    <?php
}


/**
 * NEWS候補のカスタムフィールドを保存
 */
function apice_save_news_candidate_meta( $post_id ) {

    // nonce確認
    if ( ! isset( $_POST['apice_news_candidate_nonce'] ) ) {
        return;
    }

    if ( ! wp_verify_nonce( $_POST['apice_news_candidate_nonce'], 'apice_save_news_candidate_meta' ) ) {
        return;
    }

    // 自動保存時は処理しない
    if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
        return;
    }

    // 権限確認
    if ( ! current_user_can( 'edit_post', $post_id ) ) {
        return;
    }

    // 対象投稿タイプ確認
    if ( get_post_type( $post_id ) !== 'apice_news_candidate' ) {
        return;
    }

    // テキスト・URL項目
    if ( isset( $_POST['source_url'] ) ) {
        update_post_meta( $post_id, 'source_url', esc_url_raw( $_POST['source_url'] ) );
    }

    if ( isset( $_POST['source_category'] ) ) {
        update_post_meta( $post_id, 'source_category', sanitize_text_field( $_POST['source_category'] ) );
    }

    // 複数行テキスト
    if ( isset( $_POST['news_text'] ) ) {
        update_post_meta( $post_id, 'news_text', sanitize_textarea_field( $_POST['news_text'] ) );
    }

    if ( isset( $_POST['x_post_text'] ) ) {
        update_post_meta( $post_id, 'x_post_text', sanitize_textarea_field( $_POST['x_post_text'] ) );
    }

    if ( isset( $_POST['memo'] ) ) {
        update_post_meta( $post_id, 'memo', sanitize_textarea_field( $_POST['memo'] ) );
    }

    // 表示先NEWS
    $allowed_news_targets = array(
        '',
        'TECN NEWS',
        'ダイソーNEWS',
        'どこの国NEWS',
        'LDAC / Bluetooth NEWS',
        '在庫管理 / DX NEWS',
        'TECNおすすめ',
        '非表示',
    );

    if ( isset( $_POST['news_target'] ) && in_array( $_POST['news_target'], $allowed_news_targets, true ) ) {
        update_post_meta( $post_id, 'news_target', sanitize_text_field( $_POST['news_target'] ) );
    }

    // 表示フラグ
    $display_flag = isset( $_POST['display_flag'] ) ? '1' : '0';
    update_post_meta( $post_id, 'display_flag', $display_flag );

    // 承認ステータス
    $allowed_approval_statuses = array(
        '未確認',
        '修正中',
        '承認済み',
        '非表示',
    );

    if ( isset( $_POST['approval_status'] ) && in_array( $_POST['approval_status'], $allowed_approval_statuses, true ) ) {
        update_post_meta( $post_id, 'approval_status', sanitize_text_field( $_POST['approval_status'] ) );
    }

    // X投稿ステータス
    $allowed_x_post_statuses = array(
        '未投稿',
        '投稿済み',
        '投稿しない',
    );

    if ( isset( $_POST['x_post_status'] ) && in_array( $_POST['x_post_status'], $allowed_x_post_statuses, true ) ) {
        update_post_meta( $post_id, 'x_post_status', sanitize_text_field( $_POST['x_post_status'] ) );
    }
}
add_action( 'save_post', 'apice_save_news_candidate_meta' );

このコードでは、まず add_meta_box() を使って、NEWS候補編集画面に「NEWS候補 詳細情報」という入力エリアを追加しています。

この入力エリアの中に、元記事URL、カテゴリ、NEWS表示文、表示先NEWS、表示フラグ、承認ステータス、X投稿文案、X投稿ステータス、メモの入力欄を表示します。

入力欄の表示は、apice_render_news_candidate_meta_box() という関数で行っています。

この関数の中では、保存済みの値を get_post_meta() で取得し、それぞれの入力欄に表示しています。

たとえば、元記事URLは source_url という名前で保存し、再編集時にはその値を入力欄に表示します。

NEWS表示文は news_text という名前で保存します。

表示先NEWSは news_target という名前で保存します。

承認ステータスは approval_status という名前で保存します。

このように、画面に表示する日本語の項目名と、内部で保存する項目名を分けています。

担当者は日本語の入力欄を見て操作します。

一方で、PHP側では source_url や news_text のような内部項目名でデータを扱います。

保存処理は、apice_save_news_candidate_meta() という関数で行っています。

この関数では、まずnonceを確認します。

次に、自動保存ではないか、編集権限があるか、対象の投稿タイプが apice_news_candidate であるかを確認します。

そのうえで、各入力値を保存します。

URLは esc_url_raw() を使って保存します。

通常のテキストは sanitize_text_field() を使います。

複数行のテキストは sanitize_textarea_field() を使います。

表示先NEWS、承認ステータス、X投稿ステータスのような選択式の項目は、あらかじめ許可した選択肢に含まれているかを確認してから保存します。

これにより、想定外の値が保存されにくくなります。

表示フラグはチェックボックスです。

チェックが入っていれば 1、入っていなければ 0 として保存します。

このようにしておくと、後からショートコードで表示判定を行うときに扱いやすくなります。

このコードをCode Snippetsに登録して有効化すれば、NEWS候補編集画面に専用入力欄が表示されます。

第4回では、まずこのコードで入力欄を追加し、NEWS候補1件に必要な情報を入力・保存できる状態を作ります。

ここまでできれば、TECN NEWS候補管理 V1は、実務で使える管理画面にかなり近づきます。

H2-13 管理画面で入力欄を確認する

Code Snippetsに第4回のPHPコードを登録して有効化したら、次にWordPress管理画面で入力欄が正しく表示されているかを確認します。

コードを書いたあとは、必ず実際の管理画面で確認することが大切です。

今回のコードは、NEWS候補用カスタム投稿タイプ apice_news_candidate の編集画面に、専用の入力欄を追加するものです。

そのため、まずWordPress管理画面の左側メニューから「NEWS候補」を開きます。

第3回で作成したカスタム投稿タイプが正しく登録されていれば、左側メニューに「NEWS候補」が表示されています。

そこから「新規追加」をクリックします。

NEWS候補の新規追加画面が開いたら、タイトル欄や本文欄の下、または編集画面内のどこかに「NEWS候補 詳細情報」という入力エリアが表示されているか確認します。

この入力エリアが表示されていれば、第4回のコードが正しく動いている可能性が高いです。

次に、入力欄の中身を確認します。

今回追加した入力欄は、次の9項目です。

・元記事URL
・カテゴリ
・NEWS表示文
・表示先NEWS
・表示フラグ
・承認ステータス
・X投稿文案
・X投稿ステータス
・メモ

まず、元記事URLの入力欄があるか確認します。

ここには、NEWS候補の元になった記事のURLを入力します。

次に、カテゴリの入力欄があるか確認します。

ここには、元記事のカテゴリや分類を入力します。

次に、NEWS表示文の入力欄を確認します。

NEWS表示文は、実際にNEWS枠に表示する文面です。

複数行入力できるテキストエリアになっていればOKです。

次に、表示先NEWSの選択欄を確認します。

ここでは、TECN NEWS、ダイソーNEWS、どこの国NEWS、LDAC / Bluetooth NEWS、在庫管理 / DX NEWS、TECNおすすめ、非表示などが選べるようになっているはずです。

表示先NEWSは手入力ではなく、セレクトボックスで選ぶ形にしています。

これにより、表記ゆれを防ぎ、あとからNEWS枠ごとに抽出しやすくなります。

次に、表示フラグのチェックボックスを確認します。

「このNEWS候補を表示対象にする」というチェック項目があればOKです。

V1では、実際にNEWS表示するかどうかを、この表示フラグと承認ステータスの組み合わせで判断する予定です。

次に、承認ステータスの選択欄を確認します。

未確認、修正中、承認済み、非表示などが選べるようになっているか確認します。

初期状態では、未確認になっていれば分かりやすいです。

次に、X投稿文案の入力欄を確認します。

ここには、Xに投稿するための文章案を入力します。

V1ではXへの自動投稿は行いませんが、投稿文案を保存しておくことで、担当者がコピーして手動投稿や予約投稿を行いやすくなります。

次に、X投稿ステータスの選択欄を確認します。

未投稿、投稿済み、投稿しないなどが選べるようになっていればOKです。

初期状態では、未投稿になっているのが自然です。

最後に、メモ欄を確認します。

メモ欄には、担当者が判断理由や注意点を自由に書けます。

たとえば、「今回はTECNおすすめにも出す」「X投稿は後日」「NEWS表示文を短くする」などの補足を書いておけます。

入力欄がすべて表示されていることを確認したら、次に保存テストを行います。

各項目に仮の値を入力し、保存または公開ボタンを押します。

保存後、同じNEWS候補をもう一度開いて、入力した値が残っているか確認します。

ここがとても重要です。

入力欄が表示されていても、保存後に値が消えてしまう場合は、保存処理に問題があります。

今回のコードでは、入力欄の表示だけでなく、保存処理と再表示処理も入れています。

そのため、一度保存した値が再編集時にも表示されれば、基本的な動作はできています。

確認ポイントを整理すると、次の通りです。

・NEWS候補編集画面に「NEWS候補 詳細情報」が表示されるか
・元記事URL欄があるか
・カテゴリ欄があるか
・NEWS表示文欄があるか
・表示先NEWSを選べるか
・表示フラグを切り替えられるか
・承認ステータスを選べるか
・X投稿文案を入力できるか
・X投稿ステータスを選べるか
・メモ欄があるか
・保存後に入力内容が残っているか

この確認ができれば、第4回の入力欄追加は成功です。

ここまで来ると、TECN NEWS候補管理 V1は、単なるカスタム投稿タイプではなく、実際にNEWS候補を管理できる画面に近づきます。

---

H2-14 テスト用NEWS候補を登録してみる

入力欄が表示されることを確認したら、実際にテスト用のNEWS候補を1件登録してみます。

テスト登録を行うことで、今回作った入力欄が実務でどのように使えるかを確認できます。

まず、WordPress管理画面の左メニューから「NEWS候補」を開きます。

次に、「新規追加」をクリックします。

新規NEWS候補の追加画面が開いたら、テスト用の内容を入力していきます。

たとえば、次のような内容を登録してみます。

タイトル：

在庫管理システムを無料で試せるアピスmini活用記事を公開しました

元記事URL：

https://example.com/sample-news

カテゴリ：

在庫管理

NEWS表示文：

在庫管理を小さく始めたい方向けに、無料で試せるアピスmini活用記事を公開しました。

表示先NEWS：

在庫管理 / DX NEWS

表示フラグ：

表示対象にする

承認ステータス：

未確認

X投稿文案：

在庫管理をExcelだけで続けるのが大変になってきた方向けに、無料で試せるアピスmini活用記事を公開しました。小さく始める業務改善のヒントとしてご覧ください。

X投稿ステータス：

未投稿

メモ：

第4回の動作確認用データ。あとでNEWS候補一覧表示のテストにも使う。

このように、実際の運用に近い形で入力してみると、画面の使い勝手が分かりやすくなります。

タイトル欄には、管理画面の一覧で見たときに分かりやすい名前を入れます。

ここでは、NEWS表示文に近い内容をタイトルとして入れています。

元記事URLには、元になった記事のURLを入力します。

テスト段階では仮のURLでも構いません。

ただし、実運用では実際の記事URLを入れるようにします。

カテゴリには、元記事のカテゴリを入力します。

V1ではまず手入力にしていますが、将来的には元記事から自動取得する方法も考えられます。

NEWS表示文には、実際にNEWS欄に表示したい文面を入力します。

元記事タイトルが長い場合でも、NEWS表示文を別に持たせることで、NEWS枠に合った短い文面にできます。

表示先NEWSでは、どのNEWS枠に表示するかを選びます。

ここでは、在庫管理 / DX NEWSを選びます。

表示フラグは、実際に表示対象にするかどうかを切り替える項目です。

今回はテストなので、表示対象にする状態にしておきます。

承認ステータスは、最初は未確認にしておくのが自然です。

担当者が内容を確認し、問題なければ後で承認済みに変更します。

X投稿文案には、X投稿用の文章を入力します。

V1ではXに自動投稿しません。

担当者がこの文案を確認し、必要に応じて修正し、X公式画面で手動投稿または予約投稿します。

X投稿ステータスは、最初は未投稿にします。

投稿が終わったら、投稿済みに変更します。

メモには、担当者用の補足を書きます。

テスト用データであることや、あとで確認したいことを書いておくと便利です。

入力が終わったら、保存または公開ボタンを押します。

保存後、NEWS候補一覧に戻り、今登録したテスト用NEWS候補が表示されているか確認します。

さらに、そのNEWS候補をもう一度開き、入力した内容が残っているか確認します。

ここまで確認できれば、第4回の実装はかなり実用に近い状態まで進んでいます。

今回のテスト用NEWS候補は、次回以降の一覧表示テストにも使えます。

第5回で固定ページとショートコードを使ってNEWS候補一覧を表示する際、このテストデータがあると動作確認しやすくなります。

そのため、テスト用NEWS候補は削除せず、残しておいてもよいです。

---

H2-15 V1ではまだ一覧表示までは作らない

第4回では、NEWS候補編集画面に入力欄を追加し、NEWS候補1件に必要な情報を入力・保存できる状態を作りました。

ここまで進むと、次に「入力したNEWS候補を一覧表示したい」と感じると思います。

たとえば、固定ページにNEWS候補一覧を表示したい。

未確認のNEWS候補だけを表示したい。

承認済みのNEWS候補だけを表示したい。

表示先NEWSごとに分けて表示したい。

このような機能を作りたくなります。

しかし、第4回では、まだ一覧表示までは作りません。

今回の目的は、NEWS候補1件に必要な項目を入力・保存できるようにすることです。

つまり、データを登録するための入力部分を作る回です。

一覧表示は、次回以降のショートコード編で扱います。

ここを分ける理由は、作業を分かりやすくするためです。

カスタム投稿タイプを作る。

カスタムフィールド入力欄を作る。

入力したデータを一覧表示する。

この3つは、それぞれ役割が違います。

第3回では、NEWS候補を保存するための箱を作りました。

第4回では、その箱の中に入れる項目を入力できるようにしました。

次回以降で、その保存されたデータを固定ページに一覧表示します。

このように段階を分けることで、どこまで作ったのか、何を確認すればよいのかが分かりやすくなります。

もし第4回で入力欄の追加と一覧表示まで一気に作ってしまうと、記事も長くなり、読者も混乱しやすくなります。

また、エラーが出た場合に、入力欄の問題なのか、保存処理の問題なのか、一覧表示の問題なのかが分かりにくくなります。

そのため、V1では作業を分けて進めます。

第4回のゴールは、NEWS候補編集画面に必要な入力欄が表示され、入力した値が保存できることです。

ここまでできれば、データ入力の土台は完成です。

一覧表示は、次回以降で固定ページとショートコードを使って作ります。

この進め方は、実務のシステム作りでも大切です。

まず入力できるようにする。

次に保存できるか確認する。

そのあと、保存したデータを一覧表示する。

さらにその後、承認済みだけを表示したり、NEWS枠ごとに出し分けたりする。

このように一歩ずつ確認しながら進めることで、安定した仕組みに近づけることができます。

TECN NEWS候補管理 V1も、この順番で作っていきます。

---

H2-16 第4回のまとめ

第4回では、第3回で作成したNEWS候補用カスタム投稿タイプに、NEWS候補1件を管理するための入力項目を追加しました。

第3回で作ったカスタム投稿タイプは、NEWS候補を保存するための箱でした。

第4回では、その箱の中に入れる項目として、元記事URL、カテゴリ、NEWS表示文、表示先NEWS、表示フラグ、承認ステータス、X投稿文案、X投稿ステータス、メモを入力できるようにしました。

今回の大きなポイントは、Advanced Custom Fields、ACFなどのプラグインを使わず、Code SnippetsにPHPコードを登録して専用入力欄を作ったことです。

つまり、担当者がWordPress管理画面でカスタムフィールドを手作業で作るわけではありません。

PHP側で入力欄を用意し、担当者は表示された入力欄に必要な情報を入力して保存するだけです。

この役割分担により、仕組みを作る部分と、日々の運用部分を分けられます。

今回できたことを整理すると、次の通りです。

・カスタムフィールドの考え方を確認した
・ACFなどのプラグインを使わずPHPで入力欄を作る方針を確認した
・PHPで行うことと管理画面で行うことを整理した
・第2回で設計した項目を振り返った
・タイトル欄で管理する項目とPHPで追加する項目を分けた
・V1で追加する9つの入力項目を決めた
・項目ごとの入力形式を決めた
・表示先NEWSの選択肢を決めた
・承認ステータスとX投稿ステータスの選択肢を決めた
・Code Snippetsで入力欄を追加する方針を整理した
・NEWS候補編集画面に入力欄を追加するPHPコードを用意した
・管理画面で確認するポイントを整理した
・テスト用NEWS候補の登録例を確認した

これで、TECN NEWS候補管理 V1は、かなり実務的な形に近づきました。

第3回では、NEWS候補を保存する箱を作りました。

第4回では、その箱に必要な情報を入力できるようにしました。

ここまでできれば、次はいよいよ、保存したNEWS候補を一覧で確認する段階に進めます。

NEWS候補を1件ずつ登録できても、一覧で確認できなければ実務では使いにくいです。

次回は、固定ページとショートコードを使って、担当者がNEWS候補一覧を確認できる画面を作っていきます。

---

H2-17 次回は固定ページとショートコードでNEWS候補一覧を表示する

次回は、固定ページとショートコードを使って、NEWS候補一覧を表示する仕組みを作ります。

第4回までで、NEWS候補を登録するための土台はできました。

第3回で、NEWS候補用のカスタム投稿タイプを作りました。

第4回で、NEWS候補1件に必要な入力項目を追加しました。

しかし、管理画面で1件ずつ編集できるだけでは、日々の確認作業としては少し使いにくいです。

担当者が毎日NEWS候補を確認するには、一覧画面が必要です。

たとえば、次のような一覧があると便利です。

NEWS候補のタイトル。

元記事URL。

カテゴリ。

表示先NEWS。

承認ステータス。

表示フラグ。

X投稿ステータス。

更新日。

こうした情報を一覧で確認できれば、担当者はどのNEWS候補を確認すればよいか判断しやすくなります。

次回は、WordPressの固定ページにショートコードを貼り、その固定ページ上にNEWS候補一覧を表示する方法を考えます。

固定ページを使う理由は、URLで開きやすく、担当者向けの管理画面として使いやすいからです。

WordPress管理画面の中だけでなく、専用の固定ページとしてNEWS候補一覧を表示できれば、確認作業がしやすくなります。

ショートコードを使う理由は、固定ページの本文に短いコードを貼るだけで、PHPで作った一覧表示を呼び出せるからです。

たとえば、固定ページに次のようなショートコードを貼るイメージです。

[apice_news_admin]

このショートコードを設置すると、NEWS候補一覧が表示されるようにします。

もちろん、一般読者に管理用の一覧を見せるわけにはいきません。

そのため、次回以降では、ログインしているか、編集権限があるかを確認し、権限のある担当者だけが一覧を見られるようにする方針も整理します。

次回のテーマは、NEWS候補一覧の表示です。

第3回で箱を作り、第4回で入力項目を作りました。

第5回では、そのデータを一覧で見られるようにします。

ここまで進むと、TECN NEWS候補管理 V1は、かなり実際の運用画面に近づきます。