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

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()関数の出力によって
置き換えられるのでいちいち記事を修正しなくてもよくなります。

なるほど!

サーバに接続できなくなった時にまずすること

コマンドまわり、まだまださっぱりです。(ヽ´ω`)
まだまだよくわかってない状況で書いてるので間違いがあるかもしれません。

サーバに接続できなくなったと言われ、
まずこれをやりましょうと教えてもらいました。

  1. ssh でログイン出来るか確認
  2. psコマンドでapacheが起動しているか確認(コマンドは以下)
    ps ax | grep httpd

でました、コマンド操作。
そして今回もさっぱり。

そこでまた教えてもらいました。

概要図

概要図


すごい図ですね。さっと書いたらこうなっちゃいました。

えっと。
私のPCがあります。
遠い場所に繋がらなくなったサーバーがあります。(ここでいうとハードウェアと書いてあるところ)

ますは、遠い場所のサーバーにつながるか私のPCから確認します。
それが、

SSH

ssh [オプション] ホスト名 [コマンド]

ですが、
私の場合、.sshフォルダのconfigファイル内に情報を書いてあるので、

ssh ホスト名 

でいけるとのこと。

なので、ここが通っていることを確認してSSHはOK。

では、Apacheは?と次の確認にうつった模様。

ps ax | grep httpd

【 ps 】 実行中のプロセスを表示する

を参考にすると、

ps:実行中のプロセスを表示する
a:自分以外のユーザーのプロセスも表示する
x:シグナル形式で表示する

linuxのコマンドで、 ps aux | grep http  とはどういう意味なのでしょうか…

より、

パイプ【 | 】:コマンドの連結
grep:文字列を検索する

でApacheが起動していないことがわかったみたい。。

sudo を使った別の方法

root権限 はそのサーバーの中で一番強い権限
そこで使うのがsudo(ずっとスドーって読んでたけどスードゥーらしい笑)
それを使って中に入り

which service

をおこない

 service httpd staus

とすると
実行されていれば下記表示される。

httpd を実行中...

ちなみにhttpedに対応しているのがApacheのこと。

dはデーモンの意味で、
mysqlの後ろにもdがつく。うんぬん。とありましたが、細かいことはまたの機会に勉強しよう。

今回は、Apacheが動いていないことを担当の方に伝え対応してもらい無事解決。
原因はApacheアップデート時の設定ファイルに誤りがあったようです。

まだまだ、難しいな。

あ、そうだ。サーバーから抜けるときは

exit

と入力して出るそうです!
忘れそう!

コマンドの復習

さすがに何回もでてきて覚え始めてきたもの

cd(チェンジディレクトリ?):ディレクトリを移動する
cdのみだとホームディレクトリに移動

pwd(プリントワークディレクトリ?):現在のディレクトリの場所を確認する

ls:ファイルやディレクトリの情報を表示する

基礎: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難しいというか自分がまだ全然わかっていない・・・

今回もtwentytwelveを利用していくよ

時間短縮の為にと、既存のテーマを使うんだけれども、
そのせいでわけがわからなくなることも多々あり・・・

デザインはあとにして、組み込んでいこう!って思ったけれど、
テンプレート作るときに、複製して作ることもあるので
ある程度のデザインは作らなきゃだよなぁ・・・と本日は始めました。

ナビゲーション

ナビゲーション


今回もまた、この本から利用させていただきました。

ぽちさまベランダガーデニングとビオトープ___理科好きの観察日記
記事の表示をこんな感じにしたいんだけど、
もうどう組み込めばいいかさっぱりだよ・・・
イメージはプロジェクト管理なんだけど、それをWordPressでどう整理していいかもわからないし、
とりあえず、カスタム投稿タイプに親子関係つけてやってみようと思ったけど、
さぁてどうやったら表示できるんだ?って状況でございます。

次に作るサイトは結構大変なものだと実感

今まで一番作りたかったサイトに着手

自分仕様のガーデニングサイトを作りたかったものの、
こういった機能がほしいな〜〜
というのを、いざ実装できる力はまだまだまだまだなかったので後回し。
ついに、作成しようというところまできました。

仕様について考えて、最低限にする

最低限の仕様で望むことになったものの、
しょっぱなからつまづきっぱなし。

まず、更新していたもとのブログから引っ越そうと思ったら
画像は引っ越しできないことに気づき。

さてインポートと思ったら、
タイトルが入力されておらず、調べたら

エンコードを変えてからインポートしなければだった

ここで、なんだかおかしくなりました。
空っぽのものを削除しようと思っても、全然削除されない。
これはおかしいと作りなおせばよかったのに・・・
カスタム投稿タイプをせっせと作ったのでなかなか実行できず。

でも、こういうことがあると、
後から後から、変なことになるんですよねぇ

カスタム投稿のアーカイブページすら表示されない

このサイトではあっさり作ったカスタム投稿のアーカイブページも表示されないっ!
少しググったら、
データベースを一旦全部消してやり直したら、直った。
とあったので、今のうちにやり直すことにします。

はぁ〜〜。大変だ〜〜

人気の記事を自動集計してくれるプラグイン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-->

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

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