关于本站的新主题

[section label="explain"]说明

本站即将采用olo主题

同时,对主题进行各种优化

[section label="history"]优化历史

3月23号,开始修改主题代码,使主题初步实现自适应

主题页眉文件加入如下代码,开始自适应

此代码作用:在网站HTML文件的开头,增加viewport meta标签告诉浏览器视口宽度等于设备屏幕宽度,且不进行初始缩放。

  1. <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">

接下来,在CSS中加入如下代码。目的是:当屏幕宽度小于1000px时,主页面宽度自动调节,正文内容宽度调整为屏幕宽度的96.8%,边栏消失不见。

注:各个模块的容器名可通过F12查看。

  1. @media screen and (max-width1000px) {
  2.   #oloContainer #oloContent{
  3.   floatnone;
  4.   width:auto;
  5.   }
  6.   .oloPosts{
  7.   width:96.8%
  8.   }
  9.   #oloWidget{
  10.   display:none;
  11.   }
  12. }

然后,就是些细枝末节了。通过F12(审查元素)并不断调整窗口大小,修改其他不合适的模块。

网站标题重写,代码如下

  1. <?php if ( is_home() ) { ?><title><?php bloginfo('name'); ?> | <?php bloginfo('description'); ?></title><?php } ?>
  2. <?php if ( is_search() ) { ?><title>搜索结果 | <?php bloginfo('name'); ?></title><?php } ?>
  3. <?php if ( is_single() ) { ?><title><?php echo trim(wp_title('',0)); ?> | <?php bloginfo('name'); ?></title><?php } ?>
  4. <?php if ( is_category() ) { ?><title><?php single_cat_title(); ?> | <?php bloginfo('name'); ?></title><?php } ?>
  5. <?php if ( is_page() ) { ?><title><?php echo trim(wp_title('',0)); ?> | <?php bloginfo('name'); ?></title><?php } ?>
  6. <?php if ( is_day() ) { ?><title><?php the_time('Y年m月d日'); ?> | <?php bloginfo('name'); ?></title><?php } ?>
  7. <?php if ( is_month() ) { ?><title><?php the_time('Y年m月'); ?> | <?php bloginfo('name'); ?></title><?php } ?>
  8. <?php if ( is_year() ) { ?><title><?php the_time('Y年'); ?> | <?php bloginfo('name'); ?></title><?php } ?>
  9. <?php if ( is_404() ) { ?><title><?php echo"未找到指定的页面( ERROR 404 )-" ?> | <?php bloginfo('name'); ?></title><?php } ?>
  10. <?php if (function_exists('is_tag')) { if ( is_tag() ) { ?><title><?php  single_tag_title("", true); ?> | <?php bloginfo('name'); ?></title>
  11. <?php } ?> <?php } ?>
  12. <?php if ( is_author() ) {?><title><?php wp_title('');?>发表的所有文章 | <?php bloginfo('name'); ?></title><?php }?>

 

一直在用另一个网站修改中!现在换上这个站。试试效果!

未完待续!!!

发表评论

:?::razz::sad::evil::!::smile::oops::grin::eek::shock::???::cool::lol::mad::twisted::roll::wink::idea::arrow::neutral::cry::mrgreen:

目前评论:3   其中:访客  3   博主  0

  1. avatar NNNNy 0 来自天朝的朋友 谷歌浏览器 Windows 8.1

    新主题科幻感十足!

  2. avatar 黑暗游侠 1 Canada 谷歌浏览器 Windows 10

    主题还有点问题

  3. avatar Koolight 0 来自天朝的朋友 Safari浏览器  Android 4.4.2 PE-CL00 Build/HuaweiPE-CL00

    又换成知更鸟了,