WordPressプラグイン”EnhancingCSS”をリリース

add_filter('mce_css', 'add_custom_editor_style');

function add_custom_editor_style($css) {
  $files = preg_split("/,/", $css);
  $files[] = '/path/to/style.css';
  $files = array_map('trim', $files);
  return join(",", $files);
}

/path/to/style.css の部分が追加したいCSSまでのURL。
このファイル内にエディターに適用したいCSSを記述すると、ビジュアルリッチエディターに反映される。

以下の部分はいらないと思うんだけど、念のため。

$files = array_map('trim', $files);

参考

WordPressのカスタム背景を任意の要素に指定する

Posted on 2010 年 9 月 7 日 by miya

WordPress 3.0から追加された機能のひとつにカスタム背景というサイトの背景を管理画面から変更するための機能がある。

この機能を有効にした際に表示される背景の設定画面はとてもよくできていて、background-position や background-repeat も簡単なチェックボックスで設定できるので、ぜひ有効にしたい。

使い方

使い方は非常に簡単。

デフォルトのページの背景を style.css 等で body 要素に定義しておく。
テーマファイルの functions.php に、add_custom_background(); という行を追加しておく。

以上で、以下のような管理画面が表示され、背景の設定が可能になる。

body 要素以外に適用するには？

今回、私たちが作成中のサイトでは、ページの上部にバーが表示されるため body 要素に背景を指定するには不都合が色々とあった。

そんな場合には、以下のようにコールバック関数を定義して、コールバック関数側で指定する要素を変えてやればいい。

add_custom_background('custom_background_callback');

上記の例では、custom_background_callback というのがコールバック関数の関数名になる。

あとは、以下のようにコールバック関数を用意して、そちらで任意の要素（以下の例では #wrap）に対して背景のスタイルを指定する。

function custom_background_callback() {
  $background = get_background_image();
  $color = get_background_color();
  if ( ! $background && ! $color )
    return;

  $style = $color ? "background-color: #$color;" : ''; 

  if ( $background ) {
    $image = " background-image: url('$background');";

    $repeat = get_theme_mod( 'background_repeat', 'repeat' );
    $bg_repeat = array('no-repeat', 'repeat-x', 'repeat-y', 'repeat');
    if (!in_array($repeat, $bg_repeat))
      $repeat = 'repeat';

    $repeat = " background-repeat: $repeat;";

    $position = get_theme_mod( 'background_position_x', 'left' );
    if ( ! in_array( $position, array( 'center', 'right', 'left' ) ) )
        $position = 'left';
    $position = " background-position: top $position;";

    $attachment = get_theme_mod( 'background_attachment', 'scroll' );
    if ( ! in_array( $attachment, array( 'fixed', 'scroll' ) ) )
        $attachment = 'scroll';
    $attachment = " background-attachment: $attachment;";

    $style .= $image . $repeat . $position . $attachment;
  }

  echo "<style type=\"text/css\">\n";
  echo "#wrap {\n";
  echo trim( $style )."\n";
  echo "}\n";
  echo "</style>\n";
}

ちなみに、この関数のソースの元ネタは wp-includes/theme.php にある _custom_background_cb() という関数。

参考

mce_table がアドバンストツールバーを上書きする不具合を修正しました。

Posted on 2010 年 9 月 6 日 by miya

本日公開したばかりで、早速の不具合ですいません。

ビジュアルリッチエディタにテーブル編集用のボタンを追加するプラグイン

上記のプラグインを適用すると既存のアドバンストツールバーが消えてしまうという不具合がありました。
うっかりミスです。すいません。

早速修正しておきましたので、もしすでにご利用中の方はすいませんがインストールしなおしてください。

修正前

既存のアドバンストツールバーがない！

修正後

アドバンストツールバーの下段にtable関連のボタンが追加される。

WordPressのTinyMCEにテーブルのボタン

Posted on 2010 年 9 月 6 日 by miya

WordPress のビジュアルリッチエディターにテーブルを編集するためのボタンを追加するプラグインを作った。

ビジュアルリッチエディタにテーブル編集用のボタンを追加するプラグイン

最近、WordPress サイトばかりつくっていて、プラグインやらテーマやらを量産しているので、しばらくこういうコネタのプラグインの公開が続くと思います。

カスタムなCSSを生成するプラグイン（外部CSSですが物理的にファイルをおくわけではありません。）
リッチエディター上でボタンでポンでテンプレートを挿入したり作ったりできるプラグイン
（たとえば納入事例など、一定のレイアウトで記事を書きたい時に便利なやつ）

以上は、この数日中ではないかと。。。

WordPressでローカルナビゲーションを表示するプラグインを作った。

Posted on 2010 年 9 月 3 日 by miya

WordPressで以下のような感じのローカルナビゲーションを表示するためのサイドバーウィジェットを追加するプラグインをつくった。

firegoby » WordPressでローカルナビゲーションを表示するプラグイン

ウィジェットの管理画面はこんな感じ。

WordPress で整形済みテキストを簡単に入力するプラグイン

Posted on 2010 年 8 月 29 日 by miya

毎回、あんまりにもめんどくさかったので、WordPress の本文内に HTML や PHP のソースを簡単に入力するためのプラグインを作った。

WordPressで整形済みテキストを挿入するtinyMCE用プラグイン

このプラグインを使うと、以下のようにポップアップ内にソースを入力すれば、HTML エスケープして <pre> で囲んで、本文内に挿入してくれます。

WordPressのtinyMCEにプラグインを追加するためのクラス

Posted on 2010 年 8 月 28 日 by miya

WordPress のビジュアルリッチエディター（tinyMCE）に独自のボタンを追加する機会が多いので、それを容易にするためのクラスをつくった。

