使用するにはWordpress.comに登録してAPI Keyを取得する必要があります。

明日どうなってるか。別ブログで試していますが、今のところ完璧にガードしてます。

せっかく作成したPluginなので、WordpressのPluginディレクトリに公開したいと思います。
WordPress.orgのプラグインディレクトリに自作プラグインを登録する方法に詳しく書かれているのでそのままやってみます。

WordPress.orgのアカウントを取得する

http://wordpress.org/support/register.phpからアカウントを取得します。
ユーザ名、emailが必須なのでそれを入力します。
Wordpress.comのアカウントと同じなのかと思ったら違うものなので注意。

プラグインの登録申請を出す

http://wordpress.org/extend/plugins/add/

プラグイン名、プラグイン説明を記入して待ちます。
今回は、２日位で返事が来ました。

SVNからチェックアウト

SVNクライアントならEclipseのPluginでもいいとは思いますが、SubversionのクライアントはTortoiseSVNが一番操作性がいいです。
登録申請の返事に記載のある、Subversionのリポジトリをローカルの作業フォルダにチェックアウトします。
チェックアウトすると「trunk」「branches」「tags」フォルダがチェックアウトされるので（ちょうどちょっと前に書いた記事が役に立った）

readme.txtの準備

これが一番大変でした。
英語部分は翻訳サイトのやつでもとりあえず大丈夫だとは思いますが、Donate linkでPayPalを色々調べていたら時間がかかってしまいました。

Wordpress.orgリポジトリにコミット

readme.txtとプラグインのファイル（my-css-editor.php）をtrunkに保存してコミットします。
コミットの際にWordpress.orgアカウントが必要になってきます。

タグ付け

現在のバージョン名でタグ付をします。今回は0.2なので、tags/フォルダを選択状態でTortoiseSVNのBranch/Tagを選び、先URLを「tags/0.2」にしてOKを押します。

確認

タグ付してからしばらくすると
http://wordpress.org/extend/plugins/browse/updated/

に表示されていました。
URLは「http://wordpress.org/extend/plugins/my-css-editor/」です。
なんだか嬉しい。英語は大丈夫だろうか。
次は更新時の方法を記載したいと思います。

前回は管理画面で表示できるまでが出来ましたが、その設定値はどこに保存するか？というのが問題です。

Creating Options Pagesを見ると、すごく簡単そう。
WordPress MUでも、ブログ毎に設定が保存されるようなので、これが使えそうです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

function wp_head() {		
	echo "\n<!-- My CSS Editor $this->version -->\n";
	if( get_option($this->option_name) ){
		echo '<style type="text/css">';
		echo '<--';
		echo get_option($this->option_name);
		echo '-->';
		echo '</style>';
	}
}
 
function edit_setting() {
	if ( isset($_POST['action']) && $_POST['action'] == 'update' ){
		update_option($this->option_name, $_POST['css_value']);
		echo '<div id="message" class="updated fade"><p><strong>Your Style Sheet was preserved. </strong></p></div>';
	}elseif(isset($_POST['action']) && $_POST['action'] == 'delete'){
		delete_option($this->option_name);
		echo '<div id="message" class="updated fade"><p><strong>Your Style Sheet setting was deleted. </strong></p></div>';
	}
	echo '<div class="wrap">';
	echo '<h2>Edit of your Style Sheet</h2>';
	echo '<form>option_name}\"",  ' action="'.$_SERVER['REQUEST_URI'].'" method="post">';
	wp_nonce_field('update-options');
	echo '<table class="form-table">';
 
	echo '<p>Your Style Sheet setting can be made by editing the text area. <br />';
	echo 'The setting can be deleted with the delete button. </p>';
	echo '<tr valign="top">';
	echo '<th scope="row">$this->option_name</th>';
	echo '<td>';
	echo '<textarea name="css_value">';
 
	if($settings = get_option($this->option_name)){
		echo $settings;
	}else{
		;
	}
 
	echo '</textarea>';
 
	echo '</td>';
	echo '</tr>';
	echo '</table>';
	echo "function delete_setting(){alert('delete?');document.getElementById('action').value='delete';document.getElementById('{$this->option_name}').submit();}";
	echo '';
	echo '<p> </p>';
	echo '<p> </p>';
	echo '</form>';
	echo '</div>';
}

