Cómo crear un metabox personalizado de WordPress
Publicado: 2015-06-09¿Qué es un metabox personalizado de WordPress?
Los metacuadros personalizados permiten agregar información adicional a las publicaciones, páginas y tipos de publicaciones personalizadas, además de los metacuadros estándar que están disponibles automáticamente para usar de forma inmediata en WordPress, que se incluyen en el núcleo de WordPress.
Ya sea que lo supiera o no, ha estado usando metaboxes por un tiempo. Cosas como los widgets del tablero, el editor, los campos personalizados, la imagen destacada, las categorías y las etiquetas son ejemplos de metacuadros.
Cómo crear un metabox personalizado de WordPress
¿Qué sucede cuando necesita crear un metabox adicional, tal vez algo un poco más personalizado para su proyecto? Existen complementos que ayudan a crear metaboxes personalizados, que pueden ser excelentes opciones. Incluso si decide que esta es la ruta que va a tomar, es importante comprender los conceptos básicos de lo que sucede bajo el capó de los metaboxes personalizados.
Use CSS Sprites para hacer que su logotipo responda
¿Recuerdas los sprites CSS? Son un grupo de diferentes gráficos combinados en un solo archivo, y los usaremos para crear un logotipo receptivo. Es una técnica utilizada para optimizar el rendimiento del navegador porque...
Repasaremos los conceptos a un nivel muy alto cuando creemos este meta cuadro muy simple. Cuando hayamos terminado, tendremos un cuadro meta personalizado que nos permitirá ingresar el título de un producto.
Aunque comenzamos de manera simple, tenga en cuenta que esta idea se puede ampliar para necesidades más complejas. Hay muchas opciones y funciones adicionales que se pueden incluir en un cuadro meta personalizado. Cosas como casillas de verificación, carga de archivos, etc. son todas las características posibles de un cuadro meta personalizado. Este tutorial asume que está familiarizado con CSS, que es necesario para diseñar los campos. No vamos a entrar en detalles para discutir el estilo, pero esto es algo que se puede hacer fácilmente después de que tu metabox esté en funcionamiento.
Desarrollando el metabox personalizado
El código personalizado para metaboxes se puede incluir en functions.php o en un complemento. Este ejemplo incluirá el código necesario en forma de complemento. Esto se puede copiar paso a paso para hacer un archivo completo que esté listo para usar.
El Codex es tu guía
El Codex será tu mejor amigo, si aún no lo es. Diferentes argumentos tienen diferentes opciones, y el Codex explicará esto con gran detalle. Vale la pena mencionar que el Codex es algo que debes conocer bien.
Prueba localmente primero
Aquí está el único descargo de responsabilidad para este tutorial. Intente esto primero en un entorno de desarrollo local. Aunque todos apreciamos una pequeña aventura en nuestras vidas, a nadie le gusta la pantalla blanca de la muerte, especialmente en un sitio en vivo. Vamos a ir paso a paso a través de este tutorial, y hay dependencias que ocurren a medida que avanzamos. Debido a esto, existe una buena posibilidad de que al guardar a mitad de camino se produzca un error.
Paso uno: cree y coloque el encabezado en el complemento
Crear un complemento puede sonar complejo, pero no todos los complementos tienen que tener cientos de líneas. Los complementos pueden ser muy simples, y este es un gran ejemplo de eso. Si va a la carpeta wp-content , verá una carpeta de complementos . Cree una nueva carpeta llamada custom-post-meta-box con un archivo custom-post-meta-box.php en ella. Este es el archivo desde el que trabajará.
Al crear un complemento, asegúrese de que esta información aparezca antes de cualquier código personalizado:
<?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 */
Activar el complemento
Aunque todavía no pusimos ningún código allí, podemos activar el complemento yendo a Complementos y buscando Custom Meta Box y eligiendo Activar. Tenga en cuenta que nada cambiará todavía.
CSS opcional
Esto es opcional, pero si planea agregar un CSS personalizado, cópielo en su archivo de complemento. Asegúrese de que el archivo .css se encuentre en la carpeta css de su complemento.
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' );
Paso dos: agregar el cuadro meta
La función add_meta_box se utiliza para crear metaboxes personalizados. Esta función solo es responsable de registrar y mostrar metaboxes personalizados.
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' );
Eche un vistazo al tablero, aparece el título "Nuestros productos", pero no hay un campo de texto para que ingresemos nuestro texto.
Paso tres: agregar el campo de cuadro meta en el administrador
Necesitamos asegurarnos de que haya una etiqueta y un campo para la información. Mediante el uso de html, esto es posible.
function cmb_display_meta_box( $post ) {
wp_nonce_field( plugin_basename(__FILE__), 'cmb_nonce_field' );
$html = '<label id="product-title" for="product-title">';
$html .= 'Product Title';
$html .= '</label>';
$html .= '<input type="text" id="product-title" name="product-title" value="' . get_post_meta( $post->ID, 'product-title', true ) . '" placeholder="What is the Product Title?" />';
echo $html;
}
// this echoes a single stream of html
¿Ves cómo se envuelven las cosas en la <label> ? Vemos el texto descriptivo "Título del producto" que ayuda al usuario a comprender cuál es el campo y qué tipo de información debe ingresarse. También tenga en cuenta que hay texto de marcador de posición, que también agrega información útil.
Su entrada puede no ser tan amplia. Se hizo un css personalizado para que se pudiera mostrar todo el texto del marcador de posición; la etiqueta tiene un ancho del 100%.
Paso cuatro: guardar los datos y la importancia de usar un nonce
Es posible que haya ingresado texto en el Paso tres y se haya dado cuenta de que en realidad no se está guardando ni mostrando en la página. Este paso es realmente donde ocurre toda la magia.
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;
}
Están pasando algunas cosas aquí. Básicamente, la función cmb_save_meta_box_data es lo que necesitamos para que se realice todo el guardado. Nos centraremos en la seguridad con un valor nonce. Esta es una medida de seguridad que garantiza que los datos que se guardarán provengan de la fuente correcta. Además, queremos asegurarnos de que la publicación no sea un autoguardado o una revisión. Luego se validará el nonce y el usuario podrá guardar.
Ahora que podemos guardar con seguridad, así es como aparece la metainformación en la página. Como puede ver, podría diseñarse fácilmente, pero funciona y los datos se guardan.
Lectura adicional y tarea
Como puede ver, en solo unos pocos pasos, puede tener un metabox personalizado. Como la mayoría de los proyectos de desarrollo, hay varias formas de lograr lo mismo, por lo que puede encontrar otros enfoques para esta misma tarea.
Echamos un vistazo a los metacuadros personalizados a un nivel muy alto, por lo que es posible que desee profundizar en estos conceptos. Si tiene una mayor necesidad de metaboxes personalizados, aquí hay algunas fuentes excelentes para un mayor descubrimiento:
- Más información sobre nonces
- Complemento Meta Box
- Opciones para la función add_meta_box