固定ページとショートコードで作る WordPress NEWS候補管理システム構築　初心者にもわかる！｜第1回：全体構想と完成イメージ

WordPressでNEWS配信システムを作る実践講座｜第1回：TECN NEWS候補管理 V1の目的と全体構想

このシリーズでは、TECNサイトで実際に運用する「TECN NEWS候補管理 V1」を題材に、WordPressを使ってNEWS配信の仕組みを少しずつ作っていく流れを、初心者にも分かりやすく紹介していきます。

TECN NEWS候補管理 V1は、単なるNEWS表示パーツではありません。NEWSとして掲載したい候補を整理し、公開前に内容を確認し、必要な情報を管理しながら、サイト上に分かりやすく表示していくための、小さな業務改善システムです。

そしてこの仕組みは、アピスminiの考え方にもつながります。

アピスminiとは、日々の業務の中で発生する「ちょっと不便」「手作業が多い」「情報が整理しづらい」といった課題を、小さな仕組みで改善していくためのミニシステムです。大規模なシステム開発をいきなり行うのではなく、まずは実務で使える小さな仕組みを作り、無料で使える形や、導入しやすい形で提供していくことを目指しています。

今回作るTECN NEWS候補管理 V1も、その応用例のひとつです。

WordPressの固定ページ、ショートコード、PHP、カスタムフィールド、必要に応じたCSSや管理画面の工夫を組み合わせることで、ブログサイトの中に実務で役立つ管理機能を組み込むことができます。WordPressは、ただ記事を投稿するためのツールではありません。使い方を工夫すれば、情報整理、業務管理、候補管理、一覧表示、自動更新など、さまざまな業務効率化に活用できます。

このシリーズでは、完成したコードだけを紹介するのではなく、なぜその仕組みが必要なのか、どのように設計するのか、どの機能をどの順番で作るのかを、できるだけ丁寧に解説していきます。

最初から大きなシステムを作る必要はありません。まずは固定ページとショートコードを使って表示の土台を作り、次にデータの持ち方を考え、必要に応じてカスタムフィールドや管理画面を追加していく。小さく作り、実際に動かしながら改善していくことが、現場で使えるシステム作りの近道です。

今回のフェーズ1では、TECN NEWS候補管理 V1の全体構想を確認しながら、まずはWordPress上にNEWS候補を表示する基本の仕組みを作っていきます。

この取り組みを通じて、WordPressでもここまでできる、ということを具体的にお伝えしたいと思います。そして今後も、アピスminiの応用系として、業務に役立つ小さな効率化システムを順次公開していく予定です。

無料で使える仕組み、真似して作れる仕組み、実務に応用できるノウハウを提供しながら、読者の皆さまが自分の業務を少しずつ改善できるような情報を発信していきます。

H2-1 TECN NEWS候補管理 V1とは何か

TECN NEWS候補管理 V1は、WordPressで公開した記事を、すぐにNEWSとして自動表示するのではなく、いったん「NEWS候補」として保存し、担当者が確認してから表示できるようにする仕組みです。

たとえば、新しい記事を公開したときに、

「この新着記事はTECN NEWSに出すべきか」
「ダイソーNEWSに出すべきか」
「どこの国NEWSに出すべきか」
「X投稿にも使うべきか」
「今回はNEWSには出さない方がよいか」

といった判断が必要になります。

この判断を毎回記事本文を見ながら手作業で行うと、担当者の負担が大きくなります。

そこで、記事公開後にNEWS候補として一覧化し、担当者が簡単に確認・修正・承認できる画面を作ります。

これが、TECN NEWS候補管理 V1です。

H2-2 なぜNEWS候補管理が必要なのか

ブログ記事は、公開して終わりではありません。

公開した記事を、

・カテゴリNEWSに出す
・TECN NEWSに出す
・別カテゴリの記事へ誘導する
・X投稿文として使う
・無料ダウンロードやサービス紹介につなげる

といった形で活用することで、記事の価値を高めることができます。

しかし、すべての記事を自動的にNEWSへ流してしまうと、読者にとって関係の薄い情報まで表示されてしまう可能性があります。

たとえば、ダイソーの記事を読んでいる人に、在庫管理システムのNEWSばかり出ても自然ではありません。

逆に、在庫管理の記事を読んでいる人に、ダイソー新商品のNEWSばかり出ても、ややずれてしまいます。

そこで、いったん候補としてプールし、担当者が「どこに出すか」を選べるようにします。

H2-3 V1で作る仕組み

V1では、最初から大きな管理システムを作るのではなく、WordPressの標準機能に近い形で、できるだけシンプルに始めます。

V1で作るのは、次の3つです。

1つ目は、NEWS候補を保存する仕組みです。

2つ目は、担当者が見るための固定ページです。

3つ目は、その固定ページに表示するショートコードです。

イメージとしては、WordPressの固定ページに、

[apice_news_admin]

