Life Studio » 主题 http://wange.im My Life, My Studio... Fri, 20 Jan 2012 01:49:17 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 新年新气象，博客换新衣 http://wange.im/new-year-new-theme.html http://wange.im/new-year-new-theme.html#comments Fri, 20 Jan 2012 01:27:50 +0000 万戈 http://wange.im/?p=5239 hi，大家好，你没有走错，这里是你们熟悉的万戈 - Life Studio 的博客，新年新气象，博客也要换新衣，距离上一个万戈牌主题，已经整整过去一年了，估计大家看的也有审美疲劳了吧，也是时候换一套新皮肤。首先感谢这次主题的首席设计湿——尘埃老哥（大家不妨去看一下他的网站，也是我做的哟 ^_^），代码部分则由我亲自操刀，HIAHIA~~~

不过，因为做这个主题的时间比较仓促，又想赶在新年前上线，很多功能还没有完成，真是对不起尘埃老哥的设计呀。大家可以看到，我整个侧边栏还没有做，为了不显得太空空荡荡，就填了一个广告（原来广告还能这么用，嘿嘿）；另外评论模块也没做，暂时用第三方的“评论啦”来代替，感觉也不错，但是昨天导入 WordPress 9W 多条评论的时候让我非常内桑，直到发文前，还在导入 ing....还有很多细枝末节的小功能，可以提升用户体验的就更没有时间做了，各种速度上的优化也只做了一半。所以这个主题。。。呃。。。正处于 beta 的 beta 阶段，拍砖请悠着点，谢谢。

万戈牌主题
当然，虽然说是各种cuo，但毕竟是万戈牌主题，cuo 也要 cuo 的很有范儿！主题延用之前 HTML5 这是自不必说了，另外还加上了很潮的微数据，让 SEO 尽显奢华，哈哈；在首页的最新文章功能还大胆使用了 AJAX 来异步获取文章，对用户体验应该不错；搜索还提供了关键词自动提示功能；还有很多隐蔽的亮点，大家有兴趣的慢慢找吧。

欢迎各位对这个新主题提出宝贵意见，也欢迎大家来找碴，挑 bug。下午就要赶火车去了，主题的完善工作要等到年后来做了，因为我说了，今年过节不上网。好好过个年，别再为代码纠结了，哦耶~

最后，预祝大家新年快乐，回家路上顺顺利利 \(^o^)/

]]> http://wange.im/new-year-new-theme.html/feed 64 WordPress 我变我变我变变变 http://wange.im/wordpress-is-not-everything.html http://wange.im/wordpress-is-not-everything.html#comments Wed, 27 Apr 2011 14:25:58 +0000 万戈 http://wange.im/?p=4805 我们都知道 WordPress 强大无比，这要感谢它的开源精神，以至于我们可以实现任何想要的功能。为了迎合广大用户日益增强的多样化需求，Wordpress 官方工作小组在 3.1 版本中把 CMS 元素添加了进去，但是这依然是众口难调，还有很多民间开发爱好者们把 WordPress 打造成他们想要的样子。于是，Wordpress 就像变形金刚一样，在不同的主题、不同的插件组合下千变万化。

我变！微博！

就在国内微博刚刚流行起来的时候，在 WordPress 界也掀起过一鼓热潮，最大的特点就是把 WordPress 主题改成微博主题，比较热门的有 P2 主题等。但是它依然怀着一颗 WordPress 的心，包的都是一层微博一样的皮肤，很有创意，也很赶潮流，用来耍耍酷是个不错的选择。

结果：想要玩微博？Wordpress 几乎还只是一个人的独立博客平台，Wordpress 改造的微博，注定就只能是一个人的自弹自唱。

我再变！论坛！

博客只是一家之言，有人感觉单调无味，索性把 WordPress 改成一个论坛，让灌水成为了一个更合情合理合法的存在。和 WordPress 改微博不同，Wordpress 改成论坛只需利用一个 Simple Press 之类的插件就可以了，插件会给原有的数据库新增一些表来存储论坛数据。

结果：想要做论坛？为什么不选择更专业的 discuz？强扭的瓜不甜！

我还变！商城！

有很多企业网站选择 WordPress 作为产品展示站，因为它对 SEO、单页展示、图片功能上都挺适合于展示，而且刚才也提到了，Wordpress 已经趋向于 CMS，展示对 WordPress 来说已经是小菜一碟。但是总有人不满足于现状，就想把 WordPress 进一步开发成商城，这就包括我，一年半前我就曾经把 WordPress 做成一个在线商城，当然还利用了 eshop 之类的插件。

结果：想要做商城？何必这么费劲呢？用 ecshop 不也是一样基于 PHP 免费开源的吗？

我变变变！团购！

真是什么火，Wordpress 就变成什么，一点也不甘落后呀。以上三个我都变过，这个我还真没变过，只是传言，一个号称 Group Deals plugin 的插件可以让你的 WordPress 变成一个不折不扣的团购网站，感叹一下 WordPress 的强大吧！

结果：想要做团购？看一下美团网、QQ团购、拉手网，还是放弃吧~

WordPress 是无所不能的，但其中只有一项是它的强项，那就是博客平台，如果你单单是想选择一个平台做微博、论坛、商城、团购这样网站，我劝你还是另选高明吧。花大把力气把博客平台折腾成另一个形式的平台，会让 WordPress 和你自己都很蛋疼，那又何必呢？

WordPress 不是万能的，但是没有 WordPress 又是万万不能的。你滴明白了吗？

与

,,

相关的文章
]]> http://wange.im/wordpress-is-not-everything.html/feed 163 WordPress 自定义顶部图像 http://wange.im/add-custom-image-header-in-wordpress.html http://wange.im/add-custom-image-header-in-wordpress.html#comments Sat, 29 Jan 2011 13:34:28 +0000 万戈 http://wange.im/?p=4411 如果我没有记错的话，Wordpress 自定义顶部图像的功能是从 3.0 版本才开始有的，虽然升级到 WordPress 3.0+ 已经有一段时间了，但是我一直认为这是一个很鸡肋的功能，所以也没有将其开启。不就是换个 LOGO 或是 Banner 图片嘛，换张图片，改改样式就可以了嘛，或许我说的比较轻松，但是对于看代码如看天书的小盆友来说，这还是会有点小麻烦。为了今后我所分享的万戈牌主题可以男女老少皆宜，所以我把这个看似看鸡肋的功能也添加到了主题中。

还是老样子，在你的 WordPress 主题中 functions.php 中添加如下代码：

define('HEADER_IMAGE', '%s/images/logo.gif');    //默认图片路径
define('HEADER_IMAGE_WIDTH', 265);
define('HEADER_IMAGE_HEIGHT', 137);
define('NO_HEADER_TEXT', true );
define('HEADER_TEXTCOLOR', '');
function admin_header_style() { ?>
    <style type="text/css">
        #headimg{width:<?php echo HEADER_IMAGE_WIDTH; ?>px;height:<?php echo HEADER_IMAGE_HEIGHT; ?>px;background:url(<?php header_image(); ?>) no-repeat #fff;}
        #headimg h1,#desc{display: none;}
        .wrap{clear:both;}
    </style>
<?php }
function header_style() { ?>
    <style type="text/css">
        header h1 a{width:<?php echo HEADER_IMAGE_WIDTH; ?>px;height:<?php echo HEADER_IMAGE_HEIGHT; ?>px;display:block;background:url(<?php header_image(); ?>) no-repeat;text-indent:-9999em;}
    </style>
<?php }
if ( function_exists('add_custom_image_header') ) {
    add_custom_image_header('header_style', 'admin_header_style');
}

其实我都懒的写注释了，Wordpress 对常量命名还是很科学的，基本一眼就能看出是个啥用的，想有更多扩展的可以直接看 WordPress 的官方文档介绍。

添加以上代码后，如不出意外就可以在 WordPress 后台的外观选项中看见新添加的一个控制菜单-顶部，如下图：

我觉得这个功能唯一有点炫的地方就是可以通过裁剪功能来控制图片的尺寸，保证上传的图片不会因像素固定而变形失真，可以拿来耍一下宝。

PS：图中的 LOGO 是枫雪童鞋在一个大清早给我倾情设计的，很给力吧~~~但是有小盆友很 YD 地把 LOGO 左边那个“小尾巴”误认为是小蝌蚪！你妹的，那是鼠标啊！！！象征着我的光辉人生的指向标！！！多么的崇高！！！打消一切小蝌蚪的邪念！！！

与

,,,

相关的文章
]]> http://wange.im/add-custom-image-header-in-wordpress.html/feed 119 给 WordPress 主题添加个性化小工具 http://wange.im/add-widgets-for-wordpress.html http://wange.im/add-widgets-for-wordpress.html#comments Sun, 16 Jan 2011 12:26:39 +0000 万戈 http://wange.im/?p=4367 今天还是继续分解我现在的 WordPress 主题，这个主题都还没有写完美就开始拆分主题了，呵呵。如标题所言，今天分享的是给 WordPress 主题添加个性化的小工具这个方法。小工具我们大家都知道，在 WordPress 的后台中一般都默认自带了分类目录、文本、日历、近期评论这样一些小工具。但是有时候对于一款个性的 WordPress 主题来说，这些默认的小工具显然已经不能满足需求，所以我们需要自定义一些适合自己主题的小工具。有童鞋会说了，侧边栏上常用的功能可以直接把代码写进 sidebar 里嘛，何需小工具？但是对于不熟悉代码的小盆友来说，小工具要方便地多，而且小工具的拖动排序功能也是相当的便利。好了，废话说多了，下面切入正题，如何给自己的 WordPress 主题添加小工具。

只能作个示例，具体功能大家自己扩展了。把以下代码放入 WordPress 主题的 functions.php 中：

class widget_test extends WP_Widget {
    function widget_test() {
        $widget_ops = array('description' => '小工具的描述信息');
        $this->WP_Widget('widget_test', '小工具的标题', $widget_ops);
    }
    function widget($args, $instance) {
        extract($args);
        $title = apply_filters('widget_title', esc_attr($instance['title']));
        $limit = strip_tags($instance['limit']);
        echo $before_widget.$before_title.$title.$after_title;
        echo '<ul class="middleli">';
            test( $limit );    //小工具需要执行的函数
        echo '</ul>';
        echo $after_widget;
    }
    function update($new_instance, $old_instance) {
        if (!isset($new_instance['submit'])) {
            return false;
        }
        $instance = $old_instance;
        $instance['title'] = strip_tags($new_instance['title']);
        $instance['limit'] = strip_tags($new_instance['limit']);
        return $instance;
    }
    function form($instance) {
        global $wpdb;
        $instance = wp_parse_args((array) $instance, array('title' => '', 'limit' => ''));
        $title = esc_attr($instance['title']);
        $limit = strip_tags($instance['limit']);
?>
        <p>
            <label for="<?php echo $this->get_field_id('title'); ?>">标题：<input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" name="<?php echo $this->get_field_name('title'); ?>" type="text" value="<?php echo $title; ?>" /></label>
        </p>
        <p>
            <label for="<?php echo $this->get_field_id('limit'); ?>">数量：<input class="widefat" id="<?php echo $this->get_field_id('limit'); ?>" name="<?php echo $this->get_field_name('limit'); ?>" type="text" value="<?php echo $limit; ?>" /></label>
        </p>
        <input type="hidden" id="<?php echo $this->get_field_id('submit'); ?>" name="<?php echo $this->get_field_name('submit'); ?>" value="1" />
<?php
    }
}
add_action('widgets_init', 'widget_test_init');
function widget_test_init() {
    register_widget('widget_test');
}

就是这样，一步到位，保存之后再去你的小工具里看一下，是不是多了一个叫“小工具的标题”的小工具呀？注意到上面代码的 test( $limit ); 这个就是你需要小工具执行的函数，你可以直接写在这里面，也可以把函数写到 functions.php 里，都一样。

下面这张图是我自己主题所用到的万戈牌小工具，以后要改顺序也不用修改主题了，拖动就OK了，哈哈哈哈，真方便。点击看大图哟~~

]]> http://wange.im/add-widgets-for-wordpress.html/feed 175 移除 WordPress 中的指定小工具 http://wange.im/unregister-widget-in-wordpress.html http://wange.im/unregister-widget-in-wordpress.html#comments Wed, 05 Jan 2011 12:45:41 +0000 万戈 http://wange.im/?p=4314 趁辞职休息在家的这几天里，我就赶紧把自己的 WordPress 主题折腾出来，因为再过两天估计就没有时间折腾工作以外的代码了，所以趁现在最后的时间折腾并幸福着吧。主题刚刚出炉，还是半成品中的半成品，功能还在慢慢添加，已经有朋友急着要我分享了，我也是尽量把主题做成国际化、大众化，将来可以适合不熟悉代码的小盆友们。但是离分享还有时日，这样的半成品分享出来岂不是砸了自己的招牌，所以暂时把主题分解开来，把功能一一展现出来，大家各取所需吧。

今天先说个小功能，移除 WordPress 中不适合当前主题的小工具。其实这个功能还是有一些些鸡肋的，为什么呢？不适合当前 WordPress 主题不用就可以了嘛，有必要移除吗？确实如此。但是对于一款今后有可能要分享的主题而言，如果某个小工具不适合当前主题将有可能误导用户，引起不必要的麻烦，所以除之。

我只举个例子吧，更多举一反三的用户就靠大家折腾去了。比如说在我当前这个 WordPress 主题，头部导航处已经有一个搜索栏了，那样的话我不希望主题的用户再给侧边栏的小工具里添加搜索小工具，所以就在后台的小工具里把搜索 Widget 移除，方法如下：

在主题的 functions.php 中添加如下函数：

function unregister_search_widget(){
unregister_widget('WP_Widget_Search');
}
add_action('widgets_init','unregister_search_widget');

这就把搜索小工具彻底移除了，当然不影响其他的主题，只对当前主题有效，如果要移除日历，就把 WP_Widget_Search 换成 WP_Widget_Calendar 就可以了。

这方法是不是有点眼熟呢？如果你还记得自定义 WordPress 个人资料选项这篇文章，比较一下，你会发现它们的异曲同工，Wordpress 的强大的就在于它的扩展性，尽情地折腾你的主题吧。

]]> http://wange.im/unregister-widget-in-wordpress.html/feed 99 万戈牌主题上线测试 http://wange.im/wange-theme-beta.html http://wange.im/wange-theme-beta.html#comments Tue, 04 Jan 2011 11:14:08 +0000 万戈 http://wange.im/?p=4307 如你所见，我刚刚换上了新主题，算是迎接 2011 吧。

之前的主题已经足足用了近两年时间了，期间几乎就没有换过 WordPress 主题，不是这里修修，就是那里改改，就这么撑了一年多，首先对主题原作者表示感谢，然后要就对该主题说拜拜了。

当前这款 WordPress 主题是小黑同学友情设计的，很给力，很喜欢，非常感谢。其实早就想给自己做主题了，但是一直没有时间，我最大的借口就是，给自己做主题不能收费~这下好了，因为之前的主题不知道哪里被我改错了，每天都会让主机挂一下，蓝冰小盆友很生气，后果很严重，居然表示想要日我。让我鸭梨很大呀，趁元旦几天，加紧做了一个草稿出来，先换上吧，以免再被蓝冰日。

时间比较仓促，2天前刚拿到小黑设计的完整 PSD，于是闭关埋头苦干起来，拒绝了一切扣扣、邮件甚至短信，终于在今天熬出了一个 beta 0.0000001 版本。从这个版本就可以看出，这完全就是一个不合格的草稿版，没办法，和之前改了两年的主题相比，当前的主题功能实在是太简陋了，只能先凑合一下。

连主题的名字我也没有想好，暂且就叫它 WanGe 吧，我梦寐以求的万戈牌 WordPress 主题，哈哈。主题已经做过不少了，所以没有碰到很大的问题，唯一比较有挑战性的就是 HTML5，不知道各位有没有注意到本主题的源代码，是的，HTML5！在做这个主题之前我就参考了很多 HTML5 的相关资料，但是还是不能很好地拿捏，只能探索性地边学边写这个主题，值得庆幸的是，这个主题在 IE 下表现完好，并无错位，这让我很欣慰，征服 IE 的同时也征服了 HTML5。不过话也不能说满，要征服 HTML5 还早，暂时只是征服了 HTML5 的标签，但是 HTML5 的精髓是脚本的运用，功能的强大让人叹为观止，这就慢慢学慢慢改吧。

还有一个问题要征求一下大家的意见，用 Firefox、Chrome 这些浏览器的用户可以看到本站的圆角、阴影等效果，IE 用户就没有这个眼福了。但是可以通过 PIE 脚本让 IE 也能实现这些绚丽的效果，又但是，这对 IE 浏览器的资源消耗相当厉害，如果 RP 差一些的，浏览器就很有可能挂掉了。到底是选择美观？还是效率呢？

主题刚上线，欢迎大家踊跃测试呀，凡抓到 bug 者，奖励香吻一枚。

]]> http://wange.im/wange-theme-beta.html/feed 303 向 HTML5 发起自学挑战书 http://wange.im/html5-self-study.html http://wange.im/html5-self-study.html#comments Mon, 08 Nov 2010 14:17:54 +0000 万戈 http://wange.im/?p=4077 正如大家所见，我已经有很长一段时间没有拿出一些新鲜的、原创的、吸引眼球的代码和大家分享了，一方面最近确实有够忙的，都来不及折腾这个折腾那个；另一方面自己的水平有够菜的，看着过去自己的代码实在不怎么样，也就不拿出来秀了；再另一方面，最近在学习 HTML5 和 Javascript 这些，为新主题做准备。

可以看到 WordPress 3.0 的默认主题 TwentyTen 的 doctype 声明是 <!DOCTYPE HTML>，这一点很让人欣喜，说明 WordPress 开始支持 HTML5 了，虽然是这样，但是 TwentyTen 主题中也只是声明用到了 HTML5 而已，标签还是维持了 HTML4 的 DIV+CSS 传统布局。这不能怪人家 WordPress，做到这步已经是实足的进步了，因为 HTML5 毕竟还只是一个传说，没有浏览器们的配合，HTML5 就始终只能停留在传说。

作为一名对 HTML 的深度业余爱好者，我自认为有责任有义务来推动 HTML5 的发展，让更多网页前端工程师和像我一样的爱好者还有无数的网名们享受到 HTML5 带来的便利及优势。所以我决定在下一款 WordPress 主题尝试用传说中的 HTML5 来制作。HTML5 是一个飞跃的发展，最近看了一些关于 HTML5 的资料，感叹 HTML5 强大的同时，也深深认识到自己的功底有些薄弱，我需要学习学习再学习！

不过话说市面上关于 HTML5 的系统的详细一些的介绍材料还真找不到，除了 w3school 一些基础的不能再基础的知识简介，我几乎就找不到更多的有些权威性的介绍了。去当当网上想找找这方面的书，也一无所获，是不是 HTML5 还太年轻？还是没有人愿意吃这第一只螃蟹？抑或是都习惯了 HTML4 而懒得革新？

没有系统的教材，我只能一边摸索一边学习了，没关系，我愿意吃这第一只螃蟹，想当年 DIV+CSS 我就是这么自学学会的，如今再攻下 HTML5 又有何难，看我的，哼！

]]> http://wange.im/html5-self-study.html/feed 127 我的大小财主们 http://wange.im/my-clients-of-wordpress-theme.html http://wange.im/my-clients-of-wordpress-theme.html#comments Tue, 19 Oct 2010 13:40:12 +0000 万戈 http://wange.im/?p=3979 说到 WordPress 主题，我又要惭愧了，不像 ZWW 大叔那些无私，三天两头提交 WordPress 免费主题到官方，而我是一次都没有提交过免费主题，因为我基本不做免费主题，唯一做的两次不收费的 WordPress 主题也是为圈中好友私人定制的，未共享。话说虽然D调，但至今也做了不少收费主题，今天就对我那些定制 WordPress 主题的客户们做个总结和分类，还挺有意思的。为了保护客户隐私，以下皆为匿名，请勿对号入座。

我比较喜欢称客户们为财主，在我朝免费当道的大环境下，能花钱买主题的都是财主，只是财主还有大小之分。先说说大财主们，这些用户出手阔绰，对我提出的报酬基本能满足。但是大财主们之间还是各有区别的。

有些大财主有着很个性的想法、独到的见解、自成一派的风格，只是苦于驾驭代码的能力有限，不能把自己的所思所想表现出来，所以不惜花重金实现自己的想法甚至是自己的理想。对于这些大财主，他们在我写主题的时候会不断地主动与我沟通、指正以期达到最终理想的状态，往往这些客户的主题需要花更多的时间，因为在制作过程中会经常修改变化，虽然有些麻烦，但我非常喜欢与这些客户合作，他们的热情往往会感染到我，我本身也是一个追求完美的人，只有这样，最后的作品才会趋于完美，才会让我更有成就感。

另一种大财主纯粹是不差钱，只求一个与众不同的主题让他们耍耍帅，他们对自己想要的主题没有一个概念，只是把钱扔给我，好像在说：Just Do It!我对这样的客户无从下手，因为连他自己都不知道想要什么样的主题，而我又怎么制作呢？碰到过一个耍财主脾气的这样一个客户，事前没有任何要求，一旦我做好之后却告诉不是他要的style，但是你到底需要什么样的style呢？含糊不清～还碰到过一个不差钱的大财主，花了四位数的价格仅仅是让我仿了一个网站，为了对的起他这点钱，在很多细节和后台上都下了很大的功夫，不过最终他貌似也不领情，或许并不懂得欣赏，交货的一个星期之后再去看他的网站，居然又换了一个主题，这样的客户不只是不在乎钱，而且也把我的劳动成果完全不当一回事，所以这样的钱赚的一点也没有快感。

再来说说小财主们，这群人是最可爱的，也是财主中的大多数。我接触的很多小财主都是在校学生，他们对 WordPress 充满了兴趣和热情，对独立博客有着无限的憧憬，有着年轻人的个性，急于求成但是对代码的又不熟悉，而且在校学生的生活费有限，没有经济来源，这和当年的我很像，所以特别能理解这样一群人的心情。对于这样的小财主们，我经常是网开一面，下手没有这么狠，因为我做 WordPress 主题并不完全是为了经济利益，如果能推动 WordPress 这个圈子新鲜血液的发展，我就多付出一点劳动力啦，也算是做一件好事。

无论是大财主还是小财主，又或者是无产阶级，无论是 WordPress，又或者是其他博客平台，让我接触了比现实中更多的朋友和形形色色的人，这样挺好，我爱这个圈子。

]]> http://wange.im/my-clients-of-wordpress-theme.html/feed 142 中国博客联盟改版主题上线 http://wange.im/wordpress-theme-for-chinablogs.html http://wange.im/wordpress-theme-for-chinablogs.html#comments Fri, 01 Oct 2010 11:51:54 +0000 万戈 http://wange.im/?p=3889 童鞋们，我想死你们啦～这整整一周，我没有更新博客，没有回复留言，也没有回访任何博客，甚至没有回复QQ上的留言，整个人处于闭关的状态。今天终于抽空登上博客看了一眼，我的天，已经是杂草丛生了，先把近期没来的及看的留言中的 spams 挑出来清理一下，再扫了一下百来条留言，却也没有时间一一回复了，然后看 Google Reader 里已经堆了近千条的未读条目，一键标记为已读。向大家汇报一下这几天我再忙些什么吧。

主要是应了中国博客联盟的老大，菠萝的要求，给联盟的改版做一个全新的主题，而且 deadline 是国庆节前。如果还是在暑假前，就绝对有充裕的时间来完成这个任务，但是现在恢复工作状态了（周末还要上课），每天能写主题的时间非常有限，不过我还是硬着头皮接下来了。因为加入博客联盟N久以来，基本啥贡献都没做过，菠萝老大还是很给面子地给我套了个论坛管理员的头衔，惭愧惭愧呀，再不做点啥就太脱离组织了。于是乎每天上班回来就加班加点的赶主题。

先来介绍一下这款新诞生的主题吧，既然给中国博客联盟定制的，就起名为 ChinaBlogs，设计是由陈小黑童鞋担当，之前写 SunMusic 主题的时候就和小黑合作过，设计有活力、用色大胆、作品细腻、是个很有潜力的设计人才。而接下来的 PSD 转 DIV + CSS，包括写成 WordPress 主题就由我负责了。在制作 ChinaBlogs 主题的过程中，有很多创新元素，对于我个人而言也有一些技术上的突破，最后终于赶在国庆之前上线了，自我感觉无论是设计上还是功能上都是一款比较完美的主题。

主题适用于 WordPress 2.7 以上版本，支持小工具设置，支持 WordPress 3.0+ 的导航菜单设置，支持 WordPress 2.9+ 的缩略图功能，支持评论分页和嵌套回复功能，并且附带主题后台设置。ChinaBlogs 主题兼容 IE、Firefox、Chrome 、Opera、Safari 等浏览器，并通过 W3C HTML5 和 CSS3 验证。

我特别想说一下的是这个主题的后台设置选项，因为访客只能欣赏到小黑设计的主题前台，只有管理员才能享受到这款主题的后台功能，后台的代码部分至少花费了我整个主题的四分之一的时间，是我做的所有主题中功能最多、最细致、最个性化的，可以自豪地说，这个后台让整个主题增色不少。还有一点让我自己都比较兴奋，这个主题通过了 HTML5 的验证，从 WordPress 3.0 的默认主题 Twentyten 的 Doctype 声明可以看出，Wordpress 也在紧跟 Web 时代潮流，向 HTML5 靠拢，虽然 HTML5 还只是一个传说，但毕竟是大势所趋，所以我也顺应潮流让这个主题支持了 HTML5。整个主题唯一必须的功能性插件就只有 wp-postviews 这一个，维持了我少插件的主题原则，而且合并了背景图片、脚本等，尽量使网站速度得到提升，现在主题的 Yslow 测试是 Grade A，也算OK了。

因为时间仓促，还有很多构思没有来的及实现，更多的是一些细节，都不影响主题的主体结构和表现，所以先让博客联盟 ChinaBlogs 的主题可以上线运行再说了。联盟的主题刚刚上线，还请大家，特别是博客联盟的成员们多多测试，请把 Bug、意见或建议告知菠萝、小黑、或者我都可以，我们会尽快完善这款主题。主题的预览图我就不截了，可能随时会有修改，所以有兴趣的朋友可以直奔 http://chinablogs.org/ 去瞧瞧～

与

,,,,

相关的文章
]]> http://wange.im/wordpress-theme-for-chinablogs.html/feed 139 为 WordPress 添加主题后台控制选项 http://wange.im/add-control-panel-for-wordpress.html http://wange.im/add-control-panel-for-wordpress.html#comments Mon, 20 Sep 2010 09:41:45 +0000 万戈 http://wange.im/?p=3860 在我最近做的几款 WordPress 主题中，都集成了主题的后台控制选项，一方面是出于方便用户管理和操作的原因，另一方面是因为感觉作为一款收费主题，如果连个后台都没有，总好像缺点什么，所以经过这么多主题包括后台的制作，对后台控制面板的制作也有了一点心得。今天就举例说明如何给 WordPress 主题添加后台控制选项。

首先，在你的 WordPress 主题目录下新建一个 control.php 文档，然后把以下代码粘贴进去：

