主页 » 模版 » 如何为WordPress 后台添加自定义域面板

如何为WordPress 后台添加自定义域面板

2012-09-23评论关闭
最近忙着做一个新的#wordpress#站,但是里面需要设置自定义字段,虽然系统有默认的添加方法,但使用起来很是麻烦(我记不住那些调用代码······),在找了近半个月的时间之后,学会了如何在wp后台添加自定义域控制面板!

当然,已经有大神做出来了牛逼闪闪的插件,但我不想用······如果想和我一样手动修改文件的朋友继续看,否则请移步wp官网插件介绍页:Custom Field Template 。

先上我弄好的图吧,毕竟有图才有真相!首先是后台效果:

wordpress自定义控制面板

接着是前台显示效果,缩略图是另外调用的,可以忽略:

wordpress自定义字段前台

其实方法很简单,只要修改模板里的函数文件 functions.php,以及前台调用的页面模板即可。下面我先介绍笼统的做法。

一、定义 myCustomFields 类

  1. if ( !class_exists(‘myCustomFields’) ) {   
  2. class myCustomFields {   
  3. /**
  4. * @var  string  $prefix  自定义栏目名的前缀  
  5. */  
  6. var $prefix = ’mcf_’;   
  7. /**
  8. * @var  array  $postTypes  包含了标准的“文章”、“页面”和自定义文章类型的数组,自定义栏目面板将出现在这些文章类型中  
  9. */  
  10. var $postTypes = array“page”“post” );  

注意:如果自定义栏目名是以下划线(_)开头的,它将在 WordPress 自带的“自定义栏目”面板中隐藏。如果想保留 WordPress 自带“自定义栏目”面板,建议使用这个方法。

二、定义所有的自定义栏目

  1. /**  
  2. * @var  array  $customFields  定义了所有的自定义栏目  
  3. */  
  4. var $customFields =    array(   
  5. array(   
  6. “name”            => “block-of-text”,   
  7. “title”            => “多行文本”,   
  8. “description”    => “”,   
  9. “type”            => “textarea”,   
  10. “scope”            =>    array“page” ),   
  11. “capability”    => “edit_pages”  
  12. ),   
  13. array(   
  14. “name”            => “short-text”,   
  15. “title”            => “单行文本”,   
  16. “description”    => “”,   
  17. “type”            =>    “text”,   
  18. “scope”            =>    array“post” ),   
  19. “capability”    => “edit_posts”  
  20. ),   
  21. array(   
  22. “name”            => “checkbox”,   
  23. “title”            => “复选框”,   
  24. “description”    => “”,   
  25. “type”            => “checkbox”,   
  26. “scope”            =>    array“post”“page” ),   
  27. “capability”    => “manage_options”  
  28. )   
  29. );  

所有的自定义栏目都应该写在这里,当然要遵循这样的格式,不过这里只给出了单行文本框、多行文本框、富文本框、复选框四种类型,您可以在稍后自由添加(像我自己写的,就是一直重复“单行文本”的代码)。每一个字段包含的值为:

  1. 01: name: 自定义栏目的名称。这个名称将加上前缀存储在数据库中;   
  2. title : 用于显示在自定义栏目面板的标题;   
  3. description : 显示在每个自定义栏目的下方,给出提示;   
  4. type : 定义了显示的类型,默认为单行文本(text);   
  5. scope : 定义了每个自定义栏目的作用范围,例如 post 文章、page 页面;   
  6. capability : 定义了编辑每个自定义栏目需要的权限,如果对此不太了解,参见这篇文章:《Users, roles, and capabilities in WordPress》。  

