wordpress主题制作的高级技巧汇总

笔者觉得，制作wordpress主题是wordpress定制的最高境界了，几乎涉及到wordpress的所有东西，等同于基于wordpress进行二次开发。本文记录学习过程中的一些高级技巧，以作备忘

制作主题入门推荐阅读：WordPress 主题教程：从零开始制作 WordPress 主题

顶部图像支持

wordpress支持用户在后台设置一个顶部图像，主题可以在模板中通过get_header_image判断是否有顶部图像，通过header_image获得图像地址：

<?php if ( get_header_image() ) : ?>

<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
    <img src="<?php header_image(); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" />
</a>

<?php endif; ?>

特色图片

wordpress支持一种叫特色图片的功能，可以为文章添加一个特色图片用于显示，通常在后台的文章编辑右侧显示如下：

如果主题想要支持特色图片，使用add_theme_support( 'post-thumbnails' )即可。另外，可以用add_image_size，告诉wp，每次把用户上传的图片裁剪成什么尺寸。

自定义文章类型

注册新文章类型

wordpress内置了几种文章类型，称为post format，可以通过get_post_format函数获得文章的类型。在主题的functions.php中使用register_post_type注册自定义的文章类型。新增的文章类型会出现在后台左侧菜单中，比如下图新增了一个Movies类型的post：

详见这篇文章WordPress 自定义文章类型（Post Type）终极指南

为自定义的文章类型添加分类目录支持

wordpress内置的“文章”类型的post，可以在编辑文章的时候为文章指定分类，默认的分类叫“未分类”。如果我们自定义了一种类型的post，默认是不能设置分类的。下图是为某种类型的post添加分类目录：

默认情况下，自定义的post类型不能添加分类，需要使用register_taxonomy方法，为post类型注册分类目录支持：

php$args = array(
    "hierarchical" => true, 
    "label" => __( "Portfolio Types", 'junkie' ), 
    "singular_label" => __( "Portfolio Type", 'junkie' ), 
    "rewrite" => array('slug' => 'portfolio-type', 'hierarchical' => true), 
    "public" => true
);
//为portfolio类型的post添加分类目录支持，分类名为porfoli-type，$args设置相关属性
register_taxonomy(__( "portfolio-type", 'junkie' ), array(__( "portfolio", 'junkie' )), $args); 

详见wordpress进阶教程(三):创建自定义分类法

为自定义的文章类型添加MetaBox

MetaBox是指文章除了正文以外，可以设置的额外元数据属性，这部分数据是存在post_meta中的，用户可以在编辑文章的同时，对这些预定义的属性进行设置，从而影响文章的显示或行为。一般，之所以要自定义文章类型，一个最主要的目的就是希望这种类型的文章有一些特别的属性。

下图是一个使用metabox在右侧显示和编辑meta的例子：

在插件、主题中使用get_post_meta函数获取post的meta数据。

想要为某种类型的post添加元数据支持，通常主要做这些工作：
1. 注册钩子：add_meta_boxes、admin_menu等钩子点
2. 在#1中的钩子中使用add_meta_box。这个函数主要是要告诉wp，为哪种类型的post添加meta_box，还有就是指定一个callback，这个callback负责输出html，这个html用来显示meta的可视化编辑布局，就像上图的红色框部分。
3. 注册save_post钩子，验证是否属于当前文章类型，然后保存用户输入的meta

详细请见WordPress函数：add meta box（添加Meta模块）

页面模板

在后台新建页面时，可以选择页面模板，这个模板是主题定义的：

那么主题怎么定义模板呢？其实非常tricky，你只需要在主题目录下的任意地方（子目录也可以）定义一个.php文件，在代码开始的地方，写一段注释就可以了-.-!!!

<?php
/*
Template Name: Full Width
*/
?>

wordpress会用正则匹配这个注释，并将模板名在语言包中进行匹配，最终将所有的模板显示在后台的界面上。

小工具功能

wordpress的小工具功能能够支持后台将小工具组件拖放到适当的页面位置。

上图左侧部分的块块是指小工具，wordpress内置了一些小工具，比如日历、文章文档。左侧的小工具一是由当前主题定义的页面区域（边栏），可以将小工具拖拽到页面区域内。从而对主题页面显示的东西做一定程度的定制。同时，小工具本身也可以多次使用和定制，也就是说同一个小工具可以出现在不同的区域内。这里有两个问题：

1. 如何使主题支持这个功能
2. 如何做一个自定义的小工具

主题支持小工具

主题需要在functions.php中，使用register_sidebar或register_sidebars向wp注册自己可以支持的边栏，比如

phpregister_sidebar( array(
        'name' => __( 'Main Sidebar', 'twentytwelve' ),
        'id' => 'sidebar-1',
        'description' => __( 'Appears on posts and pages except the optional Front Page template, which has its own widgets', 'twentytwelve' ),
        'before_widget' => '<aside id="%1$s" class="widget %2$s">',
        'after_widget' => '</aside>',
        'before_title' => '<h3 class="widget-title">',
        'after_title' => '</h3>',
    ) );

关于函数的使用，参见register_sidebar 注册你的小工具，复杂的主题通常会注册多个sidebar。

注册好边栏后，需要在主题模板的恰当地方将这个边栏放过来，使用dynamic_sidebar：

php<?php if ( is_active_sidebar( 'sidebar-1' ) ) : ?>
    <div id="secondary" class="widget-area" role="complementary">
        <?php dynamic_sidebar( 'sidebar-1' ); ?>
    </div><!-- #secondary -->
<?php endif; ?>

制作自定义的小工具

以后研究了再来补充

主题动态菜单

wordpress支持用户在后台设置自定义的菜单，并将菜单添加到主题的适当位置：

详细用法参见：WordPress自定义导航菜单操作使用方法。用户可以添加一组菜单，并将菜单放到主题的适当位置。那么我们的主题需要支持这个功能。

在functions.php中注册一个或多个菜单位置：

php// This theme uses wp_nav_menu() in one location.
register_nav_menu( 'primary', __( 'Primary Menu', 'twentytwelve' ) );

在模板文件里面使用wp_nav_menu将菜单放到合适的位置，比如上面的primary菜单：

<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>

你的主题可以任意的将上面的代码放到模板的某个位置，这样，用户就可以决定是否需要在这个位置放菜单，或者需要放哪些链接了。通常灵活的主题往往有多个菜单位可供用户选择。