パソコンサポートの00H ～社長BLOG～

WordPress › Custom Field Template « WordPress Plugins

ほったらかしにしていたわけではありません。
他に書かないといけないネタが多かったからです。
じゃあ、ネタが切れたから書いてる？
お客さん、鋭いですねぇ～（ぉぃっ）。
（ここまでコピペ）

WordPress の Custom Field Template は
入力画面を定型化かつ簡素化するために有効な方法です。
そんな中で　JavaScript を使いたくなることも少なくありません。
さてこんな時にどうしたものか…ということですが、
実は結構答えは簡単でした。

『設定』→『カスタムフィールドテンプレート』で設定画面に入り
『カスタムフィールドテンプレートオプション』で
実際に設定を記述していくのですが、
その中の『テンプレートインストラクション』というところに

<script>
jQuery( function(){
　：
});
</script>

という感じで記述することで JavaScript を埋め込むことができます。
jQuery を使ったライブラリなんかも使用できるので、
頑張れば結構凝ったこともできます。

WordPress › Custom Field Template « WordPress Plugins

ほったらかしにしていたわけではありません。
他に書かないといけないネタが多かったからです。
じゃあ、ネタが切れたから書いてる？
お客さん、鋭いですねぇ～（ぉぃっ）。
（ここまでコピペ）

昨日はどちらかというとカラムの実現するための
HTML と CSS についてでしたから、
これからは実際の記述に焦点を当てていきます。

昨日の

<div id="left">
　：
</div>
<div id="center">
　：
</div>
<div id="right">
　：
</div>
<div class="clear"></div>

このソースを実現したいのですが id での指定はできません。
class を使ってうまく回避していきましょう。

[foo]
type = break
class = left

[bar]
type = break
class = center

[hoge]
type = break
class = right

[clear]
type = break
class = clear

とやると

</dev>
<div class="left">
</dev>
<div class="center">
</dev>
<div class="right">
</dev>
<div class="clear">

というソースが出力されます。

これを ADMIN CSS を変更することでできるようになります。

.left, .center, .right {
    float: left;
}
.clear {
    clear: both;
}

とこんな感じで。
色々とアレンジの効く技ですので、是非マスターしてください。

WordPress › Custom Field Template « WordPress Plugins

ほったらかしにしていたわけではありません。
他に書かないといけないネタが多かったからです。
じゃあ、ネタが切れたから書いてる？
お客さん、鋭いですねぇ～（ぉぃっ）。
（ここまでコピペ）

今日は昨日の続きで管理画面で複数カラムです。

その前に複数カラムの作り方ってご存知でしょうか？
というかカラムってわかりますか？
例えば、このブログは左にタイトルやカテゴリのリストとか、
右には Twitter やら Amazon へのリンクやらがあります
こういう枠のことをカラムと言います。
昔々はテーブルタグで実現していたのですが、
現在では div タグを使い、スタイルシートで処理する…
というのが構造と見た目を分離するという HTML 4 以降の定番です。

具体的には HTML で

<div id="left">
　：
</div>
<div id="center">
　：
</div>
<div id="right">
　：
</div>

というようなものを作り、CSS 側で

#left, #center, #right {
    float: left;
}

というように作っていくことで 3 カラムを実現していきます。
float: left; を使うと自分自身を左に配置し、
それ以降の要素を右に回り込ませようとします。
その際、自身の高さは親要素に反映されずに破棄されてしまうので
注意してください。
普通は clearfix 等の処理をして回り込みを解除するのですが
Custom Field Template ではこの技は使えません。

先程のコードを、それぞれ

<div id="left">
　：
</div>
<div id="center">
　：
</div>
<div id="right">
　：
</div>
<div class="clear"></div>

#left, #center, #right {
    float: left;
}

.clear {
    clear: both;
}

のようにして実現していきます。

WordPress › Custom Field Template « WordPress Plugins

ほったらかしにしていたわけではありません。
他に書かないといけないネタが多かったからです。
じゃあ、ネタが切れたから書いてる？
お客さん、鋭いですねぇ～（ぉぃっ）。
（ここまでコピペ）

入力を簡単にするのがこの Custom Field Template の役割なら
管理画面にこだわりたいというのが当然です。
他にも同様のものがあるのに、
あえて Custom Field Template を使う目的といえば
管理画面の柔軟な作り込みです。

前回の記事で管理画面の CSS をいじる方法はわかったので、
あとはその CSS をいじるための構文を記述してやるだけ。
要は入力画面を 2 カラム、3 カラム、4 カラム…としてやるには
どうすればいいか？ということです。

通常カラムを実現するには div タグなどでカラムを指定し、
float で回り込ませるのが定番だと思います。
この Custom Field Template の場合、
入力画面全体を div タグで覆っていますが、
この div タグに区切りを入れるのが
この type = break です。
すなわち、実際のところ、Custom Field Template の入力画面は

<div id="cft" class="cft">
　：
</div>

という中に記述されていくのですが、ここに

[clear]
type = break
class = clearfix

こんな感じで記述すると以下のようになります。

<div id="cft" class="cft">
　：
</div>
<div class="clearfix">
　：
</div>

なんとなく見えて来たでしょうか？
続きはまた後程…（笑）。

WordPress › Custom Field Template « WordPress Plugins

ほったらかしにしていたわけではありません。
他に書かないといけないネタが多かったからです。
じゃあ、ネタが切れたから書いてる？
お客さん、鋭いですねぇ～（ぉぃっ）。
（ここまでコピペ）

