主页 » 模版 » 如何为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.

最新文章

发表评论

同分类文章

最新评论

友情链接

近期文章

近期评论

文章归档

分类目录

功能

© Copyright 2008-2009 点京设计博客 All rights reserved. Powered by Wordpress. Design by douban. Theme by Gao