読者です 読者をやめる 読者になる 読者になる

communityfield’s diary

サイト開発のメモです。メモなので結構適当です

投票システムとフォーラムAjax化を追加したい

投票機能を追加したい

現在運営しているコミュニティサイトでイベント用投票(vote)ページを作りたいと思ってる

いまから自前で作るのは手間なのでwordpressプラグインを探してみた

WP Vote

最近出たばかりの投票プラグインのようでいたってシンプル

基本yesかnoのみで選択肢が作れない

説明文から企業社内用の投票システムとして作られたみたい

有料アドオンあり

https://ps.w.org/wp-vote/assets/screenshot-4.png?rev=1470210

WP Vote — WordPress Plugins

TotalPoll Lite

デモサイトをみると非常に機能が充実している

画像や動画(プロ版のみ)で選択項目を表示できたり、投票結果がアニメーションする

デフォルトでも9割がた日本語に対応していた(機械翻訳っぽいけど)

通常版の機能でも充実しているがアドオンやプロ版でさらに機能を追加できるし、他の投票プラグインのインポートができる大変優れた投票プラグインでした

https://ps.w.org/totalpoll-lite/assets/screenshot-9.png?rev=1403119

TotalPoll Lite — WordPress Plugins

 

WP-Polls

10万ダウンロードと人気の高い投票プラグイン

CSSでデザインをカスタマイズできたり、変数を用いてオリジナルのページをつくれる

Ajax対応で動的に投票と結果が出る

開始日時と終了日時を指定できる

https://ps.w.org/wp-polls/assets/screenshot-7.png?rev=1206760

WP-Polls — WordPress Plugins

 

YOP Poll

基本的にはWP-Pollsと同じような機能

開始日時と終了日時を指定できる

投票者が追加項目を選択できる

https://ps.w.org/yop-poll/assets/screenshot-2.png?rev=1084420

YOP Poll — WordPress Plugins

 

polls-widget

基本的にはWP-Polls、YOP Pollと同じような機能

CSSを使わなくても細かいデザインの調整が可能なのが特徴

https://ps.w.org/polls-widget/assets/screenshot-3.jpg?rev=1045567

投票 — WordPress Plugins

 

私はTotalPoll Liteを使うことにしました

開始日と終了日指定は有料版になるけど、今のところ大したことには使わないので

 

 

フォーラムをAjax化したい

いま、コミュニティサイトにはbbpressプラグインを使っている

基幹システムが古く、時代遅れぎみ

書き込みをするとページにリロードがはいってしまうので、

Ajaxで動的に更新にしたいので調査してみようと思う

Buddypressはその辺対応している

 

 

フォーラムでのブログカード問題が解決

フォーラムでのブログカード表示

以前から解決できなかったフォーラムでのブログカード表示ができるようになった。

やりたかったのは使用させていただいているテーマ「simplicity」のブログカード機能をフォーラムに表示させること。

製作者の方に質問したところフィルターフックで呼び出すのは間違いなかったようで、bbpressのフック名が適切ではなかったためでした。

//bbpressでブログカードをオン
add_filter('bbp_get_reply_content', 'url_to_blog_card', 9999999);//bbPress返信をフック
add_filter('bbp_get_reply_content', 'url_shortcode_to_blog_card', 9999999);//bbPress返信をフック
add_filter('bbp_get_reply_content', 'url_to_external_blog_card', 9999999);//bbPress返信をフック

 bbPressのフィルターフックは公式でも十分リストがなく、
includes→core→filters.phpのファイルに網羅されていると公式フォーラムで見かけたのでそこからそれっぽいのをピックアップしてみたらうまくいった。

以前から四苦八苦していたので解決したのは嬉しい

Buddypressの調整

もう一つ取り組んだのがBuddyPressのテーマ適用でcssの調整は最低限整えたのだが、phpの読み込み構造がちょっと複雑で、もう少し調査しないと編集に取り組めなさそう。

今年も残りすくないですがこれだけでも終わらせてキリよく年末を迎えたいと思うです。

風邪をひいた

一昨日に貰った風邪が昨日から悪化してきた

ちなみに市販の風邪薬は飲まない派です

症状を抑えるだけだと治りが遅くなりそうなので

 

今日の作業は後回しにしてたBuddyPress部分のデザイン調整

アクティビティページのみ対応

熱出ると頭がぼーっとして捗らないですね

おとなしく寝てます

余談

以下2つのWPプラグイン、JQプラグインも何か使えそうなのでメモ

happy2010.wpblog.jp

 

kachibito.net

サイト全体通知の追加

サイトがサーバーメンテナンスで見れなくなるとか作業中で重くなるとか

そういった場合サイトのどこにいても見ることができる通知スペースが欲しいと思った

イメージは以下の記事のもの

WordPressのウィジェットを使って投稿とは別で重要なお知らせを作る | わぃおがわ

ウィジェット出力コードは全ページにインクルードしているheader.phpに追記する予定

ただ特殊なページのテンプレートにheader.phpを直書きした覚えがあるのでそこは別途対応する

 

実際に追記した内容は以下(自分のサイトはsimplicityテーマをカスタムして使用してます)

