パソコンサポートの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

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

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

その前に複数カラムの作り方ってご存知でしょうか？
というかカラムってわかりますか？
例えば、このブログは左にタイトルやカテゴリのリストとか、
右には 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/
の中にコピーして下さい。
これだけで管理画面が日本語化されるはずです。