Question

我正在尝试更改帖子摘录中的“更多阅读”按钮的功能。我希望它可以将文章的其余部分加载到存档页面上，而不是转到文章页面的“更多信息”按钮。

这是我的功能页面中的内容：

function new_excerpt_more($more) {
       global $post;
    return '... <a href="'. get_permalink($post->ID) . '">Read more</a>';
}
add_filter('excerpt_more', 'new_excerpt_more');


function custom_excerpt_length( $length ) {
    return 250;
}
add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );

我知道我必须用其他东西代替get_permalink($post->ID)，但是我不确定该怎么做。任何帮助将不胜感激。

Answer 1

您需要创建一个JS函数来加载/替换该文本。我将使用jQuery的.load()，并在您的函数中使用类似以下内容：

$( "#archive-post-div" ).load( "url-from-permalink.html #the-content-div" );

那是做到这一点的一种方法。您还可以只加载所有隐藏的文章，并使用了解更多按钮交换可见性。

我会详细说明，但我不知道您对JS / jQuery或CSS的熟悉程度。

Answer 2

您可以在jQuery中执行此操作。技巧是隐藏摘录div，并在单击链接后显示全部内容div。

编辑您的functions.php

<?php
function new_excerpt_more($more) {
    global $post;
    return '... <a class="reveal-full-content"  action-id ="' . $post->ID .'" href="#">Read more</a>';
}
add_filter('excerpt_more', 'new_excerpt_more');

编辑循环页面（index.php，archive.php等）

<div class="wrap">
<div id="primary" class="content-area">
    <main id="main" class="site-main" role="main">
        <?php
        /* Start the Loop */
        while ( have_posts() ) : the_post();
        ?>
        <article id="post-<?php the_ID(); ?>" <?php post_class( 'post' ); ?>>
            <div class="post-content">
                <div class="excerpt-content" action-id="<?php the_ID(); ?>">
                    <?php the_excerpt(); ?>
                </div>
                <div class="full-content" action-id="<?php the_ID(); ?>" style="display: none;">
                    <?php the_content(); ?>
                </div>
            </div>
        </article>
        <?php

        endwhile; // End of the loop.
        ?>

    </main><!-- #main -->
</div><!-- #primary -->
<?php get_sidebar(); ?>

最后，您使该脚本入队或将其挂接到wp_footer

<script type="text/javascript">
$(document).ready(function() {
    $('a.reveal-full-content').on('click', function() {
        var $postID = $(this).attr('action-id');

        $('.excerpt-content[action-id="'+$postID+'"]').css('display', 'none');
        $('.full-content[action-id="'+$postID+'"]').css('display', 'block');
    });
})
</script>

更改阅读更多链接以在Wordpress中显示全文

2 个答案: