Cara Mengintegrasikan Uploader Media WordPress dalam Opsi Tema dan Plugin

() translation by (you can also view the original English article)

Selamat datang di WordPress Theme dan Plugin developers! Kita semua ingin pengguna tema kita dapat mengunggah gambar atau logo mereka sendiri dengan menggunakan halaman Opsi Tema yang dibuat oleh kita (termasuk halaman plugin) tetapi, bagaimana Anda memprogramnya? Apakah Anda menggunakan WordPress Media Uploader (seperti ketika Anda mengunggah gambar unggulan atau menyisipkan gambar ke dalam kiriman) atau apakah Anda hanya menambahkan bidang input file dan melupakan semua hal lainnya? Apakah Anda mengunggah gambar ke folder unggahan dengan benar? Apakah Anda melampirkan gambar ke Perpustakaan Media WordPress? Dan, ini poin penting, apakah Anda menghapus file (jika ini yang diinginkan pengguna) dengan benar? Nah, sekarang saatnya untuk memberi bentuk pada halaman Opsi Tema kami menggunakan interface WordPress. Kita ingin pengguna yang bahagia, kita ingin interface yang ramah pengguna.

Tutorial ini difokuskan pada mengunggah gambar ke halaman Opsi Tema, jadi jika Anda tidak yakin tentang cara membuatnya, saya sangat merekomendasikan Anda pertama-tama, lihat tutorial Tom McFarlin yang menakjubkan. Panduan Lengkap Untuk Pengaturan WordPress API Seri.

Apa yang Akan Kita Lakukan dalam Tutorial Ini?

Kita akan menambahkan tombol ke formulir untuk mengunggah gambar atau logo ke sistem file server dan tombol lain untuk menghapus gambar ini.
Kita akan membuat bidang input untuk melihat pratinjau gambar.
Kita akan menggunakan Pengunggah WordPress Media untuk mengunggah file atau memilih yang sudah ada sehingga tidak perlu khawatir tentang keseluruhan proses. Kita juga akan berhasil mengunggah gambar ke folder kanan dan kita akan melampirkannya ke Perpustakaan Media WordPress.
Kita akan dapat menghapus gambar itu sendiri serta lampiran WordPress Media Library-nya. Kita tidak ingin membuang ruang server.

Persiapan Membuat Halaman Opsi Tema

Kita perlu membuat folder bernama wptuts-options di folder root tema yang berisi file bernama wptuts-options.php di mana seluruh kode yang diperlukan untuk membuat halaman Theme Theme kita akan ditentukan. Kita juga harus membuat folder bernama js di mana kita akan menyimpan file JavaScript yang kita perlukan.

Pertama-tama, kita harus memanggil file wptuts-options.php dari dalam functions.php kita:

1	require_once( 'wptuts-options/wptuts-options.php' );

Di dalam file wptuts-options.php, kita akan membuat fungsi di mana kita akan menentukan nilai default. Dalam hal ini, nilainya akan menjadi URL gambar di server. Kita akan menetapkan string kosong secara default, tetapi juga dapat menetapkan URL gambar yang sudah kita miliki di beberapa folder tema.

function wptuts_get_default_options() {
  $options = array(
		'logo' => ''
	);
	return $options;
}

Sekarang kita akan membuat fungsi itu, jika opsi kita tidak ada dalam database (kita akan menyebutnya theme_wptuts_options), akan memulai dengan nilai yang diberikan oleh fungsi kita sebelumnya.

function wptuts_options_init() {
	$wptuts_options = get_option( 'theme_wptuts_options' );

	// Are our options saved in the DB?
	if ( false === $wptuts_options ) {
		// If not, we'll save our default options
		$wptuts_options = wptuts_get_default_options();
		add_option( 'theme_wptuts_options', $wptuts_options );
	}

	// In other case we don't need to update the DB
}

// Initialize Theme options
add_action( 'after_setup_theme', 'wptuts_options_init' );

Sekarang saatnya membuat halaman Opsi Tema, menambahkannya ke Panel Admin dan membuat formulir.

// Add "WPTuts Options" link to the "Appearance" menu
function wptuts_menu_options() {
	// add_theme_page( $page_title, $menu_title, $capability, $menu_slug, $function);
	add_theme_page('WPTuts Options', 'WPTuts Options', 'edit_theme_options', 'wptuts-settings', 'wptuts_admin_options_page');
}
// Load the Admin Options page
add_action('admin_menu', 'wptuts_menu_options');