三、用于初始化的相关函数

  1. /**  
  2. * 用于兼容 PHP 4 的构造函数  
  3. */  
  4. function myCustomFields() { $this->__construct(); }   
  5. /**
  6. * 用于 PHP 5 的构造函数  
  7. */  
  8. function __construct() {   
  9. add_action( ’admin_menu’, array( &$this, ’createCustomFields’ ) );   
  10. add_action( ’save_post’, array( &$this, ’saveCustomFields’ ), 1, 2 );   
  11. // 如果想要保留 WordPress 自带“自定义栏目”面板,请注释下一行   
  12. add_action( ’do_meta_boxes’, array( &$this, ’removeDefaultCustomFields’ ), 10, 3 );   
  13. }   
  14. /**
  15. * 移除 WordPress 自带“自定义栏目”面板  
  16. */  
  17. function removeDefaultCustomFields( $type$context$post ) {   
  18. foreach ( array( ’normal’, ’advanced’, ’side’ ) as $context ) {   
  19. foreach ( $this->postTypes as $postType ) {   
  20. remove_meta_box( ’postcustom’, $postType$context );   
  21. }   
  22. }   
  23. }   
  24. /**
  25. * 创建新的“自定义栏目”面板  
  26. */  
  27. function createCustomFields() {   
  28. if ( function_exists( ’add_meta_box’ ) ) {   
  29. foreach ( $this->postTypes as $postType ) {   
  30. add_meta_box( ’my-custom-fields’, ’Custom Fields’, array( &$this, ’displayCustomFields’ ), $postType, ’normal’, ’high’ );   
  31. }   
  32. }   
  33. }  

其中包括了构造函数(注意 PHP 4 与 PHP 5 承认的构造函数并不相同,而 PHP 4 似乎没有析构函数),向 admin_menu 添加钩子以显示自定义栏目面板,向 save_post 添加钩子以在文章保存时也能保存自定义栏目中的信息,向 do_meta_boxes 添加钩子以移除 WordPress 自带“自定义栏目”面板(如果不需要可以将之注释)。

四、权限检查

  1. /**  
  2. * 显示新的“自定义栏目”面板  
  3. */  
  4. function displayCustomFields() {   
  5. global $post;   
  6. ?>   
  7. <div>   
  8. <?php   
  9. wp_nonce_field( ’my-custom-fields’, ’my-custom-fields_wpnonce’, false, true );   
  10. foreach ( $this->customFields as $customField ) {   
  11. // 范围检查   
  12. $scope = $customField[ 'scope' ];   
  13. $output = false;   
  14. foreach ( $scope as $scopeItem ) {   
  15. // 原作者在此处使用了 switch,估计是修改时忘记删掉了   
  16. if ( $post->post_type == $scopeItem ) {   
  17. $output = true;   
  18. break;   
  19. }   
  20. }   
  21. // 权限检查   
  22. if ( !current_user_can( $customField['capability'], $post->ID ) )   
  23. $output = false;  

这一段是显示新的“自定义面板”的函数 displayCustomFields(),wp_nonce_field() 函数生成了一个包含随机数的隐藏字段,用于检查提交的内容来自合法的位置。首先检查的是自定义栏目的作用范围,如注释中所述,原作者在此处使用了 switch,估计是修改时忘记删掉了(因为前一个版本检查方式与现在有一些差别)。接着检查的是权限,检查通过后才会显示这个自定义栏目。

五、输出自定义栏目

  1. // 如果允许,则输出   
  2. if ( $output ) { ?>   
  3. <div>   
  4. <?php   
  5. switch ( $customField[ 'type' ] ) {   
  6. case “checkbox”: {   
  7. // 输出复选框   
  8. echo ’<label for=“‘ . $this->prefix . $customField[ 'name' ] .’” style=“display:inline;”><b>’ . $customField[ 'title' ] . ’</b></label>&nbsp;&nbsp;’;   
  9. echo ’<input type=“checkbox” name=“‘ . $this->prefix . $customField['name'] . ’” id=“‘ . $this->prefix . $customField['name'] . ’” value=“yes”‘;   
  10. if ( get_post_meta( $post->ID, $this->prefix . $customField['name'], true ) == “yes” )   
  11. echo ’ checked=“checked”‘;   
  12. echo ’“ style=”width: auto;“ />’;
  13. break;  
  14.  
  15. case ”textarea“:  
  16. case ”wysiwyg“: {  
  17. // 输出多行文本框  
  18. echo ’<label for=”‘ . $this->prefix . $customField[ 'name' ] .’“><b>’ . $customField[ 'title' ] . ’</b></label>’;  
  19. echo ’<textarea name=”‘ . $this->prefix . $customField[ 'name' ] . ’“ id=”‘ . $this->prefix . $customField[ 'name' ] . ’“ columns=”30“ rows=”3“>’ . htmlspecialchars( get_post_meta( $post->ID, $this->prefix . $customField[ 'name' ], true ) ) . ’</textarea>’;  
  20. // 输出富文本编辑框  
  21. if ( $customField[ 'type' ] == ”wysiwyg“ ) { ?>  
  22. <script type=”text/javascript“>  
  23. jQuery( document ).ready( function() {  
  24. jQuery( ”<?php echo $this->prefix . $customField[ 'name' ]; ?>“ ).addClass( ”mceEditor“ );  
  25. if ( typeof( tinyMCE ) == ”object“ && typeof( tinyMCE.execCommand ) == ”function“ ) {  
  26. tinyMCE.execCommand( ”mceAddControl“, false, ”<?php echo $this->prefix . $customField[ 'name' ]; ?>“ );  
  27.  
  28. });  
  29. </script>  
  30. <?php }  
  31. break;  
  32.  
  33. default: {  
  34. // 输出单行文本框  
  35. echo ’<label for=”‘ . $this->prefix . $customField[ 'name' ] .’“><b>’ . $customField[ 'title' ] . ’</b></label>’;  
  36. echo ’<input type=”text“ name=”‘ . $this->prefix . $customField[ 'name' ] . ’“ id=”‘ . $this->prefix . $customField[ 'name' ] . ’“ value=”‘ . htmlspecialchars( get_post_meta( $post->ID, $this->prefix . $customField[ 'name' ], true ) ) . ’” />’;   
  37. break;   
  38. }   
  39. }   
  40. ?>   
  41. <?php if ( $customField[ 'description' ] ) echo ’<p>’ . $customField[ 'description' ] . ’</p>’; ?>   
  42. </div>   
  43. <?php   
  44. }   
  45. } ?>   
  46. </div>   
  47. <?php>  

如果要添加新的显示类型,就是这里了。默认的展现形式是很烂的······大家可以稍微用style来定义下展现样式,以及p标签和b标签。

六、保存自定义栏目的值

  1. /**  
  2. * 保存自定义栏目的值  
  3. */  
  4. function saveCustomFields( $post_id$post ) {   
  5. if ( !wp_verify_nonce( $_POST[ 'my-custom-fields_wpnonce' ], ’my-custom-fields’ ) )   
  6. return;   
  7. if ( !current_user_can( ’edit_post’, $post_id ) )   
  8. return;   
  9. if ( ! in_array( $post->post_type, $this->postTypes ) )   
  10. return;   
  11. foreach ( $this->customFields as $customField ) {   
  12. if ( current_user_can( $customField['capability'], $post_id ) ) {   
  13. if ( isset( $_POST$this->prefix . $customField['name'] ] ) && trim( $_POST$this->prefix . $customField['name'] ] ) ) {   
  14. $value = $_POST$this->prefix . $customField['name'] ];   
  15. // 为富文本框的文本自动分段   
  16. if ( $customField['type'] == “wysiwyg” ) $value = wpautop( $value );   
  17. update_post_meta( $post_id$this->prefix . $customField[ 'name' ], $value );   
  18. else {   
  19. delete_post_meta( $post_id$this->prefix . $customField[ 'name' ] );   
  20. }   
  21. }   
  22. }   
  23. }   
  24.     
  25. // End Class   
  26.     
  27. // End if class exists statement   
  28.     
  29. // 实例化类   
  30. if ( class_exists(‘myCustomFields’) ) {   
  31. $myCustomFields_var = new myCustomFields();   
  32. }  

wp_verify_nonce验证了提交的数据是否可信。

七、完整代码:

请进入下一页进行查看,谢谢。

No related posts.

相关文章

    No related posts.

评论已关闭.