会員制サイトで、登録しているユーザーに投稿してもらうサイトを作る際に考える必要があるのが、管理画面側で操作してもらうのか、あくまでも閲覧画面（フロントエンド）から操作してもらうのかという点。
全員がWordPressでサイトを持っているユーザーなら、管理画面側からの操作でも問題はなさそうですが、そうでない場合は、ブロックエディタに戸惑ったり、管理画面の操作方法に戸惑ってしまうかもしれません。
「Guest posting / Frontend Posting wordpress plugin – WP Front User Submit / Front Editor」は、フロントエンド側で投稿してもらうフォームを表示し、そこから投稿・編集してもらうことができる機能を追加できるプラグインです。
【Front User Submit | Front Editor】プラグインの用途や機能
以下のような機能があります。
- ログインユーザーが、フロントエンドから新規の投稿をすることができる
- ログインユーザーが、フロントエンドから自身の投稿の編集ができる
- 新規投稿や編集途中で、プレビュー表示ができる
- 新規投稿で下書き保存ができる
同類のプラグインで、プレビュー表示や下書き保存ができるものは、数々のプラグインを試した限りではあまり見当たらないので、それらと比べると運営しやすいのではないかと思います。
ただし、フォームのデザインがちょっと．．という点と、非ログインユーザーが投稿できるようにするためにはPro版を購入する必要があるため、誰でも投稿できる環境作りには向いていないかも知れません。
フォームのデザインについては、それなりに見えるようにするスタイルコードを本ページの後半にある「【Front User Submit | Front Editor】プラグインの便利な使い方・カスタマイズ方法など」で紹介していますので参照ください。
機能やデザインについては、モバイル環境でのチェックはしていません
本ページを最後に編集したときの環境・バージョンなど
プラグインは製作者によって日々更新されていくため、この紹介記事が最新バージョンのものであるとは限りません。参考までに本記事の最終更新日時点におけるテスト環境、プラグインバージョン、プラグイン導入時の留意点などを記載しておきます。
プラグインを使用（試用）したテスト環境・公式ページなど
この紹介記事作成にあたって、試用（テスト）を行った環境、本記事で紹介するプラグインバージョン、現在配布されている最新バージョン、公式ページのリンク等は以下の通りです。
| テストしたサーバー | カラフルボックス
 |
