5

笔者觉得,制作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_boxesadmin_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_sidebarregister_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' ) ); ?>

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


P_Chou水冗
5.1k 声望256 粉丝

大数据spark/flink/hadoop/elasticsearch/kafka架构与开发