5 maneras de controlar la longitud del extracto o excerpt de WordPress

¿Quieres un extracto que sea más largo o más corto?

Hay varios métodos para limitar o alargar su extracto y veremos 5 en detalle.

Algunos son simples y otros serán un poco más complejos.

Cada uno tiene sus ventajas y desventajas, por lo que puede elegir el método que más le convenga.

Método Uno – Filtrando la Longitud del Extracto

El primer método consiste en añadir un filtro a la longitud del extracto. Si usted no está familiarizado con los ganchos del filtro, este es un gran método para que usted consiga sus pies mojados.

Pasos para filtrar la longitud del extracto

  • Primero debemos crear una función definida por el usuario, que llamé change_excerpt_length en nuestro archivo function.php en nuestro tema activo.
  • .

  • Esta función puede aceptar una variable que representará la longitud real del fragmento, pero realmente no necesitamos para este ejemplo.
  • Nuestra función sólo necesita devolver un número entero. Este número entero representa el número de palabras que queremos que sea nuestro extracto.
  • Añadir función add_filter en nuestro archivo function.php en nuestro tema activo. Necesitamos engancharnos a excerpt_length y referenciar nuestra función.


function change_excerpt_length($length){
return 10;
}
add_filter('excerpt_length', 'change_excerpt_length');

El resultado será un extracto limitado a la longitud que especificamos en nuestra función definida por el usuario, que en este caso es de 10 palabras.

Ventajas

  1. Este método es súper simple. Puede cambiar la longitud de su extracto con 4 líneas de código.
  2. Cambia todas las longitudes de los extractos a la vez.
  3. Nos permite anular la longitud introduciendo un extracto en el meta box del extracto en la pantalla del admin post screen,

Inconvenientes

Este método carece de flexibilidad.

Ya que esto cambiará la duración de cada extracto, no podrá tener un extracto más largo que otro.

Método dos – Desglosar el extracto

Este método usará otro filtro para modificar el_excerpt.

Cómo acortar el extracto usando la función PHP – explode

  • Tenemos que crear una función definida por el usuario a la que llamo my_excerpt_filter, que acepte un parámetro que represente el extracto real.
  • Dentro de nuestra función, debemos quitar las etiquetas para evitar que cualquier HTML no se cierre cuando hacemos eco de nuestro extracto al final de nuestra función.
  • Entonces podemos desglosar el extracto por los espacios en blanco que representan los espacios entre las palabras. Esta función creará una matriz que asignamos a la variable $strs.
  • Entonces implosionaremos la matriz usando la función array_splice después de envolverla en las etiquetas de párrafo.
  • Ahora necesitamos usar un gancho de filtro en nuestro archivo functions.php para engancharlo al_excerpt y hacer referencia a nuestra función.


function my_excerpt_filter($excerpt){
$excerpt = strip_tags($excerpt);
$strs = explode(" ", $excerpt);
echo "<p>" . implode(' ', array_splice($strs, 0, 10)) . "</p>";
}
add_filter('the_excerpt', 'my_excerpt_filter');

El resultado será un extracto limitado al número de palabras definidas en el tercer parámetro de la función array_splice.

Los positivos para utilizar Desglosar para limitar la longitud del extracto.

Son exactamente iguales que el primer método.

Los negativos para utilizar Desglosar para limitar la longitud del extracto.

  • Si queremos un extracto que sea más largo que las 55 palabras estándar, esta función no funcionará.
  • Si tenemos un extracto que realmente introducimos en el meta buzón de extractos en la pantalla de mensajes, este método no permitirá su uso para mostrar todo el contenido. Estará limitado.
  • La longitud se codifica en nuestra función de filtro. Esto limita nuestra capacidad de cambiar la longitud sin cambiar nuestra función.
  • Hay problemas potenciales de formato al quitar las etiquetas. Si hay una necesidad de que un extracto sea de dos párrafos, este método no soportará el formato. Más sobre esto más adelante.

Método tres: Use un poco de Regex para limitar su excerpt

Este ejemplo utiliza la función preg_match PHP para crear un efecto similar al anterior.

