笔者觉得,制作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);
为自定义的文章类型添加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内置了一些小工具,比如日历
、文章文档
。左侧的小工具一
是由当前主题定义的页面区域(边栏),可以将小工具拖拽到页面区域内。从而对主题页面显示的东西做一定程度的定制。同时,小工具本身也可以多次使用和定制,也就是说同一个小工具可以出现在不同的区域内。这里有两个问题:
- 如何使主题支持这个功能
- 如何做一个自定义的小工具
主题支持小工具
主题需要在functions.php
中,使用register_sidebar
或register_sidebars
向wp注册自己可以支持的边栏,比如
php
register_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' ) ); ?>
你的主题可以任意的将上面的代码放到模板的某个位置,这样,用户就可以决定是否需要在这个位置放菜单,或者需要放哪些链接了。通常灵活的主题往往有多个菜单位可供用户选择。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。