贝壳之家

全代码实现WordPress分类目录和标签添加新的自定义字段

评分 7.9, 满分 10 分 (18 票)
Loading...
文章目录

WordPress的分类目录默认只有名称、别名、父节点和描述这几个字段,有时候我们需要给分类目录拓展一些信息,如想添加一个分类封面图、给分类指定keywords和description等等,这个时候我们就得给分类目录添加自定义字段(或者叫自定义栏目)。本文将给你介绍如何给WordPress的分类目录和标签添加新的自定义字段。

下图是WordPress后台的分类目录编辑页面,有心的读者可能注意到,这里多了个分类封面的输入框,这个就是我们所说的给分类目录添加的自定义字段。

编辑分类

插件实现

本文介绍的重点不是插件,但是如果你不会写代码,或者喜欢更方便的插件,推荐下面几款插件:

全代码实现分类加字段

将下面的PHP代码复制粘贴到你当前主题的 function.php 中即可。以下代码只给分类目录添加自定义字段,如果需要给标签添加自定义字段,请看文章后面的讲解

这部分代码包括 4 大块:调用WordPress的action;新建分类页面添加自定义字段输入框;编辑分类页面添加自定义字段输入框;保存自定义字段的数据。这里只创建一个分类封面的URL输入框。如果要添加更多的自定义字段,也只需在代码中几个 TODO 的位置上追加一些代码而已,代码中也给出添加keywords字段的示例。

所有自定义字段保存在WordPress的_options表中,无需建新的表。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<?php

class Ludou_Tax_Image{
 
    function __construct(){
       
        // 新建分类页面添加自定义字段输入框
        add_action( 'category_add_form_fields', array( $this, 'add_tax_image_field' ) );
        // 编辑分类页面添加自定义字段输入框
        add_action( 'category_edit_form_fields', array( $this, 'edit_tax_image_field' ) );

        // 保存自定义字段数据
        add_action( 'edited_category', array( $this, 'save_tax_meta' ), 10, 2 );
        add_action( 'create_category', array( $this, 'save_tax_meta' ), 10, 2 );
 
 
    } // __construct
 
    /**
     * 新建分类页面添加自定义字段输入框
     */

    public function add_tax_image_field(){
    ?>
        <div class="form-field">
            <label for="term_meta[tax_image]">分类封面</label>
            <input type="text" name="term_meta[tax_image]" id="term_meta[tax_image]" value="" />
            <p class="description">输入分类封面图片URL</p>
        </div><!-- /.form-field -->
       
        <!-- TODO: 在这里追加其他自定义字段表单,如: -->
       
        <!--
        <div class="form-field">
            <label for="term_meta[tax_keywords]">分类关键字</label>
            <input type="text" name="term_meta[tax_keywords]" id="term_meta[tax_keywords]" value="" />
            <p class="description">输入分类关键字</p>
        </div>
        -->
    <?php
    } // add_tax_image_field
 
    /**
     * 编辑分类页面添加自定义字段输入框
     *
     * @uses get_option()       从option表中获取option数据
     * @uses esc_url()          确保字符串是url
     */

    public function edit_tax_image_field( $term ){
       
        // $term_id 是当前分类的id
        $term_id = $term->term_id;
       
        // 获取已保存的option
        $term_meta = get_option( "ludou_taxonomy_$term_id" );
        // option是一个二维数组
        $image = $term_meta['tax_image'] ? $term_meta['tax_image'] : '';
       
        /**
         *   TODO: 在这里追加获取其他自定义字段值,如:
         *   $keywords = $term_meta['tax_keywords'] ? $term_meta['tax_keywords'] : '';
         */

    ?>
        <tr class="form-field">
            <th scope="row">
                <label for="term_meta[tax_image]">分类封面</label>
                <td>
                    <input type="text" name="term_meta[tax_image]" id="term_meta[tax_image]" value="<?php echo esc_url( $image ); ?>" />
                    <p class="description">输入分类封面图片URL</p>
                </td>
            </th>
        </tr><!-- /.form-field -->
       
        <!-- TODO: 在这里追加其他自定义字段表单,如: -->
       
        <!--
        <tr class="form-field">
            <th scope="row">
                <label for="term_meta[tax_keywords]">分类关键字</label>
                <td>
                    <input type="text" name="term_meta[tax_keywords]" id="term_meta[tax_keywords]" value="<?php echo $keywords; ?>" />
                    <p class="description">输入分类关键字</p>
                </td>
            </th>
        </tr>
        -->
       
    <?php
    } // edit_tax_image_field
 
    /**
     * 保存自定义字段的数据
     *
     * @uses get_option()      从option表中获取option数据
     * @uses update_option()   更新option数据,如果没有就新建option
     */

    public function save_tax_meta( $term_id ){
 
        if ( isset( $_POST['term_meta'] ) ) {
           
            // $term_id 是当前分类的id
            $t_id = $term_id;
            $term_meta = array();
           
            // 获取表单传过来的POST数据,POST数组一定要做过滤
            $term_meta['tax_image'] = isset ( $_POST['term_meta']['tax_image'] ) ? esc_url( $_POST['term_meta']['tax_image'] ) : '';

            /**
             *   TODO: 在这里追加获取其他自定义字段表单的值,如:
             *   $term_meta['tax_keywords'] = isset ( $_POST['term_meta']['tax_keywords'] ) ? $_POST['term_meta']['tax_keywords'] : '';
             */


            // 保存option数组
            update_option( "ludou_taxonomy_$t_id", $term_meta );
 
        } // if isset( $_POST['term_meta'] )
    } // save_tax_meta
 
} // Ludou_Tax_Image
 
$wptt_tax_image = new Ludou_Tax_Image();

如果需要在主题中调用分类自定义字段的值,可以使用以下代码:

1
2
3
4
5
6
7
8
// $term_id 是当前分类的id,自行想办法获取
$term_id = $term->term_id;
       
// 获取已保存的option
$term_meta = get_option( "ludou_taxonomy_$term_id" );

// 取值
$tax_image = $term_meta['tax_image'] ? $term_meta['tax_image'] : '';

全代码实现标签加字段

给标签添加自定义字段的原理是一样的,只需把上面第一部分代码中的action修改一下即可,将以上代码中的:

1
2
3
4
5
6
7
8
// 新建分类页面添加自定义字段输入框
add_action( 'category_add_form_fields', array( $this, 'add_tax_image_field' ) );
// 编辑分类页面添加自定义字段输入框
add_action( 'category_edit_form_fields', array( $this, 'edit_tax_image_field' ) );

// 保存自定义字段数据
add_action( 'edited_category', array( $this, 'save_tax_meta' ), 10, 2 );
add_action( 'create_category', array( $this, 'save_tax_meta' ), 10, 2 );

改成:

1
2
3
4
5
6
// 其实就是把 category 改成 post_tag 即可
add_action( 'post_tag_add_form_fields', array( $this, 'add_tax_image_field' ) );
add_action( 'post_tag_edit_form_fields', array( $this, 'edit_tax_image_field' ) );

add_action( 'edited_post_tag', array( $this, 'save_tax_meta' ), 10, 2 );
add_action( 'create_post_tag', array( $this, 'save_tax_meta' ), 10, 2 );

另外,也可以同时给分类目录和标签添加自定义字段:

1
2
3
4
5
6
7
8
9
10
11
12
// 分类
add_action( 'category_add_form_fields', array( $this, 'add_tax_image_field' ) );
add_action( 'category_edit_form_fields', array( $this, 'edit_tax_image_field' ) );
add_action( 'edited_category', array( $this, 'save_tax_meta' ), 10, 2 );
add_action( 'create_category', array( $this, 'save_tax_meta' ), 10, 2 );


// 标签
add_action( 'post_tag_add_form_fields', array( $this, 'add_tax_image_field' ) );
add_action( 'post_tag_edit_form_fields', array( $this, 'edit_tax_image_field' ) );
add_action( 'edited_post_tag', array( $this, 'save_tax_meta' ), 10, 2 );
add_action( 'create_post_tag', array( $this, 'save_tax_meta' ), 10, 2 );

参考自:WP Theme Tutorial

露兜
ourwindow@163.com

业余编程爱好者。

标签: WordPress
我要提问

33 条评论

