本サイトで参考にしたデザイン&CSSのWEBサイト&本

作りたいものは中身でデザインは簡単に

これでも一応プログラマ志望というか、プログラマ・・・なので、
デザインに時間をかけるよりも、本業の勉強に時間をかけたい。
なので、今は?コピペでもよいからとにかく早くサイトを作りたい!

という思いから作成しました。

下記、まとめです。

ナビゲーションや記事の枠組みデザインCSSはCSSデザイン集から!

こちらには大変お世話になりました。
使える素材が沢山載っています。

背景画像はsubtlepatterns.comより

LIGさんの記事「これが無料!?背景画像のフリー素材配布サイト 14選」で見つけた
Subtle Patternsというサイト。
沢山種類があってオシャレ!

「時計マーク」や「タグアイコン」等アイコンフォントはFont Awesomeから

リンク先を貼れば、ダウンロードしなくても使えるというのがとても便利なFont Awesome


もとはこちらの本で知りました。この本もFont Awesomeを使ってます。というか、この本は初心者には最高にオススメです!

見出しのデザインはCSS見出し ジェネレータ

ググったところ見つけました。
見つけて思ったのが、あ、これ利用してる人多いな・・・他のサイトでちらちら見る。
CSS見出し ジェネレータではリボン風に生成できますが、私はその部分を削除して作ってます。

BIOGRAPHY部分の経歴につかったCSSデザイン

参考になるものばかり載っているWEBクリエイターボックスさんの記事「経歴や会社の沿革ページに!簡単なCSSで実装するタイムライン」を参考にしています。

引用部分に使ったCSSデザイン

CSS Lectureというサイトのblockquote(引用部分)をCSSでデザインするサンプル集から利用させていただきました。
クォーテーションマークの無料ダウンロード探しましたが、どうもリンクが切れているようで、なしで作成しました!

ソースコードの表示にはSyntaxHighlighter

こちらもぐぐって見つけました。結構利用されてる方多いですよね。
利用方法はこちらのサイトで確認しました。

最後に

なんていうか、コピペベースである程度のものは作ることができるようになっていますね。
著作権フリーの同じ写真素材もいろんなサイトでみたり笑

オリジナル力をもっと高めいくのも目標です。

【超基礎編】PHPのif分の書き方を2通り理解する

いまだになじまないPHPのif文

WEBデザインから入り、WordPressに辿り着き、そこからPHPを勉強する人向け?(私がそう)
最初にプログラミング(PHP)から入る方はなんでそこでつまづくの?かもしれないです。
私、本当に、if文で既につまづいております!!

いろいろな書き方に惑わされる

初めて買ったWordPressの本にPHPはでてくるわけですが、
if文の書き方がころころ変わってるわけですよ。

:(コロン)使ってたり、{}(中括弧、ブレースともいうらしい)だったり、;(セミコロン)だったり、
endif;あったりなかったり

は??

(´;ω;`)ウッ…

そこで、もう一度ゆっくり基礎を

PHPの基本的な書き方は2つ

基本構文1

if(条件A){
	条件Aが満たされた場合に実行する処理;
}elseif(条件B){
	条件Bが満たされた場合に実行する処理;
}else{
	条件AもBも満たさない場合に実行する処理;
}

この{}(ブレース)で囲むやり方がピュア?な書き方のようです。

メモ

  • elseif以降は省略可能
  • 処理を複数行書いてもOK

基本構文2

if(条件A):
	条件Aが満たされた場合に実行する処理;
elseif(条件B):
	条件Bが満たされた場合に実行する処理;
else:
	条件AもBも満たさない場合に実行する処理;
endif;

条件の記述の後ろがブレースの変わりに「:(コロン)」を使う。
そして、最後に「endif;(←セミコロン)」がつく。

本当にこれだけ。
なのに、なんでわざわざ二通りの書き方をするのがワケがわからなかった。

で、なんでそんな事をするのかというと、

HTMLタグを直接記述する場合に構造が見やすくなる。

<?php if(条件A): ?>
	<h3>見出しa</h3>
<?php elseif(条件B): ?>
	<h3>見出しb</h3>
<?php else: ?>
	<h3>見出しc</h3>
<?php endif; ?>

基本構文1使うと

<?php if(条件A){ ?>
	<h3>見出しa</h3>
<?php }elseif(条件B){ ?>
	<h3>見出しb</h3>
<?php }else{ ?>
	<h3>見出しc</h3>
<?php } ?>

こんな感じかしら?あってる??(;´∀`)

