在wordpress功能短代码中,图像显示为“外部”循环

时间:2013-03-22 13:48:32

标签: wordpress function shortcode

我已经在WordPress的functions.php中的一个或两个指南中创建了一个短代码,[news cat =“1”num =“5”]标题[/ news]。代码如下:

   Create the callback function

    function recent_posts_function($atts, $content = null) {
       extract(shortcode_atts(array(
          'num' => 1,
          'id' => ''
       ), $atts));

       $return_string = '<h3>'.$content.'</h3>';
       $return_string .= '<div class="custom-recent-posts">';
       query_posts(array(
        'orderby' => 'date', 
        'order' => 'DESC' , 
        'showposts' => $num,
        'cat' => $id,
        ));
       if (have_posts()) :
          while (have_posts()) : the_post();
            $return_string .= '<div class="custom-recent-posts-post">';
            $return_string .= ''.the_post_thumbnail('news-thumbnail').'';
            $return_string .= '<h3><a href="'.get_permalink().'">'.get_the_title().'</a></h3>';
            $return_string .= '<p>'.get_the_date().'</p>';
            $return_string .= '<p>'.get_the_excerpt().' <a href="'.get_permalink().'">Les mer</a></p>';
            $return_string .= '</div>';
          endwhile;
       endif;
       $return_string .= '</div>';

       wp_reset_query();
       return $return_string;
    }

// Register the shortcode

function register_shortcodes(){
   add_shortcode('news', 'recent_posts_function');
}

问题是,代码输出不正确。将图像移动到我的容器上方。比如这(我知道我的HTML可以更整洁)。

<img width="248" height="100" src="http://localhost:8888/dhs/wp-content/uploads/2013/03/Diakonveien-18-bygg2-248x100.jpg" class="attachment-news-thumbnail wp-post-image" alt="Test Diakonveien-18-bygg" />
<img width="163" height="100" src="http://localhost:8888/dhs/wp-content/uploads/2013/03/large-test.jpg" class="attachment-news-thumbnail wp-post-image" alt="Test large-test" />

<h3>Nyheter</h3>
<div class="custom-recent-posts">
<div class="custom-recent-posts-post">
    <h3><a href="http://localhost:8888/dhs/for-ansatte-nyheit-test/">For ansatte nyheit test</a></h3>
    <p>22. mars 2013</p>
    <p>Content <a href="http://localhost:8888/dhs/for-ansatte-nyheit-test/">Les mer</a></p>
</div>
<div class="custom-recent-posts-post">
    <h3><a href="http://localhost:8888/dhs/nytt-innlegg-for-student-test/">Nytt innlegg for student test</a></h3>
    <p>21. mars 2013</p>
    <p><a href="http://localhost:8888/dhs/nytt-innlegg-for-student-test/">Les mer</a></p>
</div>

任何简单的解决方案,还是应该重建我的代码?我知道有插件。所以我只是要求有人指向正确的方向。

1 个答案:

答案 0 :(得分:1)

您应该使用get_the_post_thumbnail,因为the_post_thumbnail会输出缩略图而不是返回缩略图。