点此留言
  1. 香港服务器

    虽然我很喜欢wordpress,但是wordpress代码还是很陌生,所以我先学习了

  2. 肚兜。。。

    肚兜不给力,不知道怎么看效果图。。。没懂

  3. 技术拉近你我

    代码实现比用插件来的高效多了。

  4. 山顶洞人

    兄弟的文章对我帮助很大。太给力了

  5. 清风美文

    我还是直接用插件来实现好了

  6. 博客导航

    不错的教程哦

    博客导航 诚邀博主加入博主Q群 33832398

    博客导航 qiusongsong.net/dh/ 已收录贵站 欢迎互访哦!

  7. sven

    很实用,mark了,找个时间就给主题加上。

  8. 牧羊人

    不折腾了,累了。。。。

  9. ExplorePress

    这是一个好点子!分类目录之外不知道如果是其他主题中的类似文章形式的内容都是可以的吗.

  10. 黎叔

    好像不需要这么复杂,,就几十个字符就可以搞定,,

  11. Wordpress主题插件

    很有用,正好适合我正在开发的一个主题,收藏了

  12. evy

    想请问一下博主,怎么删除默认字段,比如楼主这个列子中,我想把默认的父节点,还要图片描述不要了,要如何删除呢。 非常感谢

  13. 握兰网

    博主你好,请教一个问题。我使用的国外主题,当搜索中文时,无法返回数据,搜索英文和数字正常,请问该如何解决呢?

  14. 陆舒杰

    露兜博主,你好,添加完毕,前台怎么调用呢?希望能得到你的指教,谢谢!

    • 中营

      @陆舒杰 你好 你在前台怎么调用呢?

  15. 陆舒杰

    谢谢博主提供的代码,已经实现了自定义相应的面板,感谢!

  16. xuexi

    好文章,目前还没用到定制,先看看。

  17. 野人摊

    博主,你好,不知道有没有标签固定这个功能,就是我只想让他显示我想要的标签,其他不是我想要的就不用出现了

  18. 随之长风

    我只想登陆一下而以#17

  19. 农民进城

    楼主,请问一下这个自定义目录分类实现了,在后台保存了值,怎么在前台调用呢?

    • 露兜

      @农民进城 文章中已经有介绍了吧:
      如果需要在主题中调用分类自定义字段的值,可以使用以下代码:

  20. 看看

    路过看看

  21. 我爱动感单车网

    小白一个,看不懂这个究竟要怎么弄,算了还是少折腾了吧,免得反倒搞出问题来!

  22. simon

    标签页怎么获取ID呢,网上的方法都获取不到。。

  23. 课间十分钟

    class Ludou_Tax_Image{
     
        function __construct(){ …. 这段放在functions.php里面不行

  24. 唯历史

    有插件可以使用吗?这个太复杂了

  25. 学习wp

    请问一下大神,
    假如我做了学校的学生册,
    建立了一个新的 post-type:student
    然后这些学生的信息是要存在哪呢?
    是重新建立一个新的数据表好呢还是使用原来的 wp-posts表?
    各有什么优缺点?
    新的数据表可以把相关的字段如性别,年龄,报学课程等放到字段中去. 而存在wp-posts中的话,这些资料只能放到 postmeta中去, 信息有点凌乱, 要搬家的话也没有独立的数据表那么有条理性.
    新学的,有点不太明白哪种处理方式合理?

    • 露兜

      @学习wp 新建数据表的话,优点是独立存储,有条理;缺点是不支持WordPress的post type,难以使用一些内置的函数接口,只能通过wpdb来操作数据库表,需要一定的编程能力,后台还需要创建相关的显示页面。
      使用内置的post-type,优点是可以直接使用WordPress后台的文章页面以及函数接口;缺点是是你进数据库管理界面,数据跟其他post混在一起,看起来有点乱,但是这不影响数据库搬家。

      • 啊吐啊吐啊吐

        @露兜 我也碰到了同样的问题,这段代码放进functions.php,后台分类目录下面并没有出现分类封面输入框,wordpress版本是4.7.1

        • 露兜

          @啊吐啊吐啊吐 WordPress 4.7.1测试正常。另外,并不是后台分类目录下显示自定义字段,而是后台编辑分类目录页面。

发表评论

评分 7.9, 满分 10 分 (18 票)
Loading...