function wptuts_admin_options_page() {
	?>
		<!-- 'wrap','submit','icon32','button-primary' and 'button-secondary' are classes
		for a good WP Admin Panel viewing and are predefined by WP CSS -->

		<div class="wrap">

			<div id="icon-themes" class="icon32"><br /></div>

			<h2><?php _e( 'WPTuts Options', 'wptuts' ); ?></h2>

			<!-- If we have any error by submiting the form, they will appear here -->
			<?php settings_errors( 'wptuts-settings-errors' ); ?>

			<form id="form-wptuts-options" action="options.php" method="post" enctype="multipart/form-data">

				<?php
					settings_fields('theme_wptuts_options');
					do_settings_sections('wptuts');
				?>

				<p class="submit">
					<input name="theme_wptuts_options[submit]" id="submit_options_form" type="submit" class="button-primary" value="<?php esc_attr_e('Save Settings', 'wptuts'); ?>" />
					<input name="theme_wptuts_options[reset]" type="submit" class="button-secondary" value="<?php esc_attr_e('Reset Defaults', 'wptuts'); ?>" />
				</p>

			</form>

		</div>
	<?php
}

Singkatnya: Dengan menggunakan hook admin_menu telah menambahkan halaman kita ke Panel Admin di bawah Appearance -> WPTuts Options dan itu dapat diidentifikasi oleh pengaturan wptuts-settings. Setelah ini, kita telah membuat formulir yang masih tidak memiliki bidang input apa pun berdasarkan fungsi setting_fields dan do_settings_sections. Seperti yang telah saya katakan sebelumnya, tujuan dari tutorial ini bukan untuk menggambarkan bagaimana fungsi-fungsi ini bekerja, jadi kita tidak akan menjelaskan untuk apa fungsinya. Anda dapat membaca seri Tom pada tautan di atas.

Tapi, perhatikan fakta bahwa, selain membuat tombol submit, kita juga telah membuat yang lain, tombol Reset. Ketika kita menekannya, nilai gambar akan menjadi yang ditetapkan secara default.

Akhirnya kita akan membuat tombol untuk mengunggah gambar dan bidang input tempat, setelah diunggah, itu menunjukkan URL-nya.

function wptuts_options_settings_init() {
	register_setting( 'theme_wptuts_options', 'theme_wptuts_options', 'wptuts_options_validate' );

	// Add a form section for the Logo
	add_settings_section('wptuts_settings_header', __( 'Logo Options', 'wptuts' ), 'wptuts_settings_header_text', 'wptuts');

	// Add Logo uploader
	add_settings_field('wptuts_setting_logo',  __( 'Logo', 'wptuts' ), 'wptuts_setting_logo', 'wptuts', 'wptuts_settings_header');
}
add_action( 'admin_init', 'wptuts_options_settings_init' );

function wptuts_settings_header_text() {
	?>
		<p><?php _e( 'Manage Logo Options for WpTuts Theme.', 'wptuts' ); ?></p>
	<?php
}

function wptuts_setting_logo() {
	$wptuts_options = get_option( 'theme_wptuts_options' );
	?>
		<input type="text" id="logo_url" name="theme_wptuts_options[logo]" value="<?php echo esc_url( $wptuts_options['logo'] ); ?>" />
		<input id="upload_logo_button" type="button" class="button" value="<?php _e( 'Upload Logo', 'wptuts' ); ?>" />
		<span class="description"><?php _e('Upload an image for the banner.', 'wptuts' ); ?></span>
	<?php
}

Tidak banyak lagi yang bisa dikatakan di sini, hanya saja nilai bidang logo menunjukkan URL gambar yang lolos. Sekarang ini yang ditampilkan layar kita:

Dan jangan lupa tentang fungsi validasi data kita:

function wptuts_options_validate( $input ) {
	$default_options = wptuts_get_default_options();
	$valid_input = $default_options;

	$submit = ! empty($input['submit']) ? true : false;
	$reset = ! empty($input['reset']) ? true : false;

	if ( $submit )
		$valid_input['logo'] = $input['logo'];
	elseif ( $reset )
		$valid_input['logo'] = $default_options['logo'];

	return $valid_input;
}

Mari kita simpan nilai bidang logo seperti halnya jika kita mengirimkan formulir atau membiarkannya dengan nilai default jika kita mengatur ulang formulir. Dianjurkan untuk memeriksa nilai bidang input, memvalidasi URL.

