WordPress-定制细节

By | 7月 24, 2015

本网站是用Wordpress搭建的,其可扩展性非常强大,模板很多。任何一个模板都不可能无死角的满足一个用户,所以我们需要根据喜好进行定制,包括定制Wordpress本身的一些特性。

1. 禁止网站加载google字体

我使用的这个版本Wordpress,字体是从google上下载的,如果站点位于国内,会花很长时间下载,导致网页打不开。

解决办法:

1. 使用浏览器的开发者工具(IE9就自带了,搜狗浏览器用的IE的开发者工具),分析页面加载的内容和时间,找到下载google字体的请求。

http://fonts.googleapis.com/css?family=Ubuntu:400,700&subset=latin,latin-ext

2. 将该请求复制到浏览器中,然后你会下载一个css文件,保存此css文件,最后我们要修改站点来使用本地的此css文件。

/* cyrillic */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: local('Ubuntu'), url(https://fonts.gstatic.com/s/ubuntu/v7/iQ9VJx1UMASKNiGywyyCXvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

3. 上面css文件中,还调用链接去获得字体,我们将链接的资源全部下载下来,和刚才的css文件放在一起,修改css引用的路径。

/* cyrillic */
@font-face {
  font-family: 'Ubuntu';
  font-style: normal;
  font-weight: 400;
  src: local('Ubuntu'), url(iQ9VJx1UMASKNiGywyyCXvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

4.  使用FileZilla打开站点上的wp-includes/script-loader.php文件,搜索fonts.googleapis.com,将其替换成刚才上传的css文件便可。

p.s.

使用站点绝对路径,以“/”开头,如”/wp-includes/resource/font.css”。

2. 禁止从Gravatar上下载头像

Gravatar被墙,不仅显示不出来头像,还会花很长时间加载,导致页面打不开。

2.1 使用本地图片设置自己的头像

安装WP User Avatar插件,进入后台/头像,设置。

2.2 评论者头像依然从Gravatar上下载

解决办法:

1. 进入后台/设置/讨论,取消显示评论者头像。

2. 为了美观还是想给评论者显示本地头像,但是他们又不能自己关联,所以给所有评论者显示一样的头像。

WordPress:get_avatar()函数,负责关联评论者头像。
此函数位于:wp-includes/pluggable.php

函数介绍:http://www.endskin.com/get_avatar.html


在函数最后,修改avatar变量的scr属性,使其指向本地的一个图片。

3. 修改页面宽度

我使用的这个主题,在1920显示器上两边有很大的留边,我不太喜欢。我想让页面100%占满任何大屏幕,做法如下:

1. 进入后台/外观/编辑,既是是修改主题模板的style.css文件。

2. 搜索@media screen and (min-width: 768px),此标签表示当浏览器的宽度大于768像素时,应用其样式定义。在其中有个标签,max-width改成100%便可。之前是1040px,导致它最宽也就是1040像素。

.site {
		margin: 0 auto;
		max-width: 100%;
		overflow: hidden;
	}

4. 使某个模块不显示

查看页面的源码,搜索关键字对应的css模块,然后在后台–>外观/编辑,相应的css定义中,加入display: none;表示不显示。

我用此方法去掉了页面的左Footer和右Footer,后面觉得需要,又加回来了。

5:修改超链接显示样式

我使用的这个模板,超链接鼠标移上去,文字外观没有变化,我觉得鼠标移上去时,文字应该变色,并且有下划线。于是搜索a:hover等标签,做如下修改,

a: hover {
    color: #0C87D3;
    text-decoration: underline;
}

.widget-area .widget a:hover {
    color: #0C87D3;
    text-decoration: underline;
}

.comments-link a:hover,
.entry-meta a:hover {
    color: #0C87D3;
    text-decoration: underline;
}

注意:由于css中最新定义的会覆盖之前的,所以需要修改相应子对象的a:hover