WordPressでサイトを作るにあたってやってみたいのが「誰かに投稿してもらう」機能の追加。有名処では
というプラグインがあります。
ちょっと脱線しますが「Wp User Frontend」プラグインは、独自のフォーム(選択ボタンなども設置可能)で、登録ユーザーまたは未登録ユーザー(つまりゲスト)が何かを投稿するための機能を追加するプラグインで高機能なのでいろいろなところで紹介されています。
今回紹介する「Frontend Publishing」は、単純に登録したユーザーがログインした状態でもバックエンドへ行くことなく新規投稿、編集、削除が行えるプラグインで、「Wp User Frontend」のように、投稿後の表示方法をテンプレートにゆだねる必要がありません(つまり、いつもの管理画面側からの投稿と同じ)から、サイトによっては「Wp User Frontend」よりも使い勝手がいいプラグインかも知れません。
【Frontend Publishing】プラグインの用途や機能
- 登録ユーザーがログインした状態でのみフロントエンドから投稿できる
- 有料版ではゲスト投稿ができるようになるようです(入手してテストしてないので未確認です)
- そのユーザーが投稿したリストを表示でき、編集や削除ができる
- タイトルや本文の文字数に制限をかけることができる
- ほぼ管理画面の投稿画面と同じことができる
- メディアのアップロード、挿入ができる
- ビジュアルエディタで編集できるので投稿プレビューと同じ効果がある
フロントエンドから投稿できるようにするプラグインでは一般的に「プレビュー」表示ができず、公開してしまってから修正する(それでも編集を完了して確認しないとどう変わったかが確認できない)必要があるのですが、このプラグインではビジュアルエディタと同じで画像の挿入などもしながら記事が書けるので、再編集しなくてもある程度完成形が作れるのが魅力だと思います。
※テストではこのプラグインのショートコードを使って出力する投稿リストはきちんとそのユーザーのもの限定になりますが、「メディア」ボタンをクリックして表示される画像は全ユーザーのものになりますのでその点は少し残念です。
この紹介記事を最後に編集したときの環境・バージョンなど
プラグインは製作者によって日々更新されていくため、この紹介記事が最新バージョンのものであるとは限りません。参考までにこの記事の最終更新日時点におけるテスト環境、プラグインバージョン、プラグイン導入時の留意点などを記載しておきます。
プラグインを使用(試用)したテスト環境
- テストサーバー:カラフルボックス
- WordPressのバージョン:5.2.3
- PHPのバージョン:7.3.11
- テーマ:HABONE(オリジナルテーマ)
- プラグインのバージョン:本記事で紹介しているバージョン2.5.2/最新バージョン 公式サイトで “front-end-publishing” は配布されていません
- 公式サイト(wordpress.org上):https://wordpress.org/plugins/front-end-publishing/
- 公式サイト(作者サイト):
本記事を参考にWordPressサイトへプラグインの導入を検討される方へ
WordPressは古くから無料で配布されているサイト作成ツール(CMS)で、随時改良が加えられており、さまざまなバージョンが存在します。
さらにWordPressを動かすためのプログラムであるPHP、サイトのデータを保存しておくためのデータベースについても様々なバージョンがあります。
そしてWordPress本体同様にプラグインについてもさまざまなバージョンが存在します。
本記事を参考にプラグインの導入をお考えの方は、以下に留意の上でインストールするようにしてください。
- テスト環境での動作に基づいた紹介記事ですので、すべての環境で正常に動作するかどうかは不明です
※本記事の内容についてはページ内に記載しているプラグインバージョンのものになります。現在のバージョンと異なる場合、機能や日本語対応の状況などが異なる場合があります。
※また、テスト環境、テストしたプラグインバージョン等の表示が本文内にない場合、ページタイトル下にある最終更新日当時の情報となりますので、現在のバージョンでは全く違う機能となっているかも知れません。 - プラグインに無料版と有料版(Pro版)がある場合、特に記載がなければ無料版の情報のみを紹介しています
- このページでプラグインを使用する際に必要なショートコードやコードなどは、コピーして使用することができますが、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。
- プラグイン本体の動作不具合や質問などは公式サイトのフォーラムなどで行ってください(ここでは質問にお答えすることはできません)
【Frontend Publishing】プラグインの設定画面や表示の日本語化と翻訳
当サイトで私が翻訳した【Frontend Publishing】プラグインの日本語化ファイルを提供しています。翻訳ファイルについての詳しい説明は以下のページをご覧ください。
※フロントエンドでの表示部分や警告表示などについても翻訳ファイルで日本語化する必要がありますので、翻訳は必須だと思います
【Frontend Publishing】プラグインのインストールと設定
インストール方法
インストールはプラグインの新規追加でプラグイン名を入力して検索してインストールするか、WordPressのプラグイン公式配布ページからダウンロード後、管理画面からアップロードインストールしてください(プラグインの公式ページは本ページ内記載のリンクをクリック、もしくは、WordPress公式サイトで検索してください)。
WordPressを使い始めて間もない方(初心者の方)は、より詳細なプラグインのインストール手順や、インストール時に起こる問題などへの対処方法をまとめた【WordPress】プラグインのインストール&追加方法とエラー対処の方法も併せてご覧ください。
基本的な設定方法や使い方
基本的に投稿画面を表示するには
[fep_submission_form]
そのユーザーの投稿一覧を表示するには
[fep_article_list]
というショートコードを表示したい場所へ挿入するだけです。
日本語化済みの状態でリストとフォームを表示すると
な感じになります。
フォームは本文幅いっぱいに表示され、通常の投稿編集画面と同じようにビジュアルエディタで編集できるので完成したイメージを持ちながら投稿することができますから、特に投稿する方には優しい画面なのではないかと思います。
リストはそのユーザーが公開している(設定により承認待ちになっている)投稿の一覧のみが表示され、タイトル右に「編集」「削除」のリンクがあるのですぐに作業ができて便利だと思います。
無料版で設定できる項目としては
- タイトルや本文の文字数制限(最短・最長の指定が可能)
- タグの設定数(最小数・最大数の設定が可能)
- 本文などに挿入できるリンクの数
- アイキャッチ画像の設定を必須にするか否か
- 投稿に関する権限レベルの設定
など、必要最低限の機能制御ができるようになっています。
【Frontend Publishing】プラグインの便利な使い方・カスタマイズ方法など
より便利に使うカスタマイズ技やテストサイトで使用した結果や感想、WordPressのプラグイン公式配布ページには書かれていない事柄などを紹介します。
メディアのポップアップ画面の表示が崩れるときは
私の環境での問題かも知れませんが、投稿フォームの「メディア」をクリックするとバックエンドと同じメディアのアップロードや選択ができる画面が出てきます。が、このポップアップ画面で文字や項目が被る現象が発生しました。対応するには以下のコードをテーマのCSSへ追記します(テーマによってはご自身で調整する必要があると思います)
.attachments-browser .media-toolbar {
height: 150px!important;
margin-top:10px!important;
}
h2.media-views-heading.screen-reader-text {
display: none!important;
}
.attachments-browser .attachments, .attachments-browser .uploader-inline {
top: 150px!important;
}
.media-modal label, .media-modal legend {
display: block!important;
}
.media-modal-content .media-frame select.attachment-filters {
width: 300px!important;
}
.media-modal-close {
width: auto!important;
}
button.su-generator-button.button {
display: none;
}
投稿編集画面にボタンを追加するプラグインのボタンが動作しないときは
このプラグインは管理画面側の投稿編集画面をそのまま引っ張ってきている感じの動作をしますので、何かのコンテンツを追加するためのボタンが投稿編集画面に追加されるとフロントエンドフォームでも表示されるようになります。が、それらのボタンはクリックしても機能しない(呼び出されない)ので非表示にする必要があります。
通常のCSS編集と同じくブラウザのデベロッパーツールでクラス特定してdisplay:noneにすることで非表示にできますので、対処しましょう(テーマのCSSへ追記することで適用されるのは通常フロントエンド部分のみですのでバックエンドの編集画面でもボタンが消えてしまうことはありません)
ユーザーの登録やログイン/ログアウト環境を作るには
このプラグインにはユーザーの管理をフロントエンドで行う機能は備わっていませんので
などを使って環境を構築しましょう。
※ユーザー管理プラグインには大きく
- WordPress標準のユーザーへ登録するプラグイン
- そのプラグイン独特のユーザー管理を行うプラグイン
がありますので、前者の機能を持つプラグインを使う必要がありますので注意が必要です。