Month: 9月 2014

はじめに

タイトルの日本語が果てしなくわかりづらいですね。
ごめんなさい。国語の偏差値２ですので、ご了承ください(´；ω；｀)ｳｯ…

さて、お仕事で
カスタムフィールドを未入力のまま登録されると、デザインが崩れてしまっておりました。
そのための対応方法です。

まずは仕様を確認

例えば、
「果物：りんご」の「りんご」の部分がカスタムフィールドの場合
「果物：　　　」と表示するか、「果物：」の行すら出力しないかってことです。

１.未入力時に項目ごとOFFするかどうか

「（行すら出ない）」のパターンですね。
未入力の場合は・・・・
「if文」ですね。きたーーー！！！！苦手なif文だ！！
まずは、参考サイトがないかググってみる。
ありました。

WordPress｜カスタムフィールドで値無記入の場合、項目非表示。

フリーランスWEBデザイナーの仕事

<?php if(get_post_meta($post->ID,'wpcf-fruit',true)): ?>
<div class="fruit">果物：<?php echo get_post_meta($post->ID,'wpcf-fruit',true); ?></div>
<?php endif; ?>

なるほど。タグごとif文で囲ってしまえばいいんですね。

2.未入力時は項目は残して出力する

「果物：　　　」のパターンですね。

基本的にこういった場合２パターンあると考えられます。

• 「& nbsp;（←余白は抜いて記載）」を入れる
• CSSでどうにかする

min-heightを指定すればデザインが崩れずにいけるかなと思った私は、
デザイナーさんに確認してみました。

すると
「height系で調整の場合、ブラウザでフォントサイズを大きくされると崩れる危険がある」
とのことでした。

なーるーほーど！！！！

なので、
「「& nbsp;（←余白は抜いて記載）」を入れる」で処理することにします。

コードは

<?php if(post_custom('fruit')): ?>
	<li><?php echo post_custom('fruit'); ?></li>
<?php else: ?>
	<li><?php echo '&nbsp;'; ?></li>
<?php endif; ?>

ん?post_costomとは？

コピペしていると何気なく使っちゃってるんですよね。
日本語CODEXではヒットしないようです。

指定したキーに対して入力した値が1つだけの場合
参考サイト→カスタムフィールドの指定したキーの値だけ表示する方法

に使えるようなので、get_post_metaで書きなおしましょう。

<?php if(get_post_meta('fruit')): ?>
	<li><?php echo get_post_meta('fruit'); ?></li>
<?php else: ?>
	<li><?php echo '&nbsp;'; ?></li>
<?php endif; ?>

ですね。

最後に

 

↑をそのまま表示できなくて（空白になる）苦戦してしまった・・・
結局あきらめて、＆の後に半角スペースいれました(´；ω；｀)ｳｯ…

はじめに

改行がうまく反映されずにぐぐっていたらドンピシャな記事がありましたので
リンク貼りますね。

WordPressでカスタムフィールドの改行を反映して表示させる

まちいろ

改行にはPHPの関数「nl2br」

PHPを全く知らずに入ったものからすると、当たり前ですが、初耳〜
そもそもなんて読むの？と思ったらあるもんですね。

えぬえるつーびーあーる
nlはnewlinesの略、brはbr要素(break)。

読み方プロトコル

<?php echo nl2br(get_post_meta($post->ID,'フィールド名',true)); ?>

とはいえ簡単で、これだけでちゃんと表示されます。

ただ、エスケープ処理がされていない！！

エスケープ処理をどこに入れるかが問題

初心者の私からすれば、エスケープ処理自体まだなれない。
そんなこと言ったら、カスタムフィールドすらまだ慣れてない笑

そこにさらに、改行のコードが入る〜〜〜！！！
PHPってそもそもどうやって書くのーーーー！！！！！！！！！

私「なんていうか、どんどんコードが入れ子になるんですけど(´；ω；｀)ｳｯ…」
先輩「PHPの文法自体は問題ないっす！！！」

とのことでしたので。

<?php echo nl2br(esc_html(get_post_meta($post->ID,'フィールド名',true))); ?>

でOKです！

改行とエスケープ処理を入れ替えると

