现在的位置: 首页 > Web设计> 正文
小 中 大
利用 jQuery Mobile 制作 wordpress 手机主题
2012年03月06日 ⁄ Web设计 ⁄ 评论数 10 ⁄ 被围观 12,006+

jQuery Mobile 作为一款十分优秀的 Javascript 开发框架，可以用来方便的开发面向手持设备的网站和Web APP。

本文就带领大家使用 jQuery Mobile 来制作一款 wordpress 的手机主题。

示例代码演示效果如下

jquery-mobile-wordpress-theme

主题制作步骤

1. 我们可以从头开始来制作一款主题，不过为了节省制作主题的时间，示例代码是通过客制化另外一款主题来实现的，首先需要下载一款 BLANK-Theme 的 wordpress 主题，该主题除了样式 style 没有定义以外，其他的功能都基本已经实现了，通过修改文件 style.css，您可以修改该主题的名字，也可以客制化该主题的样式。

2. 修改 Header 和 Footer

既然要制作手机主题，首先需要引用 jQuery 和 jQuery Mobile 开发库，您可以把这些开发库下载到自己的Server上，也可以利用JQuery的CDN Server，推荐利用CDN加速，这些库的加载速度会快很多，同时也可以为您的服务器节省流量。

修改 header.php 文件， 在<head> 和</head> 的标签中添加如下代码：

1
2
3

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>

因为 jQuery Mobile 使用 HTML5, 我们需要修改 doctype。更新 Header 如下:

1
2
3

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>

接下来，替换从 <body <?php body_class(); ?>> 标签开始的全部内容如下：

1
2
3
4
5
6
7

<body <?php body_class(); ?>>
<div data-role="page" data-theme="b" id="jqm-home">
<div data-role="header">
<h1><?php bloginfo('name'); ?></h1>
</div>
 
<div data-role="content">
<body <?php body_class(); ?>>
<div data-role="page" data-theme="b" id="jqm-home">
<div data-role="header">
<h1><?php bloginfo('name'); ?></h1>
</div>

<div data-role="content">

然后开始修改 footer.php 文件，替换为如下内容：

1
2
3
4
5
6
7
8

</div><!-- data role content-->
 
<div data-role="footer" class="ui-bar">
<a href="#jqm-home" data-role="button" data-icon="arrow-u">Up</a></div>
<?php wp_footer(); ?>
</div><!-- data role content-->
</body>
</html>
</div><!-- data role content-->

<div data-role="footer" class="ui-bar">
<a href="#jqm-home" data-role="button" data-icon="arrow-u">Up</a></div>
<?php wp_footer(); ?>
</div><!-- data role content-->
</body>
</html>

3. 更新主页 homepage

设计手机主题的目标就是要求简洁，所以我们将用列表来展示最新发布的博文。

修改文件 index.php中 loop 循环的内容如下：

1
2
3
4
5
6

<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php endwhile;endif ?>
</ul>
<?php include (TEMPLATEPATH . '/inc/nav.php' ); ?>
<ul data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php endwhile;endif ?>
</ul>
<?php include (TEMPLATEPATH . '/inc/nav.php' ); ?>

按照同样的方法修改 search.php 和 archive.php。

4. 更新 Post 和 pages 文件

为了提高手持设备的用户体验，我们默认将评论列表窗口收缩，以节省屏幕空间，只有当用户需要查看评论的时候，才会点击展开，修改方法如下，更新文件 comments.php：

1
2
3
4
5
6
7
8
9

<?php if ( have_comments() ) : ?>
 
<span style="color: #3068ff;"><div data-role="collapsible" data-state="collapsed"></span>
 
... ...
 
<span style="color: #3068ff;"></div></span>
 
<?php else : // this is displayed if there are no comments so far ?>
<?php if ( have_comments() ) : ?>

<span style="color: #3068ff;"><div data-role="collapsible" data-state="collapsed"></span>

... ...

