【基礎】比較演算子

これは、多分
==」だけを気をつければなんとなくわかる気がする。

a==b aとbが等しい
a!=b aとbが等しくない
a<b aはbより少ない
a>b aはbより多い
a<=b aはbより少ないか等しい
a>=b aはbよい多いか等しい
if($a >=5) → 変数$aの値が5以上だったら〜
if($a == $b) →変数$aと$bの値が等しければ〜

PHPマニュアルから。

$a === $b → $a が $b に等しく、および同じ型である場合に TRUE 。

【基礎】論理演算子 && ||

WordPressのif文でよく使われる論理演算子。

条件A&&条件B:条件Aと条件Bを両方満たす
条件A||条件B:条件Aと条件B:のどちらかを満たす
!条件A:条件Aを満たさない

「条件Aをと条件Bの両方を満たす、もしくは
条件Cを満たすかどうか」

(条件A&&条件B)||条件C

「!is_home」:メインページが表示されていなかったら。

【基礎】論理演算子 && ||

WordPressのif文でよく使われる論理演算子。

条件A&&条件B:条件Aと条件Bを両方満たす
条件A||条件B:条件Aと条件B:のどちらかを満たす
!条件A:条件Aを満たさない

「条件Aをと条件Bの両方を満たす、もしくは
条件Cを満たすかどうか」

(条件A&&条件B)||条件C

「!is_home」:メインページが表示されていなかったら。

【基礎】PHP:foreach文

WordPressばかりやっているので、
なかなかPHPの基礎を勉強する時がない。
今日こそ。

参考にした本

最近はこればかり使っているなぁ。引用しています。

foreach文は配列の要素の数だけ繰り返せ!

while文との違いは?

while文:ある条件に当てはまっている間は、指定した処理を繰り返す
例)記事がある間繰り返して!

foreach文:配列の要素の数だけ繰り返す

基本構造

foreach($a as $b){
  配列$aの要素の数だけ繰り返す処理
}

「配列$aの1つ1つの要素を、変数$bとして扱う」
とのこと。
$がでてきただけでわけわからなかったなー。

例をだすと、
$vegetables という配列がございます。
その一つ一つの要素を$vegetable として扱うとなる。

少しわかった。

配列$vegetables には tomato、basil、eggplantの値が入ってる。

foreach($vegetables as $vegetable){
  echo $vegetable;
}

とすると、
1回目の$vegetableの値は「tomato」
2回目の$vegetableの値は「basil」
3回目の$vegetableの値は「eggplant」
が表示されて、
4回目には要素がなくなるので、繰り返しが終了される。

確かに便利だな。

これも、{}(ブレース)を使わずに書くことができる。

foreach($a as $b):
ここに繰り返す処理
endforeach;

なるほどねぇ。
この2通り書くパターンがあることに混乱したけど、
HTMLを書く時に、これがとても便利ってのはわかるようになりました。

WordPressではいつ使う?

カテゴリーの名前やURLを取得する

利用する関数
get_cat_name:IDからカテゴリーの名前を取得する
get_category_link:カテゴリーのURLを取得する

<?php
foreach($ancestors as $ancestor):
?>
	<li><a href="<?php echo get_category_link($ancestor); ?>">
		<?php echo get_cat_name($ancestor); ?></a></li>
	<li>$gt;</li>
<?php
endforeach;
?>

パンくずリストを表示させる一部分に利用。
全体を書くと、これまたわけわからないのがでてきたので、
ひとまず
foreachは配列を一つ一つ繰り返し!だけ覚えて今回は終了!

exValidationとcontact form7を使ってお問い合わせのバリデーションを実装

バリデーションとは

指令にバリデーションの有無を検討と書いてある。なんぞ?

WordPressプラグイン Contact Form7を使ってお問い合わせページを実装。
ふぅ。
確認ボタンがないのが気になる。
これまたプラグインContact Form 7 add confirmにて実装。
方法は↓
Contact Form 7に確認画面をものすごく簡単に付けられるプラグイン

