知らなくて損してた$post->IDとかcssの::afterとか | WordPressのカスタマイズ

何を見て思い込んでいたのかもわからないのだけれど、wordpressにおけるテンプレート内で、投稿のIDを得る事が出来る$post->IDはループ内でしか使えないものと思ってました。

ここの鳥画像サイトは撮影地をcategory、鳥種を投稿タグにて分類しています。
そしてその時開いているページの最新の投稿に付けられている投稿タグの鳥種で、その鳥種用の背景とヘッダーの画像があればそれに切り替えて表示するようにしています。 最新の投稿の鳥にあわせて背景とヘッダーの画像がそれ用に変わる訳です。
これはループのなかで、$is_firstという変数を作って最新の投稿の投稿タグを取得していました。ループの中で取得しているのでheadタグ内でcssを設定するとこはできず、phpでjavascript文を作り、footer.php等に書き出していました。
javascriptで変えていたんですね。

ふと思うことがあって、header.phpのheadタグ内で$post->IDを使って見たら、これがちゃんと機能してる。
今開いているページの最新の投稿のIDをちゃんと返してくれます。
知ってる人には当たり前の事なのかもしれないんだけど・・・。
ま、なんでも試してみるもんです。

headタグ内で最新の投稿のIDが得られれば、それによりheadタグ内にphpによってcssテキストを書き出すことができるので、javascriptの環境に左右されずに、しかも余分な画像を読み込む必要もなくなって、表示速度的にも良くなるはずです。
他にも、投稿のIDが得られればそれによりタイトル等も取得できるわけなので、SEO的な対策も簡単に出来てしまいます。
知らなかったというだけで随分遠回りして色々な手段を試したりしていました。

それとは別にCSSの疑似要素（pseudo-elements）も知らなくて、有用な使い方を知った時はまさに目からうろこでした。
具体的にはやはりfloatの後処理的につかう::afterでしたね。
floatさせた要素、たとえば画像などが回り込む記事よりも高さがある場合に、親要素が記事の高さにつぶれてしまい、結果、画像が親要素からはみ出して全体のレイアウトが崩れてしまったりする。
これを防ぐための対処が::afterを使えばできるんですね。
overflowを使った対処のしかたが古くから知られているということなんですが、実はこれも知らなかった。
ダミーのdiv要素なんかを下に作ってそれでclearさせてたりしましたね。
そんなことで簡単に出来てしまうもんだから、ちゃんと調べなかったということもありまして。

ま、とにかくそんなごまかしなやり方ではなくて、疑似要素::afterを使えばいらぬものをhtmlに追加することなく美しく、見事に対処できると。
floatさせてる要素を含む親要素id="post"にたいして、

#post:after{
    content:"";
    clear:both;
    height:0;
    display:block;
    visibility:hidden;
}

と、cssを作れば良いと。
ちなみにcontentの項目は必須で文字列を表示する必要のないときは空文字を指定しておくとのこと。
afterの前にあるコロン”：”は一つだったり二つだったりするのを見かけるのは、疑似クラスと区別するためにcss3から疑似要素は二つに変更されたとのこと。css2までは一つだった。現状では一つでもほとんどの場合において使えるようです、というかまたしてもIE8が二つの書き方には対応していないということなので一つの書き方を使っていたほうが良さそうです。

この疑似要素は色々な事に使い勝手があって、一例として、ひとつの要素に対して::beforeと::afterを使えば背景画像を３つ設定できるということ。
というとボックスの上下や左右にデサインされた枠を表示したりすることに使える。
positionやbackgroundなども下記のように普通の要素と同じく使えます。

.post:after{
	content: "";
	position:absolute;
	width:30px;
	height:40px;
	top:0px;
	right:0px;
	background:url(./theme/nav_right_g.png) no-repeat left top;
}

ただ、javascriptからその疑似要素に設定したcssの内容を操作するのは簡単には出来ないようです。
jqueryでも無理なよう。
まぁでも、classに対して疑似要素を設定しておけば、そのclassを置き換えることで疑似要素の設定も操作することはできますね。簡単なことならそれで対処できます。

このページの内容とは全く関係の無い事ではあるけれど。
Chrome のディベロッパーツールにある Lighthouse による PAGESPEED INSIGHTS で、このページはコンテンツの容量の少なさもあってキャッシュ化していないにもかかわらず、PC において 100 ポイントが出た。モバイルにおいても 99 ポイント。
ちなみに、サイトの方の PAGESPEED INSIGHTS では、PC 97、モバイル 98 という値だった。やはり、ブラウザ版の方がより良い数値がでるようではある。