CONTACT
運営などに関して
(受託事業者)
株式会社BPL
本事業全般に関して
広島県 地域政策局 中山間地域振興課
里山人材力強化グループ
ひろしま里山グッドアワード

投票システムの実装方法

投票フォームデモ

以下は仕様です。

  • 2つ選択しないと投票ボタンが押せない。また3つ以上は選択すらできない。
  • 応援メッセージは指定文字数を越えた入力ができない。
  • 投票後は再度投票フォームを開くことができない。
    ※代わりに投票ずみのメッセージが表示される。
  • ページを更新しない限り、投票前にモーダルを閉じても再度開くと入力したものは残る。
    ※モーダルの誤動作対策。

投票フォームの設置の仕方

ショートコードをフォームを設置したい箇所へ記載して下さい。デフォルトでは、<a>投票する。</a>タグで表示されます。この時class属性を与えると<a>タグにclass属性を付与できます。cssでスタイルをする場合に利用できます。この<a>タグのリンクをクリックするとフォームがモーダルで表示されます。

[ga-polls-form class='btn btn-primary']

ブロック内に任意のテキストを与えると<a>任意のテキスト</a>と表示されます。

[ga-polls-form class='btn btn-primary']任意のテキスト[/ga-polls-form]

注意:
デフォルトでは、投票項目はカスタム投稿「取り組み」でpost_type=’activity’です。投票自体はコメントを利用しているので、カスタム投稿の記事作成時にディスカッションのコメントを許可にチェックが入ってるか確認してください。


投票数の表示

表示したい”取り組み”のページ内に、ショートコードを記載して下さい。すると該当する”取り組み”に関する投票数を表示します。

[ga-polls-count]

異なるページ内に表示する場合は、以下のように該当する”取り組み”をpost_idとして指定して下さい 。例えば”取り組み”のpost_idが11の場合は以下のようにします。

[ga-polls-count post_id=11]

応援メッセージの表示(旧)

応援メッセージはWPのコメントです。よって本システムとは関係なく通常のWPのコメントと同じ表示方法になります。

作成はデザインを決めてからのほうが効率的かもしれません。

ここではサンプルとして、WPの組み込み関数を用いた一般的なコメント表示の方法を示します。

single-activity.php   カスタム投稿(取り組み)のテンプレート


<?php comments_template(); ?>

ただしブログ形式のようなフォーマットで出力されるので、これは使い物にならない気がします。デザインがある程度教えてもらえるとサンプルコードを示せます。特に以下がわかるとよい。

  • メッセージの表示項目
  • メッセージの表示件数
  • メッセージの表示順(新しいのを上に等)

なおWPの機能を使うため、メッセージ(=コメント)は一覧で表示を完結するようにしてもらえればと思います。

応援メッセージの表示(新)

ページ作成が捗ると思いショートコードで応援メッセージのリスト出力を作成してみました。出力される項目はメッセージ本文と投稿日時になります。利用方法は表示したい取り組みのページ内にて以下のようにします。

[ga-polls-messages]

注意してほしいのは、表示させる応援メッセージは該当する取り組みページ内で上記ショートコードを利用して下さい。

応援メッセージが1件も無い場合は、何も表示されません。もし何かを表示させたい場合は以下のようにブロックでデータが無い場合のHTMLを囲って下さい。

[ga-polls-messages]<p>応援メッセージはありません!</p>[/ga-polls-messages]

またページネーションを行う場合は、表示したい取り組みページ内にて以下のショートコードを利用します。

[ga-polls-pagination]

ページ内にて表示するメッセージの件数はWPの管理画面から、設定 > ディスカッション > 他のコメント設定 から

1ページあたり [5] 件のコメントを含む複数ページに分割し、 [最後] のページをデフォルトで表示する
[古い] コメントを各ページのトップに表示する

上記で件数を変更できます。表示順は古い順で初期表示は最終ページになります。
※[古い] > [新しい] とすると表示順がページ内で反転しますが、意味がないので上記のままでお願いします。

出力されるHTMLは<ul>,<li>を<div>で囲ってますので確認してみてください。一応CSSクラスを付与しておりデフォルトでは簡単なスタイルをあててます。これらのCSSクラスに対して上書きしてもらえれば、任意のデザインに対応できると思います。css読み込みはwp_euqueue_styleにすると優先順位の指定が簡単にできるのでお勧めです。もしくは!importantにしても構いません。

またページネーションのリンクはデフォルトでは、cpage=[ページ番号]#polls-messages-on-[post_id]となるので、ジャンプさせたい場所に<div id=”polls-messages-on-<?php the_ID(); ?>”>等をしたりJavaScriptでの演出もできると思います。また#polls-messages-on-[post_id]の箇所を変更したい場合、例えば#foobarにしたい場合は以下のようにして下さい。

[ga-polls-pagination add_fragment=#foobar]

より具体的な例として、single-activity.php への実装を示すので参考にしてください。

………省略(何かの表示)………

<!-- ここに応援メッセージを表示したい!-->
<div id="polls-messages-on-<?php the_ID(); ?>">
<?php echo do_shortcode('[ga-polls-pagination]'); ?>
<?php echo do_shortcode('[ga-polls-messages]'); ?>
<?php echo do_shortcode('[ga-polls-pagination]'); ?>
</div>

………省略(何かの表示)………

上記で対応できない程根本的なデザイン等が異なる場合は、上記ショートコードの利用は諦めてWPページテンプレートを用いて基本的な方法で実装する方法もあります。


投票システムの無効化について

投票システムの投票フォームの無効化、及び投票数の非表示化を記事の編集をしなくても制御することが可能です。WPインストールディレクトリにある wp-config.php を編集して下さい。

wp-config.php

/** 投票システムの有効フラグ */
//define('GA_POLLS_DISABLED', true);	// 投票自体の無効
//define('GA_POLLS_INVISIBLE', true);	// 投票数の非表示

上記が設定済みであるので、適時コメントを取って有効にして下さい。行頭の // を削除すればコメントを取った状態になります。

その他の設定

デフォルトの投票年度の設定をwp-config.php から設定することができます。ショートコードで投票年度を指定できますが、指定しない場合のデフォルト設定をここですることができます。

例えば以下は2023年度の設定で投票カスタム投稿に対するカスタムタクソノミーである2023yearを設定しています。

wp-config.php

define('GA_POLLS_TAXONOMY_TERMS', ['2023year']);

ひろしま里山グッドアワード

2024年度の各賞が決定いたしました!