WordPress修改Blockquote/pre等,让引用文段模块更漂亮

在Wordpress后台编辑时,引用一段文字后点击”引用文段”会自动添加Blockquote标签,但Wordpress默认的引用样式是相当丑的,而我们可以通过修改Style.Css文件中的Blockquote标签样式,让文章的引用段落显示的漂亮一些。

打开主题文件夹中的style.css文件,找到blockquote标签,修改属性如下:

blockquote{
    background: #d9e9ff; /×背景颜色×/
    padding: 10px 15px 10px 15px; /×引用块内部文字距离边框的距离×/
    margin: 1em 3em 1em 3em; /×引用快边框上右下左的缩进×/
    font-size:.8em;/×字体大小×/
    border-style:dotted dotted dotted solid; /×边框样式×/
    border-width:1px 1px 1px 5px;/×边框宽度×/
    border-color:#5bbcdd;  /×边框颜色×/
    line-height:200%  /×行间距×/
}

显示效果:

同样找到pre标签,修改其属性如下:

pre {
    background: #d9e9ff;  /×背景颜色×/
    padding: 0.75em 0.75em; /×内部文字距离边框的距离×/
    margin: 1em 3em 1em 3em; /×边框上右下左的缩进×/
    font-size:.8em; /×字体大小×/
    overflow: auto; /×如有超出边框长度的代码,显示滚动条×/
    border-style:dotted dotted dotted solid;/×边框样式×/
    border-width:1px 1px 1px 5px;/×边框宽度×/
    border-color:#5bbcdd;/×边框颜色×/
    line-height:200% /×行间距×/
}

修改完以上两个标签CSS属性后保存,这个时候如果你的博客文章中有引用段落或插入代码后就会产生效果。

修改时记得删除注释文字。

本文参考:

WordPress修改Blockquote/pre等,让引用文段模块更漂亮 | 萝卜居—萝卜家园网

WordPress修改Blockquote让引用文段模块更漂亮

admin

大家好!欢迎光临我的个人博客,本博主要是学习和记录自己生活、学习中发生的点点滴滴的过程,很高兴可以把自己的废话和一点点的经验拿出来和网友分享,最大的愿望就是能构共同学习,共同进步。

1 条回复

  1. bautian说道:

    请问那个虚线代码框怎么做的,用什么插件?

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.