Cubrimos muchos temas en este blog, desde algo tan simple como cómo incluir y requerir archivos de plantilla en proyectos de WordPress hasta algo como una serie completa en la API de configuración, pero creo que siempre hay espacio para cubrir un sencillo Cómo -A eso cubre una única tarea específica dentro del contexto de WordPress.
Entonces, en esta serie de dos partes, vamos a echar un vistazo a cómo introducir un selector de fechas jQuery en nuestro editor de publicaciones para poder asociar una fecha con una publicación determinada..
Sobre el plugin
Haremos todo esto en el contexto de un complemento para que el código fuente se pueda descargar fácilmente a través de GitHub y proporcione un ejemplo práctico del tutorial..
Lo primero que se debe tener en cuenta es que la incorporación del selector de fecha jQuery es no destinado a reemplazar la fecha de publicación de la publicación. En su lugar, está pensado para proporcionar una manera fácil de seleccionar una fecha, guardarla en los metadatos de la publicación y luego mostrarla para otro propósito como, por ejemplo, cuándo ocurrirá un evento..
Planeando el plugin
Para cualquiera que haya leído cualquiera de mis publicaciones anteriores, sabes que soy un fanático de la planificación del proyecto desde el principio, y luego implemento cada paso a la vez para asegurarnos de que tenemos claro todo lo que está sucediendo..
Así que hagamos eso ahora:
Proporcionaremos la clase de esqueleto para el complemento.
Escribiremos el código responsable de generar el cuadro de meta de publicación que permite al usuario seleccionar la fecha
Implementaremos el selector de fechas de jQuery para que los usuarios puedan seleccionar una fecha.
Guardaremos los datos cuando se publique y / o actualice la publicación.
Mostraremos la fecha en la parte delantera de la publicación.
Directo, ¿verdad? Dicho esto, vamos a empezar.
Construyendo el Plugin
Al final de este artículo, el complemento completo estará disponible en este repositorio de GitHub, pero te recomiendo que sigas y escribas el código para asegurarte de seguir todo lo que estamos haciendo..
El código será Se comenta por lo que debería ser fácil de seguir. Si no, siéntase libre de dejar comentarios después de la publicación..
1. Apague la clase de complemento
Suponiendo que ya ha creado el WordPress-jQuery-Date-Picker directorio en tu wp-content / plugins directorio, adelante y crea dos archivos:
plugin.php
README.txt
Vamos a revisar el Leer archivo en un momento, pero sigamos adelante y apaguemos la clase que sirve como nuestro complemento.
Aquí está el código con más explicaciones después del fragmento:
Obviamente, no hay mucho que hacer, todavía. Simplemente definimos la clase, configuramos un constructor vacío y creamos una instancia del complemento fuera de la clase.
Antes de seguir avanzando, avancemos y preparemos el complemento para la localización. Para hacer esto, necesitamos hacer varias cosas:
Introducir un lang directorio
Añadir lang / plugin.po
Establecer el dominio de texto para el complemento dentro del constructor
Recuerde que la localización se utiliza para asegurarse de que los traductores puedan hacer que nuestro complemento sea compatible con otros idiomas, y que Poedit sea la herramienta elegida.
los plugin.po El archivo debe contener algo como lo siguiente (el suyo obviamente será diferente según la fecha, la hora y la configuración de Poedit):
msgid "" msgstr "" "Project-Id-Version: WordPress jQuery Date Picker 1.0 \ n" "Report-Msgid-Bugs-To: \ n" "POT-Creation-Date: 2013-02-07 13: 36-0500 \ n "" Fecha de revisión del pedido: 2013-02-07 13: 36-0500 \ n "" Último traductor: Tom McFarlin \ n "" Equipo de Idioma: Tom McFarlin \ n "" Idioma: es_ES \ n "" Versión MIME: 1.0 \ n "" Tipo de contenido: texto / plano; charset = UTF-8 \ n "" Content-Transfer-Encoding: 8bit \ n "" X-Poedit-KeywordsList: __; _ e \ n "" X-Poedit-Basepath:. \ n "" X-Generator: Poedit 1.5 .5 \ n "" X-Poedit-SearchPath-0:… \ n "
A continuación, necesitamos configurar el dominio de texto en el constructor. Primero, incluye la siguiente línea en tu constructor:
A continuación, agregue la siguiente función a su archivo:
/ ** * Carga el dominio de texto del complemento para su traducción * * @version 1.0 * @since 1.0 * / public function plugin_textdomain () load_plugin_textdomain ('wp-jquery-date-picker', false, dirname (plugin_basename (__FILE__)). '/ lang'); // finalizar plugin_textdomain
Lo más significativo a tener en cuenta aquí es el uso de la wp-jquery-date-picker clave, ya que esto es lo que usaremos para localizar las cadenas en el resto del complemento.
Finalmente, revisaremos esto junto con el Leer archivo más adelante en el tutorial.
2. Crea el Meta Box
En este punto, estamos listos para definir el código que representará el meta box. Esto consta de varios pasos:
Definiendo el gancho en el constructor.
Registrar la meta box con WordPress.
Definiendo una función usada para renderizar el meta box real
En el constructor, agregue la siguiente línea de código. Esto es lo que usaremos para registrar nuestro cuadro de meta:
En la función anterior, le estamos diciendo a WordPress que busque nuestro meta box de fecha en una función llamada add_date_meta_box, así que tenemos que definir eso ahora.
Dentro de su clase, agregue el siguiente código:
/ ** * Registra el cuadro de metadatos para mostrar la opción 'Fecha' en el editor de publicaciones. * * @version 1.0 * @since 1.0 * / public function add_date_meta_box () add_meta_box ('the_date', __ ('The Date', 'wp-jquery-date-picker'), array ($ this, 'the_date_display') , 'post', 'lado', 'bajo'); // finalizar add_date_meta_box
Hemos cubierto las meta box en profundidad en varios tutoriales y el Códice de WordPress tiene un artículo excelente que explica qué hace cada parámetro, por lo que no quiero comentar el tema aquí..
Dicho esto, hay una cosa específica que debemos notar en la llamada anterior. Tenga en cuenta que el cuadro de meta está buscando registrar su visualización mediante una función llamada the_date_display.
Como tal, necesitamos definir esta función. Afortunadamente, el cuadro de meta puede ser muy simple: para activar el selector de fecha, solo necesitamos un elemento. Como vamos a representar la fecha, optemos por utilizar un cuadro de entrada simple.
A continuación, agregue la siguiente función a su clase:
/ ** * Representa la interfaz de usuario para completar el proyecto en su meta box asociado. * * @version 1.0 * @since 1.0 * / public function the_date_display ($ post) wp_nonce_field (plugin_basename (__FILE__), 'wp-jquery-date-picker-nonce'); eco ''; // finaliza the_date_display
Fácil de entender, cierto?
Definimos un valor único para fines de seguridad que nos proporciona las características de seguridad que necesitamos para asegurarnos de que el usuario tenga permisos para guardar valores para este campo, y luego representamos un elemento de entrada en la pantalla..
Tenga en cuenta que el entrada el elemento incluye un ID de "datepicker" y un nombre de "la fecha". Esto será importado más tarde, pero por ahora guarda tu trabajo.
Si activa el complemento en este momento, debería ver algo como lo siguiente:
Obviamente, esto necesita un estilo ligero para que se vea un poco mejor. Entonces, hagamos lo siguiente:
/ ** * Registra y pone en cola los estilos específicos del administrador. * * @version 1.0 * @since 1.0 * / public function register_admin_styles () wp_enqueue_style ('wp-jquery-date-picker', plugins_url ('WordPress-jQuery-Date-Picker / css / admin.css')); // terminar register_admin_styles
En este punto, el ancho del cuadro de entrada para el selector de fecha debe abarcar el ancho del contenedor del cuadro meta. Hace que se vea un poco mejor, en mi opinión.
3. guarda la fecha
Antes de que realmente comencemos a implementar el selector de fechas, avancemos y nos aseguremos de que nuestro nuevo meta box de publicación pueda guardar la información correctamente. En este momento, no es posible porque no hemos escrito el código para ello..
Este paso particular implicará lo siguiente:
Definiendo una función para guardar los datos.
Asegurarse de que el usuario tiene la capacidad de guardar los datos
En realidad guardando los datos
Primero, necesitamos definir el gancho para guardar los datos. Para esto, agregue la siguiente línea a su constructor directamente debajo de la línea donde definimos el gancho para crear el meta box:
add_action ('save_post', array ($ this, 'save_project_date')); [php] A continuación, necesitamos definir realmente la save_project_date función. Esta función será responsable de asegurarse de que el usuario tenga permiso para guardar los datos y luego, en realidad, guardará el contenido del campo de entrada en el meta de publicación para la publicación asociada. Entonces, agregue la siguiente función a su complemento: [php] / ** * Guarda los datos de finalización del proyecto para la ID de entrada entrante. * * @param int La actual ID de publicación. * @version 1.0 * @since 1.0 * / public function save_the_date ($ post_id) // Si el usuario tiene permiso para guardar los metadatos ... if ($ this-> user_can_save ($ post_id, 'wp-jquery-date-picker -nonce ')) // Eliminar cualquier metadatos existente para el propietario if (get_post_meta ($ post_id,' the_date ')) delete_post_meta ($ post_id,' the_date '); // termina si update_post_meta ($ post_id, 'the_date', strip_tags ($ _POST ['the_date'])); // end if if // end save_the_date
Esta función funciona básicamente verificando si este usuario puede guardar. Si es así, eliminará cualquier meta existente de la publicación para no saturar la base de datos, luego agregará la fecha especificada a esta publicación..
Pero hay un problema: estamos haciendo una llamada a una función llamada usuario_can_save. Esta función en particular es una función auxiliar que debemos definir, ya que simplifica gran parte del código de repetición necesario para garantizar que el usuario tenga permiso para guardar el archivo..
Entonces, en el área de "Funciones de ayuda" de su clase, agregue la siguiente función:
/ ** * Determina si el usuario actual tiene la capacidad de guardar metadatos asociados con esta publicación. * * @param int $ post_id El ID de la publicación que se está guardando * @param bool Si el usuario tiene la capacidad de guardar esta publicación. * @version 1.0 * @since 1.0 * / función privada 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__)))? verdadero Falso; // Devuelve verdadero si el usuario puede guardar; de lo contrario, falso. regreso ! ($ is_autosave || $ is_revision) && $ is_valid_nonce; // fin user_can_save
Tenga en cuenta que esta función admite la ID de publicación actual y el valor nonce (que establecimos anteriormente en esta publicación). Finalmente, esta función devuelve verdadero si esto no es un guardado automático, una revisión posterior, y que el nonce es válido.
Si es verdad, entonces el usuario tiene permiso para guardar.
Conclusión
En este punto, vamos a probar lo que tenemos. Active el complemento, y debería ver el cuadro de meta en el panel del Editor de Publicaciones. En este momento, debería poder guardar cualquier valor que desee en ese campo en particular.
Puede obtener una copia del complemento en su versión actual para esta publicación usando este enlace.
En el siguiente artículo, vamos a echar un vistazo a la implementación real del selector de fecha. Esto incluirá importar las dependencias de JavaScript necesarias, escribir un poco de nuestro propio JavaScript y luego mostrar la fecha en la parte delantera de la publicación..
Finalmente, prepararemos el complemento para su lanzamiento al generar los archivos de localización y luego preparar el Leer.
Share
Accentsconagua