この辺はスムーズにできて、上司に報告。そのときに

バリデーションってどのような機能?作業でしょう?と聞いてみたら

ヴァリデーションてのは入力チェックのことです。
・必須項目が入力されているか
・メールアドレスは適切なメールアドレスの形式か
・数字は半角?全角?
・フリガナに漢字やひらがなが入ってない?

とのこと。ヴァリデーション。ヴァ!
あぁ!見たことありますね。「半角ね」とか「必須よ」とか。あれですね。

そして、上司の話によるとJavaScript(jQuery)でやると簡単とのことだったので、
ぐぐってみた。

exValidationを使ってみよう!

ぐぐってみてでてきたのは
exValidation
jquery.validationEngine.js
あたり。
2つ目を使った記事は少し古かったので、一つ目の方に。

本家サイト5509.meが削除されてる?

やり方はこちらを見て挑戦
どんなフォームにでも使える exValidation の使い方 基本編
本家サイトが消えてしまったらしく、私は本家を見ることができないでいたので、丁寧に書いてあってよかった。

ダウンロードはこちら
※画面右下のDownload zipボタンからダウンロード
https://github.com/5509/exValidation

はまってしまった所をピックアップ

エラー表示がでる。どうやらjsを読み込んでない

これはよくありがち、こちらもググって解決。
とにかく順番が大事!jQueryとwp_headを読み込んでからなので、その後に書く。そして/headの前。
それと、WordPressはもともとjQueryが入ってるのでそれを使うようにする(重複させない)

<?php 
wp_enqueue_script('jquery');
wp_head(); 
?>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/exvalidation.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/exchecker-ja.js"></script>
<link type="text/css" rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/exvalidation.css"/>

参考にした本

これ、最後の数ページにしかjQueryの事載っておらず、初心者の初心者の時はこれでわかるか!
って感じでしたが、今みると、なるほど。という感じ。

エラー表示でないけど、exValidationが動かない!Contact Form7はformにIDつけられない?

先輩に確認してもらう。ちなみに私はJavaScript超初心者。
alertやsizeというのを使って、ちゃんと読み込んでいることを確認してもらった。

<script type="text/javascript">
jQuery(function(){
    alert( jQuery("form.wpcf7-form").size() );
    var validation = jQuery("form.wpcf7-form").exValidation();
});
</script>

また、ここで困ったのがContact Form7のformタグにidが付けられない事。
参考にしている記事はformタグにIDを指定していたので、
そうしないとできないのかしら?と悩んだ。

結果は、class指定でOK
“form.wpcf7-form” ←formタグのclass名wpcf7-form

もうこうなったらHTMLから確認してみる!少し躓いたらこれがオススメ

どうにもこうにも動かない理由がわからないので、
先輩に助けを求めつつ、デスクトップ上でHTMLをいじりながら一つ一つ確認。
ちなみに、ファイルは先程のサイトで落とせるので、それをカスタマズしながら。

どんなフォームにでも使える exValidation の使い方 基本編

タグにid指定が必要&二個以上はダメ。$表記もダメ

[ text* your-name id:◯◯ ]

こんな感じに作られるショートコードでidをしっかり指定します。

そのidはjsでも定義。既述のサイトを参考にして作っています。
ポイントは$表記だとWordPressでは動かなかった。$→jQueryに全部書き直しましょう(1個でも残っていると動かなかった)

