Cara membuat kotak meta WordPress khusus

Diterbitkan: 2015-06-09

Apa itu kotak meta WordPress khusus?

Kotak meta khusus memungkinkan informasi tambahan untuk ditambahkan ke posting, halaman, dan jenis posting khusus, selain dari kotak meta standar yang secara otomatis tersedia untuk digunakan langsung "di luar kotak" di WordPress, yang termasuk dalam inti WordPress.

Apakah Anda menyadarinya atau tidak, Anda telah menggunakan kotak meta untuk sementara waktu sekarang. Hal-hal seperti widget dasbor, editor, bidang khusus, gambar unggulan, kategori, dan tag adalah contoh kotak meta.

Cara membuat kotak meta WordPress khusus

Apa yang terjadi ketika Anda perlu membuat kotak meta tambahan, mungkin sesuatu yang sedikit lebih khusus untuk proyek Anda? Ada plugin yang ada di luar sana yang membantu membuat kotak meta khusus, yang bisa menjadi opsi yang bagus. Bahkan jika Anda memutuskan ini adalah rute yang akan Anda ambil, tetap penting untuk memahami konsep dasar tentang apa yang terjadi di bawah kap kotak meta khusus.

Gunakan CSS Sprite untuk membuat logo Anda responsif

Ingat sprite CSS? Mereka adalah sekelompok grafik berbeda yang digabungkan menjadi satu file, dan kami akan menggunakannya untuk membuat logo responsif. Ini adalah teknik yang digunakan untuk mengoptimalkan kinerja browser karena...

Kami akan membahas konsep pada tingkat yang sangat tinggi ketika kami membuat kotak meta yang sangat sederhana ini. Setelah selesai, kami akan memiliki kotak meta khusus yang memungkinkan kami memasukkan judul produk.

Meskipun kami memulainya dari yang sederhana, perlu diingat bahwa ide ini dapat diperluas untuk kebutuhan yang lebih kompleks. Ada banyak opsi dan fitur tambahan yang dapat dimasukkan dalam kotak meta khusus. Hal-hal seperti kotak centang, unggahan file, dll. adalah semua kemungkinan fitur dari kotak meta khusus. Tutorial ini mengasumsikan bahwa Anda sudah familiar dengan CSS, yang diperlukan untuk menata bidang. Kami tidak akan membahas secara mendetail untuk membahas gaya, tetapi ini adalah sesuatu yang dapat dengan mudah dilakukan setelah kotak meta Anda aktif dan berjalan.

Mengembangkan kotak meta khusus

Kode kustom untuk kotak meta dapat dimasukkan dalam functions.php atau dalam sebuah plugin. Contoh ini akan menyertakan kode yang dibutuhkan dalam bentuk plugin. Ini dapat disalin langkah demi langkah untuk membuat file lengkap yang siap digunakan.

Codex adalah panduan Anda

Codex akan menjadi teman terbaik Anda, jika belum. Argumen yang berbeda memiliki opsi yang berbeda, dan Codex akan menjelaskan hal ini dengan sangat rinci. Perlu disebutkan bahwa Codex adalah sesuatu yang harus Anda ketahui dengan baik.

Uji Lokal Terlebih Dahulu

Inilah satu-satunya penafian untuk tutorial ini. Silakan coba ini di lingkungan pengembangan lokal terlebih dahulu. Meskipun kita semua menghargai sedikit petualangan dalam hidup kita, tidak ada yang menyukai layar putih kematian, terutama di situs langsung. Kita akan membahas langkah demi langkah melalui tutorial ini, dan ada ketergantungan yang terjadi saat kita melewatinya. Karena itu, ada kemungkinan besar melakukan save di tengah jalan dapat menyebabkan kesalahan.

Langkah satu: buat dan masukkan heading ke dalam plugin

Membuat plugin mungkin terdengar rumit, tetapi tidak semua plugin harus terdiri dari ratusan baris. Plugin bisa sangat sederhana, dan ini adalah contoh yang bagus. Jika Anda pergi ke folder wp-content , Anda akan melihat folder plugins . Buat folder baru bernama custom-post-meta-box dengan file custom-post-meta-box.php di dalamnya. Ini adalah file tempat Anda akan bekerja. 

file-path-meta-box

Saat membuat plugin, pastikan informasi ini muncul sebelum kode kustom Anda:

<?php

/*

Plugin Name: Custom Meta Box

Plugin URI:  www.yourwebsite.com

Description: Creates a meta box in WordPress

Version:     1.0.0

Author:      Your Name

Author URI:  www.yourwebsite.com

License: GPL2

*/

Aktifkan Plugin

Meskipun kami belum memasukkan kode apa pun di sana, kami dapat mengaktifkan plugin dengan masuk ke Plugins dan mencari Custom Meta Box dan memilih Activate. Harap diingat bahwa tidak ada yang akan berubah sama sekali.

00-aktifkan-plugin

CSS opsional

Ini opsional, tetapi jika Anda berencana menambahkan beberapa css khusus, salin ini ke file plugin Anda. Pastikan file .css ditemukan di folder css plugin Anda.

function cmb_add_admin_styles() {

wp_enqueue_style('cmb-admin', plugins_url( 'custom-post-meta-box/css/admin.css' ) );

}

