『WordPress』更换主题日志

选择综合症 + 外貌协会 + 强迫症让我对 WordPress 主题又爱又恨。每次更换主题以后,一大串自定义的样式就要重新写。于是,我准备写篇博客,备份一下。

本文属于个人备份文件,文章中出现的链接朋友们不要直接使用(FOLLOW图片不要用,图片链接修改很频繁了。反正出现的链接不要直接使用,要不然给双方都会带来麻烦),说不定哪天心情好,就换掉了…

一、代码高亮

1.添加以下代码到 header.php 文件中(在 </head> 标签之前,一直仍在 <?php wp_head();?> 后面的)

<link rel="stylesheet" href="代码高亮样式 css 文件链接">
<script src="代码高亮 js 文件链接"></script>
<script>hljs.initHighlightingOnLoad();</script>

2.删除系统自带的 pre 样式

这个样式的代码位置说不准,需要审查元素。可能是在 style.css 中,也可能是在 bootstrap.min.css 中。

二、添加百度统计

<script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "//hm.baidu.com/hm.js?百度统计id";
      var s = document.getElementsByTagName("script")[0]; 
      s.parentNode.insertBefore(hm, s);
    })();
</script>
    
<meta name="baidu-site-verification" content="mZuAstP12y" />

添加到代码高亮下面就行。

三、添加右边栏的 FOLLOW 图标并修改样式

打开 style.css ,添加以下代码(不要加到最后,最后的大括号好像有问题)

如果也有需要 FOLLOW 功能的朋友,那要注意了,我的三、四个步骤都是因为我创建了名为 FOLLOW 的菜单,所以在 css 中才可以用 ul#menu-follow li,如果你的名字和我不一样,还要根据你的 css id 来修改。

/* Aside function icons
-------------------------------------------*/
@font-face {font-family: 'iconfont';
    src: url('http://brighttj-brighttj.stor.sinaapp.com/system%2Ffunction-icon%2Ficonfont.eot'); /* IE9*/
    src: url('http://brighttj-brighttj.stor.sinaapp.com/system%2Ffunction-icon%2Ficonfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('http://brighttj-brighttj.stor.sinaapp.com/system%2Ffunction-icon%2Ficonfont.woff') format('woff'), /* chrome、firefox */
    url('http://brighttj-brighttj.stor.sinaapp.com/system%2Ffunction-icon%2Ficonfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('http://brighttj-brighttj.stor.sinaapp.com/system%2Ffunction-icon%2Ficonfont.svg') format('svg'); /* iOS 4.1- */
}

.github, .email, .RSS, .weibo{
    font-family:"iconfont" !important;
    font-size:24px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

ul#menu-follow li {
    display: inline !important;
    margin-right: 1em;
}

四、修改 FOLLOW hover 样式

如果 FOLLOW 的 hover 颜色不喜欢或不好分辨,可以加上下面这句:

ul#menu-follow li a:hover {
    color: #d65050 !important;
}

五、页脚备案标识

根据情况来看,如果要保留主题名称,就加 span ,如果不保留,就直接覆盖整个 <footer>

<footer>
    <p>? <?php echo date( 'Y' ); ?> <?php bloginfo( 'name' ); ?> <a href="http://www.miitbeian.gov.cn/" target="_blank">蜀ICP备15020592号-1</a></p>
</footer>

六、文章图片尺寸大小限制

因为我图片从来都是加的外链,所以没办法使用 wordpress 的自动压缩。要限制图片尺寸大小,还有一个办法,就是给图片加 css。wordpress 也提供了这一点。

现在 style.css 文件中,添加自己的图片样式,我添加了常用的 100px , 200px , 300px 三个规格:

.st_img_100 {
    max-width: 100px !important;
}

.st_img_200 {
    max-width: 200px !important;
}

.st_img_300 {
    max-width: 300px !important;
}

在编辑文章的时候,插入图片后,选择编辑:

在弹出框中可以填写图片的 css class,根据你需要的最大尺寸,填写相应的 class 名字就行了:

七、其他

博客字体:

"Hiragino Sans GB",'Source Sans Pro', sans-serif

剩余的都是一些微调,每个主题的修改方式都不一样,不列举了。

发表评论

电子邮件地址不会被公开。