👻

SWELLでコメント数を記事一覧に表示する

2023/08/31に公開

CSS

今回WordPressのテーマのSWELLで、記事一覧にコメント数の表示を追加しました。
また、テーマのカスタマイズメニューで、記事一覧に設置したコメント数の表示を非表示に切り替えることもできるようにしました。
自分の備忘録の意味も込めて、掲載します。

また、コードの追加は、子テーマで行ってください。
コメント数の表示を行うコードの挿入場所の説明のため、SWELLのテーマのコードも一部掲載した方が良いと思いますが、多分コードの掲載はいけないと思ったので控えます。

functions.php に追加したコード


function customize_comment_count_setting($wp_customize) {
    $wp_customize->add_section('swell_child_comment_count', array(
        'title' => '記事一覧コメント数表示',
        'priority' => 31, // 30より優先度を上げる。ここは、環境に合わせて設定
	
    ));

    $wp_customize->add_setting('show_comment_count', array(
        'default' => true, // コメント数の表示をデフォルトで有効にする
 
    ));

    $wp_customize->add_control('show_comment_count', array(
        'label' => 'コメント数を表示',
        'type' => 'checkbox',
        'section' => 'swell_child_comment_count',
    ));
}

add_action('customize_register', 'customize_comment_count_setting');

CSSに追加したコード

/* コメント数の表示を切り替える　*/
.comment-count {
    display: block; /* デフォルトは表示 */
}

body.show-comment-count .comment-count {
    display: none; /* show-comment-countクラスがbody要素に追加されている場合は非表示 */
}

コメント数表示部分

コメントのアイコンも、表示できます。
WordPressのプラグインのBetter Font Awesomeを予めインストールしてください。

修正するファイルの場所
style_normal.php (parts/post_list/style_normal.php)

<!-- コメント数を表示 -->
<?php if (get_theme_mod('show_comment_count', true)) : ?>
    <div class="comment-count">
        <i class="fa fa-comment"></i>
        <?php comments_number('0', '1', '%'); ?> コメント
    </div>
    <?php endif; ?>
<!-- コメント数を表示　ここまで -->

このコードの設置場所は、日付などのmetaデータの処理の最後で</div>の上が良いと思いますが、適宜デザインに応じて変えてください。

おまけ

タグを記事一覧に表示したいときは、こちらの記事を参考にしてください。

functions.php に追加したコード

CSSに追加したコード

コメント数表示部分

おまけ

Discussion