2022年09月09日

[WordPress][プラグイン]
ログイン不要の社内掲示板システムをWordPressで構築してみた

お客様からご依頼があり、イントラ向けのログインしなくても書き込める掲示板システムを設置してみたのでその内容をご紹介したいと思います。

要件

お客様からいただいた要件をまとめると以下になります。

動作環境はPHPを想定していましたので1から開発してもよかったのですが、コメントと「いいね」ボタンが工数掛かりそうだなと思いましたが、こんな機能のプラグインがWordPressにあったよなーという考えからそちらに舵取りしました。

ログインせずに投稿するプラグインとしては、「WP User Frontend」という基本無料のプラグインがあります。

このプラグインは、設定画面で入力フォームを作成し、フォームを表示させたい場所にショートコードを埋め込むとフォームが設置され、入力すると投稿にデータが保存されていくすぐれものです。
正直これでいいかなとも思ったのですが、数ヶ月しか運用しないのにファイルを登録するのに有料($49/年)、投稿内容を制御したい、などの理由で泣く泣く諦めることにしました。
普通の掲示板であればこのプラグインで事足りると思います。

ログインを意識させずにログインさせる

さて、それではプラグインを使わずどうやって投稿してもらうか悩みましたが、結論としては「管理画面にログインしてもらって普通に投稿してもらう」ということにしました。

具体的にはサイドバーのウィジェットに

<form class="form-signin form" name="loginform" id="loginform" action="/wp-login.php" method="post">
<div class="form-group" style="height: 1px">
<label for="loginID" class="login-label">ユーザ名</label><br>
<input id="loginID" name="log" type="text" placeholder="ID" class="form-control login-input" size="20" value="**ユーザーIDをここに入力**">
</div>
<div class="form-group form-section" style="height: 1px">
<label for="password" class="login-label">パスワード</label><br>
<input id="password" name="pwd" type="password" placeholder="PASSWORD" class="form-control login-input" size="20" value="**パスワードをここに入力**">
</div>
<div class="btn-horizon">
<input type="submit" name="wp-submit" id="wp-submit" class="btn btn-primary btn-lg" value="新規投稿する">
</div>
</form>

このような形で入力フォームを設置しました。
form-groupクラスのところにheight:1pxと設定してあります。
これにより利用者にログインしたと認識せずに投稿させることができます。

しかし、この方法は一つだけ問題がありました。
それはログイン後、ブラウザの自動入力機能が働いてしまって、「このパスワードを保存しますか?」というアラートが出てしまうということです。
これは防ぐことができず、そのままということになりました。

ログインしたユーザーに余計なものを見せず、手順をわかりやすくする

ログインさせたはいいものの、どうすればよいかわからない、という状態では運用が大変になってしまいます。
余計な表示は消し、次にどうアクションすればよいかわかりやすくします。
まずは最終形ですが

このように、非常にシンプルに「新規投稿」「記事編集」「一覧に戻る」のリンク先だけを表示するようにしました。

管理者と投稿者の表示を変える

管理者と投稿者の表示を変えるために、「My WP Customize」というプラグインを使用しています。

「My WP Customize」は、管理画面をほぼすべてカスタマイズできるスグレモノのプラグインです。
まずは、投稿させるguestユーザーを「投稿者」に変更。
「My WP Customize」の管理画面の「ユーザー権限グループ」で、「投稿者」にチェックを入れます。
こうすることで、「投稿者」ユーザーに対して「My WP Customize」の設定を反映させられるようになります。

「管理」メニューの「一般」「ダッシュボード」などの表示設定をすべて「非表示」に設定します。

サイドバーについては、「新規追加」「投稿一覧」「記事一覧に戻る」リンクだけ設置しました。

さらに投稿のカテゴリーやタグなどを非表示にするのにこちらのサイト

を参考に削除します。

function my_remove_meta_boxes() {
 remove_meta_box('postexcerpt','post','normal' ); // 抜粋
 remove_meta_box('trackbacksdiv','post','normal' ); // トラックバック
 remove_meta_box('slugdiv','post','normal'); // スラッグ
 remove_meta_box('postcustom','post','normal' ); // カスタムフィールド
 remove_meta_box('commentsdiv','post','normal' ); // コメント
 remove_meta_box('submitdiv','post','normal' ); // 公開
 remove_meta_box('categorydiv','post','normal'); // カテゴリー
 remove_meta_box('tagsdiv-post_tag','post','normal' ); // タグ
 remove_meta_box('commentstatusdiv','post','normal' ); // ディスカッション
 remove_meta_box('authordiv','post','normal' ); // 作成者
 remove_meta_box('revisionsdiv','post','normal' ); // リビジョン
 remove_meta_box('formatdiv','post','normal' ); // フォーマット
 remove_meta_box('pageparentdiv','post','normal' ); // 属性
}
add_action('admin_menu','my_remove_meta_boxes' );

それでも消えない諸々の表示はCSSを駆使して非表示にしてあります。

//管理画面にCSS追加
function my_admin_style() {
echo '#****,.****{display: none;} //#****,.****は、ID,クラス名が入ります
 </style>'.PHP_EOL;
}
add_action('admin_print_styles', 'my_admin_style');

さらに、ダッシュボードに次にどうするかの案内を載せます。

function add_custom_widget() {
echo '<h2>新しく投稿したい場合</h2><p>「新規追加」をクリックして投稿してください。</p>
<h2>過去の投稿を編集、削除したい場合</h2><p>「投稿一覧」から該当する記事を探してクリックしてください。<br>
(他のかたの投稿を編集・削除しないようにご注意ください)</p>
<h2>活動報告一覧に戻る場合</h2>
<a href="'.wp_logout_url(home_url()).'" style="font-size:20px">こちらから</a>';
}
function add_my_widget() {
wp_add_dashboard_widget( 'custom_widget', '使い方', 'add_custom_widget' );
}
add_action( 'wp_dashboard_setup', 'add_my_widget' );

