WPSocialBookmarkingLight 1.7.0をリリースしました。
変更点
- Grow!ボタンの追加。（yamitakeさん、ありがとうございます）
- バリデーションエラーの修正。
WP Social Bookmarking Light の管理ページをつくってるときにハマった点メモ。
メモ
JavaScript と CSS の読み込みには、wp_enqueue_script と wp_enqueue_style APIを使用する。
管理ページ上で上記 API を反映させる為に、add_action の admin_print_styles と admin_print_scripts を使用する。
ただし、単純に
add_action('admin_print_styles', 'myplugin_admin_print_styles'); add_action('admin_print_scripts', 'myplugin_admin_print_scripts');
とすると、他のプラグインの管理ページにも同様に指定の JavaScript と CSS が反映されてしまい、競合等の迷惑をかける可能性がある。
この問題は、例えばこのように
$page = add_options_page('myplugin', 'myplugin', 'manage_options', __FILE__, 'myplugin_admin_page'); add_action('admin_print_styles-'.$page, 'myplugin_admin_print_styles'); add_action('admin_print_scripts-'.$page, 'myplugin_admin_print_scripts');
add_options_page 等の戻り値を admin_print_styles や admin_print_scripts のお尻に加えてあげると回避できる。
全体像
WP Social Bookmarking Light からソースコード抜粋。
function wp_social_bookmarking_light_admin_print_scripts() { wp_enqueue_script('jquery'); wp_enqueue_script('jquery-ui-core'); wp_enqueue_script('jquery-ui-tabs'); } function wp_social_bookmarking_light_admin_print_styles() { wp_enqueue_style('jquery-ui-tabs', WP_SOCIAL_BOOKMARKING_LIGHT_URL."/libs/jquery/css/pepper-grinder/jquery-ui-1.8.6.custom.css"); } if( function_exists('add_options_page') ){ $page = add_options_page( 'WP Social Bookmarking Light', 'WP Social Bookmarking Light', 'manage_options', __FILE__, 'wp_social_bookmarking_light_options_page' ); add_action('admin_print_styles-'.$page, 'wp_social_bookmarking_light_admin_print_styles'); add_action('admin_print_scripts-'.$page, 'wp_social_bookmarking_light_admin_print_scripts'); }
WordPress にソーシャルブックマークボタンを楽々設置できるプラグイン、WP Social Bookmarking Light を公開しました。
2011.01.21 GitHubにソースコードを公開しました。
概要
ソーシャルネットワーク, ソーシャルブックマーク系のリンクをエントリーの先頭か後尾に自動で追加するプラグイン。
例えば、はてなブックマークや Facebook や Google Buzz や Twitter など。
どのリンクを追加するかは、設定画面から選択可能です。
このプラグインは、Social Bookmarking JP や wp-hatena をインスパイアしたものです。
インストール
1. こちらのページからプラグインをダウンロードして、wp-content/plugins/ にアップロード。
2. WordPress 管理画面のプラグインメニューから、WP Social Bookmarking Light を有効化。
3. お好みで、WordPress 管理画面の WP Social Bookmarking Light 設定メニューから構成を変更可。
スクリーンショット
エントリーに表示されるアイコンたち。
設定画面。
バッジ
意見・要望
意見・要望・不具合報告などは、コメント欄かGitHubのIssuesまでよろしくです。
6月 132010
WordPress Plugin を公開するまでの流れをメモ。
公開するページは、WordPress.org Plugins。
アカウント登録
最初に、WordPress.orgでアカウント登録。
必須項目は、Username と Email。
登録するとメールが届く。ログイン用のパスワードも一緒に届く。
パスワードは、Forums ページの右上にある View your profile から変更できる。
プラグイン登録申請
続いて、Add Your Pluginで登録申請。
Extend → Plugins → Developer Center → Add Your Plugin という順番でたどり着ける。
必須項目は、Plugin Name と Plugin Description。
申請の結果が出るまで、大体1週間ぐらいかかる。
承認完了したらメールが届く。
SVN チェックアウト
承認メール内に Subversion のリポジトリ URL が書かれている。
この URL が、基本的にプラグインの公開場所となる。
リポジトリをチェックアウト。
$ svn co http://plugins.svn.wordpress.org/wp-hoge/ A wp-hoge/trunk A wp-hoge/branches A wp-hoge/tags
trunk が作業する場所。
tags が公開する場所。
とざっくり決める。
公開準備
既にプラグインが完成しているのであれば、そのファイルたちを trunk にコピーする。
まだであれば作成する。trunk 配下で作業がオススメ。
プラグインが完成したら、readme.txt の準備する。
WordPress 公式の readme.txt サンプルは、こちら。
フォーマット通りに記述すると、readme.txt の内容が WordPress Plugin 公開ページに反映される。
フォーマットの確認は、こちらのサイトで行う。
足りない項目があると、以下の図のように教えてくれる。
公開
readme.txt が完成したら、公開するバージョンなどを決める。
readme.txt の Stable tag 項目に設定したバージョン番号をタグ名にする。
Stable tag: 1.0.0
上記の場合なら、1.0.0 という名前のタグを作成する。
まず trunk 内のファイルをコミット。
コミットするときに WordPress アカウントのユーザ名とパスワードを求められるので要確認。
$ svn add wp-hoge.php readme.txt $ svn commit -m "first release." Authentication realm: <http://plugins.svn.wordpress.org:80> WordPress.org Subversion Username: user Password for 'user': ... Transmitting file data ..................... Committed revision 251421.
続いて、タグを作成してコミット。
$ svn copy http://plugins.svn.wordpress.org/wp-hoge/trunk http://plugins.svn.wordpress.org/wp-hoge/tags/1.0.0 -m "tagging 1.0.0 release." Committed revision 251422.
最後にプラグインのページにアクセスし、readme.txt の内容が反映されていることを確認したら完了なり。
参考
WordPress.orgのプラグインディレクトリに自作プラグインを登録する方法（Windowsユーザー向け、TortoiseSVN使用） : 参考エントリー
5月 052010
エントリーの最初 or 最後に自動でソーシャルブックマーク用のボタンを追加してくれる超便利なプラグイン。
Social Bookmarking JP の導入メモ。
インストールは簡単。zipファイルをダウンロード＆解凍して、plugin ディレクトリに置くだけ。
しかし、見た目がなんか気になる。
その画像がこちら。
ボタンの周りが灰色になっていてカコワルイよ。
ブックマーク数を表示する部分なんて小さな灰色の四角となって申し訳なさそうにたたずんでいるじゃないか。
原因は、テーマで設定されている CSS の img 項目。
おもいきり干渉してる。
とりあえず解決策として、「プラグインのソースコードを弄って、オプションから CSS の設定をできるようにする」ことを考えた。
けど、めんどくさい。
興味本位からソースコードをサッと眺めてみた感じ、かなり分かり易くて修正は容易っぽかったけど、
後々プラグインがアップデートされたときとか考えるとやっぱ面倒。
結局テーマの CSS を弄くることにした。
使用中の Atahualpa 3.4.6 テーマは CSS の拡張が自由にできて地味に便利。
以下、修正コード。
.bookmark_entry img{ background: #ffffff; padding: 3px 0; } .bookmark_users img{ background: #ffffff; padding: 3px 0 3px 2px; }
bookmark_entry は、ブックマークボタン用のクラス。
バックグラウンドを白くして、上下に 3px 幅を持たせた。
bookmark_users は、ブックマークとかリツイートされた数用のクラス。
こちらもバックグラウンドを白くして、上下に 3px 幅を持たせた。さらに左に 2px 調整値をいれてみた。
修正後の見た目がこちら。
ずいぶんシュッとしてよい感じになったである。
