远方的海
远方的海,WordPress,免费
2014 Sep 26 04 : 15

WordPress获取某一分类文章列表的第一个文章的图和摘要

您当前的位置: 首页 > WordPress > 正文
欢迎光临远方的海!您可能还对 WordPress建站免费资源最新IT动态 感兴趣,点击开启 悦读 模式。CTRL+D 快捷收藏本文,我们期待您再次光临!
[文章目录]

WordPress的CSS必备技能,也是因为最近改主题,有朋友反映,太单调了,要整点图和内容摘要放在前面,于是今天也是折腾了一下,学会了这个新的技巧。现在分享给大家。

目录

关于Wordpress分类文章的调用,除了本篇文章还写了几篇文章,在一起给大家参考:

代码

具体的html代码如下,加在主题适当的地方。代码的可行性是有图有真相的:具体的样式根据自己的口味改,需要的话可以审查元素参考本站的。

WordPress获取某一分类文章列表的第一个文章的图和摘要说明解释:

代码的第2行,showposts=1表示显示1篇文章,cat=5说明是id为5的分类。

代码的第5行,<div class="pic-con sprite-wp" style="float:left;width:90px">呢,是个图片容器,作为显示图片之用。你可以用background:url(...);的css样式来加上一个图片。

代码的14行说明截断150个字节的大小。
以上内容都是可以根据自己的需要来自定义的。以下给出HTML代码,直接放入首页index.php,css样式可以参考本站的。用审查元素可以调用出来,这里就不粘贴了。

    <div class="first-art">
        <?php query_posts("showposts=1&cat=5")?>
        <?php while (have_posts()) : the_post(); ?>
        <a href="<?php the_permalink() ?>"  target="_blank">
            <div class="pic-con sprite-wp" style="float:left;width:90px">
            </div>
        </a>
            <div class="first-content">
                <h3>
                <a title="<?php the_title(); ?>" href="<?php the_permalink() ?>" target="_blank">
                <?php the_title(); ?>
                </a>
                </h3>
                <p><?php echo mb_strimwidth(strip_tags(apply_filters('the_content', $post->post_content)), 0, 150,"..."); ?>…</p>
            </div>
       <?php endwhile; ?>
    </div>

以上。

好文!分享给朋友,或者点个赞吧~

文章信息

分类:WordPress WP技巧

您可能也会喜欢

发表回复

Post Comment


  1. JV :

    这个代码有点大意了, 不应包在摘要的div里面,得放在外面。不然会导致布局错位的。可以参考你上一篇文章的位置看看。

    2014-9-29
    • JV :

      endwhile;

      2014-9-29
      • 远方的海水神 :

        oh no…又错啦!

        2014-9-30
    • 远方的海水神 :

      哎呀,我要检查一下!!!

      2014-9-30
  2. 超級efly :

    前來支持一下~似乎挺不錯的呢!

    2014-9-26
  3. Timle :

    访问首页的情况下,顶部聚合导航样式有问题

    2014-9-26
    • 远方的海水神 :

      額’貌似是z~index不行。可是我已經加上了還是那樣。暈。

      2014-9-26
  4. JV :

    如下图:

    2014-9-26
  5. JV :

    反馈一个小问题吧:贵站评论区#comments有一部分是与上面相关文章叠加的,当相关文章超过五行也就是10篇时,若发表评论显示出现 而且还没有刷新页面时 会与上面的相关文章有一部分叠加,建议给#comments加一个clear:both。

    2014-9-26
    • 远方的海水神 :

      多謝!我來試試ヾ(・ω・o) (´・ω・`)

      2014-9-26