以上をfunctions.phpに記載しました。

新規投稿画面を設定する

記事の新規投稿も、従来の入力ではわからない人が多いでしょう。
なるべくシンプルな入力画面にします。
まずは最終形。

このようにシンプルに(本文)1カラムのレイアウトとし、入力漏れがないようにしました。
この入力フォームは、AdvancedCustomFieldsプラグインを使用しています。

ここで問題になったのが、下部の「活動報告」部分はAdvancedCustomFieldsで入力しているため、必須項目のエラー制御が行えるのですが、WordPress標準部分の「タイトル」と「カテゴリ」が入力必須にできないことでした。
ここは下部の「活動報告」とはエラー表示が異なってしまうのですが、JavaScriptで制御することにしました。

functions.phpに

// タイトルを必須入力にする
function my_title_required() {
echo <<< EOF
<script type="text/javascript">
jQuery(document).ready(function($){
if('post' || 'page' == $('#post_type').val()){
    $("#post").submit(function(e){
        if('' == $('#title').val()) {
            alert('タイトルを入力してください!');
            $('#ajax-loading').css('visibility', 'hidden');
            $('#publish').removeClass('button-primary-disabled');
            $('#title').focus();
            return false;
        }
    });
}
});
</script>
EOF;
}
add_action( 'admin_head-post-new.php', 'my_title_required' );

と記載。
さらに、カテゴリを従来のチェックボックスからラジオボタンに変更し、一つしか選べないようにします。

//カテゴリー選択ボックスで一つだけしか選択できないようにする。
add_action( 'admin_print_footer_scripts', 'select_to_radio_event_cat' );
function select_to_radio_event_cat() {
?>
<script type="text/javascript">
jQuery( function( $ ) {
// 投稿画面
    $( '#category-all input[type=checkbox]' ).each( function() {
        $( this ).replaceWith( $( this ).clone().attr( 'type', 'radio' ) );
    } );
    $( '#category-pop input[type=checkbox]' ).each( function() {
        $( this ).replaceWith( $( this ).clone().attr( 'type', 'radio' ) );
    } );
} );
</script>
<?php
}

また、投稿が終わった後、普通だと入力画面そのままですが、不要な動作を避けるため記事一覧に飛ばすようにしました。

//投稿したら一覧にリダイレクト
function post_updated_redirect_page(){
wp_safe_redirect('/');
exit();
}
add_filter('redirect_post_location','post_updated_redirect_page');

コメントの調整

入力部分の調整が完了したので、次はコメントです。

当初、いいねボタンとあわせて「wpDiscuz」というプラグインを検討していました。

コメントの入力項目を増やせたりいろいろ魅力的なプラグインでしたが、最終的にコメントをファイルで納品してほしいとのことだったのですが標準のコメント以外の出力ができなかったりフォームの自由度が高い割には名前の入力位置が固定だったりと細かいところが使えなかったため結局標準のコメントで対処することになりました。

いいねボタン

いいねボタンは「WP ULike」というプラグインを使用しました。

設置するだけでしたので問題はないのですが、今回同じ全員がアカウントを使用するということで、いいねボタンも若干普通の運用方法とは異なります。
「content types」の設定から、「ログの形式」を「No Limit」、Vote Limit Per Dayを100に設定しました。
これは、社内からみると同じIPでの投稿になってしまい、複数の人が同じ投稿に対して「いいね」をつけられなくならないようにするための対処です。
「Only logged in users」これも、ログインユーザー以外でも投稿できるようにOFFに設定されています。

その他の対処

細かいところを挙げるときりがないですが、一番困ったのがコメント入力です。
というのも、記事投稿をしたあとにコメントに記事を入力すると、ログインしている状態になり名前欄が表示されないため入力できず、全員guestさんになってしまうのです。

記事入力したらトップにリダイレクトするコードは先程載せましたが、wp_logout_url()などの関数を使ってログアウトしてリダイレクトさせようとすると、いったんログアウト画面が表示されてしまうという問題がありますし、そもそも「新規投稿」→やっぱりやめてブラウザバックで戻るという操作でもログインしてしまいます。
仕方がないので、ログインしているときはログアウトのリンクを表示させることにしました。

<?php if( is_user_logged_in() ) { ?>
<p><a href="<?php echo wp_logout_url( get_permalink() ); ?>">コメントを入力、表示する場合はここをクリック</a></p>
<?php }else{
if ( comments_open() || get_comments_number() ) {
comments_template();
} 
} ?>

クリックすると・・・

こうなります。

最終的には、このような掲示板ができあがりました。

テーマはyStandardさんをお借りしています。
非常にシンプルで見やすいテーマです。

まとめ

運用に頼るところも多いですが、変わったカスタマイズの内容をお伝えいたしました。
利用者に管理画面に入ってもらって、と考えると会員サイトなどに応用できるのではないかと思います。
今回はイントラネット内の限られたIPアドレス内での運用でしたので問題ありませんが、外部に公開するような運用はセキュリティの問題がありますのでご注意ください。
何かのご参考になれば幸いです。

※文中、いくつかのコードをインターネットの複数のサイトから引用していますが、引用元を失念してしまったため割愛させていただきます。ありがとうございました。

この記事を書いた人

おおつき@TTI

Webディレクター、Webコンサルタント、Webコーダー、日曜プログラマー、他色々やってます。

気になったら
まずはご相談を

あなたの悩みのために専門家がチームを組み、課題解決に取り組みます。
まずはお気軽にお問い合わせください。

日本全国どこでも対応します。