jQuery(function(){
	var validation = jQuery("form.wpcf7-form")
		.exValidation({
		    // それぞれの項目に「class="chkrequired chkkatakana"」のように記述しているのと同じことをしています。
			rules: {
				name: "chkrequired",
				name_: "laterCall",
				kana: "chkrequired chkkatakana",
				kana_: "laterCall",
				email: "chkrequired chkemail chkhankaku",
				email_: "laterCall",
			},
			customListener: "blur", // onBlur時のみにしてみる
			stepValidation: true,
			errTipCloseBtn: false,
			errHoverHide: true, // マウスオーバーで消える
			scrollToErr: true   // 
		});
    // チェックボタンで確認する場合
	jQuery('input.laterCall').click(function() {
		validation.laterCall('#' + this.id.replace('_',''));
	});
});
// エラー削除
function clearErrors() {
	// 表示されているエラーをフェイドアウト
	$("div[id*=err_]").fadeOut();
}

exValidationのCSSファイルのみでよいかと思ったら、style.cssも使った

やっとこそさ、動き始めた!
と思っても、なぜか色がつかない。
classのつけ忘れかなーと思ってみていると、どうやら、同じexValidationCSSファイル内のstyle.cssに書かれた、テーブルのデザインも必要なのかしらね。
なので、exValidationにもともとのデザインを損なわないように追加で貼った。

動いた!!!けれど、項目を追加していくとまた動かない

ついに動いて、項目をドンドン追加。
すると、動かない。
な、なんで・・・

ということで、ここもまた、
一つ一つ追加しては動作確認していきました。

わかったのはJavaScriptで「,」を私はよく忘れている・・・

もともとの文法がまったくわかっていないので、間違いにも気づきにくいんですよね。

自分で実装するか、exValidationを使うか

同時進行で先輩に助言をいただいたのですが、
「exValidationのようなものは使わずに自分で実装するのがよいよ」
と。
おぉそういえば、私の職業プログラマだった・・・

とはいえ、無事実装できたのでひとまずこれで!
そのうち簡単なものくらい自分で実装するスキルも身につけなければ・・・

またサイトがなくなっては困っちゃうのでメモ

エラーの文字列の調整はexchecker-ja.js を書き換えて行える。

↓既にあるもの

chkrequired: “入力してください”
chkselect: “選択してください”
chkretype:”入力内容が異なります”
chkemail: “正しいメールアドレスの形式を入力してください”
chkhankaku: “全角文字は使用できません”
chkzenkaku:”全角文字で入力してください”
chkhiragana: “ひらがなで入力してください”
chkkatakana:”カタカナで入力してください”
chkfurigana: “ふりがなはひらがな、全角数字と〜、ー、()が利用できます”
chknochar: “英数字で入力してください”
chknocaps: “英数字(小文字のみ)で入力してください”
chknumonly: “半角数字のみで入力してください”
chkmin: “文字以上で入力してください” // chkmin6 で6文字未満NG
chkmax: “文字以内で入力してください” // chkmax10 で10文字を超えるとNG
chkradio: “選択してください”  // ラジオボタンの場合
chkcheckbox: “選択してください” // チェックボックスの場合
chkurl: “正しいURLの形式を入力してください”
chktel: “正しい電話番号を入力してください”
chkfax: “正しいファックス番号を入力してください”
chkfile: “ファイルを選択してください”

ゆくゆくは本番サーバへ移行する際のための投稿記事でのリンク先記述方法

WEBサイト作成時にありがちな途中でURLが変わる時

過去記事をこつこつとアップしたけど、全部現サーバのリンクになってる

現テストサーバのリンクになってるのを、結局またあとで一つひとつ変更しなきゃいけないのかしら。
と、
既存のサイトから新サイトを作る時に素人の私は不安だった。

フィルターフックを使う

フィルターフックとは

参考にしたサイト
WordPressカスタマイズの幅が劇的に広がる、フィルターフックとアクションフックの使い方

ふむふむ、思ったほど難しくない。
フックに指定したものを実行した時に、自分が用意した関数を実行させる。

contentを読み込んだ時に、サイトのURLを変えたい!

そんな時は、

functions.phpに以下コードを記載

add_filter( 'the_content', 'replacehost');

function replacehost($content) {
    return str_replace('%SITEURL%', site_url(), $content);
}

