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

WordPress › Custom Field Template « WordPress Plugins

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

さて昨日の解答です。

やはり使うのは type = break で div 枠で区切る方法です。

[clear]
type = break
class = clearfix select_multi

こうすることで今まで

<div>
：
<dl><dt>項目名</dt><dd>項目内容1</dd></dl>
<dl><dt>項目名</dt><dd>項目内容2</dd></dl>
<dl><dt>項目名</dt><dd>項目内容3</dd></dl>
：
</div>

といったところだったものを

<div>
：
</div>
<div class="clearfix select_multi">
<dl><dt>項目名</dt><dd>項目内容1</dd></dl>
<dl><dt>項目名</dt><dd>項目内容2</dd></dl>
<dl><dt>項目名</dt><dd>項目内容3</dd></dl>
：
</div>

とすることができます。
あとはこの select_multi にスタイルシートを適用していきます。

.cft .select_multi {
	height: 12em;
	overflow: auto;
}

こんな感じでやってみるとできちゃったりします。
label は label = のようにして空にし、
テンプレートインストラクションに

<script>
jQuery( function(){
	jQuery( '.select_multi' ).before( '<div class="titlename">タイトル名</div>' );
});
</script>

等としてやるといいのではないでしょうか？

WordPress › Custom Field Template « WordPress Plugins

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

HTML の中でデータ入力を行うための form 要素ですが、
text：改行を含まない文字列を入力
textarea：改行を含む文字列を入力
radio：複数のものを一覧しその中から一つ選択
checkbox：複数のものを一覧しその中から複数選択
select：複数の要素の中から一つ選択
file：ファイルをアップロード
image：画像のクリックした座標を送信
button：押したボタン名を送信
があります。
この中で select には multiple オプションがあり、
ctrl キーを押しながら選択することで
複数の選択をさせることができます。

Custom Field Template には select を作る
type = select というのがあるのですが、
残念ながら multiple オプションは実現できません。
ここでどうしてもこれを実現するにはcheckbox 要素を使います。
投稿入力画面でカテゴリー入力の時に使うイメージです。

今回のをヒントとして取り組んでみてください。
答えは後日…（笑）。

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

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

入力を簡単にするのがこの 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 = 円

ということをやれば

約  円

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

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 属性は現時点では使えないようです。

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