wordpress：缩略图悬停->显示标题

Question

我目前正在创建自己的 wordpress 主题。索引是一个简单的缩略图网格。我想做的是在鼠标悬停时显示文章的标题。我希望每个标题都显示在同一个 div 中，例如<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(); ?>

感谢您的帮助！

Answer 1

试试这个代码

<?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'] )); 

  } ?>

我希望这会给你解决方案