header.phpに追記

/* サイト重要通知ウィジット追加 */
register_sidebars(1,
array(
'name' => 'サイト重要通知' ,
'id' => 'important-info' ,
'description' => 'サイト全体に重要な通知をするためのウィジット',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget_title sidebar_widget_title">',
'after_title' => '</h3>',
));

header.phpに追記

<!-- ウイジェット -->
<?php if ( is_active_sidebar( 'important-info' ) ) :
dynamic_sidebar( 'important-info' );
endif;?>

 余談:今年のフロントエンドとコーディング

今年も残す所2週間切りました

2016年の総括する記事をピックアップして自分の考えとか

qiita.com

こちらの記事はデザイン出身の自分にはあんまりわからないが「ほー」と見ている

jQueryは古いライブラリになりつつあるとのことで、結局自分ではあまりいじらずに終焉を迎えてしまいそうだなと

 

ics.media

自分にはこちらの記事の方が領域に近い

「meta keywords設定は検索順位に関係がない」

だいぶ前からそうだったような、、でも一応入れてしまうんですよね

「user-scale=noはiOS 10では無効」

は初めて知りました

いままで拡大できることを前提にはしてたので自分にはあまり関係ないですが

「現在ではデバイピクセル比が3以上のデバイスも発売されている」

は様子見です

話ずれますがゲーム業界だと装飾のためにWebページの見出し全体を画像にしたりしますが、もうそんなことしたくないです

見出しはCSS(+jsちょこと)で装飾を完結したい

今こそ見直すclearfix

flort使いたくないFlexboxを全面的に使いたい

でも随所に使われてるし使っちゃう

順次対応します

 

 

サイトのマルチコンテンツ化

自分の運営するサイトにはWordPressを使っているが、基本的にはブログ用のCMSなのでwikiのような情報コンテンツサイトやポータルサイト、コミュニティサイトとするのはプラグインを使ったりPHPをいじる必要がある

 

現在のコミュニティサイトにwikiコンテンツをプラスしたいと考えているが、問題として同じ領域にメニューを表示すると膨大になる

なのでwikiコンテンツのページではサイドバーウィジットを切り替え、メニューとして使用することにしてみた

1.以下のサイトを参考にウィジットエリアを追加

WordPressのウィジットエリアを追加する方法 | Web’Notes

2.固定ページ用にウィジットを切り替えた固定ページテンプレートを用意

3.用意したテンプレートでwikiコンテンツを作成

4.新規メニューを作り、それをウィジットエリアに追加した

以上

 

そういえばカスタム投稿を作りテンプレートを固定すれば毎回指定する必要なかったのでそちらの対応を後日しようと思う

メニュー専用ウィジットを作りたいところ

 

話が変わるのだがbbpressのトピックにトピック名が使われ日本語スラッグ 担ってしまうのをなんとかしたかった

この「bbPress Permalinks with ID」プラグインは有効化して「パーマリンク設定」をなにも変更せずに「変更を保存」としてリンクを更新するだけでトピックURLにIDを使用してくれるようになる模様

wordpress.org

古いバージョンのBBPressではもともとこの仕様だったが、トピック名をURLを使うように変更されたみたい(公式フォーラムで見かけた)

英語ならいいが2バイト文字を使う圏は困っちゃうよね

 

コンテンツ重視にシフトチェンジ

現在までにサーバー構築を行い、サイトの機能とデザイン整備に時間をかけてきた

不十分なところもあるが一通りは揃ったなかでコンテンツが置き去りになっていたのに気づく

何事もバランスがとれてないと、ボトムネックがあるとそれ以上いくら力を入れても効果が薄い

 

てなわけで今後コンテンツの充実に力を入れていくことにしたいと思う

昨日と今日の作業

昨日はbbPressテンプレート調整の残りと返信の入れ子レイアウトなど気になったところを調整した

buddyPressの方はほぼ手付かずなので、近々手をつけたいところ

 

今日やってみたいのは画像のキャッシュ化と表示

具体的には、画像のURLを貼る→キャッシュ化→imgタグで画像表示と下にホスト名のリンクをいれる

たぶんNeverまとめも同じような構成だと思う

 

そのうちに寝ログさんの以下記事を参考に進めたいと思う

nelog.jp

 

最近思い付きの小手先の発案と作業が続いてしまっているので、今一度利用者にどういったフローで利用してもらいたいかを全体の機能構成とともにまとめ直したほうがいいなーと以下の記事を読んで気づかされた

 数千ページのワイヤーフレームを書いてきたWebディレクターがUI設計時に気を付けている8つのこと。 - 笑顔を創りたいWeb屋の日常

 

話が変わりスマホだと複数タブやウィンドウの切り替えはストレスになる

ネイティブアプリだと参考リンクは全画面オーバーレイで表示し、読み終われば閉じて元の画面に戻れるので操作しやすい

これをモバイル用のサイトにやってみようと企んでるところ

現在のページ上に、別HTMLの内容を重ねて表示する方法 [ホームページ作成] All About

 

しかしネイティブアプリ化したほうが早くて使いやすいんじゃと思ったり