更改阅读更多链接以在Wordpress中显示完整文章

Question

I'm trying to change the function of the read more button on the excerpt of a post. Instead of the Read More button going to the article page, I'd like it to load the rest of the article on the archive page.

This is what I have in my functions page:

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 );

I know that I'd have to replace get_permalink($post->ID) with something else, but I'm not sure how to go about it. Any help would be greatly appreciated.

Answer 1

You can do this in jQuery. The trick is to hide excerpt div and show the full content div once the link is clicked.

Edit your 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');

Edit your loop page (index.php, archive.php, etc.)

<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(); ?>

And lastly you enqueue this script or hook it to you 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>