<?php
$themename = "万戈牌主题";    //主题名称
$shortname = "wange";    //主题简写，必须是英文、数字、下划线组合
$options = array (
    array("name" => "这里是大标题","type" => "heading","desc" => "这里是描述信息"),
    array("name" => "这里是小标题","id" => $shortname."_test","std" => "这里是默认值","type" => "text")
);
function mytheme_add_admin() {
    global $themename, $shortname, $options;
    if ( $_GET['page'] == basename(__FILE__) ) {
        if ( 'save' == $_REQUEST['action'] ) {
            foreach ($options as $value) {
            update_option( $value['id'], $_REQUEST[ $value['id'] ] ); }
            foreach ($options as $value) {
            if( isset( $_REQUEST[ $value['id'] ] ) ) { update_option( $value['id'], $_REQUEST[ $value['id'] ]  ); } else { delete_option( $value['id'] ); } }
            header("Location: themes.php?page=control.php&saved=true");    //这里的 control.php 就是这个文件的名称
            die;
        } else if( 'reset' == $_REQUEST['action'] ) {
            foreach ($options as $value) {
                delete_option( $value['id'] );
                update_option( $value['id'], $value['std'] );
            }
            header("Location: themes.php?page=control.php&reset=true");    //这里的 control.php 就是这个文件的名称
            die;
        }
    }
    add_theme_page($themename." Options", "$themename 设置", 'edit_themes', basename(__FILE__), 'mytheme_admin');
}
function mytheme_admin() {
    global $themename, $shortname, $options;
    if ( $_REQUEST['saved'] ) echo '<div id="message" class="updated fade"><p><strong>'.$themename.' 设置已保存。</strong></p></div>';
    if ( $_REQUEST['reset'] ) echo '<div id="message" class="updated fade"><p><strong>'.$themename.' 设置已重置。</strong></p></div>';
?>
    <style type="text/css">
    th{text-align:left;}
    input{width:100%;}
    .submit{width:100px;padding:0;}
    .defaultbutton{padding-left:745px;}
    </style>
    <div class="wrap">
        <h2><b><?php echo $themename; ?> 设置</b></h2>
        <form method="post">
            <div class="submit" style="padding:0;">
                <input style="font-size:12px !important;" name="save" type="submit" value="保存设置" />   
                <input type="hidden" name="action" value="save" />
            </div>
            <table class="optiontable" >
                <?php foreach ($options as $value) {
                    if ($value['type'] == "text") { ?>
                        <tr align="left">
                            <th scope="row"><?php echo $value['name']; ?>:</th>
                            <td>
                                <input name="<?php echo $value['id']; ?>" id="<?php echo $value['id']; ?>" type="<?php echo $value['type']; ?>" value="<?php if ( get_settings( $value['id'] ) != "") { echo get_settings( $value['id'] ); } else { echo $value['std']; } ?>" size="40" />
                            </td>
                        </tr>
                    <?php } elseif ($value['type'] == "heading") { ?>
                        <tr valign="top">
                            <td colspan="2" style="text-align: left;"><hr />
                            <h2 style="color:green;"><?php echo $value['name']; ?></h2></td>
                            <tr><td colspan=2> <p style="color:red; margin:0 0;" > <?php echo $value['desc']; ?> </P> <hr /></td></tr>
                        </tr>
                    <?php } ?>
                    <?php
                }
                ?>
            </table>
            <hr />
            <div class="submit">
                <input style="font-size:12px !important;" name="save" type="submit" value="保存设置" />   
                <input type="hidden" name="action" value="save" />
            </div>
        </form>
        <form method="post" class="defaultbutton">
            <div class="submit">
                <input style="font-size:12px !important;" name="reset" type="submit" value="还原默认设置" />
                <input type="hidden" name="action" value="reset" />
            </div>
        </form>
    </div>
    <?php
}
add_action('admin_menu', 'mytheme_add_admin');
?>

当然，以上代码也可以复制到 functions.php 中，但是因为代码比较大段，所以还是新建一个 control.php 来存放比较方便管理。

之后，再在 functions.php 中 include 以上代码：

require_once(TEMPLATEPATH . '/control.php');

这样，一个超简易的后台就完成了，在 WordPress 后台左侧栏的控制面板 - 外观中可以看到多了一个设置选项：

接下来就是最后一步，调用主题后台的设置，在 WordPress 主题中需要的位置插入以下代码即可：

<?php echo get_option('wange_test');?>

需要注意的是这个调用的格式，其中 wange 是刚才在 control.php 中开头部分定义的主题简写，后面的 _test 则是在主题设置中定义的数组的 id 键。

为了便于理解，我已经把以上代码精简到最省略最基本的状态了，不过我相信只要有心研究，多折腾，肯定会很快领会其中的奥义，并且扩展出更为强大的，效果更好的 WordPress 后台，我就正在朝这个方向努力中。

]]> http://wange.im/add-control-panel-for-wordpress.html/feed 188