您好,登錄后才能下訂單哦!
小編給大家分享一下WordPress后臺中如何實現(xiàn)圖片上傳功能,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
圖片上傳
文件準(zhǔn)備:新建php文件,我用默認(rèn)主題Twenty Ten來測試,首先在這個主題的文件夾下新建一個文件-myfunctions.php 然后打開functions.php文件在最底部添加下面的代碼載入我們新建的這個文件:
include_once('myfunctions.php');
類的代碼如下:
<?php //類ClassicOptions class ClassicOptions { /* -- getOptions函數(shù)獲取選項組 -- */ function getOptions() { // 在數(shù)據(jù)庫中獲取選項組 $options = get_option('classic_options'); // 如果數(shù)據(jù)庫中不存在該選項組, 設(shè)定這些選項的默認(rèn)值, 并將它們插入數(shù)據(jù)庫 if (!is_array($options)) { //初始默認(rèn)數(shù)據(jù) $options['ashu_copy_right'] = '阿樹工作室'; //這里可添加更多設(shè)置選項 update_option('classic_options', $options); } // 返回選項組 return $options; } /* -- init函數(shù) 初始化 -- */ function init() { // 如果是 POST 提交數(shù)據(jù), 對數(shù)據(jù)進行限制, 并更新到數(shù)據(jù)庫 if(isset($_POST['classic_save'])) { // 獲取選項組, 因為有可能只修改部分選項, 所以先整個拿下來再進行更改 $options = ClassicOptions::getOptions(); // 數(shù)據(jù)處理 $options['ashu_copy_right'] = stripslashes($_POST['ashu_copy_right']); //在這追加其他選項的限制處理 // 更新數(shù)據(jù) update_option('classic_options', $options); } else { // 否則, 重新獲取選項組, 也就是對數(shù)據(jù)進行初始化 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"> <h3><?php _e('阿樹工作室主題設(shè)置', 'classic'); ?></h3> <!-- 設(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: 在這里追加其他選項內(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è)置頁面,看一下我添加之后的效果圖:
此時文本域和上傳按鈕已經(jīng)有了,但是點擊還是沒有任何效果。為了點擊后彈出那個上傳框架,我們還需要添加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項,并且將上傳按鈕的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"> <h3><?php _e('阿樹工作室主題設(shè)置'); ?></h3> <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è)置項,前面默認(rèn)數(shù)據(jù)設(shè)置、數(shù)據(jù)更新都需要相應(yī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)實現(xiàn),其實也很簡單。。
以上是“WordPress后臺中如何實現(xiàn)圖片上傳功能”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。