广

WordPress教程

  • 帝国cms教程
  • 织梦CMS教程
  • PHP CMS教程
  • ECSHOP教程
  • WordPress教程
  • Discuz教程
  • CMS学习

    WordPress获取所有特色图像

    2018-03-19 16:50:32 次阅读 稿源:非官媒
    广告

    当我们要在WordPress中做一个类似下图的这种的幻灯片展示功能的时候,首先得获取到最近的几张特色图像(也可以称为缩略图)和它所在的文章标题。本文将教你如何从WordPress的数据库中读取到你想要的数据。

    WordPress的特色图像数据主要保存在自定义栏目 _thumbnail_id 中,这个_thumbnail_id与一篇文章的id对应,构成一个映射关系,通过这个映射可以获取到这个特色图像的地址和文章标题等信息。下面的php代码用于输出最近5篇特色图像的HTML代码,通过这些HTML,你可以在此基础上添加JS、CSS代码以达到幻灯片的效果。 以下代码可能并不能适用于你的项目,但是可以作为参考,通过一些修改,就可以达到你的目的啦。 WordPress的特色图像数据主要保存在自定义栏目 _thumbnail_id 中,这个_thumbnail_id与一篇文章的id对应,构成一个映射关系,通过这个映射可以获取到这个特色图像的地址和文章标题等信息。下面的php代码用于输出最近5篇特色图像的HTML代码,通过这些HTML,你可以在此基础上添加JS、CSS代码以达到幻灯片的效果。 以下代码可能并不能适用于你的项目,但是可以作为参考,通过一些修改,就可以达到你的目的啦。

    <ul>
    <?php
        $arr = array('meta_key' => '_thumbnail_id',
                    'showposts' => 5,        // 显示5个特色图像
                    'posts_per_page' => 5,   // 显示5个特色图像
                    'orderby' => 'date',     // 按发布时间先后顺序获取特色图像,可选:'title'、'rand'、'comment_count'等
                    'ignore_sticky_posts' => 1,
                    'order' => 'DESC');
    
        $slideshow = new WP_Query($arr);
        if ($slideshow->have_posts()) {
            $postCount = 0;
            while ($slideshow->have_posts()) {
                $slideshow->the_post();
    ?>
        <li>
            <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
            <?php
                // 获取特色图像的地址
                $timthumb_src = wp_get_attachment_image_src( get_post_thumbnail_id(get_the_ID()) );
                echo '<img border="0" alt="' . get_the_title() . '" src="' . $timthumb_src[0] . '" /> ';
            ?>
            </a>
        </li>
    <?php
            } // endwhile
            wp_reset_postdata();
        } // endif
    ?>
    </ul>
    以上php代码输出的html代码类似:
    <ul>
      <li>
        <a href="http://example.com/a" title="aaa">
          <img border="0" alt="aaa" src="http://example.com/mala.jpg" /> ';
        </a>
      </li>
      <li>
        <a href="http://example.com/c" title="ccc">
          <img border="0" alt="ccc" src="http://example.com/ditie.jpg" /> ';
        </a>
      </li>
    ...
    </ul>

    一起学吧部分文章转载自互联网,供读者交流和学习,若有涉及作者版权等问题请及时与我们联系,以便更正、删除或按规定办理。感谢所有提供资讯的网站,欢迎各类媒体与一起学吧进行文章共享合作。

    广告
    广告
    广告