Raindropsテーマの投稿フォーマットを使って、簡易チャット

Raindropsテーマ1.454で、投稿フォーマット「チャット」のメンテナンスを行いました。

一定の記述をすると、吹き出し付きのhtmlフォーマットで表示されるというもので、フィルターで実装しています。

テーマの機能だけですと、吹き出し形式で表示するだけで、ナニコレ感が満載ではありますが、wordpress.org から配布するものとしては、ここまでの実装が限度で

何か、使い道を見つけるヒントのようなものを書いておきたいと思います。

ログインに関わらず、ちょっとしたメッセージの送信ができる機能を追加してみようと思います。

ワードプレスでサイトを運営しようとすると、いくつかのプラグインや、カスタムスクリプト等を使っていると思います。テーマの主戦場は、データをHTMLにして、スタイルを追加して、見やすく表示する点にあると思います。

ワードプレスのフォーラムでは、投稿タイトルの色を変更したいとか、フォントファミリーを変更したいといったCSSに関連する質問が時々寄せられるわけですが、大抵は「ブラウザの要素の検証で、確認して変更するといい」とか、単純なCSSの質問は、CSSを扱うフォーラムで聞いたほうがいいよ という事になる事も少なくありません。

一方で、カスタムフォーマットをメンテナンスしていると、様々なCSSの設定を行う必要もあり、それはそれなりの時間も要したりします。テーマのCSSやhtmlの出力がどのように行われるのかを理解できれば、カスタムプラグインを作成する場合でも、CSSの調整部分については、大幅に省エネできる可能性があります。

カスタムフォーマットのチャットは、現実にはそれほど利用用途がないのかもしれませんが、それをうまく使う事によって、会話風の表示は、ほとんどCSSを書くことなしに実装が可能になるなどのメリットがあり、それはテーマで既に実装済みで、表示上の問題をテストする場合も、かなり省エネ出来そうです。

ただ、残念ながら、その辺りはWordPressにホスティングされているテーマ全体で共有可能なフレームワークのようなものはありません。

このような事から、「投稿フォーマットチャットをカスタマイズしてチャットを作ろう」といった趣旨ではなく、「テーマに実装されているhtml構造とCSSの実装をうまく使って、省エネなカスタマイズを考えてみませんか」という事を書きたかった。

手順

新しい投稿を作成し、投稿フォーマットをチャットに設定します。

functions.php にコードを追加します。

コードの、$target_idを投稿IDに書き換えます。

メールアドレスを入力します(メールアプリでは、たぶんスパムに入るので、このメールを許可してください)

投稿すると、メールが届き、チャットが更新されます。

いくらか入力すると、リセットされます。(テスト用のサンプルなので)

あくまでサンプルです。使用しているプラグインや他の設定により思わぬ動作をする可能性がありますので、十分検証して、それぞれの環境でカスタマイズが必要になると思います。

管理人
ようこそええ加減なチャットサンプルへ

使い方

まずテキストフィールドに名前を書いて、コロンで区切って、メッセージを書き、発言ボタンを押します

入力例:


コメントは受け付けていません