コード書いてもちょっと見難いのですが、
名前を「My CSS Editor」に変更しました。
wp_head()関数では、$this->option_nameでオプションを取得して表示させています。（option_nameというインスタンス変数にオプション名を持たせています）
edit_setting()関数では、つまりは、actionというhiddenの値で、updateとdeleteを切り替えています。
メッセージはプラグインを公開するためにとりあえず英語にしました。
あとは、国際化とWordpress.comに公開することです。

色々調べて、「ユーザー」-（自分の名前）から、「ビジュアルリッチエディタを使用しない」にはチェックしてみたのですが、依然iframeが消えてしまいます。

しょうがないので、Embed Iframeというプラグインをインストールしてみた。
いちいち書き換えないといけないけど動作は良好です。
ちなみに、以下の感じで書きます。

[iframe url width height]

そのまんまですが、urlやwidth等にクオーテーションをつけるとおかしくなるのでつけないで書きます。
他のPluginはAPI Keyがいるそうなので、これで我慢するしかないですね。

の続きです。（・・・の続きが多いな～。こういうサブカテゴリ的なもののページャも欲しいです。）

前回は、とりあえずプラグインを有効化したらページのヘッダにコメントが挿入されるまでを確認しました。
今度は、そのプラグインの編集が出来る画面を管理画面に入れたいと思います。

WordPress2.7以降では、左に管理メニューが表示されており、

• ダッシュボード
• サイト管理
• 投稿
• 外観
• プラグイン
• 設定

WordPress管理メニュー

等がありますが、色々なプラグインを見ると、「設定」メニューにプラグインの設定を入れているものが多いので、ここにaddMyCSSプラグインの設定画面を作ることにします。
Adding Administration Menusを見ると以下のように記載があり

parent
サブメニューを挿入したいトップレベルメニューを提供するWordPressのコアadminファイル名。プラグインがトップレベルメニューをなしている場合は、そのプラグインファイル。
よくある例:

1. 投稿用: add_submenu_page(’post-new.php’,…)
2. 管理用: add_submenu_page(’edit.php’,…)
3. 外観用: add_submenu_page(’themes.php’,…)
4. コメント用: add_submenu_page(’edit-comments.php’,…)
5. 設定用: add_submenu_page(’options-general.php’,…)
6. プラグイン用: add_submenu_page(’plugins.php’,…)
7. ユーザ用: add_submenu_page(’users.php’,…)

とあるので、設定用に以下コードを追加しました。

