WordPressの管理画面を使わず投稿できる、投稿システムを自作しました

きっかけ

記事を投稿するたびにパソコンを起動し、WordPressの管理画面にログインして、投稿画面で同じような整形作業を繰り返すことに悩んでいました。見出しをつけて、注意書きを入れて、画像を並べて……。それなら最初から自分の投稿の型に合わせたシステムを作ってしまおうと思い立ったのが、今回の開発のきっかけです。
ついでにスマホから投稿できるようにすれば、息子の寝かしつけ中にでも記事を書けるのでは、と考えました。

作ったもの

作ったのは、スマホから直接記事を投稿できる専用フォームと、カテゴリごとにデザインが切り替わる記事テンプレートを組み合わせた、GRAPHY WORK専用の投稿システムです。
WordPressの通常の投稿画面を使うのではなく、GRAPHY WORKの記事を書くために必要な項目だけをまとめた専用フォームを用意しました。
タイトル、スラッグ、カテゴリ、タグ、本文、画像、見出しデザイン、SEO設定などを、このフォームからまとめて入力できます。投稿フォーム自体は固定ページにショートコードを設置するだけで表示できるようにしています。
その固定ページをスマホのホーム画面に追加しておけば、WordPressの管理画面を開かなくても、そこから直接記事を作成できます。

「##」で見出しを作る

本文の入力では、HTMLを直接書かなくても済むように、簡易的な見出し記法を用意しました。
#の数によってh2〜h6を指定できます。
本文そのものは普通に文章を書きながら、見出しにしたい行の先頭に#をつけるだけなので、スマホでも入力しやすい形にしました。入力した元の本文も別途保存しているため、あとから記事を編集するときには、HTMLへ変換される前の状態でそのまま呼び出せます。

見出しのデザインも選べる

見出しは内容だけでなく、デザインもフォームから選択できます。
記事全体で使用する見出しデザインを選ぶと、その設定が記事ページに反映されます。
・アンダーライン
・レフトバー
・マーカー
・シンプル（装飾なし）

カテゴリごとに記事の構成を変更

GRAPHY WORKでは、記事の内容によって必要な見せ方が違うため、カテゴリごとに記事の表示構成そのものを変えています。カテゴリを選ぶだけで、記事側のデザインや構成が自動的に切り替わるようにしています。
カテゴリの色もそれぞれ設定していて、投稿フォームのカテゴリボタン、記事内のカテゴリバッジ、パンくずなどで同じ設定を利用しています。

特定カテゴリだけ専用項目を用意

Webツールなどを紹介する「開発」カテゴリでは、通常の本文以外にも専用の入力項目を用意しました。「できること」「こんな人におすすめ」は1行につき1項目、「使い方」は1行につき1ステップとして入力できます。
よくある質問は、質問と回答をセットで追加できるようにしていて、「＋ 質問を追加」で必要な数だけ増やせます。
記事ページでは、それぞれ専用のデザインに変換されます。
これらの項目はスマホの投稿フォームだけでなく、通常のWordPress管理画面から記事を編集するときにも入力・編集できます。

画像もフォームからまとめて管理

画像は複数枚をまとめてアップロードできます。1回のファイル選択だけでなく、あとからもう一度画像を追加しても、先に選んだ画像が消えないようにしています。
アップロードした画像はサムネイルで確認でき、画像ごとに削除できます。さらに、画像ごとにalt文言も個別に入力できます。altを空欄にした場合は、記事タイトルを仮のaltとして自動設定するようにしました。
1枚目の画像は自動的にアイキャッチ画像にも設定されます。そのため、記事の種類によってはアイキャッチ画像として利用しながら、本文側では重複して表示しないようにしています。

下書き保存と再編集

入力した記事は、公開せずに下書きとしても保存できます。
フォーム上部には「下書きの続きから書く」という一覧があり、そこから保存済みの記事を選ぶと、タイトル、カテゴリ、本文、画像、見出しデザイン、「開発」カテゴリの追加項目、SEO設定などをフォームに読み込んで続きを編集できます。
途中まで書いた記事をあとから開き直して、そのまま続きを書けるようにしました。

公開前にプレビューできる

「確認して公開する」を押した場合、いきなり公開されることはありません。いったん下書きとして保存され、実際の記事ページと同じデザインのプレビュー画面に移動します。
最終的に「この内容で公開する」を押した時点で、初めて記事が公開されます。

公開済みの記事もスマホから編集できる

さらに、公開後の記事も同じフォームから編集できるようにしました。フォーム上部の「公開済みの記事を編集する」から記事を選ぶと、公開済みの記事の内容を読み込んで編集できます。
公開済みの記事を編集している場合は、「下書き保存／確認して公開する」ではなく「更新する」というボタンになり、保存するとそのまま公開ページに反映されます。画像の追加・入れ替えや、タグ、スラッグ、altなども公開後に変更できます。

スラッグとタグにも対応

記事タイトルとは別に、URLの末尾になるスラッグも入力できます。空欄の場合は、WordPress側でタイトルから自動生成されます。
既存の記事を編集するときには、現在設定されているスラッグが自動的にフォームへ入ります。
タグもカンマ区切りで複数入力でき、WordPress標準のタグとして保存されます。既存記事を編集するときには、現在設定されているタグも読み込まれます。

SEO設定もフォーム内にまとめた

最低限のSEO対策ができるように、SEO関連の機能もこのシステムに組み込みました。
記事ごとに、SEOタイトル、meta descriptionを任意で入力できます。空欄の場合は、記事タイトルや本文から自動的に設定されます。また、canonical、OGP、Twitter Cardも出力するようにしています。アイキャッチに設定した画像は、SNSでシェアするときのOGP画像としても利用されます。
将来的にYoast SEOやRank MathなどのSEOプラグインを導入した場合には、二重に出力されないように自動的に停止する仕組みにしています。
投稿フォームを設置している固定ページ自体は検索エンジンに登録されないようnoindexにし、WordPress標準のXMLサイトマップからも除外しています。

作ってみて気づいたこと

作りながら実感したのは、細部の調整にこそ時間がかかるということです。見出しの余白ひとつ、ボタンの角丸ひとつでも、実際に記事を公開してみないと違和感に気づけないことが多く、公開・確認・修正を何度も繰り返しました。

またWordPressのテーマ（Astra）側の標準デザインと、自作のテンプレートのデザインがぶつかる場面もありました。サイドバーを表示させるためにテーマ側の仕組みに乗ったところ、意図していなかったテーマ側のフォントや文字色まで引き継いでしまい、ひとつずつ優先順位を上書きして調整する必要がありました。

こうした小さな改善を積み重ねてできたのが、今のフォームとテンプレートです。
汎用的なWordPressプラグインとして作るのではなく、自分の投稿方法や記事の構成に合わせて専用ツールとして作ったことで、投稿のたびに感じていた地味なストレスがかなり減りました。