で、現在記事中に「http://◯◯◯」ってでてる所には

%SITEURL%

に置き換える。

すると、the_content()を読み込む時に自動で
%SITEURL% → http://◯◯◯
に変換。

あとでホスト名が変わった時も、WPのsite_url()関数の出力によって
置き換えられるのでいちいち記事を修正しなくてもよくなります。

なるほど!

基礎:WordPressに必ずでてくる if(have_posts()): とは

if(have_posts()):何個カッコつければいいんだけ〜〜って思っていたあの頃

if文を理解してからの次のステップ!

if文を軽く前回倒したので、きっとこの意味がわかるようになるのでは、
と思ったら、本当にわかるもんですね。

まずはWordPress内によくあるコード

<?php
if(have_posts()):
   while (have_posts()): the_post();
?>
・・・略

でたでたでた。やたらポストポストいってる感じの笑
これを見た時にWordPress無理って思った頃が懐かしい。

さて、まずはifから

<?php
if(have_posts()):?>

if後の括弧内が条件だから、「もし、表示する記事も持ってたら(記事があったら)

while文

これも結局if文に似ていてifが「もし条件にあったら」なら
whileは「もし条件にあったらそのあいだずっと」です。

なので、

while (have_posts()):

は「記事を持っていたらその間ずっと

では最後のthe_post()はなんなの?

これは今、本を読んでへぇ〜ってなってるんですけど、

処理対象の記事を1つ先に進める。ということらしいです。
1つ。だから単数形のpostなのか。
これがないとひたすら同じ記事を出力してしまう。なので、大事なんですね(今更)

ながれとしては、
記事あるのかなー?
あるならずっとこれやってよ〜
ちなみに1つずつずれてね〜

ってことかな。

清書。

<?php
if(have_posts()):
   while (have_posts()): the_post();

  繰り返して表示されるコード

 endwhile; ←whileの繰り返し終了
else: ←ifに対応して条件以外の時

  表示する記事がない場合のコード

endif; ←ifの終了
?>

さっさと慣れて覚えちゃう方がラクそう!

参考にした本


なによりうれしいのは、この本を読んで理解できるくらいのレベルにはなったっていうことがとにかくうれしい!!
(当初、この本わからすぎて違う本に移行した)

なんで?カスタム投稿タイプのアーカイブ(taxonomy.php含む)ページが表示されない時の対処法

簡単なはずなのに表示されない!!archive-◯◯.phpのはずよね?

手っ取り早くカスタム投稿タイプのアーカイブページを作るには
category.phpをコピペしてファイル名前を「archive-スラッグ.php」にかえればよかったはず。
なのに、表示されない!!

なぜなの!なぜなの!
とググったら、

設定→パーマリンク設定→保存

この一連の作業をやったらOKと。
え・・・
それだけ。

そして、本当になおりました。
私の3時間返して涙


2014年9月24日追加
実は4日間ぐらい悩んだもの。

taxonomy.phpが今度は表示されないよ!!

そうだ!パーマリンク設定だ!!!

と思い、「保存」したものの、直らず。

パーマリンク設定をデフォルト設定にしたものの治らず。

あぁ、もうなんかおかしい。

あぁ、既存テーマごちゃごちゃ直してるから知らない間に変になるのかな。
とか考えだす。

ふと、参考書のtaxonomy.phpをそのまま使ってみようとデータを移動。

ん???
タクソノミーphp二個あ る よ

taxonomy.php
taxnomy.php

スペル間違いかーーーーーいっ!!!!

簡単な事でつまづいてるんだろうとは思ったけど。
(´Д`)ハァ…

無事、taxonomy.php表示されましたよん!
(´Д`)ハァ…

人気の記事を自動集計してくれるプラグインWordPress Popular Posts

プラグインさえあればなんでもできる気がする