<?php
 class Add_My_CSS {
 
 	var $version = "0.1";
 
	function Add_My_CSS(){}
 
	function wp_head() {		
		echo "\n<!-- add_my_css $this->version -->\n";
	}
	/* 今回追加した */
	function edit_setting() {
		echo '<div class="wrap">';
		echo '<p>設定用のフォームが表示されるところ</p>';
		echo '</div>';}
	/* 今回追加した */
	function amc_admin() {
	  if (function_exists('add_options_page')) {
	    add_options_page('Add My CSS' /* page title */, 
	                     'Add My CSS' /* menu title */, 
	                     8 /* min. user level */, 
	                     basename(__FILE__) /* php file */ , 
	                     array($this, 'edit_setting') /* function for subpanel */);
	  }
}
$_add_my_css = new Add_My_CSS();
add_action('wp_head', array($_add_my_css, 'wp_head'));
/* 今回追加した */
add_action('admin_menu',  array($_add_my_css, 'amc_admin'));
?>

これでとりあえず、管理画面に追加は出来ました。
今回気づいたのですが、ファイルをそのブログの文字コード（ここはUTF-8）に合わせて作成しておくことを忘れずに。日本語なら化けます。

WordPressのプラグイン作成は初めてなので、まず理解しておくことがたくさんあります。

WordPress プラグイン作成時のノウハウ – 前編にわかりやすいように記事がありましたので、それにならって作成したいと思います。

とりあえず作ればよいファイルは、wp-content/pluginsに作るディレクトリ、メイン処理のphpファイルを作ります。
今回は、自分のスタイルシートを追加したいということにして、add-my-cssという名前にしました。add-my-cssディレクトリの中にadd-my-css.phpファイルを作成します。

作成したら中身を考えますが、何も考えずに入れれるのはWordpress標準ヘッダとライセンス事項です。(ここ参照)

こんな感じで

<?php
 
/*
Plugin Name: Add My CSS
Plugin URI: http://blog.4sure.jp/yokoshima/
Description: My Style Sheet is inserted in the header.
Version: 0.1
Author: yokoshima
Author URI:  http://blog.4sure.jp/yokoshima/
*/
/*  Copyright 2009 yokoshima (email : k.yokoshima@4sure.co.jp:)
 
    This program is free software; you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation; either version 2 of the License, or
    (at your option) any later version.
 
    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.
 
    You should have received a copy of the GNU General Public License
    along with this program; if not, write to the Free Software
    Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
*/

次に、ちょっと謎の言葉である「フック」ですが、これはWordPressがある処理を行うところを定義しておき、そのタイミングで実行させることを定義しておくものです。
今回の場合、Wordpressがheaderを出力するタイミングでスタイルシート定義を出力したいので、アクションフックの「wp_head」がいいタイミングです。
とりあえずは見よう見まねで、クラスの作成と、アクションフックの登録だけ記載しました。
いかが現時点のソースです。
ヘッダ内に<!– add_my_css 0.1 –>と表示されれば今回はＯＫです。

<?php
 
/*
Plugin Name: Add My CSS
Plugin URI: http://blog.4sure.jp/yokoshima/
Description: My Style Sheet is inserted in the header.
Version: 0.1
Author: yokoshima
Author URI:  http://blog.4sure.jp/yokoshima/
*/
/*  Copyright 2009 yokoshima (email : k.yokoshima@4sure.co.jp:)
 
    This program is free software; you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation; either version 2 of the License, or
    (at your option) any later version.
 
    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.
 
    You should have received a copy of the GNU General Public License
    along with this program; if not, write to the Free Software
    Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA  02110-1301  USA
*/
 class Add_My_CSS {
 
        var $version = "0.1";
 
        function Add_My_CSS(){}
 
        function wp_head() {
                echo "\n<!-- add_my_css $this->version -->\n";
        }
}
 
$_add_my_css = new Add_My_CSS();
add_action('wp_head', array($_add_my_css, 'wp_head'));
 
?>

これで、プラグインを有効にすると、<!– add_my_css 0.1 –>と表示されました。
結構簡単にできちゃうんじゃないかな？

その後、そのTableにあてるStyleSheetを編集できるPluginがないかといろいろ探していたのですが、なかなかいいのがありません。
以下のは試してみたのですが・・・。

WordPress MU用CSS編集プラグイン

→入れてみたのですが、Chromeでは初期化が出来ないようでした。もともとのテーマのcssをそのままコピーして保存したのですが、なぜかスタイルシートが全然適用されない状態に。
phpにデータを保存しているようなので、無効化するのにちょっと苦労しました。

cssやJavaScriptをヘッダに追加するプラグイン(WordPress)

→これが一番良さそうだけどなーと思ったのですが、入れてみたあと考えたのは書きたい記事のcssは一度きりじゃなくて多少使いまわしたい感じだったのでやめました。

多分こういうのが欲しいのですけど、WordPress.comの初めての有料サービスだそうなので、誰も作らなさそう。
自作してみるかな？

ちょっと調べてみたら
WordPress のビジュアルエディタでテーブル（表組み）の行を複製したり削除したりする方法。で詳しく説明されているのがあったのでTinyMCE Advancedをインストールしてみました。

今使用しているWordPressのバージョンがなんだかわからないので、とりあえず最新を入れとけばいいだろ、と思って

Version 3.2.4を入れてみたのですが、

This plugin requires WordPress version 2.8 or newer. Please upgrade your WordPress installation or download an older version of the plugin.

と、つまりWordPress2.8以降にしか対応していないので、対応するバージョンを入れろということ。

WordPressのバージョンを確認したいが、現在使用しているのはWordPress MU 2.7.1ということは分かるが、

本家では何になるのだろう？どうやって確認するのか調べたらwp-includes/version.phpを見れば良いらしい。

<?php
/**
* This holds the version number in a separate file so we can bump it without cluttering the SVN
*/
 
/**
* The WordPress version string
*
* @global string $wp_version
*/
 
$wp_version = '2.7.1';
 
/**
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
*
* @global int $wp_db_version
*/
 
$wp_db_version = 9872;
$wpmu_version = '2.7.1';
 
?>

これで本家のほうも2.7.1ということが分かりましたので、対応するVersion 3.2を入れてみました。

うまく入ったので、試してみます。

レイヤーも入る。

ただ、色指定とかはスタイルシートをいちいち指定する必要があるのかな？
今日はWP-Syntaxのプラグインのエラーにハマったのでまた今度調べることにします。

Warning: preg_match() [function.preg-match]: Compilation failed: unrecognized character after (?< at offset 3 in ${WP-HOME}/wp-content/plugins/wp-syntax/geshi/geshi.php on line 2132

WP-Syntaxプラグインを使用してphpのコードを乗せようとするとエラーになるらしい。
色々探して以下のページにたどりついた。

Fixing Geshi on line 2132
Version 0.9.4にダウングレード（現在使用しているのは0.9.6）するしかないらしい。

まだリリースは先だろうな。バージョンを下げておこう。

普通にWebサイトをブラウズしている場合は、最終的にHTMLをブラウザが解析して人間が中身を見るので問題ないのですが、Webサイトのシステム構造上、まったく同じ内容を別のURLで表示させることがあります。

検索エンジン3社、正しいサイトURLを認識させるcanonical属性を導入（URLの正規化）

を引用すると

SONYのデジカメ「cyber-shot T700」の商品詳細ページが、(1) ブランド「デジカメ」カテゴリ、(2) ブランド「cyber-shot」カテゴリ、それぞれの直下に、コンテンツが全く同一（重複）ながら異なるURLで作成されたとしよう（こういうECサイトは結構ある）。この場合、商品詳細ページ「T700」が2ページ作成されることになるが、検索エンジンはどちらのページをインデックスすればいいのか判断ができない。

前述のように、内容だけを見る場合はURLなんてどうでも良いが、検索エンジンのクローラが同じようなページに遭遇して「結局どれが本当なのよ？」とはなかなか結論が出ませんので、結局すべてのサイトを別サイトとして認識します。
結果、検索エンジンの表示順位に影響を与えてしまい、たとえば同じキーワードでの検索で同内容で別URLとして表示されてしまったりします。もっと悪いことにそのページ自体の順位が落ちてしまうことも考えられます。

そこでGoogle, Yahoo, Mictosoftでそんな場合の標準を決めたそうです。
ページの<head>～</head>内に以下引用の記述で最適なURLを記載します。

<link rel="canonical" href="http://mysite.com"/>

ここで指定したhref要素の記述を参考に、検索エンジンが「結局どれなのよ？」というのを決めます。
この場合の別URLの内容は、完全に同じでなくてもよいようで、動的に出力するようなWebサイトの場合（というかこんなのを使うところは動的なサイトでしょう）には便利でしょう。

Word PressのプラグインにもCanonical URL’s for WordPressというのがあったので早速入れてみました。