add_action( 'admin_enqueue_scripts', 'cmb_add_admin_styles' );

01-css-file-lokasi

Langkah kedua: menambahkan kotak meta

Fungsi add_meta_box digunakan untuk membuat kotak meta khusus. Fungsi ini hanya bertanggung jawab untuk mendaftarkan dan menampilkan kotak meta khusus.

function cmb_add_meta_box() {

add_meta_box(

'custom_post_metabox',

'Our Products',

'cmb_display_meta_box',

'post',

'normal',

'high'

);

}

add_action( 'add_meta_boxes', 'cmb_add_meta_box' );

Lihat di dashboard, muncul judul “Our Products”, tapi tidak ada text field untuk kita masukkan text kita.

01-meta-box-start

Langkah ketiga: menambahkan bidang kotak meta di admin

Kita perlu memastikan bahwa ada label dan field untuk informasi tersebut. Dengan menggunakan html, ini mungkin.

function cmb_display_meta_box( $post ) {

wp_nonce_field( plugin_basename(__FILE__), 'cmb_nonce_field' );

$html = '<label id=&quot;product-title&quot; for=&quot;product-title&quot;>';

$html .= 'Product Title';

$html .= '</label>';

$html .= '<input type=&quot;text&quot; id=&quot;product-title&quot; name=&quot;product-title&quot; value=&quot;' . get_post_meta( $post->ID, 'product-title', true ) . '&quot; placeholder=&quot;What is the Product Title?&quot; />';

echo $html;

}

// this echoes a single stream of html

02-meta-box

Lihat bagaimana hal-hal dibungkus dalam <label> ? Kita bisa melihat teks deskriptif "Judul Produk" yang membantu pengguna memahami bidang apa dan jenis informasi apa yang harus dimasukkan. Perhatikan juga bahwa ada teks placeholder, yang juga menambahkan informasi bermanfaat.

Masukan Anda mungkin tidak seluas itu. Beberapa css kustom dilakukan sehingga semua teks placeholder dapat ditampilkan; label memiliki lebar 100%.

Langkah empat: Menyimpan data dan pentingnya menggunakan nonce

Anda mungkin telah memasukkan teks di Langkah Tiga dan menyadari bahwa itu sebenarnya tidak disimpan atau ditampilkan di halaman. Langkah ini benar-benar di mana semua keajaiban terjadi.

function cmb_save_meta_box_data( $post_id ) {

if ( cmb_user_can_save( $post_id, 'cmb_nonce_field' ) ) {

if ( isset( $_POST['product-title'] ) && 0 < count( strlen( trim( $_POST['product-title'] ) ) ) ) {

$product_title = stripslashes( strip_tags( $_POST['product-title'] ) );

update_post_meta( $post_id, 'product-title', $product_title );

}

}

}

add_action( 'save_post', 'cmb_save_meta_box_data' );

function cmb_display_product( $content ) {

if ( is_single () ){

$html = 'The Product Title is: ' . get_post_meta( get_the_ID(), 'product-title', true );

$content .= $html;

}

return $content;

}

add_action('the_content', 'cmb_display_product');

function cmb_user_can_save( $post_id, $nonce ) {

$is_autosave = wp_is_post_autosave( $post_id );

$is_revision = wp_is_post_revision( $post_id );

$is_valid_nonce = ( isset( $_POST[ $nonce ] ) && wp_verify_nonce( $_POST [ $nonce ], plugin_basename( __FILE__ ) ) );

return ! ( $is_autosave || $is_revision ) && $is_valid_nonce;

}

Ada beberapa hal yang terjadi di sini. Pada dasarnya, fungsi cmb_save_meta_box_data adalah yang kita perlukan agar semua penyimpanan dapat dilakukan. Kami akan fokus pada keamanan dengan nilai nonce. Ini adalah tindakan keamanan yang memastikan data yang akan disimpan berasal dari sumber yang benar. Selain itu, kami ingin memastikan bahwa postingan tersebut bukan merupakan penyimpanan otomatis atau revisi. Kemudian nonce akan divalidasi dan pengguna dapat menyimpan.

Sekarang kita dapat menyimpan dengan aman, beginilah informasi meta muncul di halaman. Seperti yang Anda lihat, itu dapat dengan mudah ditata, tetapi itu berfungsi dan data disimpan.

03-disimpan-meta-info

Bacaan lebih lanjut dan pekerjaan rumah

Seperti yang Anda lihat, hanya dalam beberapa langkah, Anda dapat memiliki kotak meta khusus. Seperti kebanyakan proyek pengembangan, ada banyak cara untuk mencapai hal yang sama, jadi Anda mungkin menemukan pendekatan lain untuk tugas yang sama ini.

Kami melihat kotak meta khusus pada tingkat yang sangat tinggi sehingga Anda mungkin ingin melihat lebih dalam pada konsep-konsep ini. Jika Anda memiliki kebutuhan yang lebih besar untuk kotak meta khusus, berikut adalah beberapa sumber yang bagus untuk penemuan lebih lanjut:

  • Informasi lebih lanjut tentang nonces
  • Plugin Kotak Meta
  • Opsi untuk fungsi add_meta_box