【STINGER PLUS+】カテゴリー一覧ページに表示される説明文のスタイル設定を追加する方法！！

こんにちは！しろくまです＾＾

カテゴリーを整理していたところ、そういえばカテゴリーの説明文を設定していないなぁと思い、カテゴリーに説明文を付け加えてみました。

カテゴリーの編集画面の説明文を書く欄の下には「この説明はデフォルトではあまり重要な意味を持ちませんが、これを表示するテーマも中にはあります。」という記載がありましたが、STIGER PLUS＋では説明文を記載すると勝手に一覧ページに表示される設定になっています。

一覧ページに設定されるのはいいのですが、説明文には枠などがなかったのでなんとなく見づらかったので説明文のスタイル設定を追加してみました＾＾

 

ということで、今回はカテゴリー一覧ページに表示される説明文のスタイル設定を追加する方法についてまとめてみました！！

 

説明文のスタイル設定の方法！

スタイルを変えたいな～と思ってはみたもののやり方がさっぱり分からなかったのでGoogle先生に聞いてみたところ、寝ログのわいひらさんが説明文のスタイル設定に関する記事を書かれていました！さすがです！！

さっそく確認してやってみたのですが、STINGER PLUS+ではそのまま貼り付けるとおかしなことになったので、STINGER PLUS+で行った方法をまとめたいと思います！

基本的なやり方はわいひらさんのサイトでご確認ください＾＾

[blogcard url="https://nelog.jp/category-description-custom"][/blogcard]

 

category.phpをカスタマイズする！

テーマ編集で子テーマのcategory.phpを編集していきます。

※親テーマを編集しても良いですが、私は何かあったら面倒なので子テーマを編集しています。以前にcategory.phpを使用していなければ子テーマにないと思いますので、FFFTPなどを使用して親テーマのSTINGERPLUSからコピーしておきましょう＾＾

 

 category.phpを開くと以下の部分があると思います。

<div class="post">
<?php if(trim($cat_data['st_cattitle']) !== ''){ ?>
<h1 class="entry-title"><?php echo esc_html($cat_data['st_cattitle']) ?></h1>
<?php }else{ ?>
<h1 class="entry-title">「<?php single_cat_title(); ?>」 一覧</h1>
<?php } ?>
<?php if(!is_paged()){ ?>
<?php echo category_description(); ?>
<?php } ?>
</div><!-- /post -->

このままだとカテゴリーの説明文がないときも、後で設定する説明文のスタイルが出現してしまったのでわいひらさんのカスタマイズを書き加えました。

 

このコードの下半分

<?php if(!is_paged()){ ?>
<?php echo category_description(); ?>
<?php } ?>

を消して

 <?php if (is_category() && //カテゴリページの時
          !is_paged() &&   //カテゴリページのトップの時
          category_description()) : //カテゴリの説明文が空でない時 ?>
<div class="category-description"><?php echo category_description(); ?></div>
<?php endif; ?>

に書き換えます。

 

 

style.cssに追加する！

子テーマのstyle.cssに説明文のスタイルを追加します。これはわいひらさんの記事の通り行えばOKです！

 

少しいじって、Kumasan-Kenkou.comの説明文のスタイルはこんな感じ↓にしてみました＾＾

/*カテゴリーページ一覧上段の説明文のスタイル*/
.category-description  {
    margin-top: 15px;
    margin-bottom: 30px;
    background-color: rgba(255,255,255,0.83);
    padding: 5px 20px;
    border-radius: 5px;
    border: 1px solid #333631;
}

背景色と枠線の色、枠の角丸を変えてみました！

みなさんも自分のサイトに合うように変えてみてください＾＾

 

 

まとめ

PHPの知識がほぼ皆無なので、似ている所を探して切り貼りしてひたすら試してみる、を繰り返していたらなんとかできました。笑

STINGER PLUS+でやってみたい方はこの記事が参考になっているのか分かりませんが笑、ぜひ試してみてください＾＾

STINGER PLUS＋,◆WordPress

Posted by sirokuma