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

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 教程
备忘：C与C++之间的互相调用
WordPress 优化手记
WordPress中实用的SQl语句
关于PhoneGap视频插件的代码更新

目前有 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号
×
新浪微博
腾讯微博