Jika kita sampai pada titik ini (saya harap begitu) dan kita tidak benar-benar lelah kita dapat mencoba formulirnya. Kita akan melihat bahwa nilai bidang input disimpan tanpa masalah dan itu menunjukkan, setelah ini, URL sebagai nilai.

Sekarang, mari kita lanjutkan dengan apa yang benar-benar penting.

Langkah 1 Menambahkan JavaScript yang Diperlukan

Jika kita ingin WordPress Media Uploader berfungsi dengan baik, kita harus mengimpor beberapa perpustakaan JavaScript serta beberapa CSS tambahan:

Thickbox (JS) – Bertanggung jawab untuk mengelola jendela modal, yang dapat diseret atau pilih file. Ini disediakan oleh WordPress Core.
Thickbox (CSS) – Menyediakan gaya yang diperlukan untuk jendela ini. Itu juga dilengkapi dengan instalasi WordPress.
Upload Media (JS) – Menyediakan semua fungsi yang diperlukan untuk mengunggah, memvalidasi, dan memberikan format ke file. Ini adalah jantung Pengunggah WordPress Media.
JS kita sendiri – Ini akan menginisialisasi parameter yang diperlukan untuk menampilkan jendela dengan benar.

Kita harus memperkenalkan kode berikut dalam file wptuts-options.php:

function wptuts_options_enqueue_scripts() {
	wp_register_script( 'wptuts-upload', get_template_directory_uri() .'/wptuts-options/js/wptuts-upload.js', array('jquery','media-upload','thickbox') );

	if ( 'appearance_page_wptuts-settings' == get_current_screen() -> id ) {
		wp_enqueue_script('jquery');

		wp_enqueue_script('thickbox');
		wp_enqueue_style('thickbox');

		wp_enqueue_script('media-upload');
		wp_enqueue_script('wptuts-upload');

	}

}
add_action('admin_enqueue_scripts', 'wptuts_options_enqueue_scripts');

Ada beberapa hal yang harus diperjelas: pada baris pertama kita mendaftarkan skrip (kitabelum membicarakannya) yang akan menangani proses yang bertujuan untuk membuka jendela model dan mengumpulkan data gambar. Seperti yang telah dijelaskan sebelumnya, kita akan membuat folder bernama js. Keunikan dari skrip ini adalah tergantung pada sejumlah pustaka lain seperti jQuery, Media-Upload dan Thickbox, semuanya datang ketika Anda menginstal WordPress.

Pada baris kedua, kita menggunakan fungsi get_current_screen() yang memberi kita slug dari halaman yang sedang dikerjakan. Fungsi ini tidak selalu dapat digunakan dan tergantung pada hook yang digunakan, apakah akan tersedia atau tidak. Dengan hook admin_enqueue_scripts fungsi ini akan berfungsi tanpa masalah. get_current_screen () -> id memberi kita sepotong halaman tempat bekerja. Untuk halaman yang datang secara default di Panel Admin WordPress, ini mungkin 'themes','edit-post','plugins' dll. Dalam kasus, slug ini terlihat seperti appearance_page_ {OUR SLUG}. Apakah Anda ingat slug yang didefinisikan di fungsi add_theme_page? Nah, halaman Opsi Tema kita, akhirnya memiliki siput berikut: appearance_page_wptuts-settings. Jadi, kita hanya akan memuat skrip jika sesuai.

Dua baris lainnya menambahkan Javascript libraries jQuery, Thickbox, Media Upload dan JS, wptuts-upload.js. Selanjutnya kita juga menambahkan Thickbox CSS.

Script kita: wptuts-upload.js

Terlepas dari tampilannya, skrip kita akan lebih mudah daripada yang terlihat. Anda hanya perlu mengenal beberapa fungsi Thickbox dan Pengunggah Media untuk membuatnya berfungsi. Masalahnya adalah sulit untuk menemukan informasi tentang hal itu dan pada akhirnya, sebagai programmer yang baik, kita tidak punya pilihan lain selain bekerja dengan kode. Seperti yang baru saja kita lihat, itu sangat mudah dilakukan. Mari kita lanjutkan langsung ke kode versi pertama kita:

	jQuery(document).ready(function($) {
		$('#upload_logo_button').click(function() {
			tb_show('Upload a logo', 'media-upload.php?referer=wptuts-settings&type=image&TB_iframe=true&post_id=0', false);
			return false;
		});
	});

