当用户编辑文章时,编辑屏幕由几个默认框组成:编辑器、发布、类别、标记等。这些框是元框。插件可以将自定义元框添加到任何帖子类型的编辑屏幕。
自定义元框的内容通常是HTML表单元素,用户可以在其中输入与插件用途相关的数据,但内容实际上可以是您想要的任何HTML。
元框是方便、灵活、模块化的编辑屏幕元素,可用于收集与正在编辑的帖子相关的信息。您的自定义元框将与所有其他帖子相关信息显示在同一屏幕上;这样就建立了明确的关系。
元框很容易对不需要查看它们的用户隐藏,并显示给需要查看的用户。元框可以在编辑屏幕上由用户排列。用户可以自由地以适合自己的方式安排编辑屏幕,从而使用户可以控制其编辑环境。
本页上的所有示例仅用于说明目的。该代码不适用于生产环境。
操作,如固定输入,用户功能,现时,以及国际化故意省略。务必始终处理这些重要操作。
要创建元框,请使用添加meta_box()函数并将其执行插入添加元数据框
动作挂钩。
以下示例将元框添加到邮递
编辑屏幕和wporg_cpt(wporg _ cpt)
编辑屏幕。
函数wporg_add_custom_box(){$screens=[“帖子”,“wporg_cpt”];foreach($screens作为$screen){添加元数据框(“wporg_box_id”,//唯一id'自定义元框标题',//框标题“wporg_custom_box_html”,//内容回调,必须是可调用的类型$screen//帖子类型);}}add_action('添加meta_box','wporg_add_custom_box');
这个wporg自定义邮箱html
函数将保存元框的HTML。
以下示例是添加表单元素、标签和其他HTML元素。
函数wporg_custom_box_html($post){?>此字段的描述<select name=“wporg_field”id=“wpoorg_field“class=”postbox“><option value=“”>选择一些东西</选项><option value=“something”>某事<option value=“else”>else</选择><?php(电话)}
请注意,元框中没有提交按钮。元框HTML包含在编辑屏幕的表单标签中,包括元框值在内的所有帖子数据都通过邮政
当用户单击“发布”或“更新”按钮时。
此处显示的示例仅包含一个表单字段,即下拉列表。您可以在任何特定的元框中创建所需的任意数量。如果要显示很多字段,请考虑使用多个元框,在每个元框中将类似字段分组在一起。这有助于使页面更有组织性和视觉吸引力。
要检索并使用保存的用户数据,您需要从最初保存数据的位置获取数据。如果它存储在邮戳
表,您可以使用获取post_meta().
以下示例使用基于保存的元框值的预填充数据增强了以前的表单元素。在下一节中,您将学习如何保存元框值。
函数wporg_custom_box_html($post){$value=get_post_meta($post->ID,'_wporg_meta_key',true);?>此字段的描述<select name=“wporg_field”id=“wpoorg_field“class=”postbox“><option value=“”>选择</选项><option value=“something”<?php选中($value,“something”);?>>某些</option><选项值=“else”<?php已选择($value,“else”);?>>其他</option></选择><?php(电话)}
更多关于选择()功能。
当保存或更新帖子类型时,会触发多个操作,其中任何一个操作都可能适合挂接以保存输入的值。在这个示例中,我们使用保存_发布
动作挂钩,但其他挂钩可能更适合某些情况。请注意保存_发布
对于单个更新事件,可能会触发多次。相应地构造保存数据的方法。
您可以将输入的数据保存在任何您想要的地方,甚至在WordPress之外。由于您可能正在处理与帖子相关的数据邮戳
表通常是存储数据的好地方。
以下示例将保存wporg_field(wporg_字段)
中的字段值_wporg元数据密钥
元键,它是隐藏的。
函数wporg_save_postdata($post_id){if(array_key_exists('wporg_field',$_POST)){更新post_meta($post_id,“_wporg_meta_key”,$_POST[“wporg_field”]);}}add_action('save_post','wporg_save_postdata');
在生产代码中,请记住遵循信息框中列出的安全措施!
你通常不需要担心幕后发生的事情。添加本节是为了完整。
当帖子编辑屏幕想要显示添加到其中的所有元框时,它调用do_meta_box()功能。此函数循环遍历所有元框并调用回调
与每个关联。
在每次调用之间,添加了中间标记(例如div、titles等)。
要从编辑屏幕中删除现有的元框,请使用删除meta_box()功能。传递的参数必须与用于添加元框的参数完全匹配添加meta_box().
要删除默认元框,请检查所用参数的源代码。默认值添加meta_box()呼叫来自wp-includes/edit-form-advanced.php
.
到目前为止,我们一直在使用实现元框的过程技术。许多插件开发人员发现需要使用各种其他技术实现元框。
使用OOP添加元盒很容易,而且不用担心全局命名空间中的命名冲突。
为了节省内存并允许更容易的实现,下面的示例使用带有静态方法的抽象类。
抽象类WPOrg_Meta_Box{/***设置并添加元框。*/公共静态函数add(){$screens=[“post”,“wporg_cpt”];foreach($screens作为$screen){添加元数据框(“wporg_box_id”,//唯一id'自定义元框标题',//框标题[self::class,'html'],//内容回调,必须是可调用的类型$screen//帖子类型);}}/***保存元框选择。**@param int$post_id帖子id。*/公共静态函数save(int$postid){if(array_key_exists('wporg_field',$_POST)){更新post_meta($post_id,“_wporg_meta_key”,$_POST[“wporg_field”]);}}/***向用户显示元框HTML。**@param WP_Post$Post Post对象。*/公共静态函数html($post){$value=get_post_meta($post->ID,'_wporg_meta_key',true);?>此字段的描述<select name=“wporg_field”id=“wpoorg_field“class=”postbox“><option value=“”>选择</选项><option value=“something”<?php选中($value,“something”);?>>某些</option><选项值=“else”<?php已选择($value,'else');?>>其他</option></选择><?php(电话)}}add_action('add_meta_boxes',['WPOrg_meta_Box','add']);add_action('save_post',['WPOrg_Meta_Box','save']);
由于元框的HTML元素位于形式
标记,默认行为是从$_POST(发送)
超级全球用户提交页面后.
您可以使用AJAX增强默认体验;这允许基于用户输入和行为来执行动作;不管他们是否提交了页面。
定义触发器
首先,您必须定义触发器,它可以是链接单击、值更改或任何其他JavaScript事件。
在下面的示例中,我们将定义改变
作为执行AJAX请求的触发器。
/*jslint浏览器:true,plusplus:true*/(函数($、窗口、文档){'使用严格';//DOM就绪时执行$(文档).ready(函数(){//wporgfield表单字段上触发的js“change”事件$('#wporg_field').on('change',function(){//我们的代码});});}(jQuery、窗口、文档);
客户端代码
接下来,我们需要定义希望触发器做什么,换句话说,我们需要编写客户端代码。
在下面的示例中,我们将生成一个邮政
请求时,响应要么是成功,要么是失败,这将表明wporg_field(wporg_字段)
有效。
/*jslint浏览器:true,plusplus:true*/(函数($、窗口、文档){'使用严格';//DOM就绪时执行$(文档).ready(函数(){//wporgfield表单字段上触发的js“change”事件$('#wporg_field').on('change',function(){//jQuery post方法,是带有post的$.ajax的缩写$.post(wporg_meta_box_obj.url,//或ajaxurl{操作:'wporg_ajax_change',//POST数据,操作wporg_field_value:$('#wporg_ field').val(),//POST数据,wporg字段值post_ID:jQuery('#post_ID').val()//当前正在编辑的帖子的ID},函数(数据){//处理响应数据if(数据===“成功”){//执行我们的成功逻辑}else if(数据===“失败”){//执行我们的故障逻辑}其他{//什么都不做}});});});}(jQuery、窗口、文档));
我们从wporg元数据框
我们将在下一步中创建的JavaScript自定义对象。
如果你的元框只需要WordPress AJAX文件URL;您可以使用微缩
预定义的JavaScript变量。
仅在WordPress管理中可用。在执行任何逻辑之前,请确保它不为空。
排队客户端代码
下一步是将代码放入脚本文件中,并在编辑屏幕上将其排队。
在下面的示例中,我们将向以下帖子类型的编辑屏幕添加AJAX功能:post、wporg_cpt。
脚本文件将驻留在/插件名称/admin/meta-boxes/js/admin.js
,
插件名称
作为主插件文件夹,
/插件名称/plugin.php
调用函数的文件。
函数wporg_meta_box_scripts(){//获取当前管理屏幕,或为空$screen=获取当前屏幕();//验证管理屏幕对象if(is_object($screen)){//仅为特定帖子类型排队if(in_array($screen->post_type,['post','wporg_cpt']){//排队脚本wp_enqueue_script('wporg_meta_box_script',插件dir_url(__FILE__)。'admin/meta-boxes/js/admin.js',['jquery']);//本地化脚本,创建自定义js对象wp_localize_script('wporg_meta_box_script','wporg_meta_box_obj',[“url”=>admin_url(“admin-ajax.php”),]);}}}add_action('admin_enqueue_scripts','wporg_meta_box_scripts`);
服务器端代码
最后一步是编写处理请求的服务器端代码。
//`wp_ajax_`后面的片段与POST请求中发送的操作参数相匹配。add_action('wp_ajax_wporg_ajax_change','my_ajax_handler');/***处理我的AJAX请求。*/函数my_ajax_handler(){//在此处处理ajax请求if(array_key_exists('wporg_field_value',$_POST)){$post_id=(int)$_post[“post_id”];if(current_user_can('edit_post',$post_id)){更新post_meta($post_id,“_wporg_meta_key”,$_POST[“wporg_field_value”]);}}wp_die();//完成后,所有ajax处理程序都会死亡}
最后提醒一下,本页所示的代码缺少保护安全的重要操作。确保您的生产代码包含此类操作。
请参见手册的AJAX章节和食品法典委员会有关AJAX的更多信息。