いままで、いろいろなサイトを見ては、どうやってこんな機能作るんだろ。
と思っていましたが、
WordPress始めて思ったこと。

誰かが作ってくれたプラグインでなんとかなる

ほんと、簡単にいろいろ作れるようになってるんですねぇ・・・

使い方

使い方は


を参考にしました。

日報___30女未経験からのWEBプログラミング
本当にいろいろ載ってますね。これ。
で、完成したのがこんな感じ。

このサイトは、とくにサムネイルがあるわけではないので、これでよいとして、
他のサイトで、サムネイルを表示したいものがあったので変更しました。

いつも、どこで何を変更するのか迷ってしまいますが、

「設定」→「WordPress Popular Posts」

  • 統計の期間を選択
  • 「投稿タイプ」を選択(投稿記事なら「post」、固定ページなら「page」)

私は、サムネイルを表示したかったので、どこでやるんだよーーーと探したら、

「外観」→「ウィジェット」

「表示する数」「時間間隔」「並べ替え順」「タイトル短縮」「抜粋」の設定はこちらですね。
表示したいサムネイルのサイズ入力もここです。
一生懸命スタイルシートいじってしまいましたよ。

2度とできるかっ!妊娠なんてこんなかんじで完成です!

ちなみに、
WordPress Popular Postsでサムネイル画像付き人気記事一覧の表示方法
を参考にしました!

いやはや、本当簡単ですねぇ〜。

カスタムフィールド未入力時に項目ごとOFFもしくは表示する方法

はじめに

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

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

まずは仕様を確認

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

1.未入力時に項目ごと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.未入力時は項目は残して出力する

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

基本的にこういった場合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; ?>

ですね。

最後に

&nbsp;