Sukses! Jika kita menekan sekarang tombol Upload Logo, Pengunggah WordPress Media akan muncul. Hebat, kita sudah selesai, sampai jumpa lagi! Tidak, ini tidak benar, tetapi tidak akan memakan waktu lebih lama untuk membuat halaman Opsi Tema kita berfungsi, dengan cara yang sederhana.

Meninjau kode kita dapat melihat bahwa kita telah menetapkan acara klik ke tombol yang meluncurkan fungsi Thickbox yang ditujukan untuk menampilkan jendela modal. Fungsi ini menerima tiga parameter:

Nama jendela – Dalam kasus kita 'Upload a Logo'
URL – Menjalankan perpustakaan WordPress yang menangani dan memvalidasi file, selain membuat konten untuk jendela.
imageGroup – Kita telah memilih opsi false karena tidak akan bekerja dengan grup gambar tetapi hanya dengan satu.

Di antara mereka, yang paling menarik adalah URL. WordPress menggunakan file yang disebut media-upload.php untuk mengelola jendela dan juga memungkinkan beberapa parameter $_GET. Kita harus ingat bahwa & karakter harus dikodekan dengan entitas HTML mereka sehingga URL akan berfungsi tanpa masalah.

referer – Parameter ini opsional. Kita akan menggunakannya nanti untuk melakukan sedikit trik.
type – Ini adalah tipe file. Ini bisa berupa video, audio, image atau file.
TB_iframe – Ini harus selalu dipilih true sehingga jendela ditampilkan dalam iframe, atau tidak akan berfungsi. Meskipun Anda mungkin menemukan ini sulit untuk dipercaya, ini adalah parameter yang paling penting dan sekarang kita akan melihat alasannya.
post_id – Ini digunakan untuk menunjukkan bahwa gambar tidak akan dilampirkan ke posting apa pun dan itu akan bebas seperti burung kecil.

Yah, aku tidak ingin berbohong padamu. Hanya satu dari tiga parameter ini yang benar-benar diperlukan: TB_iframe. Kita bisa melupakan yang lain. Beberapa versi yang lalu, WordPress menyatukan Pengunggah Media untuk mengunggah semua jenis file, tidak perlu membedakan gambar dari video atau musik, jadi type tidak perlu dan ID kiriman adalah 0 secara default. Lagi pula, tidak ada salahnya meninggalkan mereka kalau-kalau kita punya masalah dengan kompatibilitas. Akan menarik untuk mengindikasikan post_id jika itu adalah Meta Box dalam posting.

Bagian berikut dari JavaScript kita harus berisi fungsi berikut:

	window.send_to_editor = function(html) {
		var image_url = $('img',html).attr('src');
		$('#logo_url').val(image_url);
		tb_remove();
	}

send_to_editor adalah acara yang termasuk dalam perpustakaan WordPress JavaScript Media Uploader. Ini akan mengirimkan data gambar dalam format HTML, sehingga kita dapat menempatkannya di mana pun kita mau.

Acara ini memberikan parameter ke fungsi handler, html yang mencakup kode berikut (sebagai contoh):

1	<a href="{URL ON THE SERVER FOR THE UPLOADED IMAGE}"><img src="{URL ON THE SERVER FOR THE UPLOADED IMAGE}" alt="" title="" width="" height"" class="alignzone size-full wp-image-125" /></a>

Jadi mudah untuk mengekstrak URL gambar setelah dimuat ke server menggunakan baris $('img',html).attr('src'); maka itu akan disimpan di bidang input kita dengan baris $('#logo_url').val(image_url);.

Fungsi tb_remove menutup jendela modal, itu saja. Sekarang, kita sudah dapat mengirimkan formulir dan menyimpan URL gambar di database. Kita bisa berhenti sekarang, tetapi hasilnya tidak akan terlihat sangat indah atau mudah digunakan, jadi mari kita lakukan peningkatan.

Jika kita memperhatikan, ketika kita mengunggah gambar menggunakan Pengunggah Media kita dapat memasukkan URL gambar di bidang input melalui tombol Insert into Post. Ini bisa membingungkan pengguna. Untuk alasan itu, kita dapat mengubah teks ini dengan menggunakan filter di WordPress. Kita mengetikkan kode berikut di file wptuts-options.php:

function wptuts_options_setup() {
	global $pagenow;

	if ( 'media-upload.php' == $pagenow || 'async-upload.php' == $pagenow ) {
		// Now we'll replace the 'Insert into Post Button' inside Thickbox
		add_filter( 'gettext', 'replace_thickbox_text'  , 1, 3 );
	}
}
add_action( 'admin_init', 'wptuts_options_setup' );

function replace_thickbox_text($translated_text, $text, $domain) {
	if ('Insert into Post' == $text) {
		$referer = strpos( wp_get_referer(), 'wptuts-settings' );
		if ( $referer != '' ) {
			return __('I want this to be my logo!', 'wptuts' );
		}
	}
	return $translated_text;
}

Menggunakan hook admin_init, kita memeriksa bahwa halaman yang sedang dikerjakan adalah halaman yang digunakan oleh Pengunggah Media. Halaman-halaman ini adalah: media-upload.php dan async-upload.php. Yang pertama membuka jendela modal dan yang kedua dimuat setelah gambar diunggah. Untuk mengonfirmasi bahwa kita sedang mengerjakan salah satunya, kita harus menggunakan variabel global $pagenow dan bukan fungsi get_current_screen() karena admin_init masih tidak mengizinkan fungsi ini.

Sekarang, mengapa kita menggunakan variabel referer? Ok, ini sedikit rumit dan berfungsi seperti ini:

Ketika kita mengklik tombol Upload Image, URL pengarah adalah sesuatu seperti https://www.ourdomain.com/.../wp-admin/themes.php?Page=wptuts_settings
Jika kemudian kita klik pada tab seperti Perpustakaan Media di dalam Media Uploader, URL pengarah berubah dan mengambil nilai berikutnya: http://localhost/.../wp-admin/media-upload.php?referer=wptuts-settings&type=image.
Hal yang sama terjadi ketika kita mengunggah gambar baru. URL referer berubah dan mengambil nilai yang sama.

Lihat sekarang mengapa kita menyertakan parameter pengarah dalam JavaScript? Kita perlu tahu dari halaman mana kita meluncurkan Pengunggah Media karena kita perlu mengganti teks Insert into Post hanya di halaman Opsi Tema dan bukan di Halaman Posting misalnya. Itu sebabnya saya memasukkan parameter referer. Sekarang, menggunakan fungsi wp_get_referer() kita mendapatkan URL referer dan kita hanya perlu menemukan string wptuts-settings di dalam URL itu. Dengan metode ini kita akan menggantinya dalam konteks yang benar.

Kita sekarang menerapkan filter gettext dan setiap kalimat yang mengandung 'Insert into Post' kita ganti dengan 'I want this to be my logo!'. Jika kita membuka sekali lagi jendela Thickbox dan memuat file baru, kita akan melihat bahwa teks tombol telah berubah. Jika Anda tidak begitu yakin tentang cara menggunakan filter gettext, dan karena ini bukan salah satu dari target tutorial ini, Anda dapat mengunjungi WordPress Codex.

Beberapa perbaikan telah dilakukan, bukan?

Langkah 2 Mempratinjau Gambar

Pengguna selalu perlu menonton hal-hal yang terjadi di layar. Tidak cukup bagi pengguna untuk mengunggah gambar dan pergi ke halaman untuk memeriksa apakah gambar itu ada. Sekarang, kita akan menambahkan bidang input ke halaman Opsi Tema kita sehingga pengguna akan dapat melihat gambar yang indah sudah dimuat.

Kita harus menulis kode berikut di fungsi wptuts_options_settings_init():

1	// Add Current Image Preview
2	add_settings_field('wptuts_setting_logo_preview', __( 'Logo Preview', 'wptuts' ), 'wptuts_setting_logo_preview', 'wptuts', 'wptuts_settings_header');

Dan juga kita harus membuat fungsi baru untuk pratinjau:

function wptuts_setting_logo_preview() {
	$wptuts_options = get_option( 'theme_wptuts_options' );  ?>
	<div id="upload_logo_preview" style="min-height: 100px;">
		<img style="max-width:100%;" src="<?php echo esc_url( $wptuts_options['logo'] ); ?>" />
	</div>
	<?php
}

Jika kita mengunggah gambar baru sekarang dan mengirimkan formulir, kita akan melihat ini:

