Hany Dark——第一个自制主题!

        考试结束,放假回家。利用5天时间,我参照着视频教程制作了第一个WordPress主题,也是第一次比较系统地使用PHP,Javascript和CSS。

        我用_s作为基板,在其基础上进行修改,产生了本博客正在使用的这个主题。配色比较简单,以灰、白、黑、蓝为主,背景色为纯色,每个区域(文章、侧边栏、评论区等)也是以圆角边框的白色为底。根据这个配色,我把该主题命名为“Hany Dark”。主题的所有文件已经上传到了github.com/johnhany/Hany-Dark

        这个主题的用心之处其实不在于配色,而是响应式的设计。如果你在用电脑浏览本站,可以取消浏览器的窗口最大化,然后用鼠标拖动侧边框改变浏览器的大小,就会发现随着窗口尺寸的缩小,页面内各个元素的位置和大小也在变化,来适应窗口的大小。

        元素布局主要有以下3种变化:

        (1)显示区域足够宽时,比如在电脑上浏览时,侧边栏在左侧,正文在右侧。

screenshot-normal

        (2)窗口宽度变窄时,比如在平板或大屏幕手机上浏览时,正文占满屏幕,侧边栏被移到正文下方。

screenshot-pad

        (3)窗口进一步缩小时,比如在普通手机上浏览时,正文仍占满屏幕,但导航栏变为纵向显示,便于手指操作。

screenshot-phone

        响应式效果的实现,其实是利用CSS3的@media判断窗口的大小,然后对相应元素的margin、padding、float等属性进行修改。比如search-box的CSS脚本:

        导航栏的下拉菜单在显示时会有100ms的延时。这个效果是使用Superfish实现的。

navigation-ul-ul

        位于导航栏右侧的搜索栏默认是隐藏起来的,只要点击一下放大镜,搜索栏就会在导航栏下方缓缓地滑动出来。这个效果是利用jQuery实现的。

search-bar-hide

search-bar-show

        本主题在footer也可以添加widget,而且使用masonry.js安排布局。我的博客目前暂不需要footer widget,所以也没有表现这一特性。

        我还使用了Font Awesome绘制放大镜按钮、侧边栏的评论和文章图标。虽称其为“图标”,实际上是以文本的方式进行渲染的。比如在侧边栏为最新评论和最新文章的每一个条目前添加相应的图标,就要在style.css中添加:

        其中“\f036”等是从网站上查询得到的Unicode代码。

        动手写代码之前,我首先在Photoshop中把主题的外观设计好,设计宽屏幕和窄屏幕两种形式,确定每个元素的颜色,间距和尺寸,以及文字的尺寸和颜色。

design-wide

design-mobile

        原本打算使用Adobe繁黑体作为header和widget的默认字体,并在主题目录里附上字体文件。但鉴于字体文件的庞大,每个访客都必须花很长的时间等待字体下载,所以只好改为更常用的微软雅黑字体。不过也把设置自定义字体的方法记下来,即在style.css文件中添加:

        其中“src”可以指向主题目录中的位置,也可以指向一个http网络位置。

        然后在需要的位置加上新字体,比如:

        在设置字体的过程中也发现了先前导致博客载入速度慢的原因,有的主题和插件甚至WordPress本身都默认加载Google字库的字体,而且WordPress默认从Gravatar.com加载头像图片,这两个网站在国内都是无法连接的。相应的解决方法分别为:

        (1)不加载Google的字体,而是用360提供的代理服务,把wp-include/script-loader.php文件中的fonts.google.com改为fonts.useso.com。比如:

改为:

        (2)使用https链接获取Gravatar的头像。在functions.php中添加:

 

2

1 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
Recent comment authors
  Subscribe  
最新 最旧
订阅评论
杭卫强

这是啥?