↑をそのまま表示できなくて(空白になる)苦戦してしまった・・・
結局あきらめて、&の後に半角スペースいれました(´;ω;`)ウッ…

WordPressでカスタムフィールド内の改行をそのまま表示させる

はじめに

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

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

まちいろ

改行にはPHPの関数「nl2br」

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

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

読み方プロトコル

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

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

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

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

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

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

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

とのことでしたので。

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

でOKです!

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

&lt;br /&gt; &lt;br /&gt; 

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

WordPressで画像写真を好きなサイズに変更する方法とプラグイン紹介

WordPressの写真保存の仕組み

WordPressは、画像をアップロードすると自動的に3種類の大きさの画像が生成され、
記事の本文に挿入する時に大きさを選択する事ができます。

当初はこれすらも意味がわかりませんでした・・・
管理画面から、上記の3種類のサイズを調整することも可能ですが、
functionsに新たに違うサイズを生成する方法をご紹介します。
これを使えばいくらでも増やしていけます。

後ろの方にプラグインでなんとかする方法もあるので、
手っ取り早い方が好みの方はそちらへ。

functionsに自動生成する画像サイズのキーワードとサイズを追加

たとえば、横600、縦200のサムネイル画像を追加で作りたい場合。

functions.phpに

//自動作成する画像サイズ
add_image_size('size600_200',600,200,true);

と記載します。
()内のパラメータは
「’画像サイズを示すキーワード(好きなやつ)’,’横幅’,’高さ’,’画像の切り抜きを行うか否かを指定’」です。

詳しくはWordPressのCODEXで。
と言いつつも、最初の頃はこのCODEXがとっつきにくくて苦手でした笑

出力方法はthe_post_thumbnailで

画像の作成ができたので、今度は出力ですね。
出力したいテンプレートに

<?php the_post_thumbnail('size600_200'); ?>

でOKです。先ほどつけた名前を書いてあげて呼び出します。

今になって思うと、そんなに難しい事ではないんですよね。

いままでアップした画像の一括再生成

さて、新しく画像サイズを生成するので、今までアップロードした写真は
再度アップロードしなければいけなくなります。
が、量によっては大変。という時に、便利なプラグインがあります。
「Regenerate Thumbnails」です。使い方はググってください。

おおきな横長のサムネイルが欲しかった人向けの今までアップロードした分も新しいサイズでサムネイル作成してくれるプラグインAuto Post Thumbnail


記事の最初に細長の画像があるサイト多いですよね。
あんな目を引く画像をアイキャッチ画像といいますが、
これを勝手に生成してはたまた、記事のTOPに出力してくれるプラグインがあります。
勝手にはつくってくれませんでした・・・
twentytwelveを改造して作ったので、つい勝手にと・・・
1から作っている方は、functions.phpや表示したいテンプレートにコードを書く必要があります。(2014/09/11追加)

ちなみに投稿した画像の最初の写真を自動で持ってきます。

Auto Post Thumbnailというプラグインです。
こちらも使い方はぐぐってください。
参考サイトはこちら→新しい記事も過去の記事も全部自動でアイキャッチを作成してくれるAuto Post Thumbnail

過去の写真もちゃんと生成してくれますよ〜

勝手にサムネイル作ってくれるのはいいけど、切り取って欲しいところが違うわ!な時はPost Thumbnail Editor

なんでもプラグインで済ませられても、
こうしたい、ああしたいは尽きないんですよね。

私は、トリミングする場所をどうにか自分で調節できないかと思いぐぐってみました。
あるんですね笑

Post Thumbnail Editorというプラグイン
こちらも使い方はググってみてください。
参考サイト→サムネイル(アイキャッチ)画像のトリミング範囲を手動で決められるWordPressプラグインPost Thumbnail Editor

最後に

当初自分でサイトを作った時は、一番最初の方法で、functions.phpに追加して作成しましたが、
後に私のやりたかったことはAuto Post Thumbnailのプラグインで十分だったことに気づいてしまいました笑

いままで、みんななんでこう上手にサイトを作れるんだろう。と思っていましたが、
こういったプラグインをうまく使えば、それなりに出来上がるものなんだなぁ。
というのが、プログラマになって半年たち思うことでございます。

参考にした本・サイト

思ったより簡単!WordPressのサムネイルを別サイズも含め作り直す方法!!

LIG

【超基礎というか低レベルでごめん】HTMLやCSSでの今まであった困ったときの原因

このページについて

ブログからHTML、CSS、そしてWordPressをつまづきながら勉強してきた際に、
特に多かった原因をまとめておこうかと思います。

こんなことかよーー!!!
ってのばかりなんですよね。

コーディング全般

全角スペースが入ってる

これは本当によくありますよね?
HTMLとCSSで組み始めて「float」にひーひーしている時に、これが原因で崩れたりしてるんですけど、
難しい「float」に何か原因があるはずだぁ!!!!うわぁぁぁぁ!みたいになってたなぁ・・・

最近では、WordPressの組み込みPHPの改行中に全角スペース混じっていて
「なぜかインデントがはいってしまう〜」なことがありました。
でも、いまでは、あぁどこかに全角入れちゃってるのかな。と思うようになりました。

タグが欠けてる

いろいろ修正しているあいだに、「<」や「>」、「/」を消しちゃったりするんですよねぇ。
それで見た目が大幅にくずれたりして、うぉ〜〜〜もうやる気なくした。
なんて事ありました・・・

WordPress

WordPress投稿編集画面にはコメントはいれてはダメ

先輩から依頼され、HTMLをWordPress化してる時に、3時間ハマりました。
HTMLから本文にあたる部分をよいしょっとコピペしただけなのに、
おもいきりデザインが崩れるんですよ・・・・

はじめは上記の先輩のHTMLにタグの抜けや欠けがあるのかも!
とか思うんですけど、違う。

結局、

</div><!---container-->

みたいにコメントが入ってると、変になるってことでした。
コメントを消したらちゃんと表示されました。

ほんと、なんでこんなことで数時間も・・・
ってことが沢山あったなぁ・・・

【超基礎編】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