/ 博客 / 2383阅

WordPress怎样给文章图片加文字说明框

这个功能一直想要实现,但一直没有实现,今天忍不住加上去了。

方法:

1、在CSS中加入如下代码。

<div class="dp-highlighter">
<div class="bar">
<pre class="EnlighterJSRAW" data-enlighter-language="css">/* 图片caption加框 */  
  
.aligncenter,   
div.aligncenter {   
display: block;   
margin-left: auto;   
margin-right: auto;   
}   
  
.alignleft {   
float: left;   
}   
  
.alignright {   
float: rightright;   
}   
  
.wp-caption {   
border: 1px solid #ddd;   
text-align: center;   
background-color: #f3f3f3;   
padding-top: 4px;   
margin: 10px;   
/* optional rounded corners for browsers that support it */  
-moz-border-radius: 3px;   
-khtml-border-radius: 3px;   
-webkit-border-radius: 3px;   
border-radius: 3px;   
}   
  
.wp-caption img {   
/* margin: 0; */  
padding: 0;   
border: 0 none;   
}   
  
.wp-caption p.wp-caption-text {   
font-size: 11px;   
line-height: 17px;   
padding: 0 4px 5px;   
/* margin: 0; */  
}</pre>
</div>
</div>

2、用Live Writer写完后上传图片。然后在线用编辑器打开,点图片,在Caption属性中加入自己想要的文字即可。

可以在编辑器中看html代码如下。其中align="alignnone"表示图片默认位置,alignright是右对齐,alignleft是左对齐,aligncenter是居中。因为都是CSS控制的,因此都需要在html编辑器中编辑。

<div class="dp-highlighter">
<div class="bar">
<pre class="EnlighterJSRAW" data-enlighter-language="html">&lt;img class="wp-caption " style="border-style: initial; border-color: initial; margin-right: 5px; border-image: initial; border-width: 0px;" title="art-Gu-Kailai-420x0" src="http://synyan.cn/t/../art-Gu-Kailai-420x0.jpg?x-oss-process=style/watermark_webp" alt="art-Gu-Kailai-420x0" width="420" height="295" align="right" border="0" /&gt;Political scandal ... Bo Xilai and his wife, Gu Kailai and son Bo Guagua.</pre>
</div>
</div>
# 写于十三年前,改于二年前
           

6

  1. 希琳娜

    哇哈哈 ~ 你居然拿這張照片當範例 ! ^^

    Internet Explorer 9 · Windows Vista
    1. ric83311

      @希琳娜他相当可以,相当应景

      Maxthon 3 · Windows XP
      1. 勺子
        Google Chrome 18 · Mac OS X 10.5
    2. S̆̈

      @希琳娜:呵呵

      Google Chrome 17 · Windows 7
  2. Healson

    这个好像编辑器里就能实现吧?

    Firefox 11 · Windows XP
    1. S̆̈

      @Healson可以吗?

      Google Chrome 17 · Windows 7

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注