Question

您好我在wordpress中有一个帖子，我使用the_excerpt函数来隐藏一些文本，但我想在点击阅读更多而不重新加载页面后显示它我还需要向这个隐藏文本添加一个类和样式我该怎么办？它？

<?php
// The Query
$the_query = new WP_Query( array( 'post_type' => 'oferta', 'orderby' => 'date', 'order' => 'DESC', 'posts_per_page'=>-1 ) );
// The Loop
while ( $the_query->have_posts() ) : $the_query->the_post();                                        
$thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id ( $the_query->ID ), 'thumbnail' );
?>  
<div class="col-sm-6">
<h2><?php the_title(); ?></h2>
<?php the_excerpt(); ?>
</div>   
<?php endwhile ?>

Answer 1

尝试这样的事情。

<?php
// The Query
$the_query = new WP_Query( array( 'post_type' => 'oferta', 'orderby' => 'date', 'order' => 'DESC', 'posts_per_page'=>-1 ) );
// The Loop
while ( $the_query->have_posts() ) : $the_query->the_post();                                        
$thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id ( $the_query->ID ), 'thumbnail' );
?>  
<div class="col-sm-6">
<h2><?php the_title(); ?></h2>
<span><?php the_excerpt(); ?></span><span class="read-more">Readmore</span>
<span style="display:none"><?php the_content(); ?></span>
</div>   
<script>
  $(".read-more").on("click",function(){
      $(this).prev("span").hide();
      $(this).hide();
      $(this).next("span").show();
  });
</script>
<?php endwhile ?>

JSFIDDLE

Answer 2

你基本上想要在你的“阅读更多”中添加一个事件监听器。切换剩余文本显示的文本。我无法弄清楚你的_excerpt函数是什么样的，所以我无法提出任何具体的建议，但是它的一般模式是这样的：

CSS

<style>
   #teaser { color: blue; cursor: pointer; }
   #hiddenText { display: none; }
</style>

HTML

 <div>
 <h1>My Title Here</h1>
 <div id="myBlurb">
    <span id="teaser">Read More....</span>
    <span id="hiddenText">Here is some text that is now showing</span>
</div>    
</div>

和JQuery

<script>
$('#teaser').click( function(){
    $('#hiddenText').toggle();
})
</script>

由于您使用＆＃39; JQuery＆＃39;标记了问题，我假设您可以使用该库。在WordPress中，我相信你有能力添加自定义JS / JQuery。您可以构造一个脚本，该脚本只是针对PHP代码现有输出的ID或类。希望这可以帮助。

如何在更多后面添加课程

2 个答案: