让WordPress主题能自动缩略文章中的图片

1月 11, 2011 7 条评论 150 次阅读 0 人点赞

最近试了下国产的有名的istudio-theme,发现不错,不过和原先的Prototype比起来,功能排版方面还是有些欠缺,比如这次主题的文章缩略图吧,上次我用Prototype(主题很简洁,但是功能很强大),在浏览一个宽度为1336的图片时,它能自动缩略文章中的图片到适应主题的宽度,而这次的istudio-theme却超出了div class="entry"的宽度,无论是首页还是单个文章页。 于是折腾了下,先看看Prototype主题的缩略图是有什么控制的,这个简单:只要把博客主题换成Prototype,然后浏览大图超出的那个网页,现在浏览器一般都有开发人员的工具了吧,IE是开发人员工具,opera是蜻蜓,chrome只要右击网页——审查元素就能看到网页的排版了,定位到那张图片的上一级的HTML标签就知道是有谁控制的。

  • 好了,知道做的方法后,查看Prototype的缩略图是由<div class="entry-content" >
  • 在Prototype主题目录打开style.css查找entry-content,看到有个.entry-content img{height:auto;max-width:590px;padding:4px;background:#f9f9f9;border:1px solid #ddd},里面的属性及值就是我们想要的,当然也可以在前面所提到的开发人员工具中也能查到此CSS样式3
.wp-caption img{height:auto;max-width:490px;margin:0;padding:0;border:none;float:right;}

1

孑愁

一个Microsoft、Google、Apple的爱好者综合体,喜欢一切和数码科技有关的东西,也希望能及时的把这些分享给关注它们的人。现就职于某互联网公司,担任前端

文章评论(7)

  • ugg boots on sale

    额,要是能写得更清楚点就好了

    1月 22, 2011
    • 孑愁

      @ugg boots on sale 简单步骤只要找到控制文章图片的css就行
      一般是.wp-caption img
      然后在{}之间增加height:auto;max-width:490px;margin:0;padding:0;border:none;float:right;

      1月 23, 2011
  • ugg boots mini

    这个不错、好东西。

    1月 16, 2011
  • 满街游走

    恩,这个挺好的

    1月 14, 2011
  • ugg classic black

    这个有安装了,要是可以用代码实现就好了

    1月 13, 2011
  • hex nuts

    缩略图片有没有其他的方法

    1月 12, 2011
  • Stainless Steel Washers

    这样换下貌似挺方便的

    1月 12, 2011