WordPress-定制细节

By | 7月 24, 2015
0 Comment

本网站是用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(http://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