Nakkan Base

投稿記事一覧

「uncategorized」を消したい

カテゴリー欄ですが、順番が自由に変えられたら問題なかったのに、必然的にアルファベット順に表示されてしまうので困ったことに。

設定したカテゴリーの真ん中に「uncategorized」のヤツが陣取ってしまうのです。

それでこれを消してしまえ!と思いました。

とてもわかりやすく教えてくださっているサイトさんがありました。

★WordPressの「未分類」カテゴリーを非表示にする方法

消えたわ。

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

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

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>を使わずに、改行するならここでして欲しい指定の仕方。