() translation by (you can also view the original English article)
Mantener la funcionalidad separada de la presentación es una de las buenas prácticas del desarrollo de temas para WordPress. En este artículo aprenderás justamente ha hacer esto, proporcionando a tus usuarios un plugin empaquetado único para tus temas.
Lógica en el Desarrollo de Temas
En ThemeForest hemos estado comercializando temas para WordPress desde hace alrededor de cuatro años, y durante este tiempo hemos aprendido muchas cosas que nos han ayudado a conseguir el éxito dentro de este mercado. Uno de los aspectos claves del éxito en el desarrollo de temas es la "correcta lógica en el desarrollo de temas".
El beneficio clave de la separación lógica en el desarrollo es la velocidad de producción: cuanto más rápido seas en la creación de temas de calidad, más ingresos podrás generar. Manteniendo la funcionalidad en un plugin aparte también es útil en lo referente a las actualizaciones. Imagina que tienes diez temas en ThemeForest y quieres añadir una nueva funcionalidad en forma de actualización. Si tienes toda la funcionalidad reunida en un plugin, significa que sólo necesitarás actualizarlo una vez en el panel, de no hacerlo así, incluso cualquier pequeña actualización se convierte en un proceso lento y probablemente desagradable.
Así que si quieres crear temas potentes y ganar más dinero con ello, respeta el sistema de plugins y temas de WordPress.
Tipos de Funcionalidad
¿Qué tipo de funcionalidad podría contener un tema premium? ¿Qué clase de cosas deberíamos trasladar a un plugin? Aquí tienes una lista de componentes que típicamente mantenemos separados de los archivos del tema:
- Panel de opciones del tema
- Campos personalizados ampliados para páginas o entradas
- Widgets personalizados
- Shortcodes personalizados
- Tipos de entradas personalizadas
- Funciones extra personalizadas
En este artículo no vamos a detallar cómo creamos los componentes en sí, pero veremos cómo empaquetar todos juntos en un plugin de addons.
Empecemos
Dirígete a tu wp-content > plugins y crea una carpeta vacía con el nombre de tu plugin empaquetado. Te recomendamos que uses un nombre que se explique por sí mismo. Por ejemplo, nuestro plugin de addons se llama "ninzio-addons" (siendo ninzio el nombre de nuestra compañía).
Importante: ¡no uses un guión bajo en el nombre de la carpeta! Usa un guión si es necesario.
Después, en la carpeta de ese plugin crea un archivo php con el mismo nombre exacto que la carpeta. En nuestro ejemplo sería "ninzio-addons.php". De nuevo, no uses guiones bajos por favor. Abre ese archivo y añade el siguiente DocBlock header comment:
1 |
/**
|
2 |
* Plugin Name: Your plugin name
|
3 |
* Plugin URI: your plugin url
|
4 |
* Text Domain: text-domain
|
5 |
* Domain Path: /languages/
|
6 |
* Description: Short description of the plugin
|
7 |
* Author: Author name
|
8 |
* Version: 1.0.0
|
9 |
* Author URI: author uri
|
10 |
*/
|
Examinemos los detalles que hemos añadido aquí:
- El nombre del plugin: debe ser corto y descriptivo.
- URI del plugin: puedes pegar la dirección de tu sitio web aquí.
- Texto de Dominio: este punto es un parámetro muy importante. Debes nombrarlo de igual manera que la carpeta del plugin y el archivo principal. Con el texto del dominio tu y tus usuario podrán traducir cadenas del plugin. Después veremos cómo traducir un plugin de addons empaquetados (encontramos esto muy importante para nuestros clientes).
- Ruta del Dominio: este parámetro es también muy importante para la traducción del plugin. La ruta del dominio es relativa a la carpeta de idioma del archivo. Dirígete a la carpeta de tu plugin de addons y crea una carpeta vacía con el nombre "idiomas". Por ahora la vamos a dejar vacía; más tarde crearemos el archivo para el idioma.
- Todos los demás parámetros "Author", "Version", "Author URI" se explican por sí mismos.
Ahora, habiendo creado nuestra carpeta para el plugin de addons y el archivo principal, es momento de configurarlo.
Configuración
En el archivo principal del plugin, tras el comentario del encabezado, pega este fragmento:
1 |
if ( ! defined( 'ABSPATH' ) ) { |
2 |
exit; // Exit if accessed directly |
3 |
}
|
Es por motivos de seguridad; esto bloquea los accesos directos al archivo del plugin.
Justo tras lo anterior, añade este código:
1 |
function your_addons_load_plugin_textdomain() { |
2 |
load_plugin_textdomain( 'ninzio-addons', false, dirname( plugin_basename(__FILE__) ) . '/languages/' ); |
3 |
}
|
4 |
|
5 |
add_action( 'plugins_loaded', 'your_addons_load_plugin_textdomain' ); |
Aquí hemos cargado el textdomain el plugin–asegúrate de que el nombre de la función es el correcto. Nuestra recomendación para los nombres de las funciones es que uses nombres descriptivos con un prefijo relativo a tu plugin. Por ejemplo ninzio_addons. Y como esto es una función php, podemos usar guiones bajos en lugar de los guiones normales.
Asegúrate de copiar o escribir correctamente la función load_plugin_textdomain cuando tengas que hacerlo. Para el parámetro del dominio introduce el textdomain exacto que definimos anteriormente. Y para el parámetro de la ruta relativa del plugin introduce la ruta de la carpeta de idiomas que creamos anteriormente.
Ruta al Directorio del Plugin
Definamos ahora la ruta del directorio de nuestro plugin; añade este código:
1 |
define( 'your_addons', plugin_dir_path( __FILE__ )); |
Aquí estamos empleando your_addons como ruta para el directorio del plugin. Ni más ni menos; tenemos nuestro plugin creado, ahora es el momento de llenarlo con funcionalidades personalizadas.
Panel de Opciones del Tema
No usaremos este paso para ver cómo crear un panel de opciones para un tema–puedes crear uno a medida, o hacer lo mismo que nosotros; usar un framework para el panel de opciones específico. Si eres novato en cuanto a los frameworks para paneles de opción te recomendamos que leas los artículos de Bonang Salemane en la integración de Redux Framework en los temas:
Para añadir un panel de opciones del tema a tus addons copia la carpeta del panel de opciones, por completo, en la carpeta del plugin de addons. Ahora necesitamos solicitar algunos archivos para activarlo:
1 |
if ( ! class_exists( 'ReduxFramework' ) && file_exists( your_addons . '/optionpanel/framework.php' ) ) { |
2 |
require_once('optionpanel/framework.php' ); |
3 |
}
|
4 |
|
5 |
if ( ! isset( $redux_demo ) && file_exists( your_addons . '/optionpanel/config.php' ) ) { |
6 |
require_once('optionpanel/config.php' ); |
7 |
}
|
En este fragmento de código solicitamos al framework redux dos archivos principales: el archivo framework.php que gestiona la funcionalidad del panel de opciones, y el archivo config.php que es responsable para la configuración del panel de opciones. Los archivos de nuestros panel de opciones están ubicados en una carpeta "optionpanel" localizada dentro de la carpeta del plugin ninzio-addons. Hecho.
Funciones Personalizadas
Es momento de que incluyamos algunas fuentes personalizadas. Crea una archivo dentro de la carpeta del plugin, y nómbrala algo parecido a “addons-functons.php”. Coloca todas tus funciones a medida dentro de este archivo.
Algo que debes vigilar es usar siempre las convenciones adecuadas en cuanto a la forma de nombrar nuestras funciones. Usa nombres de funciones descriptivos con un prefijo único. Por ejemplo:
1 |
function your_addons_profile_social_links (){......} |
Justo después de los archivos del framework, solicita el archivo de tus funciones personalizadas:
1 |
require_once('includes/addons-functions.php' ); |
Widgets Personalizados
Y ahora, incluye algunos widgets personalizados. Crea una carpeta con el nombre "widgets" dentro de la carpeta del plugin de addons, coloca dentro de la carpeta todos los archivos de widgets. La forma de nombrar los widgets personalizados no es un aspecto crítico aquí, pero es recomendable que uses prefijos y guiones, no guiones bajos.
Por ejemplo, nuestro archivo del widget personalizado para Twitter se llama "ninzio-recent-tweets.php". De igual modo, nuestro widget para Mailchimp se llama "ninzio-mailchimp.php". Incluyámoslo de la siguiente forma:
1 |
require_once('widgets/ninzio-recent-tweets.php' ); |
2 |
require_once('widgets/ninzio-mailchimp.php' ); |
De nuevo, no vamos a ver el proceso de creación de widgets personalizados; por esto, revisa el artículo de Bonang Salemane:
Tipos de Entradas y Taxonomías Personalizadas
Si quieres añadir un portafolio, o eventos, o cualquier cosa similar a las entradas estándar de WordPress pero necesitas que sea una funcionalidad separada del tema, deberías usar tipos de entradas personalizadas. Todos nuestros temas tienen tipos de entradas personalizadas incluidas. Crear tipos de entradas personalizadas puede ser complicado, así que nuevamente esto se sale del ámbito de este tutorial, no obstante te recomiendo la siguiente lectura de Tom McFarlin:
Para los tipos de entradas personalizadas deberías crear una carpeta separada dentro de tu plugin de addons, por ejemplo "ninzio-projects". Y dentro de esa carpeta coloca todos los archivos relacionados con tus tipos de entradas personalizadas. Los archivos más importantes aquí son aquellos que crean los tipos de entradas personalizadas, el archivo single post, y el archivo loop/archivo del post. Nombra los archivos principales de tu tipo de entrada personalizada de la misma forma que hayas nombrado la carpeta de tu tipo de entrada personalizada, como "ninzio-projects.php". Pon el código de tu tipo de entrada personalizada dentro de este archivo, después para activar tu tipo de entrada personalizada tendrás que solicitar el archivo principal:
1 |
require_once('ninzio-projects/ninzio-projects.php' ); |
Cuando separas la funcionalidad de esta forma, deberías siempre tener en consideración a tus clientes–más precisamente, cómo podrán expandir/reescribir los archivos de las plantillas de tu tipo de entrada personalizada (archive y single). Supongamos que el nombre de nuestro tipo de entrada personalizada es "projects". El archivo single del tipo de entrada personalizada debería llamarse "single-project.php" y el archivo loop/archive debería llamarse "archive-projects.php".
Y si tu tipo de entrada personalizada también tiene taxonomías personalizadas, deberías además crear un archivo independiente para ellas. Llamemos al archivo de nuestra taxonomía "taxonomy-projects.php". Así que ahora tenemos tres archivos:
1 |
single-projects.php |
2 |
archive-projects.php |
3 |
taxonomy-projects.php |
Hagamos que se puedan sobreescribir. Añade estas tres funciones a tu archivo principal de addons.
1 |
function your_addons_projects_single_template($single_template) { |
2 |
|
3 |
global $post; |
4 |
|
5 |
if ($post->post_type == 'projects') { |
6 |
if ( $theme_file = locate_template( array ( 'single-projects.php' ) ) ) { |
7 |
$single_template = $theme_file; |
8 |
} else { |
9 |
$single_template = your_addons . 'projects/single-projects.php'; |
10 |
}
|
11 |
}
|
12 |
|
13 |
return $single_template; |
14 |
}
|
15 |
|
16 |
add_filter( "single_template", "your_addons_projects_single_template", 20 ); |
1 |
function your_addons_projects_archive_template($archive_template) { |
2 |
|
3 |
global $post; |
4 |
|
5 |
if ($post->post_type == 'projects') { |
6 |
if ( $theme_file = locate_template( array ( 'archive-projects.php' ) ) ) { |
7 |
$archive_template = $theme_file; |
8 |
} else { |
9 |
$archive_template = your_addons . 'projects/archive-projects.php'; |
10 |
}
|
11 |
}
|
12 |
|
13 |
return $archive_template; |
14 |
}
|
15 |
|
16 |
add_filter( "archive_template", "your_addons_projects_archive_template", 20 ); |
1 |
function your_addons_projects_taxonomy_template($taxonomy_template) { |
2 |
|
3 |
if (is_tax('projects-category')) { |
4 |
|
5 |
if ( $theme_file = locate_template( array ( 'taxonomy-projects.php' ) ) ) { |
6 |
$taxonomy_template = $theme_file; |
7 |
} else { |
8 |
$taxonomy_template = your_addons . 'projects/taxonomy-projects.php'; |
9 |
}
|
10 |
}
|
11 |
|
12 |
return $taxonomy_template; |
13 |
}
|
14 |
|
15 |
add_filter( "taxonomy_template", "your_addons_projects_taxonomy_template", 20 ); |
Cambia el nombre de estas funciones para tener tu propio prefijo. La lógica principal aquí es cargar los archivos de plantillas del tipo de entrada personalizada después de revisar si la copia de ésta está presente en el nombre de la carpeta. Cuando tu cliente copie la plantilla del tipo de entrada personalizada en el tema y lo amplíe o lo reescriba, tu plugin de addons cargará la versión del cliente del archivo del tipo de entrada personalizada. Así que en esta situación los archivos centrales del plugin de addons no se modifican, simplemente son ampliados por el cliente. Cualquier actualización futura de tu plugin de addons no eliminará las modificaciones realizadas por tu cliente.
Scripts Personalizados, Estilos y Shorcodes
Para scripts personalizados y estilos, recomendamos que crees carpetas separadas y pongas en cola los archivos de igual manera que lo harías en el archivo "functions.php" de tu tema.
Si tienes planeado añadir shortcodes, necesitarás crear e incluir tu archivo para los mismos dentro de tu carpeta de addons. Crea una carpeta con el nombre "shortcodes" y dentro de dicha carpeta crea un archivo "tuprefijo-shortcodes.php" (en nuestro caso: "ninzio-shorcodes.php"). En el archivo "-shorcodes.php" deberías colocar todos los shorcodes personalizados.
Como habrás imaginado ya, no vamos a cubrir en este tutorial el proceso de creación de shorcodes, pero te recomiendo la lectura del tutorial de Siddharth:
Incluyamos nuestro archivo de shorcodes personalizados
1 |
require_once('shortcodes/ninzio-shortcodes.php' ); |
Idiomas
Ya casi hemos terminado con el plugin de addons. Después de comprobar toda la funcionalidad personalizada es momento de crear el archivo de idiomas para que tu plugin pueda ser traducido.
Dirígete a la carpeta del plugin de addons > languages. Usa el software PoEdit (PoEdit es una plicación gratuita, disponible para Mac, Windows y Linux.) para crear el archivo de idioma. De nuevo, utiliza correctamente la nomenclatura; los archivos resultantes deberían llamarse exactamente igual que la carpeta del plugin de addons. Por ejemplo, el nombre de nuestro plugins es "ninzio-addons.php", y el archivo de idioma debería ser "ninzio-addons.pot". Este es el archivo principal que contiene todas las cadenas dentro del textdomain. A partir de este archivo puedes crear los archivos para el resto de idiomas.
Para traducir tu archivo de idioma del plugin de addons.
- Abre PoEdit.
- En PoEdit dirígete a File > New from POT/PO file…
- Selecciona y Abre el archivo pot desde la carpeta languages.
- Introduce tu nombre, dirección de email, tu idioma y país (p. ej. francés fr_FR, alemán de_DE).
- Pulsa el botón Update en la intefaz principal de PoEdit.
- Guarda el archivo, nómbralo algo como "filename-xx_XX.po" con "xx_XX" para tu idioma y país.
- ¡Ya está!
Conclusión
Ahora tu plugin está listo, ¡bien hecho! Hemos sacado toda la funcionalidad necesaria desde nuestros archivos de presentación, la hemos trasladado a un plugin que la empaqueta y que podemos actualizar para todos nuestros temas.
Espero que hayas disfrutado, no olvides que puedes pillar el ejemplo del plugin con addons empaquetados desde GitHub y usarlo como punto de partida.