| WordPressバージョン | 6.0 |
| PHPバージョン | 7.4.27 |
| テストしたテーマ | HABONE(本サイトでも使用しているオリジナルテーマ) |
| プラグインバージョン | 本記事で紹介するために試用したバージョン ：3.4.6 公式サイトで配布されている最新バージョン ：4.9.3 ※バージョンが違うと、仕様が大きく変更となっている可能性があります |
| テストした日 | ※本記事の最終更新日であり、実際の試用日とは異なることがあります |
| 公式サイト | https://wordpress.org/plugins/front-editor/ ※wordpress.org上のページへのリンクです |
| 作者サイト | ※プラグイン制作者の独自ページ（サイト）リンクです |
本記事を参考にWordPressサイトへプラグインの導入を検討される方へ
WordPressは古くから無料で配布されているサイト作成ツール（CMS）で、随時改良が加えられており、さまざまなバージョンが存在します。
さらにWordPressを動かすためのプログラムであるPHP、サイトのデータを保存しておくためのデータベースについても様々なバージョンがあります。
そしてWordPress本体同様にプラグインについてもさまざまなバージョンが存在します。
本記事を参考にプラグインの導入をお考えの方は、以下に留意の上でインストールするようにしてください。
- テスト環境での動作に基づいた紹介記事ですので、すべての環境で正常に動作するかどうかは不明です
※本記事の内容についてはページ内に記載しているプラグインバージョンのものになります。現在のバージョンと異なる場合、機能や日本語対応の状況などが異なる場合があります。
※また、テスト環境、テストしたプラグインバージョン等の表示が本文内にない場合、ページタイトル下にある最終更新日当時の情報となりますので、現在のバージョンでは全く違う機能となっているかも知れません。 - プラグインに無料版と有料版（Pro版）がある場合、特に記載がなければ無料版の情報のみを紹介しています
- このページでプラグインを使用する際に必要なショートコードやコードなどは、コピーして使用することができますが、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。
- プラグイン本体の動作不具合や質問などは公式サイトのフォーラムなどで行ってください（ここでは質問にお答えすることはできません）
【Front User Submit | Front Editor】プラグインの設定画面や表示画面の日本語化と翻訳
当サイトで私が翻訳した【Front User Submit | Front Editor】プラグインの日本語化ファイルを提供しています。翻訳ファイルについての詳しい説明は以下のリンク先ページをご覧ください。
※翻訳することで設定が容易になり、重要な項目の設定漏れも少なくなりますから日本語化をお勧めします。
【Front User Submit | Front Editor】プラグインのインストールと設定方法
インストール方法
インストールはプラグインの新規追加でプラグイン名を入力して検索してインストールするか、WordPressのプラグイン公式配布ページからダウンロード後、管理画面からアップロードインストールしてください（プラグインの公式ページは本ページ内記載のリンクをクリック、もしくは、WordPress公式サイトで検索してください）。
WordPressを使い始めて間もない方（初心者の方）は、より詳細なプラグインのインストール手順や、インストール時に起こる問題などへの対処方法をまとめた【WordPress】プラグインのインストール＆追加方法とエラー対処の方法も併せてご覧ください。
基本的な設定方法と使用方法
フロントエンドに表示するフォームの内容も英語になっていますので、日本語で使うには翻訳ファイルが必須でしょう（ただ100%翻訳でも、編集時の「更新」ボタンは「Update」のままになってしまいます．．）。
日本語化すれば、管理画面側も問題なく設定できると思います。
以下の流れで基本的には投稿フォームの作成ができます
- 管理画面側でフォームの追加を行う（いくつでも異なるフォームの作成が可能です）
- フォームのショートコードを固定ページ本文内へ挿入する
基本的にはフォームの作成も単純なので、一度インストールして使ってみて、使えるようであれば日本語化するという流れでよいでしょう
以下のようなフォームの項目が作成できます。
- 投稿タイトル
- アイキャッチ画像
- 本文のエディタ（テキストベースまたは疑似ブロックのようなJSベースのエディタ）
- タグ・カテゴリーの選択
【Front User Submit | Front Editor】プラグインの便利な使い方・カスタマイズ方法など
このプラグインをより便利に使うカスタマイズ技、テストサイトで使用した結果や感想、WordPressのプラグイン公式配布ページには書かれていない情報、発見した不具合などを紹介します。
ここまでで紹介した通り、フロントエンドから投稿するだけでなく、下書き保存できたり、あとから編集できたり、プレビュー機能があったりと有用なプラグインではあるものの、上記のテストテーマでは、結構盛大にデザインのおかしいところがありました。
以下のスタイルコードをテーマのCSSまたはテーマカスタマイザーの追加CSSへ追記することで下の画像のような形にできます（画像にはない「編集」ボタンもそれなりに表示されるようになります）。
/***** Front User Submitのデザイン例 *****/
.sub-header.top.sticky {
background: #f7f7f7;
border: 1px solid #a19f9f;
}
.bfe-editor.default .fus-form-block-header, .bfe-editor.default .wrapper {
max-width: 100%;
}
.bfe-editor.default .wrapper .column .image_loader {
width: 50%;
}
.bfe-editor.default .EditorJS-editor {
max-width: 100%;
margin: 10px auto;
width: 100%;
}
.ce-block__content {
position: relative;
max-width: 100%;
}
.bfe-editor.default .fus-form-block-header .sub-header .fus-view-page{
border-color: rgb(0 0 0 / 0%);
}
.bfe-editor.default .fus-form-block-header .sub-header .editor-button{
height:auto;
}
a.bfe-edit-post-button {
color: #000000;
text-decoration: none;
}
a.bfe-edit-post-button:hover {
background: #777;
border: 1px solid #000000;
}
.bfe-edit-post-button {
background: #eee;
border: 1px solid #ccc;
}
後述
紹介したように「下書き保存」や「プレビュー」ができるプラグインはなかなかないので秀逸だと思いますが、個人的にはなんとなく不安の残るプラグインのような所感です。
より確実なフロントエンド投稿フォームをということでしたら、長きにわたりメンテナンスもきちんと行われている「WP User Frontend」がおすすめです。
このページの更新履歴
| 更新日 | 更新内容 |
|---|---|
| 2022年 6月 8日 | 本ページを公開しました |
ポチップ
ポチップ