Keren! Tenang saja, jangan lari. Ada dua langkah yang harus diambil, pada awalnya mengunggah gambar dan kemudian kita terpaksa mengirimkan formulir jika ingin menyimpan perubahan. Pengguna bisa berpikir setelah gambar diunggah, di mana logo saya? Apakah saya harus menyerahkan formulir? Hindari kesal dengan menambahkan beberapa baris sederhana ke JavaScript:

	window.send_to_editor = function(html) {
		var image_url = $('img',html).attr('src');
		$('#logo_url').val(image_url);
		tb_remove();
		$('#upload_logo_preview img').attr('src',image_url);

		$('#submit_options_form').trigger('click');
	}

Kita mengunggah gambar dan dapat melihat bahwa formulir telah dikirimkan! Hanya menambahkan kalimat: sekarang ketika gambar dimuat, kita memicu acara click pada tombol Submit dan formulir dikirimkan segera, memperbarui database dan pratinjau gambar pada saat yang sama. Sempurna!

Hapus Apa yang Tidak Perlu

Hingga saat ini, bentuknya menarik, dapat digunakan dan berfungsi lebih dari cukup tetapi ada sesuatu yang mulai mengganggu kita. Mengapa kita membutuhkan kolom input? Hei, kita membutuhkannya untuk menyimpan URL gambar. Mari kita lihat dengan cara lain: mengapa pengguna membutuhkan kolom input? Tanpa biaya. Cukup untuk menunjukkan kepada pengguna gambar yang telah diunggah dan semuanya berfungsi dengan baik.

Mari kita konversi formulir kita sedikit lagi dengan fungsi wptuts_setting_logo():

function wptuts_setting_logo() {
	$wptuts_options = get_option( 'theme_wptuts_options' );
	?>
		<input type="text" id="logo_url" name="theme_wptuts_options[logo]" value="<?php echo esc_url( $wptuts_options['logo'] ); ?>" />
		<input id="upload_logo_button" type="button" class="button" value="<?php _e( 'Upload Logo', 'wptuts' ); ?>" />
		<span class="description"><?php _e('Upload an image for the banner.', 'wptuts' ); ?></span>
	<?php
}

Jika Anda tidak menyadarinya, satu-satunya hal yang telah dilakukan adalah mengubah jenis input formulir. Kita berbicara tentang bidang input hidden dan bukan bidang input text. Formulir menjaga fungsi yang sama tetapi jauh lebih menyenangkan bagi pengguna:

Langkah 3 Menghapus Gambar

Secara alami, pada titik tertentu, pengguna ingin menghapus gambar. Untuk mempermudah, kita akan membuat tombol untuk menghapusnya. Tetapi gambar tidak boleh dihapus hanya ketika pengguna mengklik tombol, juga harus dihapus ketika mereka mengunggah gambar baru atau kita mengatur ulang formulir.

Hal pertama yang pertama. Kita akan membuat tombol baru di fungsi wptuts_setting_logo():

function wptuts_setting_logo() {
	$wptuts_options = get_option( 'theme_wptuts_options' );
	?>
		<input type="hidden" id="logo_url" name="theme_wptuts_options[logo]" value="<?php echo esc_url( $wptuts_options['logo'] ); ?>" />
		<input id="upload_logo_button" type="button" class="button" value="<?php _e( 'Upload Logo', 'wptuts' ); ?>" />
		<?php if ( '' != $wptuts_options['logo'] ): ?>
			<input id="delete_logo_button" name="theme_wptuts_options[delete_logo]" type="submit" class="button" value="<?php _e( 'Delete Logo', 'wptuts' ); ?>" />
		<?php endif; ?>
		<span class="description"><?php _e('Upload an image for the banner.', 'wptuts' ); ?></span>
	<?php
}

Jika kita perhatikan, tombol baru hanya akan muncul ketika akan ada logo yang sudah dimuat. Selain itu, kita berbicara tentang tombol tipe-kirim, jadi kita akan mengirimkan formulir ketika kita mengkliknya.

