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

【问题标题】：Change Read More link to show full article in Wordpress更改阅读更多链接以在 Wordpress 中显示全文
【发布时间】：2018-09-25 08:21:02
【问题描述】：

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

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

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)，但我不知道该怎么做。任何帮助将不胜感激。

【问题讨论】：

标签： php html wordpress wordpress-theming

【解决方案1】：

您可以在 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>

【讨论】：

【解决方案2】：

您需要创建一个 JS 函数来加载/替换 .我会使用 jQuery 的 .load() 并在你的函数中使用类似的东西：

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

这是一种方法。您也可以只加载所有隐藏的文章，然后使用 阅读更多 按钮交换可见性。

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

【讨论】：

感谢您的帮助！