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

Posted 2023-05-08

【中文标题】wordpress：缩略图悬停->显示标题

【英文标题】：wordpress: tumbnail hover -> show title

【发布时间】：2015-11-20 09:28:03

【问题描述】：

我目前正在创建自己的 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(); ?>

感谢您的帮助！

【参考方案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'] )); 

   ?>

我希望这会给你解决方案

【讨论】：

非常感谢您抽出宝贵的时间 Kvvaradha ！

ajax url 是否类似于 "/wp-content/themes/theme_name/index.php" ？如果是，不幸的是它不起作用。什么都没有改变，div 显示最后一篇文章的标题。也许我们不应该使用 只需在 div 中调用标题？

更准确地说，div #article-title 在 index.php 中同时显示所有标题，而在页脚中仅显示最后一篇文章的标题（这就是我想要的地方喜欢放）

Ajax url 不同。可能是“yoursite.com/wp-admin/admin-ajax.php”