Kita harus menambahkan fungsionalitas validasi berikut ini sehingga tombol akan bertindak seperti yang diinginkan, wptuts_options_validate():

	$default_options = wptuts_get_default_options();
	$valid_input = $default_options;

	$wptuts_options = get_option('theme_wptuts_options');

	$submit = ! empty($input['submit']) ? true : false;
	$reset = ! empty($input['reset']) ? true : false;
	$delete_logo = ! empty($input['delete_logo']) ? true : false;

	if ( $submit ) {
		if ( $wptuts_options['logo'] != $input['logo'] && $wptuts_options['logo'] != '' )
			delete_image( $wptuts_options['logo'] );

		$valid_input['logo'] = $input['logo'];
	}
	elseif ( $reset ) {
		delete_image( $wptuts_options['logo'] );
		$valid_input['logo'] = $default_options['logo'];
	}
	elseif ( $delete_logo ) {
		delete_image( $wptuts_options['logo'] );
		$valid_input['logo'] = '';
	}

	return $valid_input;

Baiklah, apa yang kita lakukan di sini? Kita telah menambahkan variabel $wptuts_options baru untuk memverifikasi jika pengguna telah mengklik tombol Delete Logo. Jika pengguna melakukan ini, fungsi delete_image dijalankan dan kita menetapkan nilai URL logo sebagai string kosong. Selain itu, logo akan dihapus jika kita mengirim dan mengunggah gambar yang berbeda dengan yang sudah dimiliki atau bahkan jika kita mengatur ulang formulir.

Hati-hati! Menyetel ulang formulir dan menghapus gambar tidak harus dengan proses yang sama. Dalam kasus ini, nilai default adalah string kosong, sehingga cocok.

Sekarang kita akan menambahkan fungsi delete_image():

function delete_image( $image_url ) {
	global $wpdb;

	// We need to get the image's meta ID.
	$query = "SELECT ID FROM wp_posts where guid = '" . esc_url($image_url) . "' AND post_type = 'attachment'";
	$results = $wpdb->get_results($query);

	// And delete it
	foreach ( $results as $row ) {
		wp_delete_attachment( $row->ID );
	}
}

Yang benar adalah bahwa langkah ini membutuhkan penjelasan yang lebih dalam, tetapi sangat mudah. Hal pertama yang dilakukan adalah menjalankan kueri yang akan menemukan Meta ID dari gambar kita di database. Anda mungkin berpikir itu bohong, tetapi data gambar kita ada di tabel wp_posts. Yah, kueri mencoba untuk memilih register yang panduannya (gambar, posting atau URL halaman) akan cocok dengan gambar kita dan post_type = 'attachment' (Ini adalah lampiran, bukan?). Kita menyimpan ID ini (tidak boleh lebih dari satu) di $results dan meneruskannya sebagai parameter ke WordPress wp_delete_attachment() yang akan menghapus gambar itu sendiri dan juga menghapus lampiran dari Perpustakaan Media. Mudah, bersih, dan optimal.

Langkah 4 Menampilkan Logo di Header Situs Kita

Mari kita lihat kemana perginya semua kekacauan ini. Kita membutuhkan template header.php di mana kita akan memasukkan spasi untuk logo kita tercinta, di mana kita akan memasukkan potongan kode ini di tempat yang paling disukai:

<body <?php body_class(); ?>>

		<div id="container" class="container_12">

			<?php $wptuts_options = get_option('theme_wptuts_options'); ?>

			<?php if ( $wptuts_options['logo'] != '' ): ?>
				<div id="logo">
					<img src="<?php echo $wptuts_options['logo']; ?>" />
				</div>
			<?php  endif; ?>

Inilah hasilnya:

Catatan akhir

Yang benar adalah tidak banyak yang bisa dikatakan. Apakah mungkin melakukan ini dengan cara lain? Tentu saja, dan pada kenyataannya saya menemukan contoh terus-menerus, tetapi dari sudut pandang saya, Pengunggah Media WordPress sangat berguna dan sekali dikenal secara mendalam, itu benar-benar membuat hidup lebih mudah. Kita menyimpan kode, validasi (dalam tutorial kami tidak menggunakan banyak, seharusnya menggunakan lebih banyak, dan menyarankan Anda membaca ini) dan menggunakan sistem file yang WordPress gunakan. Semua adalah keuntungan bagi pengguna, yang terbiasa bekerja dengan antarmuka WordPress dan dapat melihat bagaimana semuanya bekerja dengan baik dan sesuai dengan fungsi standar WordPress. Bahkan, dapat dianggap bahwa itu adalah fungsi default WordPress.

Sumber Daya Eksternal

Meskipun kita telah berbicara tentang fungsi WordPress tertentu, kenyataannya adalah bahwa ada banyak pengetahuan menengah yang diperlukan. Di sini kita memiliki daftar dengan sumber daya terkait: