远方的海
远方的海,WordPress,免费
2014 Sep 29 03 : 16

WordPress自适应主题制作方法

您当前的位置: 首页 > WordPress > 正文
欢迎光临远方的海!您可能还对 WordPress建站免费资源最新IT动态 感兴趣,点击开启 悦读 模式。CTRL+D 快捷收藏本文,我们期待您再次光临!
[文章目录]

这篇文章主要介绍Wordpress怎么制作响应式主题,今天Sven又是折腾了很久把本站的主题做成了响应式,虽然偷了点懒,没有做所有像素大小的响应,但是基本的移动端响应有了也就够了。

下面介绍两种定制响应主题的方法,可以按照个人口味选择~

什么是响应

首先先说说什么是响应,响应就是根据页面的大小生成不同的样式,比如电脑屏幕,平板手机屏幕大小不一样,与之对应的都有相应的样式。响应式和移动适配不一样。移动适配除了响应式还可以通过别的形式生成。

利用Mobile判断,加载不同的CSS

如下的方法,分别根据移动或者非移动的判断调用不同的css,可以使用如下两种代码加在主题的functions.php里面来实现:

代码1:利用wordpress自带wp_is_mobile()函数

  1. define(‘IsMobile’, wp_is_mobile());
  2. define(“TPLDIR”, get_bloginfo(‘template_directory’));
  3. define(‘THEMEVER’, “3.0”);//主题版本号
  4. function sven_script() {
  5.         if( !IsMobile ){
  6.             wp_enqueue_style(‘style’, TPLDIR . ‘/style.css’, array(), THEMEVER, ‘screen’);}
  7.         else{
  8.             wp_enqueue_style(‘mobile’, TPLDIR . ‘/mobile.css’, array(), THEMEVER, ‘screen’);
  9. //…
  10.         }

代码2,自定义is_mobile()函数

  1. function is_mobile() {
  2.     $user_agent = $_SERVER[‘HTTP_USER_AGENT’];
  3.     $mobile_browser = Array(
  4.         “mqqbrowser”//手机QQ浏览器
  5.         “opera mobi”//手机opera
  6.         “juc”,“iuc”,//uc浏览器
  7.         “fennec”,“ios”,“applewebKit/420”,“applewebkit/525”,“applewebkit/532”,“ipad”,“iphone”,“ipaq”,“ipod”,
  8.         “iemobile”“windows ce”,//windows phone
  9.         “240×320”,“480×640”,“acer”,“android”,“anywhereyougo.com”,“asus”,“audio”,“blackberry”,“blazer”,“coolpad” ,“dopod”“etouch”“hitachi”,“htc”,“huawei”“jbrowser”“lenovo”,“lg”,“lg-“,“lge-“,“lge”“mobi”,“moto”,“nokia”,“phone”,“samsung”,“sony”,“symbian”,“tablet”,“tianyu”,“wap”,“xda”,“xde”,“zte”
  10.     );
  11.     $is_mobile = false;
  12.     foreach ($mobile_browser as $device) {
  13.         if (stristr($user_agent$device)) {
  14.             $is_mobile = true;
  15.             break;
  16.         }
  17.     }
  18.     return $is_mobile;
  19. }
  1. <?php if (is_mobile() ): ?>
  2. <link rel=“stylesheet” type=“text/css” media=“all” href=“<?php echo get_template_directory_uri(); ?>/mobile.css” />)
  3. <?php endif ;?>

以上两种方法均可使主题判定移动端,然后加载响应的css文件。

而使用下面的响应设计和上面不同的地方就是一个css文件就可以做到不同宽度高度等的自适应。

另一种响应式CSS

响应式css的实现也很简单,本站采用的就是这一种方法了。

以iPhone为例:

  1. @media screen and (min-width:310px) and (max-width:550px){
  2. //里面放入css语句
  3. }

上面的语法的含义就是如果屏幕大小在310px550px之间,我们就引用大括号里面的css覆盖原有的css。有了这个基本的原理,很多地方思路就很清楚了。

常用的CSS语句

我觉得以下的css在自适应里面很常用,基本上下面的这些基本就够了:比如你想要在超长的部分把这个div干掉,那么就给它个display:none;如果想让他显示为父级宽度的80%,就给他个width:80%;其他的原理类似。

  1. /*基本句*/
  2. display:none; //用于隐藏某个元素
  3. width:100%; //用于调整宽度
  4. height:100%; //用于调整高度
  5. /*三神句一起用,专治不服的超长超高*/
  6. text-overflow:ellipsis; //超出的文字省略号表示
  7. overflow:hidden; //超出的隐藏
  8. white-space:nowrap; //超出的隐藏

站在岸上学不会游泳,Sven自己也是门外汉,自己多改改基本也就知道了。

好文!分享给朋友,或者点个赞吧~

文章信息

分类:WordPress WP技巧 前端

您可能也会喜欢

发表回复

Post Comment


  1. X隐者博客 :

    准备改改我的一个DEDE的站,学习中

    2016-11-14
  2. 鲜活 :

    挺喜欢自动适应的主题

    2014-10-12
    • 远方的海水神 :

      谢谢您的喜爱!!已经回访~

      2014-10-14
  3. Era :

    响应式的布局,不能有绝对的值……

    2014-10-8
    • 远方的海水神 :

      我是按需响应!! Σ(⊙▽⊙”a…

      2014-10-11
  4. BigCat :

    要成大神了?》

    2014-10-6
    • Sven水神 :

      你的CDN挂了,网站上不去!

      2014-10-16
  5. 星盏 :

    :|

    2014-10-3
    • 远方的海水神 :

      ~~

      2014-10-4
  6. 超級efly :

    前來支持一下~我還是裝個手機版外掛好了…

    2014-10-1
    • 远方的海水神 :

      你的手机页面也很棒!!!

      2014-10-1
      • 超級efly :

        不過我感覺你的電腦版主題似乎比我好多呢

        2014-10-2
        • 远方的海水神 :

          哎呀,后来自己乱改的。太谢谢你。

          2014-10-2
  7. 云目录VPS :

    响应式吧,不错的技术文章。

    2014-10-1
    • 远方的海水神 :

      谢啦!!☆⌒(*^-゜)v

      2014-10-1