Worpress主题:JieStyle Two

作者: 麻辣阁 分类: wordpress 发布时间: 2018-11-20 11:45

主题介绍

JieStyle Two 主题 主要功能特点:

  • 极简风格,全新 JieStyle 第二代轻柔风格
  • 跨浏览器兼容,支持IE、Edge、Chrome、Safari、Opera
  • 响应式Web设计,自适应电脑、平板电脑、移动设备
  • 采用前端开发框架 Bootstrap v3.3.7
  • 采用图标字体库 Font Awesome v4.7.0
  • 支持主题控制面板,后台方便的设置SEO、统计代码
  • 针对SEO进行改良,支持内页自动获取关键字、描述,支持自动推送到百度
  • 本主题禁止了“修订版本”功能
  • 支持 WordPress 的菜单系统,无限级下拉菜单(支持菜单鼠标悬停下拉功能)
  • 支持无限嵌套评论
  • 支持 Gravatar 头像显示<
  • 支持 WordPress 4.x 版本

CSS,JS 的外链设置

不建议修改(可能导致国内网站加载速度变慢),但建议更换原主题的 js 和 css 文件为对应版本的源文件.

修改 header.php 的如下段落, 加速前端框架:

<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/bootstrap.min.css">
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/font-awesome.min.css">
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/bootstrap.min.js"></script>

对应的版本分别为:

  • bootstrap.min.css :3.3.7
  • font-awesome.min.css: 4.7.0
  • jquery.min.js:1.11.3
  • bootstrap.min.js:3.3.7

修改为:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script   src="https://code.jquery.com/jquery-1.12.4.min.js"   integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

为了安全,一定要修改为带 integrity 和 crossorigin 参数的版本.

参考:

修改相关php调用为固定代码,减少 php调用

404.php

<div class="errors_404"><img src="<?php bloginfo('template_directory'); ?>/images/404.png" alt="404"></div>

修改为:

<div class="errors_404"><img src="/wp-content/themes/JieStyle-Two-master/images/404.png" alt="404"></div>

ico

查主页文件可以看到的ico相关的代码:

<link rel="apple-touch-icon" href="https://shushiyuedu.com/wp-content/themes/JieStyle-Two-master/images/icon_32.png">
<link rel="apple-touch-icon" sizes="152x152" href="https://shushiyuedu.com/wp-content/themes/JieStyle-Two-master/images/icon_152.png">
<link rel="apple-touch-icon" sizes="167x167" href="https://shushiyuedu.com/wp-content/themes/JieStyle-Two-master/images/icon_167.png">
<link rel="apple-touch-icon" sizes="180x180" href="https://shushiyuedu.com/wp-content/themes/JieStyle-Two-master/images/icon_180.png">
<link rel="icon" href="https://shushiyuedu.com/wp-content/themes/JieStyle-Two-master/images/icon_32.png" type="image/x-icon">

所以需要在 /wp-content/themes/JieStyle-Two-master/images/ 文件夹下放置如下图片:

  • icon_32.png
  • icon_152.png
  • icon_167.png
  • icon_180.png

可以在 http://www.xwidea.cn/ 在线制作, 上传后 copy 到 /wp-content/themes/JieStyle-Two-master/images/ 文件夹下.

存在的问题

1.js外链优化问题

将如下两个 js 从 header.php 移动到 footer.php,以加速页面加载:

  • jquery.min.js:1.11.3
  • bootstrap.min.js:3.3.7

但这样存在的问题是移动端下页面菜单不会加载, 如果安装会进行类似调整的插件, 也会出现这样的问题.

2.移动端显示问题

没有显示 logo, 左侧栏和主栏错位.

其实可以点击logo回到主栏.

3. 表格不显示边框

可以通过添加额外 CSS解决:

table {
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #999999;
    border-collapse: collapse;
}
table th {
    background-color:#c3dde0;
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #a9c6c9;
}
table tr {
    background-color:#d4e3e5;
}
table td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #a9c6c9;
}

发表评论

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