このクラスは WordPress プラグインではなく、WordPress プラグインを制作するときに使用するためのクラスです。

目的

WordPress のビジュアルリッチエディターでは、tinyMCE というJavaScript のライブラリを使用しているが、本家の tinyMCE では WordPress に実装されている機能よりはるかに多くの機能がプラグインとして配布されている。

これらの全てを実装することは、サポートや使い勝手の面でベターとは思わないが、いくつかの機能を追加したいと感じることは多い。

そこで、これらの tinyMCE プラグインを追加しやすくするためのクラスをつくった。

仕様

WordPress の tinyMCE にプラグインを追加するには、WordPress 側のプラグインで以下のアクションフィルターを使用する。

mce_external_plugins
mce_external_languages
tiny_mce_before_init
mce_buttons

このクラスでは、最大５つのパラメータをコンストラクタの引数に渡すことで、これらのアクションフィルターを定義する。

ダウンロード

使い方

以下のような感じで使用する。

WordPress プラグインを作成するためのPHPファイル、ディレクトリを作成する。
プラグインディレクトリ内に任意のtinyMCEプラグインを設置する。
WordPress プラグイン側で後述のように、コンストラクタを起動する。

コンストラクタ

new mcePlugins(......)

引数には以下の項目を設定する。

$plugin_name : プラグインの名前
$plugin_url : tinyMCE プラグインのeditor_plugin.js までのURL
$lang_path : 言語ファイルまでのパス
$button_callback : tinyMCEにボタンを追加するためのコールバック関数
$inits : tinyMCE の動作設定を行うための配列

上記の個々の項目の詳細については、ご自身で調べまくってください。

このサイト上でも、今後、すこしずつご紹介していきます。

Mac（Snow Leopard）でWeb開発環境

Posted on 2010 年 8 月 27 日 by miya

今回の記事は、Mac で Apache + MySQL + PHP の環境を作る方法について。

簡単に環境を作りたい場合は、MAMP という選択肢もありかもしれないが、個人的には以下の理由で好きではない。

多様な本番環境に設定を合わせられるほど柔軟じゃない。
無駄な学習コストが発生するように思える。
特定のプラットホームやパッケージへの依存度を減らしておきたい。

と、余談はさておき、Mac を使用した開発環境の構築。

以下は、かなり私の独断と偏見。
あと、あくまでも開発環境を前提としており、本番環境を前提としていない。

Apache の設定

Apache の設定は、意外と簡単。
Webmin や MAMP などのGUI からはさっさと卒業しましょう。

ユーザー、グループの変更

たとえば、PHPやCGIからファイルに書き込みをしたりする際に、対象となるファイルやディレクトリにパーミッションを 707 などとしておく必要があると思うが、開発環境ではこの作業は面倒なので、私はApache のユーザーそのものをかえている。

こうしておくことで、パーミッションの変更が不要になり、たとえば WordPress では自動アップグレードも動作するようになる。

/etc/apache2/httpd.conf の128行目付近の以下の行を変更

User foo
Group staff

User に指定する foo の部分は Mac にログインする際のユーザー名。
Group の値は、staff でいいとおもう。

この設定をしておけば、Mac のファインダー上で作成したファイルやディレクトリと同じユーザー、グループで Apache が動作するので何かと便利になる。（SuExec に近いイメージ？）

念のため、以下のディレクトリのオーナーを変更しておく。
（foo の部分は置き換えて！）

sudo chown -R foo:staff /Library/WebServer

バーチャルホストの設定

バーチャルホストを設定すれば複数のサイトを構築でき、設定もサイト毎に可能なので、レンタルサーバーなどの設定に柔軟にあわせることができる。

開発環境のバーチャルホストでは、ポートベースのバーチャルホストが簡単で手っ取り早い。

以下のサンプルは、ポート番号 9001 のバーチャルホストの例。

まずは、バーチャルホスト用のディレクトリを作成する。

mkdir /Library/WebServer/vhost9001

このソースをコピペして、例えば “9001.conf” のようなファイル名で /etc/apache2/other 以下に設置するとポート 9001 のバーチャルホストができあがる。

NameVirtualHost *:9001
Listen 9001
<VirtualHost *:9001>
    DocumentRoot "/Library/WebServer/vhost9001"
    <Directory "/Library/WebServer/vhost9001">
        Options All
        AllowOverride All
        Order deny,allow
        Allow from all
    </Directory>
</VirtualHost>

確認するには、ブラウザで、http://127.0.0.1:9001/ にアクセスする。
あくまでも開発環境なので、とりあえず Options とか AllowOverride の値は気にしない（笑）

もし、違うポート番号のバーチャルホストを追加するには、上記のソースを違うファイルにコピーして、 9001 を 9002 等に変更すればOK。

MySQLのインストール

これは、もっと簡単。
本家で Mac 用のバイナリが配布されているので、それをインストールする。

MySQL :: Download MySQL Community Server

たくさんあって分かりにくいかもしれないが、使用している OS の.dmg をダウンロードすれば、インストーラーでインストールでき、システム環境設定で起動停止や自動起動の設定も行える。

ユーザーやパスワードの設定は臨機応変に。
データベース名も含めて単純に本番環境に合わせるのがいいと思う。

PHP の設定

Mac では PHP はプリインストールで、Snow Leopard にインストールされているバージョンの PHP は日本語にも対応しているので特に変更する必要はない。

が、もし変更する場合は、以下のように .htaccess で変更するのがオススメ。

php_value display_errors 1

こうすることで、多様な本番環境に柔軟に合わせることができる。

firegoby

WordPress Plugins & Tips

Tag Archives: PHP