ブログ
カテゴリー名の取得と表示
「カテゴリー検索をしたときにズラズラッと出てくる記事のトップに、そのカテゴリー名を表示したい」という時。
『get_the_category()』を使いましょう。
『get_the_category()』では、「カテゴリーID」「カテゴリー名」「カテゴリースラッグ」などが取得できます。
<?php $category = get_the_category(); $cat_id = $category[0]->cat_ID; $cat_name = $category[0]->cat_name; $cat_slug = $category[0]->category_nicename; echo $cat_id; // カテゴリーIDを表示 echo $cat_name; // カテゴリー名を表示 echo $cat_slug; // カテゴリースラッグを表示 ?>
私の場合、「カテゴリー名」だけ表示できれば良いので、
<?php $category = get_the_category(); echo $category[0]->cat_name; ?>
って感じでしょうか。
でも、実際に出力してみると、なんだか使い勝手が悪い。出てほしいカテゴリー名が出てこないのだ。
なので、属している全てのカテゴリ名を取得することにしました。
<?php
$categories = get_the_category();
if($categories) {
foreach($categories as $categorie) {
$output .= $categorie->name;
}
echo $output;
}
?>
これで出てほしいカテゴリー名も全て出てくれましたが、スペースも「、」もなく文字が連なって出てくるので、これでは見栄えが悪すぎるだろ…。
それで、今一度カテゴリーを整理して、親子関係を見直してみることにしました。その上で、親カテゴリー名のみを表示したいと思いました。
解決してくれてる人がいらっしゃいました♪
<?php $cats = get_the_category(); $cat = $cats[0]; $cat_name = $cat->cat_name; $cat_slug = $cat->category_nicename; if ($cat->parent){ $parent = get_category($cat->parent); $cat_name = $parent->cat_name; $cat_slug = $parent->category_nicename; echo "<span class=\"ico-cate $cat_slug\">$cat_name</span>"; } else { echo "<span class=\"ico-cate $cat_slug\">$cat_name</span>"; } ?>
これで親カテゴリー名のみがきちんと表示されるようになり、すっきりいたしました。
【参考になったサイト様】
bxSlider
htmlサイトにスライダーを設置するのに、「何か簡単な方法はないか?」と検索し、以下のサイトさんを見つけました。
本当に、気が抜けるくらい簡単すぎました。
ところが、です!
ちゃんとスライドはするのですが、例によってサーバーにアップした途端、スマホでの表示に問題が。
最初の訪問で画像が表示されないのです!
きっと画像を読み込むのに手間取ってるんだろうけど、リロードしてやっと正常表示って…。
ダメダメ、やってられない。
そこから丸一日苦戦して、(また色々勉強できたけど) やっとスマホでも思い通りに表示してくれるようになりました。
無駄だったけど、一応試したことを覚書しておこうと思う。
font-familyのこと
font-familyって、何気なく見過ごしていませんか?
Google Fontsを使わずにちょっと違った書体を使いたい時、はたと「他にどんなフォントが指定できるんだろう?」と思って調べてみました。
以下のサイトさんにありました。
すごく詳しくわかりやすくまとめてくださっています。
こんなにあるんだなぁ。
ただ、実際にサイトを表示した場合、あんまり代わり映えしないというのが本音です。
やっぱり「ここぞ」と魅せたい時にはロゴを使うべきですね。
<wbr>が効かない問題
<wbr>は、デザイン上必要になることも多い。
なのに全然効いてくれない(泣)
そんな時どうすればいいか。
<span></span>を使うんだって。
=html= <div><span>テキスト1</span><span>テキスト2</span></div>
=css= div span{ display: inline-block; white-space: nowrap; }
htmlコードをチェックする
一応ちゃんと表示はされるけれど、やっぱりチェックは必要。
そんな時は、The W3C Markup Validation (W3Cマークアップ検証サービス)が超便利です。
</div>や</li>などのタグの閉じ忘れという基本的なことから、要素の属性がどうのxmlnsがこうのと、私にはチンプンカンプンなことまで弾き出してくれます。それを一個一個解決していく。
面倒だけど、精神的に焦っていない時は、色々と勉強できて有意義です。