[Ver.2.17.05.01]記事一覧ページにタグ説明文等の追加

healerver2-thumbnail

以下の機能を追加しました。

  • よくある質問用クイックタグを追加
  • 記事一覧ページにタグ説明文の追加
  • サイドバーのカテゴリー記事数表示の変更
  • アーカイブページのタイトルの変更

最新バージョンへのアップデート方法は、以下の記事をご覧ください。

healerver2-thumbnail
Healerのテーマファイルアップデートの方法を説明します。 Healerのアップデートは、 WordPress管理画面からワンクリ

[Healer Ver.2.17.05.01]アップデート内容

よくある質問用クイックタグを追加

記事作成ページのクイックタグに、
「よくある質問用リスト」というものを追加しました。

クイックタグ

クイックタグ

こちらを使用すると以下のようなリストを作成できます。

ここに質問を記入
ここに答えを記入
ここに質問を記入
ここに答えを記入
ここに質問を記入
ここに答えを記入

dlタグの間のdtとddを増やすと複数のリストを表示できます。

<dl class="faq">
<dt>ここに質問を記入</dt>
<dd>ここに答えを記入</dd>
<dt>ここに質問を記入</dt>
<dd>ここに答えを記入</dd>
<dt>ここに質問を記入</dt>
<dd>ここに答えを記入</dd>
</dl>

dtの背景色はテーマカスタマイザーのタイトル色に対応しています。

カスタマイザーでカラー変更可能

カスタマイザーでカラー変更可能

実際の「よくある質問」ページはこちらです。

healerver2-thumbnail
サポートはありますか? 基本的にサポートはしておりませんが、Facebookの限定グループに参加していただいている方限定でご質問に

記事一覧ページにタグ説明文の追加

4月26日のアップデートで記事一覧ページにカテゴリー説明文を追加しましたが、
今回はそれに加え、タグ説明文も表示できるようにしました。

表示方法はカテゴリーと同じで、
タグ編集画面で説明文を記入するだけです。

タグの編集

タグの編集

タグ一覧ページでこのように表示されます。

タグ説明文の表示例

タグ説明文の表示例

サイドバーのカテゴリー記事数表示の変更

サイドバーのカテゴリー表示を少し変更しました。

以前のデザイン

以前のサイドバーのデザイン

以前のサイドバーのデザイン

新しいデザイン

新しいサイドバーのデザイン

新しいサイドバーのデザイン

マウスオーバーするとふわっと背景色が変わり、
カテゴリー説明文を設定している場合はポップアップで表示されます。

マウスオーバーのアニメーション

マウスオーバーのアニメーション

カテゴリーウィジェットを使った場合はこれで正しく表示されますが、
カスタムメニューを使った場合は子テーマにCSSを追記する必要があります。

カスタムメニューの設定

カスタムメニューの設定

例えば、ニュースのカテゴリーのカスタムメニューを[news-menu]という名前で作成した場合は以下のようなCSSとなります。

#sidebar #menu-〇〇-〇〇 a {
    display: block;
    overflow: hidden;
    *zoom: 1;
    padding: 4px;
    text-decoration: none;
}

#sidebar #menu-〇〇-〇〇 a:hover {
    background: #f0f0f0!important;
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
}

#sidebar #menu-〇〇-〇〇 a:hover span {
    background: #333;
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
}

#menu-〇〇-〇〇の部分を作成したカスタムメニューの名前に変更して子テーマのCSSに追記してください。

もちろん、カテゴリーだけではなくタグでメニューを作成することも可能です。

こちらはニュースカテゴリーとお客様の声タグを組み合わせた例です。

サイドメニュー作成例

サイドメニュー作成例

アーカイブページのタイトルの変更

月別アーカイブページのタイトル表示を変更しました。

以前のタイトル

以前のタイトル

以前のタイトル

新しいタイトル

新しいタイトル

新しいタイトル

区切り線がなくなって日付がわかりやすくなりました。

以上、Ver.2.17.05.01のアップデート内容となります。

healerver2-thumbnail
この記事が良かったら、いいねして
最新記事をチェックしてください!

Twitterで