<br /> <br /> 

が表示されちゃいますので、順番が大事です！

はじめに

お仕事でシングルテンプレート作成中につまづきました。
ちなみにやりたいことは、カスタムフィールドを簡単に作ることができるプラグイン「Types」で作った
カスタムフィールドの日付を表示したい。

例：開始日：2014/05/21(date_s) ~ 終了日：2014/8/31（date_e）
　↑日付部分をカスタムフィールド(カッコ内がスラグ名)で作成中

日付がうまく表示できない

そこでせんぱーーい！！！

カスタムフィールドの日付表示方法

1970-01-01 00:00:00からの秒数を表す値 = Timestamp値が入ってます

そもそも、Typesで作成したカスタムフィールドの日付にはTimestamp値が入っているらしい。

(デジタル・)タイムスタンプってなんだ？

コンピュータやデジタルカメラ等の電子機器にて記録されるタイムスタンプ（他との区別のため「デジタル・タイムスタンプ」 英: Digital timestampとも呼ばれる[2]。）は出来事（イベント）が発生した時刻そのものを指すのではなく、コンピュータにイベントが記録された時刻を指す。多くの場合、その違いは重要ではない。タイムスタンプによりイベントが記録された時刻（例: ログ書き込み時刻）と記録されたイベントの発生時刻の差は極めて0に近づくべきである。

中略

タイムスタンプは次の意味でも使われる。
UNIX時間。1970年1月1日00:00:00 UTCからの経過秒数。プログラミングにおいてはこちらをさすことが多い。

タイムスタンプ – Wikipedia

ふむふむ。

なので基本としては、以下でよい。（Typsで作成したフィールドは先頭に「wpcf-」をつける）

$date_s = get_post_meta($post->ID, 'wpcf-date_s', true);
$start = date('Y年m月d日', $date_s);
echo $start;

ですが、

PHPはわりと最近のアップデートで「タイムゾーンを明示的に設定しておかないといけません」という仕様になりました。

とのことで、以下が正解になります。

date_default_timezone_set('Asia/Tokyo');
$date_s = get_post_meta($post->ID, 'wpcf-date_s', true);
$start = date('Y年m月d日', $date_s);
echo $start;

なるほど。

そして、そのままそれを私は利用したかというと、しなかったんです←ｵｲｯ
ググってでてきた「Types Fields API」の「types_render_field」を利用したんです。

ところが・・・
時刻がずれる可能性もあるかも？というこで利用をやめました。
そして続きが。

Warning: date() expects parameter 2 to be long, string given

こんな警告がでたとのこと。
和訳：「date()関数の第2引数はlong（長精度整数型）が求められていますが、string（文字列型）が渡されました」

2行目で、wpcf-date_sカスタムフィールドから値を取得した時に、値が入力されていれば日付を表す数値が入っています。
が、「なにも入力されていない」という場合もあり得るので、3行目でそのままdate()に渡してしまうと、「空の文字列」が渡されることになって先の警告が出るとのこと。

プログラミングでは、「例外処理」といって、
「入力してくれることを期待しているけれど、入力してくれないかもしれない」とか、
「数値を入れてくれるはずだけど、文字が入っているかもしれない」とか、
期待していないデータが渡ってくるケースのことも考える必要があります。

一般的に、期間を表すときは、

・「$date_s」に値が入っていなかったら、日付は空欄にする。
・調査期間の開始日がなくて終了日だけ入っている場合も空欄にする。
・開始日〜終了日の「〜」だけ表示されてたらおかしいので、開始日がなければ「〜」も表示しない。

といったルールが多いそうです。
ということで、以下になりました。

$date_s = get_post_meta($post->ID, 'wpcf-date_s', true);
$date_e = get_post_meta($post->ID, 'wpcf-date_e', true);

if ($date_s) {
	$start = date("Y年m月d日 h:i:s", $date_s);
	$end = date("Y年m月d日 h:i:s", $date_e);
	echo $start . '〜' . $end;
}

へぇ〜〜〜！！なんか、すごいなぁ。

参考にしたサイト

「Types」プラグインが便利（2）カスタムフィールド – IMAGINATION DESIGN