のようなショートコードを貼ります。

そのページを開くと、ログイン済みの担当者だけがNEWS候補一覧を見られるようにします。

H2-4 TECN NEWS候補管理 V1を作るための簡単なWBS

TECN NEWS候補管理 V1は、いきなり完成形を作るのではなく、いくつかの小さな作業に分けて進めていきます。

ここでは、初心者の方にも全体の流れが分かるように、簡単なWBSとして整理しておきます。

WBSとは、作りたいものを小さな作業単位に分けて、どの順番で進めるかを分かりやすくしたものです。システム開発というと難しく聞こえるかもしれませんが、今回のような小さな仕組みでも、最初に作業の流れを整理しておくと、何を作っているのかが分かりやすくなります。

まず第1ステップでは、TECN NEWS候補管理 V1で何を実現したいのかを整理します。NEWS候補を保存するのか、担当者が確認するのか、NEWS表示文を修正するのか、X投稿文まで扱うのか、といった目的を確認します。

第2ステップでは、NEWS候補1件にどのような情報を持たせるかを決めます。元記事タイトル、元記事URL、カテゴリ、NEWS表示文、X投稿文、表示先NEWS、承認ステータスなど、管理に必要な項目を整理します。

第3ステップでは、NEWS候補をWordPressのどこに保存するかを決めます。今回は、通常の記事や固定ページとは別に、カスタム投稿タイプを使ってNEWS候補専用の保存先を作る方針です。

第4ステップでは、担当者がNEWS候補を確認するための固定ページを作ります。WordPressの管理画面にいきなり専用メニューを作るのではなく、まずは固定ページを使って、URLで開ける確認画面を用意します。

第5ステップでは、その固定ページにNEWS候補一覧を表示するためのショートコードを作ります。たとえば、固定ページの本文にショートコードを貼るだけで、NEWS候補一覧が表示されるようにします。

第6ステップでは、担当者がNEWS表示文やX投稿文を確認・修正できるようにします。最初は完璧な画面を目指すのではなく、毎日の運用で使えることを優先します。

第7ステップでは、表示先NEWSや承認ステータスを変更できるようにします。これにより、どのNEWS枠に出すのか、表示するのか、非表示にするのかを管理できるようになります。

第8ステップでは、ログイン状態や権限を確認し、一般読者には管理画面が見えないようにします。固定ページを使う場合でも、誰でも見られる状態にはせず、投稿を編集できる担当者だけが使える仕組みにします。

第9ステップでは、実際に運用しながら、不足している項目や使いにくい部分を見直します。必要に応じて、表示項目を追加したり、画面の見やすさを改善したりします。

第10ステップでは、次のフェーズに向けて、承認済みNEWSを記事下やカテゴリ別NEWS枠に表示する仕組みへ発展させていきます。

このように、TECN NEWS候補管理 V1は、一度に大きなシステムを作るのではなく、小さな作業を積み重ねながら完成に近づけていきます。

WordPressの固定ページ、ショートコード、PHP、カスタム投稿タイプ、カスタムフィールドを組み合わせることで、ブログの中に実務で使える小さな管理システムを作ることができます。

このシリーズでは、このWBSに沿って、ひとつずつ実装の考え方と設定方法を解説していきます。

H2-5 保存先はWordPressの中に作る

NEWS候補の保存先は、Googleスプレッドシートではなく、まずはWordPressの中に作ります。

WordPressには、通常の記事とは別に、独自のデータを保存する仕組みがあります。

これを「カスタム投稿タイプ」と呼びます。

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

通常の記事は、WordPressの中で「post」として保存されています。

固定ページは「page」として保存されています。

今回のNEWS候補は、それとは別に、

apice_news_candidate

という専用のデータとして保存します。

つまり、WordPressの中に「NEWS候補専用の箱」を作るイメージです。

H2-6 固定ページ＋ショートコード方式にする理由

V1では、WordPress管理画面に本格的な専用メニューを作るのではなく、固定ページとショートコードで始めます。

理由は、画面を作りやすく、確認もしやすいからです。

固定ページなら、通常のWebページのようにURLで開けます。

たとえば、

/tecn-news-admin/

のようなページを作り、その本文にショートコードを貼ります。

担当者はそのURLを開くだけで、NEWS候補一覧を確認できます。

ただし、固定ページとして存在していても、一般読者には管理画面を見せません。

ログインしていて、投稿を編集できる権限を持つ人だけが見られるようにします。

H2-7 担当者画面でできること

V1の担当者画面では、まず次のことができるようにします。

・NEWS候補一覧を見る
・元記事のタイトルを見る
・元記事のURLを見る
・記事カテゴリを見る
・おすすめNEWS枠を見る
・NEWS表示文を修正する
・X投稿文案を修正する
・表示先NEWSを選ぶ
・表示する / 表示しないを選ぶ
・承認済みにする
・X投稿済みにする
・メモを書く