Cómo usar preg_match para limitar su extracto

  • De nuevo vamos a crear una función definida por el usuario dentro de nuestro archivo function.php en el tema activo. Para este ejemplo la función será llamada regex_my_excerpt. Esto aceptará un parámetro que será el extracto actual.
  • Vuelva a quitar las etiquetas como en el ejemplo dos por la misma razón.
  • eco de la desviación 0 en la matriz de coincidencias envuelta en las etiquetas de párrafo.
  • Utilice un gancho de filtro para el_excerpt en el archivo function.php y haga referencia a nuestra función definida por el usuario llamada regex_my_excerpt.


function regex_my_excerpt($excerpt){
$excerpt = strip_tags($excerpt);
preg_match('/^\s*+(?:\S++\s*+){1,10}/', $str, $matches);
echo "<p>" . $matches[0] . "</p>";
}
add_filter('the_excerpt', 'regex_my_excerpt');

El extracto será limitado para comprar el segundo número envuelto entre corchetes en nuestra expresión regex.

Positivos para usar regex para limitar su extracto

  1. Por las mismas razones que arriba
  2. Puede permitir formatos adicionales como si tuvieras un extracto que necesita ser de dos párrafos. (No en este ejemplo pero será discutido más tarde

Negativos por usar regex para limitar su extracto

  1. Tiene los negativos de los ejemplos anteriores.
  2. Añade un nivel de complicación usando una expresión regular para limitar la longitud del extracto.

Method Four: Using the Post Global to Create a Custom Excerpt

Este método utiliza el objeto post para crear un extracto personalizado.

Cómo usar el post global para un extracto personalizado

  • Crear una función definida por el usuario con el archivo function.php en nuestro tema activo que llamé my_custom_excerpt.
  • Call en la variable global para el objeto post.
  • Prueba para ver si hay un extracto ya configurado y si hay eco en ese extracto. Esto trata con el problema de un extracto introducido por el usuario en la pantalla de mensajes en el admin.
  • Si el extracto está vacío, entonces debemos crear uno usando el contenido. Una vez más quitamos las etiquetas para comenzar.
  • Entonces usamos el regex de arriba para que coincida con el número de palabras que queremos.
  • Entonces podemos hacer eco de nuestra coincidencia desde nuestra matriz de coincidencias. Envuelto en etiquetas de párrafo.
  • Use un gancho de filtro para el_excerpt en el archivo function.php y haga referencia a nuestra función definida por el usuario llamada my_custom_excerpt.


function my_custom_excerpt(){
global $post;
if(!empty($post->post_excerpt)){
echo "<p>" . $post->post_excerpt . "</p>";
}
else{
$content = strip_tags($post->post_content);
preg_match('/^\s*+(?:\S++\s*+){1,10}/', $content, $matches);
echo "<p>" . $matches[0] . "</p>";
}
}
add_filter('the_excerpt', 'my_custom_excerpt');

Beneficios por usar el post global para crear un extracto personalizado

  1. Tiene los mismos beneficios que los métodos mencionados anteriormente.
  2. Este método permite extractos de más de 55 palabras.
  3. Una gran ventaja es que se trata de los extractos definidos por el usuario para un post. Si hay uno, entonces usa that if not lets create one.

Negativos para usar el post global para crear un extracto personalizado

Una vez más, este método tiene los mismos puntos negativos que el anterior

Método cinco: Crear una función que reemplace la función_excerpt Function

Este método crea una nueva función que sustituye a la función_excerpt.

Cómo crear una función personalizada para reemplazar el_excerpt

  • Necesitamos crear una función definida por el usuario en function.php de nuestro tema activo.
  • Esta función aceptará dos parámetros. La primera representará la extensión de nuestro extracto. El segundo es el último carácter de nuestro extracto, que estableceremos en un valor por defecto de …
  • Entonces modificaremos el regex del ejemplo cuatro para permitir que se use para establecer la longitud de la cadena coincidente.
  • Luego envolveremos el resultado en etiquetas de párrafo con el carácter final en su lugar.
  • A continuación necesitamos reemplazar el_excerpt donde queramos con nuestra nueva función y definir nuestra longitud con cada instancia.


function custom_the_excerpt($length, $end_char = '…'){
global $post;
if(!empty($post->post_excerpt)){
echo "<p>" . $post->post_excerpt . "</p>";
}
else{
$content = strip_tags($post->post_content);
preg_match('/^\s*+(?:\S++\s*+){1,' .$length . '}/', $content, $matches);

echo "<p>" . $matches[0] . "</p>";
}
}

La longitud de nuestro extracto no será lo que queramos para pasar esta función.

Beneficios de nuestra función personalizada

  • Podemos seleccionar la duración de nuestro extracto sobre la marcha.
  • El más flexible de todos los ejemplos

Negativos de nuestra función personalizada

Tenemos que cambiar manualmente las funciones de la_excerpt.

Esto significa encontrarlos todos en el tema y cambiarlos a esta función.

Podría tomar un poco de tiempo.

Un problema con los métodos 2 hasta 5

Hay un tema potencialmente molesto que puede ser discutido al lado.

Es lo que pasa si tienes un extracto que consiste en dos párrafos.

Acabamos de envolver nuestros resultados en una sola etiqueta de párrafo y lo llamamos bueno.

Esto causará un problema de formato.

Bueno, en realidad necesitaríamos ir un poco más allá y usar un poco más de regex para emparejar nuevas líneas que normalmente WordPress cambiaría en una etiqueta de ruptura o en un nuevo párrafo.

Podemos hacerlo usando un poco más de regex.

Pero sólo voy a ir a esto usando el ejemplo cinco.


function custom_the_excerpt($length, $end_char = '…'){
global $post;
if(!empty($post->post_excerpt)){
$excerpt = preg_replace("/\n/", "</p>\n\n<p>", $post->post_excerpt);
echo "<p>" . $excerpt . "<p>";
}
else{
$content = strip_tags($post->post_content);

preg_match('/^\s*+(?:\S++\s*+){1,' .$length . '}/', $content, $matches);

$excerpt = preg_replace("/\n/", "</p>\n\n<p>", $matches[0]);

echo "<p>" . $excerpt . $end_char . "<p>";
}
}

Este método encontrará las nuevas líneas y las convertirá en etiquetas de párrafo preservando el formato.

Y sólo funcionará con los métodos que utilizan regex.

Esto significa que con el método de explosión no tienes suerte.

¿Qué tal un plugin ?

Hay muchos plugins que cambiarán la longitud del extracto.

Tal vez uno de los más populares es un plugin llamado “The Excerpt re-loaded“.

Viene con un montón de opciones y es bastante simple de usar.

No es el momento de actualizar el_excerpt

El extracto es una buena característica de WordPress.

Es un método para conseguir que la gente a un teaser acerca de su puesto para animarles a leer todo el asunto.

Quizás aunque la próxima versión de la_excerpt debería venir estándar con un parámetro para cambiar la longitud.

Sería bueno en comparación con tener todos estos métodos para cambiar la longitud.

Todo sobre la función Home_url()

home_url() es una nueva función añadida a la versión 3.0 de WordPress.

Es la función de plantilla que le permite crear URL’s que empiezan con su dirección de casa.

Home_url() puede sonar complicado pero es extremadamente fácil de usar y hará su codificación más simple.

Echemos un vistazo a la función:

<?php home_url('path', 'scheme');?>

Como puede ver arriba, la función toma dos argumentos:

Path

Este es un argumento de opción que le permite crear una URL personalizada utilizando esta ruta.

Digamos que usted tiene una página con el slug “about” que representa la página que usted ha titulado “About”.

Puedes pasar “about” como la ruta y crear la siguiente URL: http://www.yoursitesaddress.com/about.

Scheme

Este es un argumento opcional.

Esto le permite determinar si se utilizará “http” o “https” al principio de la URL.

Cosas que hay que saber sobre la función home_url()

Automáticamente usará http o https dependiendo de las opciones que tenga para el sitio.

Esto permitirá no preocuparse de tener protocolo, WordPress lo sabrá.

Si no pasa en una ruta, el valor predeterminado será la URL del sitio.

Esto hará que el uso de get_option(‘home’) o bloginfo(‘home’) sea muy limitado.

El uso de la función home_url() hará que su diseño de plantillas y plugins sea universal.

Pero esta función no será reconocida por las versiones anteriores de WordPress.

Ejemplo usando la función home_url

Aquí se usa para crear una ruta a una de mis publicaciones más antiguas.

<?php home_url("using-custom-fields");?>

Esto devolverá la siguiente URL: http://www.wpinsideout.com/using-custom-fields

Eso es realmente todo.

Es casi demasiado simple, pero conocer esta función te permitirá crear URLs rápidamente y las URLs que crees serán universales.

Y por significado universal, si usted lanza un sitio usando un tema que estaba desarrollando en su propio ordenador, las URL cambiarán automáticamente de la dirección de su propio ordenador a la dirección de su nuevo sitio.

Custom Post Types Avanzados – Integración con PHP Class

Era bastante evidente para mí que la adición de tipos de mensajes personalizados hizo que esta versión de WordPress fuera la más potente hasta ahora.

Cuando vi por primera vez su poder, comencé a añadir tipos de mensajes personalizados inmediatamente.

Un tema reciente que desarrollé aprovechó al máximo que tenían un total de 3 tipos de puestos personalizados.

Y luego escribí un plugin que usaba tipos de mensajes personalizados y taxonomías personalizadas.

Era pronto aparente a mí, me repetía mucho y el código también comenzó a llegar a ser largo.

La solución que se me ocurrió fue crear una clase de tipo post personalizada.

Por qué una clase para tipos de poste personalizados y descripción general del proyecto

Tener una clase para administrar estos aprovechará al máximo la fiabilidad de PHP orientado a objetos y la adición de tipos de puestos personalizados un mater de unas pocas líneas de código.

Usted hará menos codificación porque era reutilizable.

Para empezar vamos a hacer esto en el contexto de la creación de un plugin.

Tendrá varias funciones, pero una de las principales será añadir un tipo de puesto personalizado para gestionar nuestros productos.

También el código que usaremos para nuestros métodos de clase de tipo de mensaje personalizado se encuentra en un mensaje anterior al añadir custom post types.

Registrando Nuestro Plugin

Si no has creado un plugin antes de que haya unos pocos pasos pero aquí está corto en dulce:

  • Crea una carpeta en tu directorio de plugins llamada: our_products
  • .

  • Dentro de esa carpeta cree un archivo PHP con el mismo nombre: our_products.php
  • .

  • Siguiente vamos a añadir el código para registrar el plugin


/*
Plugin Name: Nombre producto
Plugin URI: http://www.wpinsideout.com
Author: Mi nombre
Author URI: http://www.wpinsideout.com
Description: Ejemplo de proyecto a mostrar el uso de custom post type y custom taxonomy class
Version: 1.0
*/

Ahora nuestro plugin está registrado en WordPress y si vamos a la pestaña de plugins en el admin veremos que el plugin está disponible para su activación.

Si lo activas no pasará nada.

Pero a medida que codificamos podemos simplemente refrescarnos para ver los cambios que nuestro plugin está haciendo.

Comience a crear nuestra clase

Ahora vamos a crear un nuevo archivo PHP en nuestro directorio de plugins llamado: add_post_types.php.

Dentro de este fichero vamos a crear una clase con el mismo nombre que el fichero.

Aquí está el código de inicio de la clase:

<?php class Add_post_types { }

Ahora vamos a necesitar unas cuantas variables y una función que acepte una matriz asociativa para asignar valores a estas variables.

Aquí está nuestra clase de tipo de correo personalizado hasta ahora:


<?php
class Add_post_types {
var $single; //this represents the singular name of the post type
var $plural; //this represents the plural name of the post type
var $type; //this is the actual type
function init($options){
foreach($options as $key => $value){
$this->$key = $value;
}
}

Para entender lo que está pasando aquí en nuestro plugin vamos a pasar una matriz asociativa con las claves que tienen el mismo nombre que las variables de clase.

Cuando llamamos al método init y pasamos nuestra matriz de opciones, este método asignará los valores a las variables de las clases.

Ahora tenemos que crear nuestro primer método para añadir el tipo de mensaje y podemos tomar el ejemplo de nuestro tutorial sobre tipos de mensajes personalizados.

Queremos tomar la función llamada “my_widget_post_type_init” y podemos pegarla directamente en nuestra clase.

We are going to do several edits to this function.

First, I am going to change its name to “add_post_type”.

Then I am going replace every instance of the word “widget” in the labels array with “$this->single”.

Then, I am going to replace every instance in the labels array of the word “widgets” with “$this->plural”.

Lastly, I am going change “widget” in the register_post_type function to “$this->type”

If you are unfamiliar with object oriented PHP, using $this->single, $this->plural, or $this->type will take the class variables and use it in this method.

It allows use to assign value to these variables in the init method and then be able to use it in this method.

Here is the class so far with the edited functions.


<?php
class Add_post_types {
var $single; //this represents the singular name of the post type
var $plural; //this represents the plural name of the post type
var $type; //this is the actual type
function init($options){
foreach($options as $key => $value){
$this->$key = $value;
}
}
function add_post_type(){
$labels = array(
'name' => _x($this->plural, 'post type general name'),
'singular_name' => _x($this->single, 'post type singular name'),
'add_new' => _x('Add ' . $this->single, $this->single),
'add_new_item' => __('Add New ' . $this->single),
'edit_item' => __('Edit ' . $this->single),
'new_item' => __('New ' . $this->single),
'view_item' => __('View ' . $this->single),
'search_items' => __('Search ' . $this->plural),
'not_found' => __('No ' . $this->plural . ' Found'),
'not_found_in_trash' => __('No ' . $this->plural . ' found in Trash'),
'parent_item_colon' => ''
);
$options = array(
'labels' => $labels,
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'query_var' => true,
'rewrite' => true,
'capability_type' => 'post',
'hierarchical' => false,
'menu_position' => null,
'supports' => array('title','editor','author','thumbnail','excerpt','comments')
);
register_post_type($this->type, $options);
}
}

A continuación vamos a tomar la función llamada “widget_message” que se encuentra en nuestro tutorial personalizado de tipo post. De nuevo vamos a cambiar algunas cosas.

Primero vamos a cambiar el nombre de la función a “add_messages”.

En segundo lugar vamos a cambiar la clave en el array de mensajes a “$this->type”.

Tercero, vamos a reemplazar cada instancia de “widget” por “$this->single” y cada instancia de “widgets” por “$this->plural”.

Aquí está la clase completa:
<?php
class Add_post_types {
var $single; //this represents the singular name of the post type
var $plural; //this represents the plural name of the post type
var $type; //this is the actual type
function init($options){
foreach($options as $key => $value){
$this->$key = $value;
}
}
function add_post_type(){
$labels = array(
'name' => _x($this->plural, 'post type general name'),
'singular_name' => _x($this->single, 'post type singular name'),
'add_new' => _x('Add ' . $this->single, $this->single),
'add_new_item' => __('Add New ' . $this->single),
'edit_item' => __('Edit ' . $this->single),
'new_item' => __('New ' . $this->single),
'view_item' => __('View ' . $this->single),
'search_items' => __('Search ' . $this->plural),
'not_found' => __('No ' . $this->plural . ' Found'),
'not_found_in_trash' => __('No ' . $this->plural . ' found in Trash'),
'parent_item_colon' => ''
);
$options = array(
'labels' => $labels,
'public' => true,
'publicly_queryable' => true,
'show_ui' => true,
'query_var' => true,
'rewrite' => true,
'capability_type' => 'post',
'hierarchical' => false,
'menu_position' => null,
'supports' => array('title','editor','author','thumbnail','excerpt','comments')
);
register_post_type($this->type, $options);
}
function add_messages ( $messages ) {
$messages[$this->type] = array(
0 => '',
1 => sprintf( __($this->single . ' updated. View ' . $this->single . ''), esc_url( get_permalink($post_ID) ) ),
2 => __('Custom field updated.'),
3 => __('Custom field deleted.'),
4 => __($this->single . ' updated.'),
5 => isset($_GET['revision']) ? sprintf( __($this->single .' restored to revision from %s'), wp_post_revision_title( (int) $_GET['revision'], false ) ) : false,
6 => sprintf( __($this->single . ' published. View ' . $this->single . ''), esc_url( get_permalink($post_ID) ) ),
7 => __('Book saved.'),
8 => sprintf( __($this->single . ' submitted. Preview ' . $this->single . ''), esc_url( add_query_arg( 'preview', 'true', get_permalink($post_ID) ) ) ),
9 => sprintf( __($this->single . ' scheduled for: %1$s. Preview ' . $this->single . ''),
date_i18n( __( 'M j, Y @ G:i' ), strtotime( $post->post_date ) ), esc_url( get_permalink($post_ID) ) ),
10 => sprintf( __($this->single . ' draft updated. Preview ' . $this->single . ''), esc_url( add_query_arg( 'preview', 'true', get_permalink($post_ID) ) ) ),
);

return $messages;
}
}?>

Ahora que tenemos nuestra clase, sólo tenemos que añadir nuestro tipo de mensaje en nuestro archivo de plugin principal. Aquí están los pasos:

  1. Incluir el archivo que contiene nuestra clase.
  2. Crear una nueva instancia de nuestra clase y asignarla a una variable.
  3. Cree nuestra matriz de opciones.
  4. Pase nuestro array de opciones a nuestro método init.
  5. usar la función add_action para engancharse a la inicialización de WordPress y llamar a nuestro método add_post_type mediante el uso de una referencia.
  6. Entonces necesitamos usar la función add_filter para filtrar ‘post_updated_messages’ usando una referencia a nuestra clase y método.

Aquí está el código completo a continuación:


include('add_post_types.php');
$create_post_type = new Add_post_types;
$options = array(
'single' => 'Product',
'plural' => 'Products',
'type' => 'product'
);
$create_post_type->init($options);
add_action('init', array(&$create_post_type, 'add_post_type'));
add_filter('post_updated_messages', array(&$create_post_type, 'add_messages'));

Eso es todo. Y este es el resultado:

Verá que se ha añadido el tipo.

Todas las etiquetas son correctas y el producto muestra mensajes.

Para mostrarte realmente lo rápido y fácil que es para ti ahora, añadiré un segundo para un tipo de servicio personalizado.

Aquí está el código:


include('add_post_types.php');
$create_post_type = new Add_post_types;
$options = array(
'single' => 'Product',
'plural' => 'Products',
'type' => 'product'
);
$create_post_type->init($options);
add_action('init', array(&$create_post_type, 'add_post_type'));
add_filter('post_updated_messages', array(&$create_post_type, 'add_messages'));
$services_post_type = new Add_post_types;
$options = array(
'single' => 'Service',
'plural' => 'Services',
'type' => 'service'
);
$services_post_type->init($options);
add_action('init', array(&$services_post_type, 'add_post_type'));
add_filter('post_updated_messages', array(&$services_post_type, 'add_messages'));

Terminando con el uso de una clase de custom post type personalizada

Usted nota arriba que asigné una nueva variable para crear el segundo tipo de mensaje y esa es la única manera en que funcionará.

En general, la codificación se mantiene al mínimo.

Puede añadir tipos de mensajes personalizados de forma rápida y coherente.

También puedes llevar esta clase a otros proyectos y empezar a trabajar en ellos.

Puedes usar esto en el desarrollo de tu tema.

Tener tal vez una carpeta para sus clases e incluir este archivo en su archivo functions.php.

A continuación, utilice el archivo functions.php para añadir los tipos de mensajes.

Cómo crear un Meta Box de WordPress con Jquery UI Datepicker

Agregar un selector de fechas es una gran manera de mejorar tu plugin de WordPress que estás construyendo.

Este post irá a través de todo lo que tendrá que hacer para añadir un Jquery UI Datepicker a su meta box personalizado.

Lo que debe saber antes de seguir adelante

  • Fundamentos de Plugin como registrar un plugin y nounces
  • .

  • Comprensión básica de los ganchos de acción y filtro de WordPress
  • Object Oriented PHP

Hoy no cubriremos cómo registrar un plugin o cómo escribir un plugin en forma de clase PHP.

Necesitará entender estos conceptos para entender realmente lo que estamos haciendo.

Conseguir el jQuery UI Datepicker

Antes de empezar necesitamos seleccionar un selector de fecha javascript.

Hay muchos, pero uno de los más fáciles de configurar y el usuario es el jQuery UI datepicker.

Si no has visto este pequeño widget antes, puedes ver algunos ejemplos en el sitio web de jQuery UI.

A continuación, tenemos que ir a la página de descarga y seleccionar lo que vamos a necesitar para descargar.

Esta página está dividida en 4 secciones principales y no necesitaremos descargar todo en nuestro paquete.

La primera es la UI core que dejo seleccionada.

El siguiente es interacciones que desmarco todo.

Lo siguiente es widgets que desmarco todo menos el datepicker.

La última sección, efectos también desmarco todo.

Ahora descárgalo.

Configuración de los archivos de plugin

Para empezar creo una nueva carpeta en mi wp-content/plugins que contendrá nuestro código.

Le pongo nombre a esa carpeta refactord-datepicker y también creo dos carpetas dentro de nuestra nueva carpeta de plugins llamada “css” y “js”.

Luego tomo la descarga personalizada de jQuery UI y coloco la hoja de estilos personalizada y el directorio de imágenes en la carpeta css de mi nuevo plugin.

Hago lo mismo con el JavaScript colocándolo en la carpeta js.

Normalmente, los nombres de estos archivos son largos y si va a cambiar el nombre este es el momento.

Para este tutorial les dejaré el mismo nombre.

Aquí hay una foto de la configuración:

Codificando el Datepicker y el Metabox Plugin

Como se mencionó anteriormente, esto se hará en la forma de una clase PHP.

Si no estás familiarizado con los plugins de codificación de esta manera, definitivamente deberías echarle un vistazo.

Para comenzar crearé una clase básica y llamaré a la clase.


/*
Plugin Name: datepicker
Plugin URI:
Description:
Author:
Version: 1.0
*/
class Refactord_Datepicker {
}
$refactord_Datepicker = new Refactord_Datepicker;

La function constructor

No hay nada especial hasta ahora, pero la verdadera carne se hace en la función constructor que primero establecerá alguna variable de clase que represente la ruta del archivo al plugin y la URL al plugin.

Ambos serán útiles cuando creemos nuestros métodos para añadir JavaScript y CSS.

Además, en la función constructor, se llamarán todos los ganchos con sus métodos correspondientes.

Habrá 5 ganchos de acción que usaremos para añadir nuestras hojas de estilo, añadir nuestros scripts, añadir el meta box, crear el contenido del meta box y guardar los datos cuando se actualice/añada la entrada.

Aquí está el código:


class Refactord_Datepicker {

var $plugin_dir;
var $plugin_url;

function __construct() {

$this->plugin_dir = WP_PLUGIN_DIR . "/refactord-datepicker";
$this->plugin_url = WP_PLUGIN_URL . "/refactord-datepicker";

add_action( 'admin_print_styles', array($this, 'add_stylesheets') );
add_action( 'admin_enqueue_scripts', array($this, 'add_js') );
add_action( 'add_meta_boxes', array( $this, 'datepicker_meta_box' ) );
add_action( 'admin_head', array($this, 'call_js') );
add_action( 'save_post', array($this, 'save_data') );
}

Añadir las hojas de estilo del selector de fechas

El primer método que crearemos es add_stylesheets.

Esto hará exactamente eso.

Aquí está el método que creé:


function add_stylesheets(){
global $post;
$styleFile = $this->plugin_dir . "/css/jquery-ui-1.8.13.custom.css";

if(file_exists($styleFile) && $post->post_type == 'post'){
wp_register_style('datepicker-css', $this->plugin_url . "/css/jquery-ui-1.8.13.custom.css");
wp_enqueue_style( 'datepicker-css');
}
}

Si miras esta función, usamos esas variables de clase para obtener la URL y las rutas de archivo a la hoja de estilo que necesitamos añadir.

También, llamamos en el global para el poste y la prueba para ver si esto es un tipo del poste que deseamos agregar la hoja de estilos también.

No tiene sentido añadir esta hoja de estilo a cada página del panel de administración.

Añadir el Javascript Datepicker

Este método es casi el mismo que el que usamos para agregar la hoja de estilo del selector de fechas.

Los únicos cambios que notará son los nombres de las funciones de WordPress que usamos.

Así como el cambio en el nombre del archivo que estamos llamando.


function add_js(){
global $post;
$jsFile = $this->plugin_dir . "/js/jquery-ui-1.8.13.custom.min.js";

if(file_exists($jsFile) && $post->post_type == 'post'){
wp_register_script('datepicker-js', $this->plugin_url . "/js/jquery-ui-1.8.13.custom.min.js");
wp_enqueue_script( 'datepicker-js');
}
}

Llamando al Datepicker JavaScript

Ahora que tenemos ambos métodos para agregar el CSS y JavaScript necesarios, necesitamos llamar al JavaScript en la entrada que vamos a crear.

Ya sé el ID de entrada que vamos a utilizar: “#datepicker-field”, así que simplemente llamo a la función datepicker en ese campo ID.

Ni siquiera paso ninguna opción.


function call_js(){
global $post;
if($post->post_type == 'post'){

echo '';
}
}

Note que omitimos los $ de jQuery.

Esto ayuda a prevenir cualquier conflicto que el símbolo del dólar pueda crear con otros scripts cargados.

Añadiendo la meta Caja

La siguiente necesidad es crear una meta-caja.

Hacemos eso llamando a este método que está hecho de una sola función:


function datepicker_meta_box(){
add_meta_box(
'refactord-datepicker'
,'Refactord Datepicker'
,array( &$this, 'meta_box_content' )
,'post'
,'side'
,'high'
);
}

Si usted no está familiarizado con esta función, puedes obtener más información en el códex de WordPress.


function meta_box_content(){
global $post;
// Use nonce for verification
wp_nonce_field( plugin_basename( __FILE__ ), 'refactord_nounce' );

// The actual fields for data entry
echo '';
_e("Pick A date", 'myplugin_textdomain' );
echo ' : ';
echo '

' . get_post_meta($post->ID, 'refactord-datepicker', TRUE) . '
';
}

Estamos haciendo algunas cosas en esta función.

Una es el uso de un WordPress Nounce.

Esto ayuda a mantener un alto nivel de seguridad para nuestra meta caja.

Además, verá que estamos usando get_post_meta para obtener los datos que mostraremos en nuestro campo de entrada.

Este es el regalo que vamos a guardar estos datos en la meta tabla de mensajes.

También verá el ID del campo del datepicker, que nos permitirá llamar a nuestros js.

En realidad si queremos podemos cargar este plugin ahora y nos mostrará nuestro selector de fechas.

Pero no salvaría.

Grabación de los datos del Datepicker

Por último, tenemos que guardar los datos.


function save_data($post_id){
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE )
return;

if ( !wp_verify_nonce( $_POST['refactord_nounce'], plugin_basename( __FILE__ ) ) )
return;

// Check permissions
if ( 'page' == $_POST['post_type'] ){
if ( !current_user_can( 'edit_page', $post_id ) )
return;
}else{
if ( !current_user_can( 'edit_post', $post_id ) )
return;
}

$data = $_POST['datepicker-field'];

update_post_meta($post_id, 'refactord-datepicker', $data, get_post_meta($post_id, 'refactord-datepicker', TRUE));

return $data;
}

Usted notará que hay varias comprobaciones de seguridad y también una comprobación para ver si un ajax save se hace.

Además, verá que el meta de la entrada se guarda usando un guión bajo antes del nombre real de la clave meta.

Si lo hace, evitará que esta opción se rellene en el cuadro de campo personalizado.

La clase Datepicker completada

Eso es todo. Hemos terminado y si lo cargas en una instalación de WordPress obtendrás esto: