WordPress后臺中實(shí)現(xiàn)圖片上傳功能的實(shí)例講解
圖片上傳
文件準(zhǔn)備:新建php文件,我用默認(rèn)主題Twenty Ten來測試,首先在這個主題的文件夾下新建一個文件-myfunctions.php 然后打開functions.php文件在最底部添加下面的代碼載入我們新建的這個文件:
include_once('myfunctions.php');
類的代碼如下:
<?php //類ClassicOptions class ClassicOptions { /* -- getOptions函數(shù)獲取選項(xiàng)組 -- */ function getOptions() { // 在數(shù)據(jù)庫中獲取選項(xiàng)組 $options = get_option('classic_options'); // 如果數(shù)據(jù)庫中不存在該選項(xiàng)組, 設(shè)定這些選項(xiàng)的默認(rèn)值, 并將它們插入數(shù)據(jù)庫 if (!is_array($options)) { //初始默認(rèn)數(shù)據(jù) $options['ashu_copy_right'] = '阿樹工作室'; //這里可添加更多設(shè)置選項(xiàng) update_option('classic_options', $options); } // 返回選項(xiàng)組 return $options; } /* -- init函數(shù) 初始化 -- */ function init() { // 如果是 POST 提交數(shù)據(jù), 對數(shù)據(jù)進(jìn)行限制, 并更新到數(shù)據(jù)庫 if(isset($_POST['classic_save'])) { // 獲取選項(xiàng)組, 因?yàn)橛锌赡苤恍薷牟糠诌x項(xiàng), 所以先整個拿下來再進(jìn)行更改 $options = ClassicOptions::getOptions(); // 數(shù)據(jù)處理 $options['ashu_copy_right'] = stripslashes($_POST['ashu_copy_right']); //在這追加其他選項(xiàng)的限制處理 // 更新數(shù)據(jù) update_option('classic_options', $options); } else { // 否則, 重新獲取選項(xiàng)組, 也就是對數(shù)據(jù)進(jìn)行初始化 ClassicOptions::getOptions(); } //添加設(shè)置頁面 add_theme_page("主題設(shè)置", "主題設(shè)置", 'edit_themes', basename(__FILE__), array('ClassicOptions', 'display')); } /* -- 標(biāo)簽頁 -- */ function display() { $options = ClassicOptions::getOptions(); ?> <form method="post" enctype="multipart/form-data" name="classic_form" id="classic_form"> <div class="wrap"> <h2><?php _e('阿樹工作室主題設(shè)置', 'classic'); ?></h2> <!-- 設(shè)置內(nèi)容 --> <table class="form-table"> <tbody> <tr valign="top"> <td> <label> <input type="text" name="ashu_copy_right" value="<?php echo($options['ashu_copy_right']); ?>" size="20"/><?php _e('阿樹工作室版權(quán)文字');?> </label> </td> </tr> </tbody> </table> <!-- TODO: 在這里追加其他選項(xiàng)內(nèi)容 --> <p class="submit"> <input type="submit" name="classic_save" value="<?php _e('保存設(shè)置'); ?>" /> </p> </div> </form> <?php } } /*初始化,執(zhí)行ClassicOptions類的init函數(shù)*/ add_action('admin_menu', array('ClassicOptions', 'init')); ?>
之后查看我們的后臺設(shè)置頁面,看一下我添加之后的效果圖:
此時(shí)文本域和上傳按鈕已經(jīng)有了,但是點(diǎn)擊還是沒有任何效果。為了點(diǎn)擊后彈出那個上傳框架,我們還需要添加js代碼。
為了便于管理,我們新建一個js文件,在twentyten主題文件夾下新建一個文件夾js然后,在這個文件加下新建一個upload.js文件。添加js代碼:
jQuery(document).ready(function() { //upbottom為上傳按鈕的id jQuery('#upbottom').click(function() { //ashu_logo為文本域 targetfield = jQuery(this).prev('#ashu_logo'); tb_show('', 'media-upload.php?type=image&TB_iframe=true'); return false; }); window.send_to_editor = function(html) { imgurl = jQuery('img',html).attr('src'); jQuery(targetfield).val(imgurl); tb_remove(); } });
下面就是加載js和css了。
在上面的類中display()函數(shù)中添加以下代碼:
//加載upload.js文件 wp_enqueue_script('my-upload', get_bloginfo( 'stylesheet_directory' ) . '/js/upload.js'); //加載上傳圖片的js(wp自帶) wp_enqueue_script('thickbox'); //加載css(wp自帶) wp_enqueue_style('thickbox');
之后如果你查看后臺設(shè)置頁面的源碼,在源碼的大概最后面位置能看到你加載的這個js文件。
好了,可以去試用了:
多個圖片上傳表單
首先我們修改表單,添加多個上傳按鈕,還加上顯示圖片用的div容器。
上面教程中的js代碼中是通過文本域的id值來獲取元素的,如果有多個文件上傳表單,但是在一個html文檔中id不能相同,那樣的話,就得針對每個表單都寫一個js,這樣很繁瑣,所以今天我們修改一下表單,并且將js改成通過class獲取對象。
將類中的display()函數(shù)修改為(我新加了一個ashu_ico項(xiàng),并且將上傳按鈕的id屬性去掉改成class="ashu_bottom"):
function display() { //加載upload.js文件 wp_enqueue_script('my-upload', get_bloginfo( 'stylesheet_directory' ) . '/js/upload.js'); //加載上傳圖片的js(wp自帶) wp_enqueue_script('thickbox'); //加載css(wp自帶) wp_enqueue_style('thickbox'); $options = ClassicOptions::getOptions(); ?> <form method="post" enctype="multipart/form-data" name="classic_form" id="classic_form"> <div class="wrap"> <h2><?php _e('阿樹工作室主題設(shè)置'); ?></h2> <p> <label> <input type="text" size="80" name="ashu_logo" id="ashu_logo" value="<?php echo($options['ashu_logo']); ?>"/> <input type="button" value="上傳" 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="上傳" class="ashu_bottom"/> </label> </p> <p class="submit"> <input type="submit" name="classic_save" value="<?php _e('保存設(shè)置'); ?>" /> </p> </div> </form> <?php }
這里新加了一個設(shè)置項(xiàng),前面默認(rèn)數(shù)據(jù)設(shè)置、數(shù)據(jù)更新都需要相應(yīng)的增加項(xiàng)目,很簡單,這里不贅述。
且看新的js代碼,用編輯器打開我們的upload.js,修改代碼為:
jQuery(document).ready(function() { //查找class為ashu_bottom的對象 jQuery('input.ashu_bottom').click(function() { //獲取它前面的一個兄弟元素 targetfield = jQuery(this).prev('input'); tb_show('', 'media-upload.php?type=image&TB_iframe=true'); return false; }); window.send_to_editor = function(html) { imgurl = jQuery('img',html).attr('src'); jQuery(targetfield).val(imgurl); tb_remove(); } });
到此多個圖片上傳已經(jīng)實(shí)現(xiàn),其實(shí)也很簡單。。
相關(guān)文章
關(guān)于Laravel-admin的基礎(chǔ)用法總結(jié)和自定義model詳解
今天小編就為大家分享一篇關(guān)于Laravel-admin的基礎(chǔ)用法總結(jié)和自定義model詳解,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10Joomla數(shù)據(jù)庫操作之JFactory::getDBO用法
這篇文章主要介紹了Joomla數(shù)據(jù)庫操作之JFactory::getDBO用法,實(shí)例分析了Joomla靜態(tài)類JFactory使用getDBO取得數(shù)據(jù)庫對象的相關(guān)操作技巧,需要的朋友可以參考下2016-05-05關(guān)于PHP虛擬主機(jī)概念及如何選擇穩(wěn)定的PHP虛擬主機(jī)
PHP是一種HTML內(nèi)嵌式的語言,是一種在端執(zhí)行的嵌入HTML文檔的腳本語言,語言的風(fēng)格有類似于C語言,現(xiàn)在被很多的網(wǎng)站編程人員廣泛的運(yùn)用。這篇文章給大家分享關(guān)于PHP虛擬主機(jī)概念及如何選擇穩(wěn)定的PHP虛擬主機(jī),感興趣的朋友一起看看吧2018-11-11CentOS下搭建PHP環(huán)境與WordPress博客程序的全流程總結(jié)
這篇文章主要介紹了CentOS下搭建PHP環(huán)境與WordPress博客程序的全流程總結(jié),這里我們以Apache服務(wù)器程序和MySQL數(shù)據(jù)庫程序?yàn)槔M(jìn)行講解,需要的朋友可以參考下2016-05-05ThinkPHP中的關(guān)聯(lián)模型注意點(diǎn)
這篇文章主要介紹了初學(xué)ThinkPHP中的關(guān)聯(lián)模型注意點(diǎn),需要的朋友可以參考下2014-06-06PHP統(tǒng)計(jì)二維數(shù)組元素個數(shù)的方法
數(shù)據(jù)表里面的字段 content 存儲了一個以逗號分割的字符串,最大有20個數(shù),最大數(shù)字為40。比如3,24,33,40類似字樣的數(shù)字序列。其實(shí)就是一個保存了多項(xiàng)投票結(jié)果的字段啦?,F(xiàn)在需要統(tǒng)計(jì)每個數(shù)字的個數(shù),也就是每個投票項(xiàng)有多少人投了,并排序2013-11-11