WordPress后台图片上传功能示例说明

图像上传。

准备：创建一个新的php文件。我使用默认的主题210来测试它。首先，在这个主题的文件夹下创建一个新文件——my functions . PHP，然后打开functions.php文件。在底部添加以下代码来加载我们新创建的文件：

include _ once(' my functions . PHP ')；类别代码如下：

？PHP//class class class class options {/*-GetOptions函数获取数据库中的选项组- */函数GetOptions(){///获取选项组$ options=Get _ options(' classic _ options ')；//如果数据库中不存在选项组，请设置这些选项的默认值，并在(！idspnonenote)中插入它们。Is_array($options)) {//初始默认数据$ options[' ashu _ copy _ right ']=' ashu studio '；//这里可以添加更多的设置选项update _ option ('classic _ options '，$ options)；}//返回选项组return $ options} /* - init函数初始化-*/function init(){///如果POST提交数据，限制数据并将其更新到数据库if(isset($ _ POST[' classic _ save '])){//获取选项组，因为只可能修改部分选项。所以先把它取下来，然后改一下$ options=classifications :3360 getoptions()；//数据处理$ options[' ashu _ copy _ right ']=strippers($ _ post[' ashu _ copy _ right '])；//此处增加其他选项的限制处理//update data update _ option(' classic _ options '，$ options)；} else {//否则，再次获取选项组，即初始化数据经典：3360 get options()；}//添加设置页面add_theme_page('主题设置'，'主题设置'，' edit _ themes '，base name(_ file _ _)，array('经典选项'，' display ')；}/*-tab-*/function display(){ $ options=classifications :3360 getoptions()；form method=' post ' enctype=' multipart/form-data ' name=' classic _ form ' id=' classic _ form ' div class=' wrap ' H2？PHP _ e(' Ashu Studio主题设置'，'经典')；/h2！-设置内容-表格类='表单-表格' tbody trvalign=' top' TD标签输入类型=' text ' name=' ashu _ copy _ right ' value='？PHP echo($ options[' ashu _ copy _ right '])；'size='20'/？Php _e ('Ashu工作室版权文本')；/label /td /tr /tbody /table！- TODO:在此添加其他选项-p class=' submit '输入类型=' submit '名称=' classic _ save '值='？Php _e('保存设置')；'//p /div /form？Php}} /*初始化，执行init函数*/add _ action ('admin _ menu '，classifications类的数组(' classifications '，' init ')；之后，检查我们的背景设置页面，查看我添加后的渲染：

此时，文本字段和上传按钮已经存在，但点击仍然没有效果。为了在点击后弹出上传框，我们还需要添加js代码。

为了便于管理，我们创建一个新的js文件，在twentyten主题文件夹下创建一个新的js文件夹，然后在这个文件下创建一个新的upload.js文件。添加js代码：

Jquery(文档)。ready (function () {//upbottom是上传按钮jquery ('# upbottom ')的ID。Click (function () {//ashu _ logo是文本字段targetfield=jquery (this)。prev(' # ashu _ logo ')；tb_show('，' media-upload.php？type=imageTB _ iframe=true’)；返回false});window . send _ to _ editor=function(html){ imgurl=jQuery(' img '，html)。attr(' src ')；jQuery(targetfield)。val(im gurl)；TB _ remove()；} });下面是加载js和css。将以下代码添加到上述类的display()函数中：

//加载upload.js文件WP _ enqueue _ script ('my-upload '，get _ bloginfo('样式表_目录')。/js/upload . js’)；//加载上传图片的js(wp自带)WP _ enqueue _ script(' thick box ')；//加载css(wp自带)WP _ enqueue _ style(' thick box ')；之后，如果你查看后台设置页面的源代码，你可以在源代码后面看到你加载的js文件。

好吧，你可以试试：

多个图片上传表单首先，我们修改表单，添加多个上传按钮，并添加显示图片的div容器。在上面教程的js代码中，元素是通过文本字段的id值获得的。如果有多个文件上传到表单中，但是在一个html文档中id不能相同，那么就需要为每个表单编写一个js，这是非常麻烦的，所以今天我们修改表单，改变js来通过类获取对象。

将类中的display()函数修改为(我添加了一个新的ashu_ico项，并将上传按钮的id属性更改为class='ashu_bottom '):

函数display() {//加载upload.js文件WP _ enqueue _ script ('my-upload '，get _ bloginfo('样式表_目录')。/js/upload . js’)；//加载上传图片的js(wp自带)WP _ enqueue _ script(' thick box ')；//加载css(wp自带)WP _ enqueue _ style(' thick box ')；$ options=classic options 3360: getoptions()；form method=' post ' enctype=' multipart/form-data ' name=' classic _ form ' id=' classic _ form ' div class=' wrap ' H2？PHP _ e(' Ashu Studio的主题设置')；/h2 p标签输入类型=' text ' size=' 80 ' name=' ashu _ logo ' id=' ashu _ logo ' value='？PHP echo($ options[' ashu _ logo '])；'/input type=' button ' value=' upload ' class=' ashu _ bottom '/label/p p label input type=' text ' size=' 80 ' name=' ashu _ ico ' id=' ashu _ ico ' value='？PHP echo($ options[' ashu _ ico '])；'/input type=' button ' value=' upload ' class=' ashu _ bottom '/label/p p class=' submit ' input type=' submit ' name=' classic _ save ' value='？Php _e('保存设置')；'//p /div /form？Php}这里增加了一个新的设置项，前面默认的数据设置和数据更新都需要相应的增加，非常简单，这里不再赘述。

看看新的js代码，用编辑器打开我们的upload.js，并修改代码如下：

Jquery(文档)。ready(function(){//查找对象jquery ('input。ashu _ bottom’)。class(function(){//在其前面获取一个同级元素，targetfield=jquery (this)。prev('输入')；tb_show('，' media-upload.php？type=imageTB _ iframe=true’)；返回false});window . send _ to _ editor=function(html){ imgurl=jQuery(' img '，html)。attr(' src ')；jQuery(targetfield)。val(im gurl)；TB _ remove()；} });上传到这些多张图片已经实现了，其实很简单。