<span style="color: #3068ff;"></div></span>

<?php else : // this is displayed if there are no comments so far ?>

5. 更新搜索表单文件

更新 searchform.php 文件，替换为如下内容：

1
2
3
4
5

<form action="<?php bloginfo('siteurl'); ?>" id="searchform" method="get">
<div data-role="fieldcontain">
<input type="search" name="s" id="search" value="" />
</div>
</form>
<form action="<?php bloginfo('siteurl'); ?>" id="searchform" method="get">
<div data-role="fieldcontain">
<input type="search" name="s" id="search" value="" />
</div>
</form>

为了将搜索 Bar 加入到主界面中，您需要修改 index.php 文件，在 get_header() 函数之后加入如下代码：

1

<?php include('searchform.php'); ?>
<?php include('searchform.php'); ?>

6. 样式修正

主页面中您可能会发现，搜索框的宽度没有文章列表的宽度长，看起来不太美观，解决的方法比较简单，修改 style.css 文件，加入样式定义：

1
2
3

.ui-input-search{
width:88% !important;
}
.ui-input-search{
width:88% !important;
}

7. 去掉 sidebar

更新 sidebar.php 文件，将输出都注释掉，方法如下：

1

<!-- sidebar的内容-->
<!-- sidebar的内容-->

总结

通过本文的整体流程，相信您已经学会了怎么样来制作一款 wordpress 手机主题了，接下来发挥您的想法，尽力去完善吧！

代码下载：

1. BLANK-Theme 主题

2. 本文制作的 JQuery Mobile Theme

参考文章：

1. how-to-create-a-mobile-wordpress-theme-with-jquery-mobile

返回

作者:

该日志由 润物无声 于13年前发表在Web设计分类下， 你可以发表评论，并在保留原文地址及作者的情况下引用到你的网站或博客。
转载请注明: 利用 jQuery Mobile 制作 wordpress 手机主题 | 润物无声 +复制链接
关键字: ,
【上篇】
【下篇】

您可能还会对这些文章感兴趣！

  1. 迁移博客图片资源从SAE到七牛
  2. 配置wordpress博客阻止部分IP访问
  3. 为Wordpress建立Html格式的Sitemap
  4. Wordpress中实用的SQl语句
  5. WordPress 优化手记
  6. WordPress 使用 Flickr 做图床
  7. 阿里云应用托管（ACE）搭建 wordpress 博客
  8. jQuery Mobile 教程
利用GitHub Pages安装部署Octopress博客
Android云推送之GCM
Android 开发之 HttpClient Class can not find 之解决办法
OpenSCADA系统的安装配置

目前有 10 条留言 其中：访客:8 条, 博主:2 条

  1. 真爱密码 : 2012年03月21日11:37:55  -49楼 @回复 回复

    顶博主。好东西，先收藏！

  2. 即时比分 : 2012年03月20日13:03:38  -48楼 @回复 回复

    博主博客的文章确实很精彩啊，留个脚印下来慢慢阅读,….

  3. 相当拽 : 2012年03月20日10:46:19  -47楼 @回复 回复

    相当不错哦！

  4. 冰雷 : 2012年03月19日20:47:37  -46楼 @回复 回复

    强大，分享了，找了好久我晕！

  5. 百谷 : 2012年03月19日17:33:01  -45楼 @回复 回复

    不错，找了好久了！

  6. 七天大圣 : 2012年03月18日18:40:21  -44楼 @回复 回复

    不错不错。学习了

  7. bandit : 2012年03月06日23:57:12  -43楼 @回复 回复

    推荐使用一款代码高亮插件：SyntaxHighlighter

给我留言

点击这里取消回复。
留言无头像?


插入图片

返回首页

Copyright © 2011-2014 润物无声  保留所有权利.   基于 WordPress 技术创建   Theme by Robin   Modify by Carey   辽ICP备2021004474号
×
新浪微博
腾讯微博