管理画面の CSS って実はいじれるんです。
Custom Field Template は決まった情報を
簡単に入力するためのものなので、
入力する際のインターフェースが重要です。
この手のプラグインが複数あるのはそれだけ需要があるということでしょう。

私もこれを使うようになってからは
入力側のインターフェースにこだわりをもって
Wordpress の開発を進めています。

管理画面の CSS についてはグローバル設定の下の
『 ADMIN CSS 』の欄で設定をしていくのですが、
現状では " や ‘ はエスケープされてしまい、
正常に使えないようです。
例えば

content : '.';
background-image : url( 'img/image.jpg' );

のようなもの…。

まぁなくてもなんとかなるのでしょうが、
知らないとあれれ？となるので注意が必要です。
特に clearfix 系の時に使いますからね。

WordPress › Custom Field Template « WordPress Plugins

ほったらかしにしていたわけではありません。
他に書かないといけないネタが多かったからです。
じゃあ、ネタが切れたから書いてる？
お客さん、鋭いですねぇ～（ぉぃっ）。
（ここまでコピペ）

Custom Field Template で入力したデータは
カスタムフィールドのデータなので、
表示については普通のものと同じです。

カスタムフィールドの表示は

post_custom( 'key_name' );

で表示できるのでこれを使ってもいいのですが、

function the_cf( $key, $title = "" ) {
	if( $ret = get_cf( $key ) ){
		if( $title ){
			$title .= "：";
		}
		print $title . $ret;
	}
}

function get_cf( $key, $array = false ){
	$cf = post_custom( $key );
	if( $cf ){
		if( !is_array( $cf ) ){
			if( $array ){
				return array( nl2br( $cf ) );
			}else{
				return nl2br( $cf );
			}
		}else{
			sort( $cf );
			if( $array ){
				return $cf;
			}else{
				return implode( ",", $cf );
			}
		}
	}else{
		return false;
	}
}

私はこんな感じで関数化してWordPress の標準関数っぽくして使っています。
ただ将来バッティングしなければいいのですが… (^o^;;;

WordPress › Custom Field Template « WordPress Plugins

さて前回に引き続き Custom Field Template です。
ほったらかしにしていたわけではありません。
他に書かないといけないネタが多かったからです。
じゃあ、ネタが切れたから書いてる？
お客さん、鋭いですねぇ～（ぉぃっ）。

Custom Field Template は前回も書いたように

[name]
label = 店名
type = text
size = 30

のように ini ファイルの設定のように記述していきます。
そのままだとカスタムフィールドのキーは
label の値が使用されますが、グローバル設定の中の
`label`がセットされていて、カスタムフィールドのキーの代わりにラベルを表示したい場合:
にチェックを入れることで [] 内がキーになります。

また before や after で値を設定することで、例えば

[price]
label = 予算
type = text
size = 30
before = 約
after = 円

ということをやれば

約  円

という感じで入力欄が表示されます。
結構凝った入力欄ができそうな気がしませんか？

Flexible Upload 日本語化ファイル

Flexible Upload は WordPress にアップロードする際に
あまり大きな画像ファイルをアップロードしないように
制限するためのプラグインです。
お客様にいちいち『○○○ × ○○○以上の画像を
アップロードしないで下さい』という時に便利です。

ただ、標準では日本語対応していないので、
一所懸命日本語化してみました。
多少英語力があれば問題ないのかもしれませんが、
管理画面に英語があると…というお客様も多いはず。
そんな時に、是非ご活用下さい。

上記のリンクをクリックしてもらうと
zip ファイルがダウンロードされますが、
それを解凍してできる二つのファイルを、
インストールフォルダ/wp-content/plugins/flexible-upload/languages/
の中にコピーして下さい。
これだけで管理画面が日本語化されるはずです。

WordPress › Custom Field Template « WordPress Plugins

WordPress はプラグインで色々と機能拡張を行っていく事が可能です。
オープンソースならではの『みんな持ち寄り』といった雰囲気が
WordPress を盛り上げてくれていると感じます。

さて Custom Field Template もその一つで、
WordPress で定型の値を入れる時等に非常に便利なものです。
しかし一方でドキュメントが極端に少なかったりするので
設定で悩む事もしばしば…。

00H で WordPress のカスタマイズをしていく上で得たノウハウを
少しずつでも公開していければと思います。
我々にできるコミュニティへの恩返しですね。

Custom Field Template のフィールドの定義等は、
基本的にテキストベースの設定ファイルを編集する事で行いますが、
この際につまづく方もしばしばではないでしょうか？

設定方法は一つではないのであくまで設定例の一つとして考えて下さい。

[name]
label = 店名
type = text
size = 30

普段はこんな感じで定義して下さい。
最低限の定義は label とtype だけです。
type は text や checkbox 、radio 、select 等の
おなじみの form タグのものが使えます。
一応プラグインの中身を解析してみたのですが
select の multiple 属性は現時点では使えないようです。

とまぁこんな感じで、ネタがなくなった時に書いていきますので、
コメント欄などで質問していただくなどすれば、
書きやすくなるかと思いますのでよろしくお願いします。

以前書いた内容に近いのですが
WordPress 等をローカル環境で利用する時に、
WindowsVista や 7 ではその構築の方法が違います。

WordPress のインストール画面で、
データベースの設定をする際に
『データベースのホスト名』という欄にある
localhost のままでインストールを進めると
画面も真っ白、頭も真っ白…になってしまいます。

実はこの部分、Vista 以降については、
この部分を前回同様 127.0.0.1 に変更してください。
その他の Web アプリでもこの辺りは同様になると思います。