Nakkan Base

ブログ

カテゴリー名の取得と表示

「カテゴリー検索をしたときにズラズラッと出てくる記事のトップに、そのカテゴリー名を表示したい」という時。

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>";
}
?>

これで親カテゴリー名のみがきちんと表示されるようになり、すっきりいたしました。

【参考になったサイト様】

★投稿記事のカテゴリ名の表示、カテゴリIDの取得

★【WordPress】カテゴリを取得できるget_the_categoryの使い方

★【WordPress】親カテゴリの情報のみ取得したい

bxSlider

htmlサイトにスライダーを設置するのに、「何か簡単な方法はないか?」と検索し、以下のサイトさんを見つけました。

画像が自動的に切り替わる「スライドショー」を表示する方法

本当に、気が抜けるくらい簡単すぎました。

ところが、です!

ちゃんとスライドはするのですが、例によってサーバーにアップした途端、スマホでの表示に問題が。

最初の訪問で画像が表示されないのです!

きっと画像を読み込むのに手間取ってるんだろうけど、リロードしてやっと正常表示って…。

ダメダメ、やってられない。

そこから丸一日苦戦して、(また色々勉強できたけど) やっとスマホでも思い通りに表示してくれるようになりました。

無駄だったけど、一応試したことを覚書しておこうと思う。

font-familyのこと

font-familyって、何気なく見過ごしていませんか?

Google Fontsを使わずにちょっと違った書体を使いたい時、はたと「他にどんなフォントが指定できるんだろう?」と思って調べてみました。

以下のサイトさんにありました。

font-family

すごく詳しくわかりやすくまとめてくださっています。

こんなにあるんだなぁ。

ただ、実際にサイトを表示した場合、あんまり代わり映えしないというのが本音です。

やっぱり「ここぞ」と魅せたい時にはロゴを使うべきですね。

<wbr>が効かない問題

<wbr>は、デザイン上必要になることも多い。

なのに全然効いてくれない(泣)

そんな時どうすればいいか。

<span></span>を使うんだって。

=html=
<div><span>テキスト1</span><span>テキスト2</span></div>
=css=
div span{  display: inline-block;   white-space: nowrap; }

<wbr>を使わずに、改行するならここでして欲しい指定の仕方。

htmlコードをチェックする

一応ちゃんと表示はされるけれど、やっぱりチェックは必要。

そんな時は、The W3C Markup Validation (W3Cマークアップ検証サービス)が超便利です。

</div>や</li>などのタグの閉じ忘れという基本的なことから、要素の属性がどうのxmlnsがこうのと、私にはチンプンカンプンなことまで弾き出してくれます。それを一個一個解決していく。

面倒だけど、精神的に焦っていない時は、色々と勉強できて有意義です。

W3C検証結果
「チェックは完璧です。エラーも警告も見つかりませんでした」と出れば、超ハッピー♪