wordpress 插件访问帖子信息

Question

我是 wordpress 插件开发的新手。我正在尝试访问帖子信息，并根据它是否具有特色图像，我正在创建幻灯片。但是图片网址和帖子标题超出了我的 div 标签。下面是我的代码。

    //function to display post info 
    function postsinfo_collage_display($attr, $content) {

    $plugins_url = plugins_url();

     $html = '<div id="pscanvas" class="row">
                    <div  class="row__inner mThumbnailScroller">';

    // The Query
    query_posts( array ('orderby' => 'date' ) );

    // The Loop
    while ( have_posts() ) : the_post();
    if ( has_post_thumbnail() ) {
        $html .= '<div class="tile">
                            <div class="tile__media">';
        $html .='<a href="'.esc_url(get_permalink()).'">';
        $html .='<img class="tile__img"';
        $html .="src='".esc_url(the_post_thumbnail_url()). "'/>";
        $html .='</a></div><div class="tile__details">
              <div class="tile__title">';
        $html .= the_title();
        $html .='</div></div></div>';        
    } 
    endwhile;
    // Reset Query
    wp_reset_query();
    $html .= '</div>
                    </div>
                    <script>
                    window.jQuery || document.write(\'<script src="minified/jquery-1.11.0.min.js"><\/script>\')
            (function($){
                $(window).load(function(){              
                });
            })(jQuery);</script>';

        return $html;

    }

我得到的输出是：

    <div class="entry-content">
            http://localhost:9085/wordpress/wp-content/uploads/2016/04/call-of-duty-ghosts-20517-1366x768-1200x675.jpgpscanvashttp://localhost:9085/wordpress/wp-content/uploads/2016/04/Call-Of-Duty-Ghost-Background-For-Wallpaper-652-1200x675.jpgkwofkwc
        <div id="pscanvas" class="row">
         <div class="row__inner mThumbnailScroller ">
             <div id="mTS_1" class="mTSWrapper mTS_horizontal">
                 <div class="mTSAutoContainer mTSContainer" ">
                     <div class="tile">
                     <div class="tile__media">
                     <a href="http://localhost:9085/wordpress/2016/09/04/pscanvas/">
                     <img class="tile__img" src=""></a>
                     </div><div class="tile__details">
                     <div class="tile__title"></div></div></div>
                     <div class="tile"><div class="tile__media">
                     <a href="http://localhost:9085/wordpress/2016/05/03/kwofkwc/">
                     <img class="tile__img" src=""></a></div><div class="tile__details">
                     <div class="tile__title"></div></div></div>
                     </div>
                 </div>
             </div>
        </div>
            <script>
            window.jQuery || document.write('<script src="minified/jquery-1.11.0.min.js"><\/script>')
            (function($){
                $(window).load(function(){              
                });
            })(jQuery);</script>
    <strong>Album Rating:</strong> <div class="genericon genericon-star"></div><br> </div>

我可以看到图像 url 应该在 img 标签内，但它来自整个 div 标签。

Answer 1

您正在使用直接输出图像和标题的函数，而不是将其附加到您的 $html 变量中。您需要切换到返回值的函数。

从以下位置更改图像：

$html .="src='".esc_url(the_post_thumbnail_url()). "'/>";

收件人：

$html .= "src='" . esc_url( get_the_post_thumbnail_url() ) . "'/>";

标题来自：

$html .= the_title();

收件人：

$html .= get_the_title();

文档：

https://developer.wordpress.org/reference/functions/get_the_title/ https://developer.wordpress.org/reference/functions/get_the_post_thumbnail_url/

Answer 2

试试

$url = wp_get_attachment_url( get_post_thumbnail_id($post->ID) );
<img src="<?php echo $url; ?>"/>