[ 解決済 ] 投稿リストの記事の有無で見出しの表示非表示をさせたい

[fan23]

■ WordPress のバージョン
5.9

■ テーマ・プラグインは全て最新版で確認してください。
確認しました。

■ テーマの種類
Katawara

■ テーマのバージョン
1.11.1

■ 関連しそうなプラグインを一つづつ停止して症状が改善するか確認してください。
確認しました。

■ 期待する動作
サッカークラブの選手一覧を作りました。
カスタム投稿タイプで「学年」というカスタム分類名を作り、1年〜6年まで選手に割り当てています。

固定ページに学年ごとの一覧を掲載しています。
・6年生（見出し）
・6年生一覧（投稿リスト）
・5年生（見出し）
・5年生一覧（投稿リスト）
以下1年生まで続く、と作りました。
6年生が卒業してゼロになった場合、6年生（見出し）が記事数に連動して非表示にしたいのです。
このようなことは可能でしょうか。

■ 自分で試した事
Katawaraの機能でどうにかできるか調べましたが見つけられずでした。

■ 症状が発生するブラウザ
Firefox、Chrome

■ 実際の症状
記事は0ですが、見出しは残っています。

[対馬 俊彦]

以下のようにして、見出しを非表示にできました。

【手順①】

グループブロックに
* 投稿リスト
* 見出し(H2)
の順に入れる。

グループブロックに 追加 CSS クラス「year-group」を指定する。

これを学年ごとに作る。

今回やりたいことのために、あえて見出しを後に配置します。

　

【手順②】

以下の CSS を追加する。

.year-group .alert-warning,
.year-group .alert-warning + h2 {
    display: none;
}

.year-group .wp-block-group__inner-container {
    display: flex;
    flex-direction: column-reverse;
}

CSS の隣接セレクタを使って 投稿リスト の後ろの 見出し を非表示にしています。

そして、フレックスボックスを使って 投稿リスト と 見出し の位置を入れ替えています。

　

コンテンツの後に見出しがあるのは SEO 的にどうよ？なんてことは気にしないようにお願いします (^^♪
もしそれが心配なら、見出しの代わりに段落を使えばいいですね。

[fan23]

対馬さま
ありがとうございます！できました！
.alert-warningで判定、アイデアですね！
本当に助かりました。ありがとうございました！

[対馬 俊彦]

[ 解決済 ] から間が空きましたが、Chrome / Edge 105 がリリースされて、:has() 疑似クラスが使えるようになったので、情報を追加しておきます。

以下のようにして、見出しを非表示にするやり方が現実的な選択肢になりました。

【手順①】

グループブロックに
* 見出し(H2)
* 投稿リスト
の順に入れる。

※3月5日に書いたやり方のように逆順にする必要はありません。(編集画面ですごく見やすくなります)

グループブロックに 追加 CSS クラス「year-group」を指定する。

これを学年ごとに作る。

【手順②】

以下の CSS を追加する。

.year-group:has(.alert-warning),
.year-group .alert-warning {
    display: none;
}

※:has(.alert-warning) は「.alert-warning を含む(持っている)」という意味です。

※.year-group .alert-warning は Firefox 向けに残してあります。

Safari はすでに :has() をサポートしていますので、これで Firefox 以外の主要ブラウザが対応したことになります。

Firefox では学年見出しが表示されますが、それには目をつぶって(そのうちにサポートされると期待しつつ😅)、このような「表示されたらごめんなさい」で済むケースではもう :has() を使う方がよいのではないかと思う次第…

[投稿者]

投稿