私の解釈ですが、「コロン」は「さーて行う処理をこれから書くよっ!」で
「セミコロン」を使うものは「はい今処理書き込ましたよ!」で「endif;」は「はいっ!これで終了!」と認識しました。
そして、セミコロンもコロンもPHPを使うときであって、HTMLの時の処理に「;」はつけなくてよい。

WordPress始めて半年くらいたつけれど、PHPはまだまだすっきりわかっていない・・・
それでも、参考にした本は今読み返すと、わかるようになった部分が増えてきた!

参考にした本

WordPressでTypesカスタムフィールドを使った日付の表示方法

はじめに

お仕事でシングルテンプレート作成中につまづきました。
ちなみにやりたいことは、カスタムフィールドを簡単に作ることができるプラグイン「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

セキュリティ:カスタムフィールドのデータをエスケープする

雑談

カスタムフィールドを使った最初のお仕事としてWordPressのシングルテンプレートを作成しました。
そのコードに先輩から暖かい丁寧な添削が入ります。
理解するのに恐ろしい時間かかるけど、一つ一つ理解していかねば。
更新日時は教えてもらった日に設定

カスタムフィールドのデータをエスケープ

運用担当者がヘンなデータを入れた場合に
表示が崩れたり脆弱性ができたら大変

ということで、

<?php echo get_post_meta(); ?>

に一手間加えてあげるそうです。

esc_html()を加えるだけっ!

<?php echo esc_html(get_post_meta()); ?>

エスケープってそもそもなんなの?

マークアップ言語やプログラミング言語で文字列を扱う際に、その言語の文法や処理系にとって特別な意味や機能を持つ文字や記号(およびその並び)を、一定の規則に従って別の文字列に置き換えること。

例えば、HTMLはタグの記述に「<」「>」という記号を用いるため、この記号そのものを文字として表示することは本来できない。このとき、「<」「>」という特殊な表記法に置き換えることで、それぞれ「<」「>」と表示することができる。このような置き換え操作・処理のことをエスケープ処理という。

エスケープ処理とは – IT用語辞典 e-Words

あ、そういうことだったのか。
「<」を「<」じゃなくするんだな。うん。

カスタムフィールドの数が多い時の処理にfunction.phpに関数作成

さて、さらに教わった事。
フィールド数が多いと毎回書かなきゃいけなくて面倒。そのために、function.phpにひとつ関数を作ってあげると便利らしい。
(今回は「cf」なんだろう)

function cf($post_id, $fieldname, $single) {
    $cf = get_post_meta($post_id, $fieldname, $single);
    if ($single) {
        echo esc_html($cf);
    } else {
        return $cf;
    }
}

とのこと。
引数はget_post_metaと同じにして、
第三引数の「$single」がtrueだった場合は、取得したフィールドの内容をエスケープ処理(esc_html())してからechoする。
$singleがfalseの場合は、get_post_metaと同じ動きをする。(つまり、$single = true以外で使っても意味がない。)

とのこと。

<?php echo get_post_meta($post->ID, 'fieldname', true); ?>

にしたところは、

<?php cf($post->id, 'fieldname', true); ?>

に変更すればOK!

「$single」がtrueだった場合にしたのはなぜだろう?
と疑問でしたが、

$singleは複数の値を入れる事ができ、そのときsingleにfalseを指定すると、戻り値を次のような配列で受けとるらしい。

Array
{
   [0] => これは値1です。
      [1] => これは値2です。
}

だから、falseの時にエスケープしちゃうとちゃんとひっぱってこれないよってことなのかしら?
うーんよくわからない。とりあえず、配列がある時はまたの機会に考えよう。

その他のエスケープ処理

他にもまだエスケープ処理する関数があるらしい。
ざっくり書くと

esc_attr()

HTMLの属性値として出力するとき
※現時点でesc_htmlと同じ処理をするらしい。将来はわからないから今から適切に書きましょうとのこと。

esc_url()

URLとして適切でない文字を除去

参考にした図書

ちなみに↓は全然基礎じゃないと思う(・∀・)