最初から見た目を作り込みすぎる必要はありません。

まずは、担当者が毎日使えることを優先します。

H2-8 NEWS候補1件に持たせる情報

NEWS候補1件には、次のような情報を持たせます。

・元記事ID
・元記事タイトル
・元記事URL
・公開日
・投稿者
・カテゴリ
・システムおすすめNEWS枠
・NEWS表示文
・X投稿文
・表示先NEWS
・表示開始日
・表示終了日
・表示フラグ
・承認ステータス
・X投稿ステータス
・メモ

ただし、V1では最初からすべてを完璧に使う必要はありません。

最初は、次の項目だけでも十分です。

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

運用しながら、必要な項目を増やしていきます。

H2-9 表示先NEWSの種類

V1では、表示先NEWSを次の中から選べるようにします。

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

たとえば、ダイソー記事であれば「ダイソーNEWS」を選びます。

メーカーやブランドの記事であれば「どこの国NEWS」を選びます。

イヤホンや音響関連であれば「LDAC / Bluetooth NEWS」を選びます。

在庫管理や業務改善の記事であれば「在庫管理 / DX NEWS」を選びます。

カテゴリをまたいで読ませたい記事は「TECNおすすめ」に入れることもできます。

H2-10 ステータスの考え方

NEWS候補には、状態を持たせます。

V1では、次のステータスで管理します。

未確認
まだ担当者が確認していない状態です。

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

非表示
NEWSには出さない状態です。

修正中
文面を直している途中の状態です。

X投稿済み
X公式画面などで、担当者が投稿または予約投稿した状態です。

このように状態を分けることで、担当者が「今日何を確認すればよいか」を分かりやすくできます。

H2-11 X投稿との関係

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

X APIは料金や仕様変更の影響を受けやすいため、まずは安全な運用にします。

担当者画面にX投稿文案を表示します。

担当者は文面を確認し、必要に応じて修正します。

その後、文面をコピーして、X公式画面で手動投稿または予約投稿します。

投稿や予約が終わったら、管理画面で「X投稿済み」にします。

これにより、API費用をかけずに、X運用の手間を減らせます。

H2-12 新規記事との連携

最終的には、新しい記事が公開されたタイミングで、自動的にNEWS候補へ登録する形を目指します。

ただし、V1の最初から完全自動にしなくても構いません。

最初は、担当者が記事URLを入力して、NEWS候補を作成する形でも十分です。

まずは、担当者画面の使いやすさや、NEWS振り分けの考え方を確認します。

その後、運用が固まった段階で、新規記事公開時の自動登録に進みます。

H2-13 セキュリティの基本方針

固定ページとして作る場合でも、誰でも見られるページにはしません。

ページを開いたときに、次の確認を行います。

・ログインしているか
・投稿を編集できる権限があるか
・保存ボタンが正しい画面から押されたものか
・入力された内容に問題がないか

一般読者がURLを開いた場合は、管理画面を表示しません。

「このページを見るにはログインが必要です」

または、

「このページを表示する権限がありません」

という表示にします。

H2-14 V1でやらないこと

V1では、次のことはまだやりません。

・XへのAPI自動投稿
・Amazonランキングの自動取得
・外部ニュースの自動取得
・本格的な専用DBテーブル作成
・高度な検索機能
・複雑な権限管理
・デザインを作り込んだ管理画面

まずは、NEWS候補を保存し、担当者が確認・修正・承認できるところまでを目標にします。

H2-15 V1のゴール

V1のゴールは、次の状態です。

固定ページを開く。

NEWS候補一覧が表示される。

担当者がNEWS文を修正できる。

表示先NEWSを選べる。

表示する / 表示しないを切り替えられる。

承認済みにできる。

X投稿文を確認・コピーできる。

ここまでできれば、毎日のNEWS割り振り作業をかなり効率化できます。

H2-16 今後の発展

V1で運用が見えてきたら、次のように発展させます。

V2では、承認済みNEWSを記事下やカテゴリ別NEWS枠に実際に表示します。

V3では、新規記事公開時に、自動でNEWS候補を作成します。

V4では、カテゴリやタグを見て、システムがおすすめNEWS枠を仮選択します。

V5では、X投稿文の自動生成精度を上げます。

V6では、必要に応じて、WordPress管理画面の正式メニューとして作り直します。

H2-17 この仕組みの価値

この仕組みは、単なるNEWS管理ではありません。

記事公開後の活用を仕組み化するためのものです。

新しく公開した記事を、

・TECN NEWSに出す
・カテゴリNEWSに出す
・関連カテゴリへ誘導する
・X投稿文にする
・無料ダウンロードやサービス紹介につなげる

という流れに乗せられます。

これにより、記事を書いて終わりではなく、公開後の回遊・告知・SNS展開までを効率化できます。

TECN NEWS候補管理 V1は、今後の自動メンテナンス型サイト運用の第一歩です。