顔文字を挿入できるプラグイン(自作)
コメント欄等にリストから選択した顔文字を追加できるプラグインを作成してみました。
まんまココログのパクリなんですが、便利だったのでWordPressでもそういうのが欲しくて作りました。
リストから選んだ顔文字を指定したフォームに挿入します。
もちろん自分で項目や顔文字を追加する事も出来ます。
具体的にどういったものかは、このページ下のコメント欄にも「顔文字」ボタンがあるので実際に試した方が早いと思います。
JavaScriptタグを貼るだけで呼び出せる顔文字挿入フォームも作成しました。
こちらはタグを貼るだけなので、HTMLファイルやテンプレートファイルを変更できるのであれば手軽に導入できると思います。宜しかったら試してみてください。
スクリーンショット
|
管理画面
|
顔文字リスト画面
|
ダウンロード
下をクリックしてダウンロードします
インストール
- ダウンロードしたファイルを解凍します。
- WordPressのプラグインディレクトリにフォルダごとアップロードします。
- 管理画面で有効化します。
管理画面について
- 管理画面の左メニュー「設定」→「Kaomoji Regist」をクリック
- 「挿入先のID」に顔文字を挿入するフォームのIDを入力します。
- 「項目追加」は新規に分類する項目を登録できます。
- リスト左は分類の項目です。削除する場合は選択して「項目削除」をクリックします。
- リスト右は各分類項目に登録されている顔文字です。一行に一つの顔文字を入れます。
- 編集後は「変更を保存」をクリックして更新します。
顔文字リストの呼び出しについて
- 呼び出したい所で「 insert_kaomoji_form() 」と入力します。
- 基本の幅の長さは400pxですが「 insert_kaomoji_form(‘width=500′) 」で幅を変える事が出来ます。
- ※「挿入先のID」で入力したIDのフォームがある事を確認してください。
例えばcomments.phpでは下記のように入力します。
<table summary="コメント記入欄" border="0" cellpadding="3" cellspacing="0"> <tr><th>お名前</th><td><input type="text" name="author" id="author" value="<?php echo $comment_author; ?>" tabindex="1" /></td></tr> <tr><th>メールアドレス</th><td><input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" tabindex="2" />※管理人にのみ公開されます</td></tr> <tr><th>あなたのサイトのURL</th><td><input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" tabindex="3" /></td></tr> </table> <!-- 顔文字リスト(id=comment フォームに顔文字を挿入) --> <?php insert_kaomoji_form(); ?> <p><textarea name="comment" id="comment" cols="45" rows="10" tabindex="4"></textarea></p> <p class="submitbutton"><input name="submit" type="submit" id="submit" class="button" tabindex="5" value="投稿" /></p>
|
|
投稿レビューのプラグイン(自作)
Product Advertising API (旧 Amazon Web Service) を利用して音楽のレビューを投稿できるプラグインを作成してみました。
Amazon Web ServiceのデータからCD情報を取ってきて、レビュー内容を書くだけでそれなりのページが仕上がるようになっています。
一応、Amazonアソシエイト(アフィリエイト)にも対応していますのでお小遣い程度の役に立つかも?(ちなみに私はいまだ0円です)
[2009-08-17 追記]
Amazon Web Service は Product Advertising API になったのでそれに対応するようにしました。
ただしこのプラグインはPHP 5.1.2 で追加された機能を使用していますので、それ以前のPHPでの利用は出来ませんので悪しからず。
以前のAmazon Web サービス用のプラグインを使用している方はそのままダウンロードしてプラグインファイルを上書き保存してもらえれば良いと思います。Secret Access Keyは必要になりますが…。
スクリーンショット
|
初期設定画面
|
レビュー一覧画面
|
CD情報取得
|
レビュー投稿画面
|
|
記事への差込
|
事前準備について
このプラグインはAmazon Web サービスからデータを取得する事を前提に作成しています。
必ずAmazonのAccessKeyIDを取得してください。
AccessKeyIDの取得方法について詳しい説明をされているサイト
アフィリエイトも同時に!という方はアソシエイトタグも取得しておいてください。(これは取得してもしなくても良いです)。
アソシエイトタグの取得方法について詳しい説明をされているサイト
ダウンロード
下をクリックしてダウンロードします
インストール
- ダウンロードしたファイルを解凍します。
- WordPressのプラグインディレクトリにフォルダごとアップロードします。
- 管理画面で有効化します。
初期設定について
- 管理画面の左メニュー「Review Post」→「設定」をクリック
- 上部にお使いのPHPのバージョンが表示されますので対応しているか確認した上で、次に進みます。
- レビュー用テーブルを作成します。「ここをクリック」でテーブルを作成します。
- 「AWS AccessKeyID」にAmazonのAccessKeyIDを入力します。
- 「Amazon Secret Access Key」にSecret Access Keyを入力します。
- 「Amazon AssociateTag」にアソシエイトタグを入力します(任意)。
- 「更新」をクリックして保存します。
[2009-08-17 追記]
Amazon の AccessKeyIDやSecretAccessKeyの確認は以下のように。
「Product Advertising API」のサイトにログインします。
ログイン後、「Manage Your Account」をクリック→「アクセスキー情報」の「こちらのリンク」をクリックして確認します。
「出力テンプレートファイル」は出力するデザインファイルです。
詳しくはコチラを確認してください。
レビューの新規投稿について
- 「Review Post」→「登録」をクリックします。
- 「新規作成」をクリックします。
- 「タイトル」「アーティスト」を入力して「Amazonデータの読み込み」をクリックします。
- 該当する作品の検索結果一覧が表示されますので、該当する作品の「選択」をクリックします。
- 自動で一覧画面に戻りますので、もう一度リストから選んで「編集」をクリックします。
- アーティスト名 カナを入力します。
- レビュー内容に思う存分レビューを書いて「変更を保存」をクリックして更新します。
レビューの更新について
- リストから「編集」をクリックします。
- Amazonのデータを読み込み直す事が出来ます。
- レビュー内容を変更できます。
- 変更後は「変更を保存」をクリックして更新します。
基本的に作品名、アーティスト名、曲目リスト等は変更できません!
どうしても変更したい場合は「Amazonから取得したデータ」をクリックして、表示された内容を変更して保存してください。
投稿記事への差込について
- リストの「埋め込みタグ」をコピーします([review-post id="○"])。
- 記事の差込みたい場所に貼り付けます。
削除について
このプラグインを使用する際、新たに「wp_tico_review_post」というテーブルを作成します。
完全に削除したい場合は先にReview Post設定画面の一番下「レビュー用テーブルの削除」というボタンをクリックしてレビュー用テーブルを削除してください。
※残しておいても別に構わないと思いますが気になる人は削除してください。その場合、全てのレビュー内容が削除されます。
既知の問題について
- Amazonからの検索結果を10件しか取得しない
- 正直、調べるのが面倒だったので複数ページの処理をしていません…。とりあえずピンポイントで検索しているので自分が困っていないというのが大きな理由です。
- 2枚組アルバムの場合の曲目リストの処理をしていない
- 現段階で私が2枚組アルバムのレビューをする予定が無いので何もしていません。必要に迫られたらやろうかと思っています。
レビュー数が増えてもそのまま一覧がズラーっと並んでしまう-
リスト一覧は何も処理をせずにそのまま並べているだけなので、レビュー数が増えたら凄い事になるかも…。ただこれに関しても現時点で私が困っていないので何もしていません。
対応しました。25件ずつ表示するようにしています。 差込内容のデザインが画一化されている-
仕方ないといえば仕方ないのですが…
自分でHTMLを書ける人であれば「include/review-post-ui.php」の271行目以降を変更すれば出来たりします。
対応しました。詳しくはコチラを確認してください。
出力デザインについて
どうしてもこれはやっておいた方が良いかなと思い、(自分の為にも)デザインのテンプレートファイルを読み込むようにしました。
まずテンプレートファイルの作成については「/tico-review-post/include」のoutput.phpファイルを参考にしてください。
ファイル名は「output.php」ですが、書いてあるのはhtmlファイルです。
このファイルを参考にご自身のホームページに合ったデザインに変更、作成してもらえれば良いかと思います。
ちなみにオリジナルのデザインファイル名はoutput.phpから変更しておいた方が良いです。
作る際にデータに変換される独自タグを以下に列挙しておきますので参考にしてください。
| タグ名 | 変換されるデータ |
|---|---|
| {:author:} | アーティスト名 |
| {:title:} | 作品名 |
| {:release:} | リリース日 |
| {:price:} | 価格 |
| {:label:} | 所属レーベル |
| {:asin:} | ASIN |
| {:url:} | AmazonへのリンクURL |
| {:review:} | レビュー内容 |
| {:img-s-url:} | 画像(小)のURL |
| {:img-s-width:} | 画像(小)の幅 |
| {:img-s-height:} | 画像(小)の高さ |
| {:img-m-url:} | 画像(中)のURL |
| {:img-m-width:} | 画像(中)の幅 |
| {:img-m-height:} | 画像(中)の高さ |
| {:img-l-url:} | 画像(大)のURL |
| {:img-l-width:} | 画像(大)の幅 |
| {:img-l-height:} | 画像(大)の高さ |
| {:[number-list]:} ~ {:[/number-list]:} | 二つのタグの間に曲目タグを入れます(後述参考) |
| {:trackno:} | 曲目No. ※これは曲目リストです。後述を参考にしてください。 |
| {:track:} | 曲名※これは曲目リストです。後述を参考にしてください。 |
曲目リストは以下のタグの間に記述します。
以下のタグの間でないと変換しません。
{:[number-list]:}
ここに記述({:trackno:}、{:track:}タグ)
{:[/number-list]:}
作成したテンプレートファイルは「/tico-review-post/include」の中にアップロードします。
デザインテンプレートの選択についてですが、WordPress管理画面の左メニュー「Review Post」→「設定」をクリックします。
「出力テンプレートファイル」項目のファイル名で該当するファイルを選択して「更新」します。
これで作成、変更したテンプレートファイルが反映されます。
もし「よく分からない」という方はそのままデフォルトのテンプレートファイルを使用するのが無難です。
|
|
コメントのみ取得する関数
WordPressでコメントのみを取得する関数を作成してみました。
function get_only_comments( $args = '' ) {
global $wpdb;
$defaults = array('limit' => 10, 'post_id' => 0, 'order' => 'DESC', 'approved' => 1);
$args = wp_parse_args($args, $defaults);
if($args['limit'] <= 0 || $args['limit'] > 1000) {
$limit = 1000;
} else {
$limit = $args['limit'];
}
$postid_sql = "";
if($args['post_id'] > 0) {
$postid_sql = " AND comment_post_ID=" . $args['post_id'];
}
if($args['order'] != "DESC" && $args['order'] != "ASC") {
$order = "DESC";
} else {
$order = $args['order'];
}
$approved_sql = "";
if($args['approved'] == 1) {
$approved_sql = " AND comment_approved=1";
}
$comments = $wpdb->get_results("SELECT comment_approved, comment_author, comment_author_url, comment_ID, comment_post_ID, comment_content, comment_date FROM $wpdb->comments WHERE comment_type=''$postid_sql$approved_sql ORDER BY comment_date $order LIMIT $limit");
return $comments;
}
functions.phpなんかに入れてやればどこからでも使えます。
引数
引数を複数指定する場合は「&」で繋ぎます。
- limit
- 取得するコメントの数を指定(0を指定した場合は最大で1000コメントを取得)
デフォルトは10 - post_id
- 取得するコメントの記事id(0を指定した場合は全てのコメントを取得)
デフォルトは0 - order
- 日付でのコメント並び順(ASC / DESC)
デフォルトはDESC(降順) - approved
- 承認されているコメントのみ取得(1 / 0)
デフォルトは1(承認済みのみ取得)
取得するデータ
各コメントデータが配列で取得できます。
- comment_approved : 未承認=0, 承認された=1
- comment_author : コメント作成者の名前
- comment_author_url : コメント作成者のURL
- comment_ID : コメントID
- comment_post_ID : コメントが投稿された記事ID
- comment_content : コメント本文
- comment_date : コメントされた日付
使用例
/*
コメントデータ取得について
*/
// 承認済みのコメントで最新10件を取得
$comment_array = get_only_comments();
// 記事IDを指定
$comment_array = get_only_comments('post_id=' . $post->ID);
// 取得するコメント数を指定
$comment_array = get_only_comments('limit=5');
// 記事ID=100のコメントを日付の昇順で全て取得(未承認も含む)
$comment_array = get_only_comments('limit=0&post_id=100&order=ASC&approved=0');
/*
取得したデータの活用についての例
*/
// コメント数の表示
echo count($comment_array);
// 配列のループ
foreach($comment_array as $comment) :
// コメントが承認されているかの確認
if($comment->comment_approved == 1) :
// コメントが投稿された記事のタイトルを表示
echo get_the_title($comment->comment_post_ID);
// 記事のリンク先を表示
echo get_permalink($comment->comment_post_ID);
// コメント本文を30文字まで表示
echo mb_substr($comment->comment_content, 0, 30);
// コメント本文を改行を付けて表示
echo nl2br($comment->comment_content);
endif;
endforeach;
「プラグインを導入するまでもない」と思っている方や「データの出力を細かく自分で制御したい」方には有用かと思ったので載せておきます。SQLが分かる方であれば関数のSQL文を変更して色々自分好みのデータが取得できます。
ちなみにトラックバックのみを取得したい場合は関数内の「WHERE comment_type=”」を「WHERE comment_type!=”」にすれば良いはず!
|
|
[jQuery] ページ内をスムースにスクロールする
WordPressについて、というよりはホームページ作成での便利な事ですが…。
ここの記事を参考にしてページ内をスムースにスクロールする関数を作成しました(ほぼ丸写しですけど)。
使用条件としては必ずjQueryが読み込まれている事です。
// Easingの追加
jQuery.easing.quart = function (x, t, b, c, d) {
return -c * ((t=t/d-1)*t*t*t - 1) + b;
};
/*-------------------------------------
ページ読み込み中
-------------------------------------*/
jQuery(document).ready(function(){
//
// <a href="#***">の場合、スクロール処理を追加
//
jQuery('a[href*=#]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var $target = jQuery(this.hash);
$target = $target.length && $target || jQuery('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
jQuery('html,body').animate({ scrollTop: targetOffset }, 1200, 'quart');
return false;
}
}
});
});
これで後は、
<a href="#header">TOPに戻る</a>
のようにhref属性にページ内リンクを貼るとスムースにスクロールするようになります。
結構面白いです。
|
|
アーカイブページでのnext_posts_link()について
現在、アーカイブページで next_posts_link と previous_posts_link を使用していますが、どうも上手く機能しません。次のページのリンクをクリックしても「ページが見つかりません」というエラーが出てしまいます。
1時間ぐらい悩んだのですが、どうもパーマリンク設定が怪しいという事が分かりました。
下記が今まで設定していたパーマリンクです。
/%category%/%postname%/%post_id%
設定し直したパーマリンクの設定です。
/%post_id%/%postname%
これだと上手くいきました。
ちなみにデフォルトの設定だとどちらでも上手くいくので、恐らく私のテーマファイルの作り方がおかしいのでしょうね…悔しい。何がダメなのかしら。
|
|
アーカイブ
- 2012年5月 (14)
- 2012年4月 (16)
- 2012年3月 (19)
- 2012年2月 (12)
- 2012年1月 (13)
- 2011年12月 (17)
- 2011年11月 (15)
- 2011年10月 (21)
- 2011年9月 (26)
- 2011年8月 (24)
- 2011年7月 (24)
- 2011年6月 (22)
- 2011年5月 (22)
- 2011年4月 (23)
- 2011年3月 (20)
- 2011年2月 (19)
- 2011年1月 (23)
- 2010年12月 (21)
- 2010年11月 (20)
- 2010年10月 (26)
- 2010年9月 (24)
- 2010年8月 (32)
- 2010年7月 (26)
- 2010年6月 (27)
- 2010年5月 (26)
- 2010年4月 (27)
- 2010年3月 (29)
- 2010年2月 (28)
- 2010年1月 (31)
- 2009年12月 (23)
- 2009年11月 (19)
- 2009年10月 (22)
- 2009年9月 (19)
- 2009年8月 (22)
- 2009年7月 (22)
- 2009年6月 (18)
- 2009年5月 (20)
- 2009年4月 (21)
- 2009年3月 (24)
- 2009年2月 (25)
- 2009年1月 (29)
- 2007年5月 (36)
最近のコメント
- ちゃんとした理髪店 に ティコ より
- ちゃんとした理髪店 に 龍 より
- 白川郷、高山陣屋、五箇山等 に ティコ より
- 白川郷、高山陣屋、五箇山等 に べぃじゅ より
- 帰って来ました に ティコ より
カテゴリー
- WordPress備忘録 (9)
- ガイナーレ鳥取 (48)
- グルメ (3)
- サンフレッチェ広島 (137)
- レビュー (21)
- ゲーム (1)
- 漫画 (1)
- 音楽 (19)
- 9mm Parabellum Bullet (1)
- ONE OK ROCK (1)
- THE BACK HORN (13)
- マキシマムザホルモン (1)
- ユニコーン (1)
- 怒髪天 (1)
- 相対性理論 (1)
- 不定期通信 (718)
- 作品 (13)







