WordPress: Tumbnail hover — & gt; показать заголовок
В настоящее время я создаю свою собственную тему WordPress. Индекс представляет собой простую сетку миниатюр. Я пытаюсь показать заголовок статьи при наведении курсора мыши. Я хочу, чтобы каждый заголовок отображался в том же элементе, например<div id='article-title'> <?php the_title(); ?> </div> становится названием любой миниатюры при наведении. Это вообще возможно? Если нет, есть ли альтернативы?
это основной код:
<?php get_header(); ?>
<?php if(have_posts()) : ?><?php while(have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<div class="tableau">
<div div="thumbnail">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail(vignette); ?></a>
</div>
</div>
</div>
<div id='article-title'> <?php the_title(); ?> </div>
<?php endwhile; ?>
<?php endif; ?>
<?php get_footer(); ?>
Спасибо за помощь!
Решение
попробуй этот код
<?php if(have_posts()) :
while(have_posts()) : the_post(); ?>
<div class="post" id="post-<?php the_ID(); ?>">
<div class="tableau">
<div id="thumbnail" post_id="<?php the_ID(); ?>">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail(vignette); ?></a>
</div>
</div>
</div>
<div id='article-title'> <?php the_title(); ?> </div>
<?php endwhile;
endif; ?>
и JS будет
<script>
$("#thumbnail"). on("mouseover", function() {
var post_id = $(this).attr('post_id');
$.ajax({
type:"POST",
url: ajax_url, // you need to provide ajax url here
data: {
action: "get_post_title",
ID: post_id
},
success:function(data){
$("#article-title").html(data);
},error: function(errorThrown){
console.log(errorThrown);
}
});
})
</script >
и код functions.php здесь.
<?php
add_action( 'wp_ajax_get_post_title', 'delete_jobfn' );
add_action( 'wp_ajax_nopriv_get_post_title', 'delete_jobfn' );
fucntion Kv_get_post_title(){
wp_die(get_the_title( $_POST['ID'] ));
} ?>
Я надеюсь, что это даст вам решение
Другие решения
Других решений пока нет …