WordPress博客文章标题添加背景_Hotnews主题美化系列代码

我是一个非常喜欢界面华丽效果的人,太简单、朴素反倒显得网站没有什么吸引力。

今天为望星湖畔Wxhp.Org博客添加了两个功能,甚是满意,特拿出来分享,以资备用。

功能一:短代码

介绍&效果演示

S-shortcodes 短代码插件是Jeff在一款国外短代码插件的基础上进行二次开发而来的,相对应原插件,去除了自认为鸡肋的一些特效,改进精简了相关代码,更为插件添加了更多人性化的操作体验功能。原版插件名称为arconix-shortcodes,作者为John Gardner。

很酷吧

相对于写那些麻烦的代码,插件要快捷的多了。

无插件,手写代码方法:打造你自己的WordPress短代码

功能二:H3标题——修改文章标题属性

hotnews没有设置文章内标题的属性,遇到多个标题段落的文章,只以加粗标题区分,看起来有点不美观,看到Newgavin主题里的文章标题就非常的喜欢,就想拿来安在我的网站上,折腾了一会儿,终于找到实现方法:

修改文章标题格式属性

找到hotnews主题style.css文件,用Notepad ++,用UTF-8无BOM格式编码打开,然后针对其中的h1,h2,h3,h4等进行修改,因为我使用了h3,所以h3中的修改可以直接在文章目录中反映出来。

添加以下代码到

/** 正文 **/

下即可实现同样的效果

.entry h3{
    font-size: 16px;
    line-height:30px;
    height:30px;
    color:#05a;
    font-weight:600;
    margin:20px 0;
    border-left:5px solid #05a;
    background:#ddd;
    padding:5px 0 5px 10px ;
    }

功能三:美化文章标题

在style.css文件

修改

.entry_title_box {
    padding: 10px 0 0 0;
    }

修改后代码

.entry_title_box {
    padding: 10px 0 0 0;
    float: left;
    margin-bottom: 10px;
    border-left: 5px solid #05a;
    border-bottom: 1px solid #05a;
    }

或是

.entry_title_box {
    padding: 10px 0 0 0;
    border-left: 4px solid #444;
    padding-left: 15px;
    position: relative;
    }

admin

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

发表评论

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

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据