Add comment count on hover

This commit is contained in:
AlxMedia 2022-09-09 12:49:46 +02:00
parent 3591f62a19
commit a078178934
6 changed files with 16 additions and 4 deletions

View file

@ -13,5 +13,11 @@
<h2 class="box-title"><?php the_title(); ?></h2>
<span class="box-date"><?php the_time( get_option('date_format') ); ?></span>
<?php if ( comments_open() && ( get_theme_mod( 'comment-count', 'on' ) =='on' ) ): ?>
<?php $number = get_comments_number( $post->ID ); if ( $number > 0 ) { ?>
<div class="box-comments" href="<?php comments_link(); ?>"><i class="fas fa-comment"></i><span><?php comments_number( '0', '1', '%' ); ?></span></div>
<?php } ?>
<?php endif; ?>
</a>
</article>

View file

@ -133,6 +133,7 @@ if ( ! function_exists( 'microtype_dynamic_css' ) ) {
.entry a,
.entry a:hover,
#theme-toggle i,
.box-comments,
.alx-tab .tab-item-category a,
.alx-posts .post-item-category a,
.alx-tab li:hover .tab-item-title a,

View file

@ -111,7 +111,7 @@ Kirki::add_field( 'microtype_theme', array(
Kirki::add_field( 'microtype_theme', array(
'type' => 'switch',
'settings' => 'comment-count',
'label' => esc_html__( 'Single - Comment Count', 'microtype' ),
'label' => esc_html__( 'Comment Count', 'microtype' ),
'section' => 'blog',
'default' => 'on',
) );

View file

@ -2,7 +2,7 @@
msgid ""
msgstr ""
"Project-Id-Version: Microtype\n"
"POT-Creation-Date: 2022-09-08 20:10+0200\n"
"POT-Creation-Date: 2022-09-09 12:46+0200\n"
"PO-Revision-Date: 2018-09-21 21:27+0100\n"
"Last-Translator: \n"
"Language-Team: \n"
@ -213,7 +213,7 @@ msgid "Your blog subheading"
msgstr ""
#: functions/theme-options.php:114
msgid "Single - Comment Count"
msgid "Comment Count"
msgstr ""
#: functions/theme-options.php:122

View file

@ -16,7 +16,9 @@
<div class="entry-meta">
<span class="entry-date"><i class="far fa-calendar"></i><?php the_time( get_option('date_format') ); ?></span>
<?php if ( comments_open() && ( get_theme_mod( 'comment-count', 'on' ) =='on' ) ): ?>
<span class="entry-comments"><i class="far fa-comment"></i><a href="<?php comments_link(); ?>"><?php comments_number( '0', '1', '%' ); ?></a></span>
<?php $number = get_comments_number( $post->ID ); if ( $number > 0 ) { ?>
<span class="entry-comments"><i class="far fa-comment"></i><a href="<?php comments_link(); ?>"><?php comments_number( '0', '1', '%' ); ?></a></span>
<?php } ?>
<?php endif; ?>
<span class="entry-author"><i class="far fa-user"></i><?php the_author_posts_link(); ?></span>
</div>

View file

@ -866,6 +866,9 @@ body.dark #theme-toggle-btn:before { border-color: #1a1a1a; top: 2px; left: 34px
.box-date { flex-shrink: 0; margin-left: auto; font-size: 14px; font-weight: 600; color: rgba(0,0,0,0.3); }
.box-thumbnail { width: 60px; flex-shrink: 0; margin-right: 20px; position: relative; }
.box-thumbnail img { width: 60px; height: 60px; border-radius: 100%; display: block; }
.box-comments { opacity: 0; color: #1da9ff; font-size: 30px; width: 30px; position: absolute; right: 0; top: -12px; margin-left: 10px; transition: all 0.3s ease; }
.box-comments span { font-size: 12px; font-weight: 600; color: #fff; line-height: 26px; position: absolute; right: 0; top: 0; width: 100%; text-align: center; transition: all 0.3s ease; }
.box a:hover .box-comments { opacity: 1; right: 20px; }
.slick-image-slide-wrapper { position: relative; }
.slick-image-slide { background: #333; }