Timber by EMSIEN-3 LTD
Tags Posts tagged with "wordpress"

wordpress

0 470

Una de las funcionalidades de WordPress que cuando descubres y te acostumbras a utilizar te termina resultando imprescindible son los campos adaptados o custom fields. En este artículo repasaremos qué son y de qué manera podemos sacarle el mejor partido en nuestra web.

¿Qué son los campos personalizados?

Como su nombre indica, son campos de entrada de contenido personalizados, que podemos añadir al editor de nuestras páginas o entradas para poder introducir información de forma diferenciada.

WordPress por defecto ya soporta los campos personalizados. Seguro que los has visto en tus páginas o bien entradas:

ACF-campos-personalizados
Muchas veces, el tema o plantilla que empleamos trae estos campos predefinidos para precisar variables de estilo o bien funcionalidad.

El inconveniente es que la usabilidad de estos campos de WordPress es verdaderamente mala y trabajar con ellos puede llegar a ser muy incómodo y difícil. Por eso en este artículo vamos a usar un plugin gratis que nos va a facilitar mucho esta tarea: Advanced Custom Files.

ACF-AdvancedCustomFields

ACF nos deja crear y editar campos personalizados para nuestra página web de una forma muy visual e intuitiva.

¿Por qué deseamos utilizar campos personalizados?

Imagínate que quieres incorporar en tu web un directorio de empresas, de libros, cursos, profesionales, un portfolio, una lista de colaboradores, etc. Lo que sea se parezca a un listado de entradas que tengan un diseño homogéneo, con unos campos comunes en cada uno de ellos.

Está claro que podemos emplear una página estándar y también ir poniendo un factor debajo de otro, intentando que queden todas y cada una iguales. Pero conforme vayas añadiendo, la página será cada vez más y más extensa, poco práctica de visualizar. El usuario no podrá realizar búsquedas por campos concretos, no podrás ordenarlos de manera automática ni filtrarlos.

También podemos hacerlo con entradas, una para cada elemento, añadiéndolas todas a una categoría específica y así pudiendo filtrarlas y mostrarlas en una página distinguida del resto. Podrás emplear el editor visual para maquetarlo, procurando que queden todas y cada una lo más iguales posibles, pero tampoco podrás filtrar por los campos internos que precises ni realizar búsquedas avanzadas.

Si eres desarrollador y preparas una web para un cliente, todavía se acentuará más el inconveniente. ¿Cómo explicarle de qué forma debe hacer para introducir un nuevo elemento y que quede igual que el resto?

Los campos adaptados resuelven este inconveniente pudiendo crear la estructura de los posts o entradas que necesitas creando un campo para cada uno de ellos de esos datos que serán comunes en todos los elementos y que querremos recuperar para buscas o filtros.

Por ejemplo, en el caso de un directorio de cursos, necesitaremos campos para:

  • Título del curso
  • Descripción
  • Academia o formador del curso
  • Fechas
  • Tipo de curso (on-line / presencial)
  • Precio
  • Enlace para más información
  • etc.

¿Por qué razón no usar un tema que ya traiga esos campos adaptados?

Existen muchos temas o bien plantillas de WordPress concretos para un género de web que ya vienen con géneros de blog post predefinidos para, por ejemplo, portfolio, cartera de servicios, testimonios, etc. Aunque visualmente son muy atractivos y pueden parecer la mejor opción, no es lo más recomendado.

Los temas deberían limitarse a añadir diseño a nuestro WordPress, estilos como tipografía, colores, maquetación de posts, de layouts de páginas, sidebars, etcétera y deben dejar las funcionalidades para plugins, de forma que sea independiente una cosa de la otra, por el hecho de que en el caso contrario nos veremos atados a ese tema, y si en algún instante lo decidimos cambiar, perderemos toda la información que hayamos añadido en esos géneros de blog post y campos del tema.

¿Cómo crear campos adaptados?

Una vez instalado el plugin Advanced Custom Fields, vamos a tener en el menú la opción para crear los campos adaptados sencillamente.

Lo primero va a ser crear un grupo de campos personalizados. Podemos tener los grupos que queramos y detallar en que tipo de posts los desearemos usar. De esta forma podemos usar diferentes tipos de campos personalizados separados y agrupados para diferentes categorías o etiquetas.

ACF-FieldGroups

Podremos apuntar que ese conjunto de campos se aplique a un género de post, a una categoría, a páginas, a una categoría de página concretamente, asociarlo a una etiqueta, etc.

Las otras opciones que tenemos para el conjunto de campos es:

  • Orden: si tenemos múltiples grupos podemos elegir en que orden deben aparecer.
  • Posición: Si queremos que aparezcan tras el título, tras el editor visual o bien en la barra lateral.
  • Estilo: Si se mostrará los campos de este conjunto agrupados en una metabox (la típica caja del editor de WordPress que muestra campos dentro de ella y se puede disminuir al mínimo o desplegar) o no.
  • Ocultar: Qué campos de los que vienen por defecto con WordPress queremos que no se muestren en ese género de blog post o entradas.

Una vez establecidas las características genéricas del grupo, podemos iniciar a agregar cada entre los campos que contendrá

ACF nos pedirá los datos para cada uno de ellos de ellos: etiqueta, título, el género de campo, si es obligatorio o no, las instrucciones para rellenarlo, etcétera Dependiendo del género de campo que escojamos nos solicitará una información o bien otra.

ACF-campos

Además de los modelos más comunes, como texto, numérico, checkbox, e-mail o password, también podemos elegir algunos más avanzados, para anexar ficheros o bien imágenes, editor visual (wysiwyg), selector de data o de color. Otros tipos de campo singulares serían los de estructura, para agrupar campos en pestañitas o incluso de relación, para vincular el campo con otro artículo, una taxonomía, un enlace de página o un usuario.

Otra de las opciones que nos deja es mostrar el campo condicionalmente, esto es, que se muestre o no en función del valor de otro campo.

ACF-condicional

Por ejemplo, en el caso del directorio de cursos que veíamos, ¿qué tipo campos podríamos crear?

  • Título del curso -> podríamos utilizar de forma directa el título del artículo o bien crear uno personalizado de texto.
  • Descripción -> campo wysiwyg para poder darle algo de formato a la descripción.
  • Academia o bien formador del curso : podríamos crear un checkbox para distinguir si es una academia o bien un formador y otro campo de texto para el nombre.
  • Fechas : 2 campos de selector de data, uno para la inicial y otro para la fecha de finalización
  • Tipo de curso (en línea / presencial): en un caso así podríamos crear un select con opciones múltiples, por si acaso el curso se da tanto presencial como online
  • Precio : campo numérico
  • Enlace para más información: campo de url

Podríamos ademas añadir un campo condicional para en caso de que el curso fuera presencial nos mostrara un campo adicional para la dirección del centro donde se da, un campo de imagen para añadir el logo del centro, o bien un banner del curso, etc.

Determinando separadamente cada uno de estos campos nos dejará en la web, con algo de programación a la medida, crear filtros a fin de que el usuario pueda buscar el género de curso que más le resulta interesante.

Como podéis ver, las posibilidades para crear un gestor avanzado de contenidos son enormes merced a todas las opciones que tenemos al crear los campos adaptados.

¿De qué manera mostrar los campos adaptados en nuestra web?

Una vez creados los campos, lo interesante es poder introducirlos en nuestra página de manera que podamos darles un estilo determinado y que siempre y en todo momento se muestren de la misma manera.

La forma más fácil, mas asimismo menos práctica, es hacerlo a través de shortcodes dentro del editor visual de la entrada. Introduciendo el código [acf field=”nombre_campo”] se mostrará en nuestra página web el valor de ese campo concretamente.

ACF-shortcode

Pero si lo que buscamos con estos campos es poder maquetar y entregar un estilo concreto para mostrarlos, la opción de los shortcodes no nos servirá.

La segunda forma, es modificar el tema correspondiente introduciendo los campos y el html que queramos para poder personalizarlo. Para esto, deberemos editar el archivo de página (generalmente page.php, pero va a depender de tu tema) o de entradas (single.php o content.php, también en función del tema) y incorporar donde deseemos que se muestre el valor del campo el código correspondiente:

Es bien difícil generalizar, en tanto que cada theme o bien plantilla puede tener ficheros propios y especiales, con lo que deberemos buscar aquel fichero donde se muestre el contenido del post o bien consultar con sus desarrolladores a fin de que nos señalen cómo hacerlo.

Otra opción, muy recomendada, es combinar los campos adaptados con Custom Artículo Types, géneros de artículo personalizados donde podremos reunir todos esos campos que hemos creado.

Conclusión

Ya sea porque eres desarrollador y deseas facilitar la entrada de datos a tus clientes o pues estás desarrollando tu web y deseas ir un paso más allá en lo que se refiere a la organización de los datos y su forma de mostrarlos, los campos adaptados te pueden ser realmente útiles, y el complemento Advanced Custom Files te puede facilitar mucho el trabajo para llevar tu WordPress un paso más allá, personalizando cualquier plantilla que emplees, sin necesidad de que incorpore los modelos de entradas o bien campos que necesitas.

0 423

En este artículo veremos de qué manera podemos usar WordPress para crear aplicaciones web. Crearemos una aplicación que consiste en una encuesta con una pregunta y 2 respuestas para escoger.

Aquí podeis ver la aplicación:
http://wp.dinamiko.com/demos/encuesta

La aplicación la encapsulamos en un complemento, así la vamos a poder volver a usar en otros proyectos. Si os interesa descargaros el código, he preparado un proyecto en Github.

Es aconsejable planear la aplicación ya antes de iniciar a picar código, acá teneis los layouts front-end y backend de la aplicación.

Front-end
layout_frontend

Backend
layout_backend

A continuación vamos a ir comentando las partes que componen la aplicación:

  1. Modelo de datos
  2. Backend
  3. Front-end
  4. Ajax
  5. Validación de datos
  6. Crear registro en la base de datos
  7. Mostrar los datos en el front-end

1. Modelo de datos

Antes que nada es esencial examinar los datos de la aplicación, qué se va a guardar en la base de datos y cómo vamos a usar esos datos.

Dependiendo de los datos y funcionalidad de la aplicación veremos si podemos emplear funcionalidad nativa de WordPress, por ejemplo: custom artículo types, users…

En nuestro caso vamos a usar la próxima funcionalidad de WordPress:

El modelo de datos de nuestra aplicación:

  • id mediumint(9)
  • time datetime
  • respuesta VARCHAR(treinta)
  • email VARCHAR(cien)

Una vez tenemos definido el modelo de datos de la aplicación, vamos a crear una tabla en la base de datos de WordPress.

Información detallada aquí

Los 3 pasos básicos para crear una tabla en la base de datos son:

  1. Escribir la función que crea la tabla.
  2. Llamar a esta función cuando se activa el plugin.
  3. Crear una función de actualización para poder alterar la tabla en futuras versiones del plugin.

La función que crea la tabla en la base de datos:

Al activarse el complemento llamamos a la función que crea la tabla utilizando register_activation_hook:

La función que verifica si ha cambiado la base de datos:

Todas las incesantes (ENCUESTA_VERSION, ENCUESTA_BBDD_VERSION, …) las definimos en el fichero encuesta/encuesta.php.

Con esto ya tenemos incorporado que cuando se active el complemento nos cree la tabla en la de datos.

estructura_tabla

2. Backend

Vamos a crear la interfaz del administrador de la aplicación, para ello haremos empleo de 2 archivos: encuesta-table.php y class-encuesta-list-table.php

encuesta-table.php crea el menu en el adminstrador y carga la clase Encuesta_List_Table que crea la interface extendiendo la clase WP_List_Table.

Las 2 funciones esenciales en la clase Encuesta_List_Table son get_columns() donde definimos qué columnas mostrar y display_rows() que imprime las columnas.

Para verlo en funcionamiento podemos crear ciertos registros manualmente en la base de datos:
registros_list_table

3. Frontend

Para imprimir la aplicación en el tema vamos a emplear el shortcode [encuesta].

Este shortcode se imprime utilizando la clase Encuesta_Template_Loader, de esta manera es posible modificar la plantilla copiándola en la raíz en el tema en un directorio llamado encuesta por si queremos alterarla y que no afecte a futuras actualizaciones del plugin.

Aquí vemos la función que crea el shortocode [encuesta]

La plantilla con el formulario (templates/encuesta.php)

Para la validación front-end empleamos la librería jqueryvalidation.org, en nuestro caso necesitamos validar que tanto la respuesta como el correo electrónico no estén vacios y que el email sea válido.

Código validación frontend:

4. Ajax

Ya tenemos hecha la validación frontend, lo próximo que vamos a hacer es comunicar el formulario con el servidor, enviándole los valores de los campos del formulario, en este caso, los valores de la respuesta y el correo electrónico.

Para hacer toda la comunicación vamos a utilizar Ajax, lo primero que haremos es crear la variable ajaxurl (includes/encuesta-functions.php) que se marcha a imprimir en la cabecera:

Creamos la función que va a recibir los datos del formulario utilizando wp_ajax_(action):

Aquí la función que envía los datos y recibe la respuesta del servidor:

Si ahora enviamos el formulario, recibimos la respuesta del servidor:
envio_datos_formulario_ajax

5. Validación de datos

Para validar los datos de la aplicación, lo primero que vamos a hacer es agregar un wp_nonce_field al final del formulario.

Este nonce lo empleamos para validar que ciertamente los datos del formulario vienen de nuesto sitios y no de cualquier otro lugar.

Aquí vemos añadido el campo wp_nonce_field:

Añadimos la lógica en la función encuesta_ajax() para contrastar el nonce:

Añadimos validación longitud strings y si correo electrónico es válido:

6. Registro en la base de datos

Antes de crear el registro en la base de datos vamos a sanear los datos que recibimos del formulario utilizando las funciones sanitize_text_field y sanitize_email.

Una vez saneados los datos ya podemos crear el registro utilizando $ wpdb->insert.

Aquí vemos la función completa:

7. Enseñar los datos en el front-end

encuesta_resultados

Creamos el shortcode [encuesta-resultados] para enseñar el total de registros y el total de cada una de las respuestas.

Para obtener los datos vamos a crear dos funciones (includes/encuesta-functions.php):

encuesta_get_registros() que devuelve el total de registros de la tabla:

encuesta_get_registros_respuesta( dólares americanos respuesta ) que devuelve el total de registros del valor que le pasamos al factor dólares americanos respuesta:

Aquí vemos la plantilla que imprime los desenlaces (templates/encuesta-resultados.php):

Bien amigos, con esto concluimos el tutorial, espero que os haya gustado :)

0 324

Hace ya mucho tiempo que WordPress ha dejado de ser una pequeña plataforma de blogging para transformarse en el mayor sistema de administración de contenidos de la página web. Millones de webs están basadas en WordPress y su dominio en Internet es, a día de hoy, aplastante. La versatilidad y robustez de WordPress son 2 de los atributos que lo hacen ideal para prácticamente cualquier clase de proyecto (y ojo con todas y cada una de las novedades que están por venir, como la ya conocidísima API REST).

Ante estos números y perspectivas, no es de extrañar que haya tantísima gente interesada en ganarse la vida con él. Prácticamente cualquier perfil profesional tiene cabida en el planeta WordPress: bloggers, editores, diseñadores gráficos, programadores, freelancers, empresas de hosting… ¡todo el mundo es bienvenido!

Si también quieres hacerte un hueco en el ecosistema de WordPress y tu perfil es técnico (es decir, te resulta interesante aportar tu granito de arena a través de, primordialmente, complementos y temas), estás de suerte. En esta entrada te voy a resumir las herramientas indispensables que vas a precisar en tu día a día. ¿Comenzamos?

#1. El entorno

Lo primero que vas a precisar para poder desarrollar en WordPress es… ¡WordPress! Esto era obvio, ¿no? Para ello, tendrás que instalar la versión estable de WordPress (o bien alguna nightly build de desarrollo, según lo que quieras hacer) en un servidor y comenzar a trabajar en él. Esencialmente, tienes tres opciones para ello:

  1. Contratar un proveedor de hosting.
  2. Instalar WordPress en tu propio computador.
  3. Instalar WordPress en una máquina virtual.

La primera solución es, seguramente, la más fácil. Contratando un distribuidor de hosting que ofrezca WordPress te va a dar (probablemente) todo lo que necesitas para comenzar a desarrollar y no vas a tener ningún problema”: un servidor, una instalación de WordPress, una base de datos, acceso desde cualquier lugar (que para algo está en la nube”), etc.

Por desgracia, siento decirte que lo de no tener problemas” no es enteramente cierto. Cuando te pongas con el desarrollo de tus proyectos estarás de manera continua editando, añadiendo y suprimiendo los diferentes ficheros que los componen, y si tu instalación WordPress es recóndita te vas a ver obligado a acompasar por FTP tu copia local (donde trabajas) con la copia del servidor (donde haces las pruebas y verificas que todo funcione como es debido). Total, que lo que en un comienzo nos ahorraba algo de trabajo, al final se transforma en una pequeña pesadilla.

Desechada, puesto que, la primera opción, es hora de centrarnos en la segunda: tener WordPress corriendo en tu propio ordenador. En WPrincipiante ya hemos hablado sobre de qué manera instalar WordPress desde cero y, si bien es cierto que su instalación no es muy difícil, a mí me parece bastante aburrida y desganada. Hay un montón de cosas que tienes que hacer: instalar un servidor web, instalar un servidor de base de datos, instalar PHP, configurar los dos servidores, instalar WordPress encima de ellos con las credenciales que tocan… Vamos, que te tocará buscar y también instalar los conocidos LAMP (para Linux), MAMP (para Apple) o bien WAMP (para Windows) y cruzar los dedos a fin de que no haya problemas con la instalación o con las actualizaciones que lleguen.

¿Qué nos queda? Pues, efectivamente, la última alternativa que te he planteado: instalar WordPress en una máquina virtual. No te voy a mentir, esta solución asimismo lleva un cierto trabajo, mas en mi entender es la mejor de todas. Para esto, lo único que deberás hacer es instalar y configurar la máquina virtual Varying Vagrant Vagrants (VVV). Esta máquina virtual se apoya en la tecnología Vagrant (cuyo objetivo es ofrecer una forma de empaquetar y repartir ambientes virtuales que sean fáciles de configurar y portar, los que se ejecutan encima de sistemas de virtualización como VirtualBox o bien VMWare) para ofrecer un entorno de desarrollo orientado a WordPress.

Después de instalar e iniciar VVV, vas a tener un WordPress con perfección configurado y operativo sobre el que fundamentar tus desarrollos. Sencillamente accede a http://local.wordpress.dev y… ¡manos a la obra!

Esta solución tiene 3 grandes ventajas:

  1. Trabajas en local. No perderás el tiempo subiendo y bajando archivos de tu ordenador al servidor recóndito donde se ejecuta WordPress.
  2. No llenas tu ordenador de basura. Es fácil que cada vez que instalas una actualización de MySQL o bien PHP, las cosas dejen de marchar o bien que tu computador comience a llenarse con las distintas versiones de todo tu software. Si todo el software preciso para hacer marchar WordPress lo tienes en la máquina virtual, cuando te canses de él, borras la máquina y tu PC queda como nuevo.
  3. Te ahorras el problema de en mi ordenador funciona”. Si trabajas en equipo y todos utilizáis exactamente la misma máquina virtual, no hay duda de que lo que te funcione a ti les funcionará a tus compañeros y viceversa. ¿Por qué razón? Porque todos estáis utilizando exactamente la misma configuración: exactamente el mismo servidor web, exactamente la misma versión de PHP, exactamente la misma versión de WordPress… ¡Es excelente!

#2. Sistema de control de versiones

La segunda herramienta que vas a precisar sí o bien sí en tus labores como desarrollador es un sistema de control de versiones. Los dos sistemas más conocidos para llevar el control de versiones de tu código fuente son SVN y Git. El primero lleva ya bastantes años con nosotros y, en verdad, es el que utiliza el directorio de plugins y temas de WordPress.org. El segundo nació en dos mil cinco con la meta de transformarse en el sistema de control de versiones sobre el que desarrollar Linux, y desde ese momento ha ganado mucha popularidad. En verdad, actualmente Github es una de las plataformas más usadas para desarrollar y compartir proyectos de software libre y, como su nombre señala, emplea Git.

En esencia, los cuatro conceptos básicos que hay cerca de este tipo de herramientas son:

  • Seguridad. El hecho de poder subir nuestro código a un repositorio externo (como los que ofrecen Github o bien Bitbucket) nos resguarda de todo género de desastres. Si le pasara cualquier cosa a nuestro computador, el código estaría a salvo en ese servidor externo y podríamos recuperarlo en cualquier instante.
  • Mantener un registro de cambios. Conforme nuestro proyecto avanza, este va evolucionando y cambiando. Una gran ventaja de los sistemas de control de versiones es que nos da información sobre los cambios concretos que se han hecho sobre cualquier archivo. En otras palabras, vamos a poder ver sencillamente qué líneas se han añadido, cuáles se han eliminado y cuáles se han modificado.
  • Desarrollo distribuido. Otra ventaja de estas herramientas es la posibilidad de trabajar en equipo, permitiendo que múltiples personas contribuyan sobre un mismo repositorio. Seguramente, cada desarrollador de tu equipo va a trabajar en implementar una nueva funcionalidad o corregir un cierto bug, mas al final todo ese trabajo sumará al total del proyecto.
  • Fusión de versiones automática. ¿Te preocupa tener más de una persona tocando” el mismo código? Es normal que te preocupe, en tanto que no es bien difícil imaginar una situación en la que 2 personas han editado exactamente el mismo fichero y, al final, el trabajo de uno pisa” el trabajo del otro. Por fortuna, esto es algo que asimismo está contemplado en Git y SVN, y en la mayor parte de los casos las propias herramientas se ocuparán de solventar de manera automática el inconveniente.

En una entrada precedente expliqué de qué forma podíamos utilizar Git para administrar las copias de seguridad de nuestro WordPress. Si bien es verdad que el objetivo que pretendíamos conseguir era diferente (no es exactamente lo mismo producir copias de seguridad que controlar nuestro código fuente), la esencia es la misma: controlar las diferencias de una versión a otra, tener nuestro trabajo a salvo y poder recuperar/revisar archivos del pasado. Si te la perdiste, te recomiendo que le eches un vistazo, porque vas a poder ver con un tanto más de detalle los conceptos que acabo de mentar.

#3. Editores

Y llegamos al siguiente punto interesante de nuestra lista de hoy: los editores de código. Existen muchos editores y entornos de desarrollo integrados (IDE, por sus iniciales en inglés) con los que programar nuestros complementos y temas. En este punto poco te puedo ayudar, pues la elección de un editor o bien otro depende, en gran medida, de las preferencias de cada uno de ellos. Mas apacible, que no te voy a dejar solo en esta decisión.

Empecemos por ver algunas de las cosas que hay que tener en consideración en el momento de elegir un editor:

  • Soporte básico para PHP, JavaScript y CSS – Sintaxis y autocompletado. Si vas a desarrollar proyectos en WordPress, van a ser proyectos web. Conque es esencial que te familiarices con estas 3 tecnologías y que tu editor te asista con ellos. ¿De qué manera? Pues, básicamente, con el resaltado de sintaxis (palabras clave en un color, variables en otro, cadenas de texto en otro…) y con funciones de autocompletado (para que no te fatigues escribiendo).
  • Soporte avanzado para esos lenguajes. Tanto JavaScript como PHP son lenguajes interpretados (no necesitan ser compilados), con lo cual trabajar con ellos es muy ágil. No obstante, la primordial contraparte que tiene eso es que suele ser más difícil encontrar errores, pues desaparecen los errores que se advierten en tiempo de colección. Afortudamente, hoy día existen herramientas que analizan el código mientras que lo escribes y advierten muchos de estos errores:
    • PHP Lint. Puedes ejecutar PHP en modo lint (php -l), el cual se encargará de validar la sintaxis de tu archivo sin llegar a ejecutarlo.
    • PHP Code Sniffer. Dado un cierto estándar de programación, esta utilidad comprueba hasta qué punto el código fuente que escribes se ajusta a él. De esta manera, por servirnos de un ejemplo, si en WordPress se recomienda que los paréntesis de un if estén separados por espacios, algo como if( dólares americanos var) fallaría, pues no hay ni un solo espacio.
    • PHP Mess Detector. Otra herramienta de mis favoritas. Define un conjunto de reglas auxiliares (y complementarias) a las de Code Sniffer y te informa si tu código no las prosigue. Con esta herramienta, puedes advertir posibles bugs, identificar qué unas partes de tu código son demasiado complejas o descubrir partes sin usar.
  • Funcionalidades extra. Poder editar más de un archivo al unísono, saltar de la invocación de una función al archivo donde se define, poder refactorizar el código de manera rápida, definición y empleo de snippets de código para ahorrarnos repeticiones… Todas y cada una estas pequeñas cosas que utilizamos a diario pueden (y deberían) formar parte del editor que escojas. Si bien la curva de aprendizaje inicial pueda resultar un poco más dura, con el tiempo merecerá la pena.

¿Y qué editores incluyen este tipo de funcionalidades? Pues el abanico es bastante amplio y, como te decía, es algo que depende de cada uno… conque solamente voy a mencionar un par:

  • PhpStorm. Una auténtica pasada. En un caso así, se trata de un entorno de desarrollo integrado que incluye todas las funcionalidades que te he explicado y más. Debo reconocer que no lo he usado demasiado, mas lo poco que he utilizado me ha encantado. Por si fuera poco, es capaz de detectar cuando trabajas en un proyecto WordPress y adaptarse a las necesidades específicas de la plataforma.
  • Sublime. Un editor de texto muy elegante y eficiente. Sin barras de herramientas ni diálogos de configuración, invita a ser utilizado desde el primer instante. Cuando empiezas, es poco más que el típico Bloc de notas de un Windows, pero conforme tus necesidades aumentan, podrás llenarlo con plugins, trucos de autocompletado, atajos de teclado… un lujo para los techies modernos, aunque me quedo con el veterano vim.

#4. Recursos de desarrollo

WordPress tiene una comunidad de desarrolladores enorme detrás y eso se hace en especial plausible cuando uno empieza con sus desarrollos. En seguida te percatarás de que existen un montón de recursos orientados a ayudarte. Aquí tienes algunos ejemplos:

  1. Plugin Boilerplate. En WPrincipiante te contamos las nociones básicas que precisas tener para la creación de plugins. Entre las cosas que vimos fue este proyecto, que pretende servir como esqueleto sobre el que montar tu propio trabajo. Imprescindible echarle un vistazo (o, si lo prefieres, utiliza la modificación en la que estoy trabajando ).
  2. Less, Sass y CSSnext. ¿De qué manera puedes escribir mejores hojas de estilo? Simple, ayudándote de (alguna de) estas extensiones para edificar tus ficheros CSS. Las dos primeras herramientas son preprocesadores que, cada uno de ellos con su propia sintaxis, te permitirán acotar variables, anidar reglas, operaciones, manipular colores, etc. CSSnext es parecido, mas en lugar de montarse su sintaxis usa construcciones del (próximo) estándar CSS, de tal manera que no debes aprender un lenguaje nuevo”, sino más bien utilizar la próxima versión del que ya conoces”. En todo caso, herramientas todas ellas muy aconsejables.
  3. PhpMyAdmin. Es inevitable: cuando te pones a manipular WordPress, en seguida descubrirás que tienes que preguntar de qué manera están las cosas en la base de datos. Preguntas como ¿Se ha guardado bien este valor?” o ¿De qué forma me cargo esta alternativa y vuelvo a comenzar?” tienen su respuesta en la base de datos, así que ten algún programa a mano para acceder a ella y manipularla.
  4. WP-Pretty Debug. Cuando empiezan a salir inconvenientes con el código, es esencial hallar rápidamente que pasa. Y lo normal es ayudarse de pequeños chivatos en el código (a través de llamadas como var_dump). Por desgracia, estas llamadas, al renderizarse en el HTML de tu web, no son demasiado inteligibles. Con esta herramienta conseguirás hacerlo. Consejo PRO. Si utilizas VVV puedes entrar en la máquina virtual (con el comando vagrant ssh) y activar un debug bonito (xdebug_on)
  5. Plugins de Debug. Ciertos plugins de WordPress que deberías tener instalados y (cuando los necesites) activados son:
    1. Debug Bar Esta barra agrega información muy útil en tu escritorio, como por ejemplo el uso de cache, el total de queries, el tiempo de ejecución o la memoria utilizada.
    2. Theme Check Si te dedicas a la creación de temas, úsalo para verificar la calidad de tu trabajo. El equipo de revisión de temas de WordPress.org lo emplean para validar o bien rechazar un tema, con lo que tenlo cerca.
    3. P3 (Complemento Performance Profiler) Otro plugin que te ayuda a examinar el rendimiento de los plugins que tienes en tu WordPress y ver el impacto que tienen. Complicado pero muy potente.
    4. User Switching Te deja saltar de un usuario a otro sin tener que estar introduciendo usuarios y claves de acceso continuamente. Realmente útil si estás desarrollando una extensión cuyas funcionalidades dependen del rol del usuario.
    5. Simply Show IDs Si ya antes te decía que es bastante frecuente consultar la base de datos, considera que lo normal es hacerlo mediante los identificadores (el ID de una entrada, de una página, de un comentario…). Esta extensión hace explícitos todos esos identificadores, ahorrándote unos segundos de tu tiempo.
  6. Extensiones del navegador. Asimismo puedes instalar algunas extensiones en tu navegador que complementen la información que tienes de los plugins de debug:
    1. Herramientas de Desarrollador de Mozilla Firefox y Chrome Los 2 navegadores web principales disponen de un conjunto de herramientas de desarrollador para, por poner un ejemplo, editar el HTML y las hojas de estilo CSS de un sitios cualquiera o ejecutar sentencias JavaScript.
    2. MeasureIt . Una fácil y potente herramienta que te ayuda a medir la distancia que existe entre diferentes elementos en tu web. Indudablemente, un enorme aliado para cualquier diseñador de temas o responsable de la experiencia de usuario.
    3. WordPress Admin Bar Control . Si la barra de administración de WordPress te molesta mientras trabajas en alguna funcionalidad del front-end, instala esta extensión y vas a poder ocultarla cuando quieras.
    4. WPSniffer . Detecta el tema activo en la instalación de WordPress actual y el hosting que está utilizando. En especial interesante cuando, navegando por la web, hallas una página que te agrada y deseas saber qué tema emplea.

#5. Control de Calidad y Testing

Finalmente, me gustaría llenar la lista de hoy con algo que, por desgracia, casi absolutamente nadie incluye en sus desarrollos: el control de calidad y tests automatizados. La calidad de tu trabajo es vital si no quieres tirar por los suelos tu reputación. Y es que no hay nada peor que subir una nueva versión de tu plugin o bien tema al repositorio de WordPress y que sean tus usuarios quienes descubran que no funciona.

El ciclo de desarrollo de software es más o menos así:

  1. Tienes un conjunto de requisitos/funcionalidades que hay que incorporar.
  2. Escribes un poco de código para solventar una de esas funcionalidades.
  3. Lo pruebas.
  4. Si falla, procuras corregirlo y repites el paso 3.
  5. Cuando ya marcha, iteras sobre los pasos dos, 3 y cuatro hasta que tengas listos todos los requisitos.
  6. Pruebas que todo funcione como es debido y que no se haya roto nada.
  7. Subes el plugin a WordPress.org
  8. Y… ¿bug?

Es evidente que conforme tus proyectos van creciendo en tamaño y dificultad, es más y más fácil que un pequeño cambio en el código acabe rompiendo algo de forma inopinada. Y tener que comprobar manualmente que todas y cada una de las opciones de tu plugin continúan funcionando correctamente es imposible. ¿De qué forma puedes hacerlo mejor? ¡Con tests automáticos!

Un test automático es un pequeño código que comprueba que una cierta parte de tu programa funciona como se espera sin que tú debas hacer nada. Si generas suficientes tests como para contrastar todo tu plugin, vas a tener las espaldas bien cubiertas. Los tests suelen tener tres fases:

  1. Configuración. Preparas el entorno para que el estado inicial siempre y en todo momento sea exactamente el mismo (por poner un ejemplo, cargar una imitación de la base de datos donde solo hay una entrada en WordPress con un cierto título y un cierto ID).
  2. Actuar. Efectúas ciertas acciones para alterar el estado inicial (añadir una entrada, cambiar el título de otra, suprimir un comentario… lo que sea).
  3. Comprobar. Por último, verificas que el desenlace de las acciones efectuadas se corresponde con el resultado que aguardabas. De esta forma, por poner un ejemplo, si partías de un estado en que había una única entrada en tu weblog y la has borrado, el estado final debería ser que no existe ninguna entrada.

Para poder efectuar tests automáticos te invito a una herramienta llamada Codeception. Codeception es un framework PHP de testing que te permite crear y ejecutar un montón de tests de diferente tipo. Si quieres saber más sobre esta herramienta y cómo emplearla en WordPress, estate atento por el hecho de que pronto vamos a escribir una entrada sobre ella.

En definitiva…

El mundo del desarrollo WordPress es amplísimo. Existen multitud de herramientas y recursos que nos ayudarán y, al final, cada uno tiene que descubrir cuáles encajan mejor con su forma de trabajar. El día de hoy hemos visto varios ejemplos que, espero, te asistan en tu vida profesional. Y si ya eres un desarrollador experimentado de WordPress, dinos: ¿qué herramientas utilizas ? ¿Nos hemos olvidado de alguna esencial?

Imagen destacada de Moyan Brenn.

0 285

Si eres un ávido lector de contenidos en Internet, estoy convencido de que habrás visto que últimamente en muchas páginas te muestran estimaciones del tiempo que vas a precisar para leer sus artículos. Si esto te parece interesante y te gustaría añadirlo en tu web, estás de suerte en tanto que te explicaré cómo mostrar el tiempo de lectura de tus entradas en WordPress.

De media podemos leer de 200 a trescientos palabras por minuto

Lo primero que vamos a precisar para poder medir el tiempo que nuestros visitantes van a precisar para leer nuestras entradas es una métrica simple: el PPM, o cuántas palabras (de media) es capaz de leer en un minuto un adulto. Y la respuesta la podemos localizar directamente en la Wikipedia:

Adultos educados pueden leer a una velocidad de cerca de doscientos-trescientos ppm, a lo mucho cuatrocientos ppm para una buena comprensión. Investigadores han demostrado que una velocidad de 600 ppm puede lograr un entendimiento del 70 por cien , y un cincuenta por ciento de entendimiento a dos mil ppm.

Con esta métrica y con el recuento del número de palabras que tiene una entrada concretamente podremos conocer, mediante una simple división (y sin ser maestros de las matemáticas), una estimación del tiempo de lectura de nuestras entradas.

Por ejemplo, si escogemos una velocidad de 250 PPM y nuestra entrada tiene unas 1.500 palabras, estimamos que un adulto medio tardará 6 minutos en leerla (1.500 palabras dividido por 250 PPM).

Este mismo cálculo es el que utilizan las webs que muestran la estimación del tiempo de lectura. Si aguardabas algo más espectacular que una simple división, siento decepcionarte

El tiempo de lectura de tus entradas en WordPress

Para poder enseñar esta información en tus entradas en WordPress tenemos varias opciones. La más sencilla es directamente ir en pos de un complemento que nos sirva. Para ahorrarte trabajo he mirado los que puedes localizar en el directorio de WordPress. Estos son los desenlaces del análisis de los tres complementos más usados en el momento de redactar esta entrada:

Cualquiera de estos complementos te va a servir, en tanto que su funcionamiento es prácticamente idéntico. Y si quieres aprender de qué forma desarrollar complementos con WordPress, son un buen ejemplo con el que comenzar a estudiar, ya que el código que incluyen es muy fácil de entender y cortísimo. Ideal para WPrincipiantes.

Y si lo que quieres es directamente meterlo en tu tema sin usar complementos, puedes emplear la función que te dejo a continuación:

No tengas temor de probarla y meterla en tu tema. La función sencillamente consigue el contenido de una entrada, cuenta cuantas palabras hay y divide por el PPM que hayas indicado. A partir de ahí, edifica una frase con los minutos y segundos que va a tardar el visitante medio en leer la entrada.

Mostrar la estimación puede ser un arma de doble filo

Aunque puede parecer bien interesante ver el tiempo que tardarás en leer la entrada, es posible que aquellos más vagos/ocupados del lugar piensen que dedicar esos minutos a leerla no merezca la pena, prefiriendo ocuparse con otras labores y sin leer tu texto.

Por un lado, mostrar esta información puede proporcionar para atraer más lectores y aumentar el tiempo que pasan en tu página. Pero por otro, puede tener el efecto contrario. Lo mejor, como siempre y en toda circunstancia, es que lo pruebes. Si logras mejorar los resultados actuales, eso que has ganado. Y si, al contrario, pierdes lectores, solo debes quitarlo de tu web y quizá explicar tu experiencia para que todos aprendamos

Imagen señalada de zoutedrop.

0 267

Seguimos con nuestro tutorial para la creación de complementos en WordPress. En la anterior entrada te expliqué como es el esqueleto básico de un complemento y viste de qué manera crear tu primer complemento. Para refrescarte un poco la memoria, esto es lo más importante que debes tener en mente:

  • Los plugins se meten dentro del directorio wp-content/plugins. Cada complemento que crees va a estar adecuadamente organizado en su directorio: wp-content/plugins/mi-plugin-de-ejemplo.
  • Todo plugin debe tener por lo menos un archivo (mi-plugin-de-ejemplo/mi-complemento-de-ejemplo.php) con una cabecera estándar que señalará el nombre del complemento, el autor, la versión, etc. Esta información es la que entonces aparece en el Escritorio de WordPress » Plugins.
  • WordPress ofrece diferentes API para implementar nuevas funcionalidades mediante nuestro complemento. Una API no es más que un conjunto de funciones con una meta concreto. De esta manera, tenemos una API para widgets, otra para opciones, otra para plugins…

En la entrada de hoy vamos a ver una forma de vertebrar y organizar el código para facilitar su mantenimiento y entendimiento, y te explicaré 5 trucos para escribir mejor código.

Nuestro código de ejemplo

¿Recuerdas el ejemplo que creamos hace un par de semanas? Nuestro primer complemento extendía la información de una entrada cualquiera mediante lo que llamamos una Extensión del título”, un pequeño campo de texto que, en caso de tener algún valor, debería añadirse al título de la entrada. También vimos de qué forma agregar al editor de entradas una meta box que nos permitiera modificar la Extensión del título” de esa entrada.

Si seguiste los pasos que te di, deberías tener algo semejante a esto:

Problemas

El código precedente, si bien funcional, deja bastante que desear:

  1. Estamos mezclando un montón de conceptos en un mismo fichero. Por poner un ejemplo, lo mismo tenemos código para cambiar el título de una entrada en el front-end, como código que añade elementos gráficos a la página de edición de entradas, como una función que controla qué se guarda en la base de datos.
  2. No sólo estamos haciendo un ruido de funcionalidades, también estamos mezclando los datos y la lógica de nuestro plugin (incorporar una meta box o acceder a la base de datos) con la interfaz de usuario (el código HTML que pinta la meta box).
  3. Las diferentes funcionalidades están siempre y en toda circunstancia activas, aunque no se necesiten. El archivo incluye funciones que sólo tienen sentido cuando estamos en el Escritorio de WordPress y otras que solo tienen sentido si estamos viendo el front-end. No obstante, toda vez que se carga el plugin, se interpreta y ejecuta todo el contenido del archivo, de tal manera que se establecen hooks que pueden no ser necesarios en un momento determinado.

Cuando el código que manejamos es pequeño (como el del ejemplo), estos problemillas no pasan de ser eso, problemillas”. De hecho, simplemente con añadir algún comentario con gracia en nuestro archivo logramos un código fácil de comprender y proseguir, y el coste de cuatro funciones no es elevado.

Pero ahora imagina un plugin que va medrando, en el que añadimos ficheros JavaScript, hojas de estilo, más funcionalidades, páginas de configuración… Está claro que en ese caso necesitamos orden, precisamos una forma de organizar nuestro código tal que cada cosa tenga su lugar y un motivo para estar allí y no en otro lado.

Organizando mejor el código

Hace ya unos meses encontré un proyecto en GitHub llamado The Plugin Boilerplate. Este proyecto fue creado originalmente por Tom McFarlin (un desarrollador WordPress cuya forma de trabajar me agrada especialmente; si no le conocías y se te da bien el inglés, te recomiendo que le sigas) y que hoy día está mantenido por Devin Vinson y otros desarrolladores. Tal como puedes leer en la propia página de GitHub:

WordPress Complemento Boilerplate es una base estandarizada, bien organizada y orientada a objetos concebida para la creación de plugins.

Este esqueleto” cumple con las guías de estilo de WordPress, está realmente bien documentado y plantea una estructura de organización de archivos rígida y funcional. Conque si quieres aprender a crear buenos plugins, partir de esta base es un fantástico ejercicio de aprendizaje y mejora.

Como puedes imaginarte, el Plugin Boilerplate es genial para crear plugins de gran envergadura partiendo de una base sólida y bien pensada. No obstante, puede resultar complicado de comprender para un desarrollador WPrincipiante, con lo que hoy solo nos fijaremos en la organización de ficheros que plantea y veremos de qué forma aplicarla a nuestro ejemplo. ¡Pero deja de preocuparte! Prometo que pronto hablaremos de él con más detalle :-)

Nueva Estructura de Directorios

Volvamos a nuestro plugin. Recuerda que estamos partiendo de la próxima situación: en el directorio wp-content/plugins/wprincipiante-ejemplo/ tenemos un único fichero wprincipiante-ejemplo.php, el que contiene todo el código de nuestro plugin. Como acabamos de ver, esto genera una serie de problemas que podemos resumir en estamos mezclando demasiadas cosas”. ¿Cómo lo resolvemos? ¡Muy simple! Vamos a separarlas a fin de que cada cosa esté en su sitio. Para esto, vamos a crear la próxima estructura de directorios:

  • wprincipiante-ejemplo/admin/. Todo el código que esté alterando el Escritorio de WordPress (es decir, la zona de administración” de nuestro WordPress) va a ir dentro de este subdirectorio.
  • wprincipiante-ejemplo/public/. Parecido al caso anterior, cualquier código que manipule el front-end de WordPress va a deber ubicarse en public.
  • wprincipiante-ejemplo/includes/. Todo lo que no pueda ponerse en alguno de los 2 directorios precedentes deberá ir acá. Por ejemplo, un componente que se utiliza tanto en el front-end como en el Escritorio de WordPress deberá ser parte de includes.

Como ya te puedes imaginar, cada uno de ellos de esto 3 directorios puede contener, por su parte, múltiples directorios que ayuden a organizar todavía mejor el código. Si echamos una ojeada al Plugin Boilerplate, vamos a ver 3 directorios que me semejan bien interesantes para adminpublic:

  • admin/css/public/css/. Contiene las hojas de estilo que se emplean en el Escritorio o en el front-end.
  • admin/js/ y public/js/. Equivalente a los directorios anteriores, pero para ficheros JavaScript.
  • admin/partials/public/partials/. Sirve para guardar el código que es parte integrante de la interfaz de usuario (plantillas y demás).

Distribuir el código en la nueva estructura

¿Has creado ya la nueva jerarquía de directorios? Si es de esta manera, lo único que debes hacer es romper el código en componentes más pequeños y meterlos en el directorio conveniente. Veremos, paso a paso, cómo hacerlo.

Empezaremos con la vista del meta box. Ya hemos dicho que cualquier cosa que forme parte de la interfaz de usuario va a ir en un directorio partials y, como en un caso así se trata de un componente que forma parte del Escritorio de WordPress, deberá ir en admin/partials/. Este es el fichero que tienes que meter allí:

Fíjate que la plantilla que terminamos de crear utiliza una variable llamada  dólares americanos val que no está iniciada. Aunque pueda parecer un error, no se trata de ningún problema, ya que nos encargaremos de darle un valor cuando vayamos a usar la plantilla. De todas y cada una formas, para facilitarnos el trabajo futuro, agregamos un comentario al comienzo del fichero que nos recuerda que esta plantilla necesita esa variable, el tipo que debe tener y qué valor” se supone que contiene.

Una vez hemos creado la plantilla para mostrar la meta box, ahora necesitamos tener en algún lado el código que administra la meta box en sí. Si bien hay múltiples formas de hacerlo (las vamos a ver en futuras entradas), el día de hoy optaremos por una solución fácil y conceptualmente adecuada. En concreto, crearemos un archivo con una única función: administrar la meta box. ¿Qué quiere decir eso? Puesto que, esencialmente, que este archivo se encargará de registrar la meta box en WordPress (para que pueda mostrarse en el editor de entradas) y de guardar los valores que introduzca el usuario:

Con esta decisión, logramos un fichero que cumple un único acometido y que tiene perfecto sentido de forma aislada. Además de esto, como hemos separado el código HTML de la meta box de su gestión, ahora tenemos un código considerablemente más entendible (¡imagina que follón si la plantilla HTML hubiese sido un poco más grande!).

A continuación, tenemos que añadir el código que se hace cargo de modificar el título que nuestros usuarios ven en el front-end. Como ya puedes imaginar, este fragmento de código va a ir en public:

¡Perfecto! Ya tenemos todo el código con perfección distribuido. Si ahora echas un vistazo al archivo primordial de nuestro complemento (wprincipiante-ejemplo.php) verás que está vacío. Lógico, ¿no? Sólo hay un problema: si intentas usar el plugin en este estado vas a ver que nada marcha. Esto es debido a que WordPress sólo lee el fichero principal e ignora el resto. Te corresponde a ti, pues, incluir el resto ficheros según se necesiten:

Los 5 trucos para redactar buen código

Como puedes ver, crear plugins es un trabajo muy entretenido, en especial si deseas hacerlo bien”. Para completar la lección de el día de hoy me agradaría compartir contigo 5 consejos que ojalá alguien me hubiese dado cuando comencé Si consigues hacerlos tuyos y aplicarlos en tu cada día, vas a tener una base considerablemente más sólida y el resultado de tus proyectos será interminablemente mejor de lo que imaginas.

Truco #1. Prosigue las guías de estilo de WordPress

¿Qué prefieres? ¿Esto?

¿O esto?

Detalles tan fáciles como un espaciado e indentación correctos o bien usar nombres de variables y funciones que sean coche-explicativos puede tener un enorme impacto en la calidad final de tu trabajo. Si vas a dedicarte a programar para WordPress, te invito a que eches una ojeada a los estándares de programación que tienen para PHP, HTML, JavaScript y CSS. Familiarizarse con ellos te asistirá a escribir mejor código y, además de esto, conseguirás que se integre mucho mejor con el estilo de WordPress, facilitando el trabajo a otros desarrolladores WordPress que, probablemente, asimismo estén siguiendo exactamente las mismas guías.

Relacionado con esto, te recomiendo que escribas tu código en inglés. Creo que la mayor parte de programadores de alrededor del planeta son más o menos diestros con el idioma de Shakespeare, con lo que redactar y compartir tu trabajo en inglés hace que este pueda llegar a más gente. De hecho, es bastante probable que tarde o bien temprano trabajes con gente de otros países, así que vale la pena tener cierta soltura escribiendo tu código y tus comentarios en ese idioma.

Truco #2. Sé ordenado con el código fuente

La entrada de el día de hoy trataba precisamente de esto y el Complemento Boilerplate que he presentado es un buen ejemplo de ello. Simplemente recuerda las siguientes reglas y todo va a ser más fácil:

  1. Utiliza la estructura de directorios que hemos visto: las funcionalidades del front-end van al directorio public/, todas las de administración (esto es, Escritorio de WordPress) a admin/ y todo lo demás en includes/.
  2. Utiliza subdirectorios para clasificar mejor tu código. Hoy hemos visto, por poner un ejemplo, los de vistas (views/ y views/partials/), pero asimismo puedes crear directorios para los archivos JavaScript (js/) o bien CSS (css/). Todo esto, obviamente, respetando la estructura del punto 1.
  3. Aunque en nuestros ejemplos no lo hemos visto, es posible programar los plugins utilizando clases. Siempre que crees una clase PHP, hazlo en su propio fichero (el que, por cierto, no debe tener nada más).
  4. Cada fichero/clase debería representar una única funcionalidad (por ejemplo, en nuestro ejemplo hemos creado uno para la gestión de la meta box).
  5. Jamás mezcles la capa de presentación (el código HTML) con la lógica de tu plugin (es decir, el código PHP que recupera, procesa y guarda datos).
  6. Carga las cosas cuando sea preciso. Por ejemplo, si estás en el front-end, no cargues cosas del Escritorio (utiliza la función is_admin()).

Truco #3. Tómate la seguridad en serio

Un consejo que todo el planeta conoce y que, por desgracia, casi siempre y en toda circunstancia olvidamos. Es normal, en el momento en que te pones a trabajar en un proyecto nuevo quieres que las cosas funcionen lo ya antes posible… para entonces ya, si eso, preocuparte de la seguridad y la eficiencia.

¡Fallo! Tienes que tomarte la seguridad en serio. Si prosigues estas reglas, podrás garantizar un mínimo de seguridad y robustez en tu plugin:

  1. Siempre que vayas a pintar algo por pantalla, cerciórate de que está apropiadamente escapado. Para ello, familiarízate con funciones tales como esc_url, esc_attr or esc_html.
  2. Siempre limpia” (sanitize, en inglés) las entradas del usuario. Si estás aguardando que el usuario te introduzca un número, asegúrate de transformar su entrada en un número; si esperas un texto sin código HTML, elimina las posibles etiquetas con strip_tags.
  3. Utiliza nonces para contrastar formularios y URLs. Toda vez que recojas información de un formulario, debes comprobar que esa información realmente viene del formulario y que no es cosa que ha generado un agente externo malicioso. Esto se consigue por medio de los nonces, un número de seguridad que solo puede utilizarse una vez. Te invito a que leas más sobre ellos en el Codex.

Truco #4. Comenta el código

Los proyectos funcionan merced al código, no a los comentarios, ¿no? Por ello, puede parecer que es mucho mejor centrarse en escribir código que sea inteligible y pasar de perder el tiempo en comentarios que, en resumen, no sirven de nada”. ¿Para qué exactamente escribir código? Si partimos de la base que nuestro código es limpio y entendible, ¿qué aportan?

En mi opinión, los comentarios atrapan las intenciones del desarrollador (esto es, nuestras intenciones). Cuando escribes un fragmento de código se supone que estás procurando solucionar un problema. Describir cuál es ese problema y cómo piensas resolverlo es la función de los códigos. Los comentarios no tienen por qué decir qué hace el código; tienen que explicar qué procurabas resolver y de qué forma pensabas que podías solucionarlo. Con esta idea en la cabeza vas a ver que, de pronto, tu código (y el de los demás) es mucho más simple de entender, pues vas a poder recuperarlo en cualquier instante y comprender por qué las cosas son como son… recobrarás el contexto. Y eso siempre y en toda circunstancia mola, ¿no?

Cuando escribas comentarios, pues, intenta expresar tus pretensiones y objetivos. No te quedes en lo superficial:

e procura ir un tanto más allá:

Truco #5. Haz que tu plugin defina sus propios filtros y acciones

Una de las cosas que hemos aprendido durante estas 2 entradas es de qué forma usar los filtros y acciones de WordPress. Mas ¿sabías que puedes crear tus propios filtros y acciones? Es decir, que puedes preparar el código de tu plugin (o tema) a fin de que otras personas lo extiendan.

Para ello, lo único que debes hacer es definir exactamente en qué momento un complemento puede ser extendido (por servirnos de un ejemplo, cuando se activa, o cuando vas a alterar algo del front-end) y incorporar allí el código de extensión con las funciones do_action o apply_filters de WordPress. Usando este mecanismo, serás capaz de agregar mismo nuevas funcionalidades en tu plugin, enganchándote a esos puntos de extensión desde el propio complemento o bien creando plugins completamente nuevos que extienden y complementan al original.

Conclusión

Hoy hemos dado una pequeña vuelta de tuerca al ejemplo que hicimos en la primera una parte de este tutorial. Específicamente, hemos visto la importancia que tiene la estructura del código y de qué manera puede ayudarnos a sostener el código limpio, ordenado y entendible. Además de esto, hemos visto cinco trucos que debemos aplicar en el momento de escribir código. Te invito a que los interiorices y apliques a tus creaciones; tu yo del futuro te lo agradecerá

¡Espero que hayas disfrutado! En la próxima entrada te presentaré con más detalle el Complemento Boilerplate y otro esqueleto en el que estoy trabajando.

Imagen destacada de James j8246.

0 400

Si te has animado a montar tu propia web en WordPress, hay una serie de cosas que debes hacer tras la instalación, como gestionar usuarios o bien configurar copias de seguridad. Una cuestión muy importante en el momento de montar una web corporativa o bien tu weblog personal es la apariencia que tendrá. Seguramente te va a interesar modificar la apariencia por defecto de WordPress y adaptarlo a tu imagen corporativa o bien personal, mudando el esquema de colores, la tipografía, la estructura…

Como bien sabes, WordPress es una plataforma muy versátil que se amolda fácilmente a las necesidades de cualquiera. El día de hoy vamos a ver qué son los temas de WordPress y de qué manera, gracias a ellos, podemos lograr que nuestra página web se vea como deseamos.

¿Qué pinta tiene WordPress?

Originalmente, WordPress nació a partir de b2 cafelog, una plataforma diseñada para la creación de blogs. Si bien a día de hoy WordPress sirve para cualquier cosa, esos orígenes bloggeros” prosiguen siendo evidentes. Sencillamente hecha un vistazo a la apariencia por defecto de WordPress y en seguida vas a ver de qué hablo:

Twenty Sixteen
Twenty Sixteen va a ser el tema por defecto de WordPress para el 2016

En mi opinión, esta apariencia es un tanto aburrida… mas eso no desea decir en lo más mínimo que no se puedan montar weblogs atractivos en WordPress. Nuestra web, WPrincipiante, es un buen ejemplo de weblog WordPress con un estilo desenfadado y actual:

Captura de pantalla de WPrincipiante
WPrincipiante muestra un estilo desenfadado y actual.

A día de hoy podemos montar cualquier clase de web con WordPress. Y, obviamente, podemos adaptar absolutamente su interfaz de usuario. Si quieres hacerte una idea de todo su potencial, no tienes más que mirar el montón de ejemplos de webs hechas en WordPress que mis compañeros R. y Antonio compartieron hace unas semanas; todas tienen un diseño único y personal:

Ferrovial
Página web corporativa de Ferrovial

Y aquí otro ejemplo más:

Usain Bolt
Página web personal” de Usain Bolt

¿Qué es un tema?

La respuesta a esta pregunta la hallamos en el Codex de WordPress:

El sistema de temas en WordPress es una forma de darle apariencia a tu sitio. (…) Un tema de WordPress es una colección de ficheros que trabajan juntos para generar una interfaz gráfica con un diseño latente unificado para un sitio, [modificando] la manera en que el lugar es mostrado.

Así puesto que, un tema no es más que un añadido que instalamos en WordPress para alterar su look and feel; esto es, su apariencia. A continuación veremos dónde podemos localizar estos temas y cómo podemos instalarlos en nuestra página web.

Instalación de temas

Lo primero que tienes que hacer para instalar un nuevo tema en tu página web es, obviamente, elegirlo. En una entrada anterior, Ruth te explicaba los 4 pasos que debes proseguir para elegir tu tema y compartía un montón de información y pequeños trucos a tomar en consideración. ¡Veamos cómo podemos emplear nuestro nuevo tema en WordPress!

Añadir temas de WordPress.org

La primera fórmula para instalar y usar nuevos temas WordPress es usar el explorador y también instalador de temas que trae WordPress por defecto (los que, por cierto, están en WordPress.org). Para esto, sencillamente accede al Escritorio de WordPress » Apariencia » Temas y pulsa el botón Añadir Nuevo.

Explorador de temas integrado en WordPress
Explorador de temas integrado en WordPress

Además, mediante la opción Filtrar por características, podrás realizar búsquedas avanzadas para localizar el tema que mejor se adapte a tus necesidades:

Filtrar temas por características
WordPress te deja filtrar temas en función de las peculiaridades que ofrecen, ayudándote así a hallar más sencillamente lo que necesitas

Finalmente, dado un tema cualquiera, podrás darle al botón Vista Previa y ver qué pinta tiene. Desgraciadamente, la previsualización no se hace con tu propio contenido… para esto, deberías instalar, activar y (quizá) configurar el tema.

Buscar y añadir temas premium

Los temas que aparecen en WordPress.org son temas creados por la comunidad de WordPress. Ya antes de ser publicados en el directorio oficial, los temas pasan por un proceso de revisión. Este proceso comprueba que se prosigan los estándares definidos por el núcleo de WordPress y permite asegurar un mínimo de calidad.

El principal problema de los temas de WordPress.org es que sus autores son gente que los crea por amor al arte” y durante su tiempo libre. Si necesitas montar una web medianamente seria y, por cuestiones de presupuesto no tienes tiempo de hacer tú mismo el tema, necesitarás buscar temas premium. Los temas premium son temas creados por profesionales que se caracterizan, entre otras muchas cosas, por estar mantenidos de forma activa por sus autores, solucionar agujeros de seguridad tan pronto como se adviertan y estar muy bien documentados.

Si precisas localizar temas premium, te recomiendo las siguientes páginas:

Sea cual sea el lugar en el que al final compres tu nuevo tema, tendrás una interfaz de administración similar a la siguiente:

Captura de Pantalla de Theme Forest
Captura de Pantalla de nuestra cuenta en Tema Forest

Desde ella, vas a poder ver todos los temas que has comprado, comprobar si hay actualizaciones libres y, lógicamente, descargar el tema en cuestión. Veamos de qué forma instalar el tema en formato ZIP.

Subir temas desde el Escritorio de WordPress

En el apartado precedente, cuando estábamos seleccionando un nuevo tema desde la propia interfaz de WordPress, existe la posibilidad de subir un nuevo tema desde un fichero zip. Para ello, sencillamente (recordemos) tienes que acceder al Escritorio de WordPress » Apariencia » Temas, pulsar el botón Añadir Nuevo y, finalmente, darle a Subir tema. Desde allí, escoge el archivo ZIP que acabas de descargarte y súbelo al servidor.

Cómo subir un tema en WordPress
Cómo subir un tema en WordPress

Una vez subido, podrás previsualizarlo y, si te gusta, activarlo. ¡De este modo de fácil! Como ya te he comentado, recuerda que algunos temas requieren cierta configuración adicional para tenerlos a punto, con lo que no olvides leer la documentación para descubrir si hay que hacerlo y, si sí, cómo.

Subir temas desde FTP

Otra forma de subir los temas a tu servidor y que estén disponibles es a través del FTP. Para esto, descomprime el fichero ZIP que te hayas descargado y sube su contenido (que debería ser una única carpeta con el nombre del tema) al directorio wp-content/uploads/themes.

Cuando lo hayas subido, simplemente accede al Escritorio de WordPress » Apariencia » Temas y allá lo verás, listo para ser activado.

Un último apunte sobre la instalación de temas en WordPress.com

Si tienes tu página en WordPress.com, entonces tendrás algunas limitaciones. Concretamente, el servicio de WordPress.com no te deja instalar cualquier tema en tu web; simplemente puedes escoger alguno de los temas que aparecen en el propio Escritorio de WordPress. Alternativamente, asimismo puedes instalar nuevos temas desde el panel de administración de WordPress.com:

Panel de administración de WordPress.com
Panel de administración de WordPress.com

Como ves, instalar nuevos temas en WordPress es muy sencillo: basta con buscar el tema que queramos desde el propio navegador de temas del Escritorio o, si no es de WordPress.org, subir el fichero ZIP a WordPress y escoger el tema en cuestión. Una vez activado, posiblemente necesites configurarlo

Image destacada de Di_Chap.

0 314

Está claro que con el desarrollo explosivo de internet y los negocios electrónicos, el mercado cada vez es más competitivo y, naturalmente, el posicionamiento web en buscadores sigue siendo una prioridad para cualquier web en WordPress.

Por la relevancia del tema, esta es la primera de las 2 entradas que publicaremos sobre iniciación al SEO.

Aunque supongo que algunos conceptos más básicos los tenéis claros, permitidme iniciar un tanto desde cero sobre este tema.

¿Qué es el posicionamiento SEO?

SEO, o Search Engine Optimization por sus iniciales en inglés, es la estrategia y conjunto de tácticas concebidas para progresar las posiciones de un sitio web, o bien de una o varias páginas dentro de este, en los resultados de los buscadores web como Google, Yahoo o bien Bing.

Posicionamiento natural” o bien posicionamiento orgánico” son otras formas de referirse al SEO. Y el profesional posicionamiento SEO o bien Consultor posicionamiento web en buscadores es el que se dedica a la labor del posicionamiento web.

El posicionamiento web en buscadores nos ayuda a llevar más tráfico a nuestra página web y nos sirve para ir comprobando nuestra imagen y reputación en la red de redes. Sólo tienes que probar a poner el nombre de tu empresa o bien de tu producto en un buscador utilizando una ventana de incógnito y podrás revisar si los resultados que obtienes incluyen halagos o alguna crítica negativa.

Un poco sobre buscadores…

Rastreo (crawling)

Un buscador o motor de búsqueda es un sistema informático que busca ficheros almacenados en servidores web merced a su araña web”.

Spider net
Spider net

Ésta inspecciona las páginas web de forma metódica y automatizada, crea una base de datos que sirve de índice al buscador, examina enlaces de un lugar para buscar enlaces rotos y recoge información útil. Esto es, la tarea de una araña web es encontrar y conseguir los contenidos de todo Internet y transmitirlos a subsistemas de indizado. El índice de contenidos creado por la araña contiene las palabras que aparecen en las webs, su situación, y también información auxiliar relevante como el tamaño de fuente y la capitalización. También mantiene un índice de links, llevando un seguimiento de qué páginas apuntan a una página web concreta.

Google usa Googlebot como robot de búsqueda, el cual se dedica a buscar documentos en la web con la intención de construir la base de datos para el buscador de Google. Y no solo indexa webs (HTML), sino también extrae información de ficheros PDF, PS, XLS, DOC y ciertos otros más.

La frecuencia con la que Googlebot accede a un sitios depende de cuánto cambia la página y su PageRank, que vamos a explicar más adelante.

La arquitectura del motor de busca ha ido sofisticándose mucho en los últimos años y en el 2013 Google comunicó que usaban un nuevo algoritmo de búsqueda llamado Hummingbird desarrollado para ser más preciso y obtener más velozmente desenlaces. El algoritmo se fundamenta en búsquedas semánticas, y se centra más en las pretensiones de los usuarios que en búsquedas individuales. La verdad es que este cambio supuso que producir contenido original de forma continuada haya pasado a tener más relevancia que antes para Google.

Clasificación (Ranking)

El indexado no da información sobre la relevancia relativa de las páginas web que contienen un conjunto de palabras clave. Para determinar la relevancia de una página, todos y cada uno de los buscadores utilizar un algoritmo.

Google utiliza PageRank para decidir la relevancia de una web. Inicialmente tenía en cuenta los sistemas de ranking de publicaciones científicas y analizaba los backlinks generados por el usuario asumiendo que las páginas web enlazadas desde muchas páginas esenciales tiene probablemente más importancia. A partir de acá, Google da un valor numérico (entre 0 y 10) a la relevancia y popularidad” de una página. Si quieres conocer dicho valor de tu sitio web, encontrases muchas webs en los que lo puedes consultarlo, como por servirnos de un ejemplo en Page Range Calculator o bien Calcular Page Rank.

Hierachy

Lo es cierto que entonces Google ha ido incorporando muchos otros criterios y actualmente se sabe que hay más de doscientos indicadores diferentes que están muy bien mantenidos en secreto para dejarle a Google sostener una ventaja sobre sus contendientes a nivel mundial.

Por lo tanto, si bien nadie, excepto Google, sabe a ciencia cierta como garantizar un mejor posicionamiento, si que existen estrategias y técnicas consensuadas que deberías proseguir.

Estrategia de SEO

La estrategia posicionamiento web de un sitio web es algo complejo y hay que tener en cuenta que los resultados de aplicarla tardan entre seis y 12 meses en tener efecto. A lo largo de todo este tiempo, deberemos ir analizando los desenlaces y el impacto de nuestra estrategia en Google Analytics (o la plataforma de analítica web que elijamos). Desde el análisis, vamos a poder introducir los cambios precisos para ir efectuando mejoras.

Como ya hemos comentado, las palabras clave” son los términos de búsqueda mediante los cuales un usuario podría llegar a tu página web específica tras ponerlas en Google. Por esto es tan esencial, como una parte de la estrategia de posicionamiento web, primero determinar qué palabras son clave para llegar a nuestra página web. Como vais a ver a continuación, las palabras clave son las que hay que siempre y en todo momento ir teniendo presente para la estrategia posicionamiento en buscadores.

Dicho esto, los factores que afectasen a la optimización de posicionamiento web en buscadores por norma general se agrupan en dos: On-Page y Off-Page. Veamos qué es esto.

Optimización On-Page

Cuando hablamos de optimización On-page nos referimos a tratar de optimizar todos aquellos aspectos relacionados con el diseño y la estructura de nuestra página que asistirán a tener más información a las arañas sobre nuestra web.

La siguiente infografía de Brian Dean nos muestra la anatomía perfecta que debería tener una página optimizada:

Perfect On-Page SEO de Brian Dean
Perfect On-Page posicionamiento web de Brian Dean

Las doce claves que comenta Brian para tener una página perfecta para el posicionamiento web son:

  1. Las URLS de tus páginas han de ser cortas y contener palabras clave. Según Google las tres-5 primeras palabras de cualquier URL tienen más peso que el resto.
  2. El título posicionamiento web (title tag) es el factor más esencial en on-page SEO. Si el título comienza con una de tus palabras clave va a estar mejor posicionado que si las palabras clave están en la mitad del título.
  3. Añade contenido multimedia con información relevante. Y asegúrate de que tus imágenes están optimizadas para el posicionamiento web.
  4. Utiliza links a páginas relevantes. Este es uno de los aspectos que Google plus tiene presente para estimar que tu información es más o menos relevante.
  5. Incluye palabras clave en las 100 primeras palabras. Tus palabras clave deberían siempre y en todo momento aparecer entre las primeras cien-150 palabras de cualquier artículo. Ponerlas al comienzo, destacan su relevancia para dicho artículo.
  6. Los títulos de los artículos siempre habrían de estar con etiquetas H1. En el caso de WordPress no debes preocuparte en tanto que lo hace de manera automática con los títulos de entradas. Pero, por si las moscas, controla que no utilices un tema que justo lo cambie.
  7. Incrementa la rapidez de carga de tus páginas. El tiempo de carga también lo tiene en cuenta Google plus, y una investigación de Muchweb ha revelado que el setenta y cinco por cien de los usuarios que han percibido que el tiempo de carga de una página es superior a cuatro segundos, no vuelven a visitarla.
  8. Añade palabras específicas a los títulos que ayuden a posicionar mejor tus palabras clave en un largo plazo. Por ejemplo, las palabras 2015”, guía”, mejores” pueden asistir a progresar el posicionamiento.
  9. Utiliza botones de compartir en redes sociales. Una investigación de BrightEdge muestra que el empleo de botones multiplica por siete el que se comparta en redes sociales tus entradas y eso mejora tu posicionamiento.
  10. Crea entradas con contenido largo. Cuanto más largo sea el contenido mejor lo posicionará Google plus y por lo menos cada entrada de tu weblog debería contener 1500 palabras.
  11. Reduce al límite tu tasa de rebote (bounce rate), el número de usuarios que de forma rápida abandonan tu página web, en tanto que esta tasa es usada para señalar la calidad de tu web. Esto se consigue añadiendo backlinks internos entre entradas o bien páginas de tu página web, escribiendo contenido interesante e invirtiendo en un diseño atrayente de tu web.
  12. Añade palabras clave LSI (Latent Semantic Indexing) a tus entradas y páginas. Estas son palabras clave que están relacionadas con tus palabras clave principales. ¿De qué forma las hallas? La forma más sencilla es introducirlas en el propio buscador y ver qué palabras salen ahora o emplear Google+ Keyword Planner.
Buscando palabras clave LSI
Buscando palabras clave LSI de manera directa en el buscador de Google

Optimización Off-Page

Cuando hablamos de Optimización Off-Page nos referimos a progresar todos aquellos aspectos que nos pueden ayudar a tener enlaces externos y de calidad que apunten a nuestra página web. A este proceso se le llama Link Building.

Las técnicas más populares de enlace building hasta hacer dos años eran las siguientes:

  1. Directorios de blogs: conseguir que directorios conocidos de blogs tengan enlaces a tu web.
  2. Participación en foros: bastante gente hace comentarios en foros de discusión con el único propósito de lograr un link a su página web.
  3. Comentar en otras webs: igual que en los foros de discusión, puedes efectuar comentarios en otras webs y firmar aun no con tu nombre si no de forma directa con el nombre de una entrada clave a tu web.
  4. Directorios de artículos: procurar conseguir que en directorios de artículos que son clave de ciertos temas, incluyan tu página web publicada
  5. Directorios de contenido compartidos: ciertas webs te permiten publicar contenido en su página web a cambio de que agregaras enlaces a su web en el contenido.
  6. Esquemas de intercambio de enlaces: algunas empresas también acordaban tener links entre ellas para que Google plus las posicionara mejor.

Pero desde hace dos años Google plus comenzó a distinguir entre un buen enlace y un mal link, una gran mayoría de las técnicas anteriores están penalizadas por Google+ y, por tanto, no te invito a que las pruebes.

Según Google+, los únicos buenos links son aquellos que son naturales. O sea, si otra web se enlaza a la tuya, que sea por el hecho de que el contenido que has publicado está relacionado, es interesante y le ha gustado.

Por lo tanto, la mejor forma de atraer links es publicando contenido (texto, imágenes, vídeos, infografías, etcétera) que a otros les agradaría enlazar. Focalizarse en relevancia es laclave.

Las mejores técnicas que se conoce en nuestros días para progresar el Off-line posicionamiento web sin peligros son:

Crear contenido de mucha calidad que sea atrayente a fin de que otros lo enlacen.

[tweet Crea contenido de mucha calidad que se atrayente para que otros lo enlacen”]

Redes Sociales: incluye tus entradas en tu página web de Facebook (deberías eludir entradas automáticas). Todos los likes de tus fans o enlaces a tu página web son links buenos a tu página web. Lo mismo con tu cuenta de Google+, tanto la de empresa como la personal, con Twitter y con LinkedIn.

Envia boletín de noticias a tus lectores y asegúrate que incluyen el backlink a tus entradas y páginas.

Envía e-mails adaptados a tus lectores con enlaces a tus entradas a fin de que puedan promoverlos en las redes sociales.

Crea y fomenta infografías. Si son buenas, terminan teniendo considerablemente más links que otro género de contenido.

Asegurate de no tener links rotos en tu web. Penaliza de forma esencial el prestigio de tu web.

Aquí os muestro una gráfica de los resultados de un estudio realizado por Rand Fishkin de Moz sobre cuales han sido las tácticas de link-building más utilizadas en dos mil catorce en una encuesta a 315 profesionales responsables del SEO en sus empresas.

Tácticas de link-building más efectivas (los números son votos, no porcentages). Fuente: Rand Fishkin de Moz.
Tácticas de link-building más eficaces (los números son votos, no porcentages). Fuente: Rand Fishkin de Moz.

Y hasta acá por el día de hoy. En esta primera parte hemos querido explicar, de forma muy sencilla, los principios básicos del posicionamiento en buscadores. En la próxima entrada explicaremos qué complementos de WordPress nos facilitarán la vida para progresar y supervisar el posicionamiento en buscadores. ¡No os lo perdáis!

0 350

Recientemente te he explicado qué es y cómo funciona el loop de WordPress, y también de qué forma alterar el loop para lograr que se comporte de la forma en que tú quieras que lo haga, utilizando WP_Query entre otros muchos métodos para recuperar contenidos concretos de la base de datos.

Seguramente después de leer los anteriores artículos, te estarás preguntando cómo utilizar más de un Loop en WordPress y qué debes tomar en consideración para que no se rompa tu web. No hay duda de que el Loop se puede usar múltiples veces en tus temas y complementos. Como ya viste, esto facilita muchísimo el hecho de poder enseñar diferentes tipos de contenido en diferentes lugares de tu página web en WordPress. No obstante, tenemos que ser cuidadosísimos y continuar ciertas reglas para evitar problemas.

En este último artículo sobre el loop de WordPress te describiré aspectos más avanzados sobre su uso. Vamos a ver los loops anidados, de qué manera lograr loops multipasada y de qué manera reiniciar loops y así mantener tu página web sin fallos.

De esta forma, una vez comprendas estos últimos conceptos algo más complejos, vas a poder considerarte todo un experto en WP_Query y el loop de WordPress, y probablemente tendrás una mayor confianza al desarrollar tus temas o complementos, que es de lo que se trata. Sin más dilación, empecemos.

Loops Anidados

Los Loops anidados no son más que combinaciones de Loops unos dentro de otros. Se pueden crear dentro de un template de un tema utilizando, por ejemplo, el Loop principal al lado de instancias adicionales de WP_Query.

Como siempre y en todo momento es más simple comprender las cosas a través de un ejemplo, veamos cómo podemos crear un Loop anidado al Loop primordial para enseñar entradas relacionadas con una entrada concreta basándonos en las etiquetas de dicha entrada. El código es este:

En el fragmento anterior tenemos el Loop principal que viene dado (líneas 2 y tres). Para cada entrada en este loop mostramos la URL de la entrada y su título (ver the_permalink y the_title en la línea 6), tal como el contenido (ver the_content en la línea 8).

Además, obtenemos las etiquetas de la entrada con la función wp_get_post_terms (la tienes en el Codex aquí) y las guardamos en la variable dólares americanos tags (ver línea once). Si la entrada tenía etiquetas, cogemos los identificadores de las etiquetas y los guardamos en $ tagIDs (líneas trece a 20).

Por último, crearemos un Loop anidado dónde buscar entradas que tengan las mismas etiquetas que la entrada principal. Estas van a ser las entradas relacionadas que mostraremos ahora. Para esto, creamos una nueva instancia de WP_Query (ver línea treinta) y le pasamos el array de argumentos de la línea 24. Acá (líneas veinticinco a veintiocho) ponemos como condiciones que las entradas tengan las etiquetas cuyos identificadores están en dólares americanos tagIDs (tag__in on-line veinticinco) y que no sean la entrada principal (línea veintiseis, para eludir reiterar la entrada que ya hemos mostrado). Por si fuera poco, señalamos que deseamos que el desenlace se componga de un máximo de cinco entradas (condición en la línea veintisiete).

Ejecutamos el loop anidado (línea 30) y si hay desenlaces (línea 31) iteramos por el bucle de entradas relacionadas y mostramos un enlace y el título de cada uno de ellos de estas entradas (línea 36). Obviamente, podemos incluir las etiquetas en código HTML y el CSS que queramos para maquetar el diseño como mejor nos guste, pero la estructura básica para entradas relacionadas usando loops anidados es la que has visto.

Loops Multipasada

Una técnica avanzada para volver a usar Loops es emplear la función rewind_posts (que tienes acá descrita en el Codex). Esta función rebobina la consulta a la base de datos y el contador del loop, lo que nos deja hacer otro loop utilizando el mismo contenido que en el primer loop. Veamos un ejemplo dónde procesamos el Loop primordial un par de veces.

Hay que poner la función rewind_posts justo al final del primer bucle (ver línea siete), para que todo se rebobine y el segundo bucle pueda marchar tal como lo hizo el primero. Si no conoces el concepto de rebobinar, es que eres demasiado joven

Cómo Reiniciar Loops

Cuando modificamos el Loop primordial o creamos loops adaptados, suele ser aconsejable resetear el loop una vez hemos terminado. Esto lo podemos hacer de 2 formas distintas en WordPress: con wp_reset_postdata() y con wp_reset_query().

El primer método es utilizar wp_reset_postdata(). Esta función restaura la variable globaln $ post con el valor de la entrada actual en la consulta principal. Es el método preferido cuando empleamos WP_Query para crear loops adaptados.

Por ejemplo, imaginemos que definimos un Loop personalizado como el siguiente:

Vemos que este loop altera el Loop principal usando una nueva instancia deWP_Query con condiciones concretas. Para evitar que otros loops en exactamente la misma página se vean perjudicados por este, empleamos la llamada a la función wp_reset_postdata() al final de este loop (ver línea 10). Esto restaura la variable $ post y elimina problemas con el objeto WP_Query primordial.

El segundo procedimiento disponible para evitar inconvenientes al emplear múltiples loops es utilizar la llamada wp_reset_query(). Es el procedimiento preferido cuando empleamos query_posts() en nuestro loop personalizado.

En resumen, wp_reset_query() va siempre y en toda circunstancia tras usar query_posts en el loop y wp_reset_postdata() va siempre después de un loop que use WP_Query o la función get_posts() para recobrar datos. Si has tenido problemas alguna vez con múltiples loops, con estas dos funciones lo arreglas.

Repaso final

Y hasta aquí esta serie de artículos sobre el loop y WP_Query en WordPress. Recordemos brevemente todo cuanto hemos aprendido hasta ahora:

  • En la primera entrada hemos estudiado:
    • los pasos que prosigue WordPress para generar el contenido de una web,
    • la estructura básica de un Loop en WordPress,
    • el uso de Template Tags para mostrar contenido concreto en un loop,
    • y que el Loop es la conexión entre los datos que tenemos en la base de datos MySQL y el HTML que se renderiza en el navegador.
  • En la segunda entrada vimos:
    • cómo emplear WP_Query para crear loops adaptados,
    • qué parametros podemos usar para modificar el loop,
    • cómo usar query_posts() para alterar el loop de WordPress,
    • cómo usar get_posts() como opción alternativa a un loop para conseguir contenidos,
    • y cómo utilizar el hook pre_get_posts para modificar todos los loops de WordPress.
  • En esta última entrada hemos visto:
    • el empleo de loops anidados para recuperar información compleja desde una entrada,
    • cómo usar loops multipasada a través de el empleo de la función de rebobinado de loops rewind_posts(),
    • cómo resetear loops con wp_reset_query() y wp_reset_postdata() para evitar inconvenientes entre loops.

Ya ves que ha sido bastante duro. Si deseas más información, no hay duda de que debes ir al Codex. Te invito a que comiences estudiando más detalles sobre el objeto WP_Query. A partir de ahí vas a poder ir navegando y viendo todo cuanto he ido explicando en esta serie.

Y si te quedan dudas, no te lo pienses y escríbenos. Déjanos un comentario con tu inconveniente o bien con cuanto quieras que expliquemos en más detalle y también intentaremos ayudarte.

Imágen destacada de Randy Robertson

0 323

Te han encargado mudar cierta funcionalidad de WordPress y no tienes ni la más mínima idea de por dónde comenzar. ¡Menudo marrón! Te has descargado el código fuente y encuentras un montón de archivos en PHP. Y tu primera pretensión como programador es localizar dónde debes empezar a meter código para hacer lo que te han pedido. Primer fallo grave: nunca modifiques el código fuente de WordPress. De verdad, no lo hagas. La solución está en los WordPress Hooks.

Cómo bien sabes, o bien probablemente intuyes, WordPress se hace cargo de edificar las páginas HTML que puedes ver en tu navegador desde el servidor. Cuando llega una solicitud, se empieza el Loop de WordPress. Si deseas modificar estilos, deberás incorporar código CSS en los archivos de tu tema, pero si precisas cambios estructurales más contundentes deberás ir al código fuente.

Modificando el código fuente de WordPress
Este eres , alterando el código fuente de WordPress.

Modificar las líneas de código del núcleo de WordPress puede parecer atinado, mas ni muchísimo menos lo es. Primero por el hecho de que puedes romper muchas cosas, y segundo pues cuando actualizes a una nueva versión perderás los cambios muy probablemente, pues los ficheros del core se sobrescriben. Y además, ya sabemos que no actualizar es una muy mala idea.

Afortunadamente, los WordPress Hooks son un mecanismo que nos van a permitir modificar el código fuente de WordPress sin verdaderamente tocarlo. ¿Semeja algo imposible? Verás que no. Déjame que te lo pruebe.

¿Qué son los WordPress Hooks?

Simplificando al máximo, los Hooks de WordPress son puntos concretos en el código fuente de WordPress donde podemos conectar nuestras funciones para alterar determinados contenidos o bien comportamientos.

Como ya ves, la palabra hook puede traducirse como gancho, y en el caso que tratamos, estos ganchos nos permiten colgar funciones de ellos, como si se tratase de un abrigo en una percha. Al colgar (o bien enganchar) nuestras funciones en un hook (o gancho), cuando la ejecución de WordPress llegue a ese hook, nuestra función se ejecutará, haciendo lo que nosotros hayamos programado.

Action Hooks y Filter Hooks

Existen dos tipos diferentes de hooks en WordPress: las acciones y los filtros. Si bien ambos son conceptos muy parecidos en cuanto a la forma de usarlos, su comportamiento es diferente.

Las acciones (o Action Hooks) nos dejan ejecutar funciones propias, además de las funciones que ya se incluyen en el código de WordPress para tal acción. Los filtros, en cambio, nos permiten modificar una funcionalidad existente. Esencialmente podemos ver a las acciones y filtros como acontecimientos específicos que al ocurrir llaman a las funciones nuestras que les hayamos asociado.

La primordial diferencia entre acciones y filtros es que los filtros deben regresar un factor a la función original. Esto quiere decir que toman un factor del código sobre el que filtran, lo alteran de alguna manera y lo devuelven alterado.

Por otro lado, las acciones simplemente agregan código auxiliar al punto donde se enganchan, sin tomar en consideración qué más se está haciendo en ese punto.

Por ejemplo, si deseamos mudar el texto de una entrada, podemos incorporar una función propia a la acción publish_post (la tienes acá en el Codex) que modifique la entrada en el instante de publicarla. O podemos agregar una función en el filtro the_content (acá en el Codex) que modifique la entrada cuando se está a punto de pintar en el navegador del visitante.

No te preocupes si todavía tienes dudas entre acciones y filtros, seguramente se despejen cuando veas el código.

La estructura de un hook

Para delimitar una función y engancharla en un hook de WordPress, sólo debemos delimitar la función y utilizar la llamada add_action o add_filter, como vemos a continuación:

Ten en cuenta que add_action la usamos cuando deseamos engancharnos a un Action Hook, mientras que add_filter cuando deseamos engancharnos a un Filter Hook. No obstante, add_filter no es más que un alias a add_action (interiormente hace una llamada a add_action), con lo que podríamos utilizar siempre y en todo momento add_action y no pasaría nada.

Veamos los factores que admite la función add_action para definir el enganchamiento de tu función de un hook de WordPress específico (ver línea cinco del código anterior):

  • nombre_del_hook: El nombre de la acción o bien filtro específico de WordPress, e señala a qué acontecimiento asociar nuestra función.
  • mi_funcion: El nombre de la función que deseamos asociar con el hook concreto. Puede ser una función estándar de PHP, una función existente en el código fuente de WordPress, o una función que nosotros definamos (como sucede en el ejemplo precedente, líneas 2 a 4).
  • prioridad: Es un factor opcional usado para detallar el orden en el que la función asociada al hook se marcha a ejecutar. Es un valor entero (un número, vaya) y por defecto si no ponemos nada tiene un valor de 10. Apuntar un número más bajo indica que deseamos que nuestra función sea más prioritaria que otras. Si hay más de una función socia a un hook concreto y tienen exactamente la misma prioridad, se ejecutan en el orden en el que se hayan añadido al hook.
  • parametros: Es un parámetro opcional cuyo valor es un entero (otro número) que señala cuántos parámetros debe aceptar la función que asociamos al hook. Por defecto el valor es 1, aunque existen algunos hooks que pueden pasar más de una parámetro a la función.

Como lo mejor es ver ejemplos, vamos a empezar por agregar una función que mande un correo al autor de una entrada cuando esta se publica en nuestro WordPress. Empleamos la Action Hook publish_post que ya hemos citado antes y la función wp_mail que puedes ver aquí en el Codex:

Fíjate que asociamos la función notifica_al_autor al Action Hook publish_post mediante add_action. La función que hemos enganchado lo único que hace es una llamada a wp_mail para enviar un correo al autor de la entrada.

Y ahora veremos un ejemplo de filtro:

Como puedes intuir mirando el código, empleamos el filtro the_title que nos permite alterar el título de entradas cuando las devolvemos desde la base de datos de WordPress. En este caso enganchamos al filtro una función nuestra cuyo nombre es incluye_exclusiva que agrega el texto "¡Exclusiva!" delante de un título cuando la entrada pertenece a la categoría Exclusiva.

De este modo, hemos visto dos ejemplos de de qué forma modificar el comportamiento por defecto de WordPress sin tener que que tocar el código fuente del propio WordPress. La pregunta que seguramente te vas a estar haciendo es: si no puedo tocar el código fuente, ¿dónde he de poner el código de los hooks que hemos visto en los ejemplos para que funcione? Sigue leyendo para saber la respuesta.

Cómo implementar WordPress Hooks

Hay múltiples maneras de incorporar código que implementa funciones socias a hooks en WordPress. Primordialmente, podemos agregar este código dentro del fichero functions.php de tu tema, o bien incluso mejor, en un tema hijo. Así tus funciones estarán disponibles para ser ejecutadas.

Otra opción es crear un complemento nuevo dónde incluir estas funciones al lado de las llamadas a add_filter y add_action. Esto puede ser algo más complicado, si no sabemos trabajar con complementos, por lo que te recomiendo iniciar con el fichero functions.php. Tan sólo debemos ir a Apariencia » Editor dentro del Escritorio de WordPress y ahí elegir el tema que tenemos activo. Buscamos el archivo functions.php y agregamos el código que queramos, siguiendo las indicaciones explicadas en la sección anterior.

Tienes que tener dos cosas en cuenta cuando hagas esto. La primera es no equivocarte con la sintaxis PHP, en tanto que si escribes mal el código puedes tirar por los suelos tu web. Lo mejor para esto es bajarte por FTP el fichero functions.php a tu computador, guardar una copia sin ninguna modificación (por si las moscas) y editar una copia en local. Cuando hayas acabado y estés seguro que está bien, súbelo de nuevo por FTP y comprueba que todo marcha bien. Si te hubieras equivocado y tu página web no marcha, no pasa nada; vuelve a subir la copia original del archivo.

La otra cosa a tomar en consideración es que el nombre de la función que asocies a un hook debe ser único. Si empleas un nombre que otro plugin o bien tema ya utilice, vas a tener problemas. Con lo que acostumbra a estar bien añadir un prefijo ya antes del nombre de la función. Por poner un ejemplo, en la función precedente incluye_exclusiva podríamos usar mejor wprincipiante_incluye_exclusiva, ya que seguramente nadie más a parte de nosotros usará nombres de función que comiencen por wprincipiante_.

Por último, si queremos desactivar una acción o bien un filtro solo tenemos que llamar a las funciones remove_action o remove_filter:

En el ejemplo anterior vemos de qué forma desactivar la asociación entre los hooks y las funciones de los ejemplos que hemos visto ya antes. Y si deseas regresar a activar una función que hayamos desactivado, tan solo debes volver a hacer al llamada a add_action o bien add_filter. Tan simple como eso.

Solo un apunte más para acabar. Si al usar add_action o add_filter señalaste una prioridad diferente del valor por defecto de diez, al hacer remove_action o remove_filter deberás detallar el valor concreto para que la desactivación funcione. Y recuerda no eliminar nada a menos que estés seguro de lo que estás haciendo.

Para saber más

Este artículo no es más que una introducción básica a los hooks en WordPress. Si quieres entrar en más detalle en determinados aspectos, debes visitar el Codex de WordPress, donde encontrarás todo lo necesario para transformarte en un crack del desarrollo.

En específico, deberías echarle un ojo a las siguientes secciones del Codex:

Resumen final

En esta entrada has conocido los WordPress Hooks, y en concreto las acciones y filtros que nos dejan modificar el comportamiento de WordPress sin mudar el código fuente.

Tanto si piensas desarrollar o bien alterar temas de WordPress o si quieres crear complementos, los WordPress Hooks son los ganchos que te van a permitir incorporar código propio (engancharte) a ciertos puntos de la ejecución de WordPress, así como filtrar ciertos datos para alterar sus valores.

Además de ver de qué manera implementar hooks incluyendo nuestras propias funciones PHP, hemos visto de qué manera desactivarlos. Al principio trabajar con ellos es un tanto liado, pero con el tiempo todo es mucho más dinámico.

Para acabar sólo me queda reiterar que no toques el código fuente de WordPress de forma directa, sino que utilices los Hooks. Y si tienes dudas, siempre y en toda circunstancia las puedes describir en los comentarios, donde intentaremos asistirte a resolverlas.

Imagen señalada de haru__q.

0 315

Hará más o menos un par de años que tres compañeros (y amigos) míos decidimos probar suerte y tirar adelante una idea de negocio muy chula. Por cierto motivo, decidimos que la montaríamos encima de WordPress, aunque por aquel entonces no teníamos muy claro cómo funcionaba WordPress y de qué manera podíamos extenderlo… Todavía de esta manera, fuimos bastante audaces y nos tiramos a la piscina Como puedes imaginar, los primeros meses fueron moviditos”; debimos adquirir un montón de conocimientos en poco tiempo para poder empezar cuanto antes con el desarrollo. ¿Qué hicimos? Lo mismo que tú ahora: buscar y leer recursos y tutoriales en internet y escribir mucho, muchísimo código de prueba

Después de dos años trabajando solamente en el ecosistema de WordPress y de haber desarrollado varios plugins, he pensado que sería una gran idea compartir mi experiencia contigo y enseñarte de qué forma crear complementos en WordPress. Durante esta y próximas entradas, te voy a explicar todo cuanto necesitas saber para redactar buenos plugins, o sea, complementos que sean funcionales, extensibles y mantenibles. En cierto modo, puesto que, procuraré crear el tutorial que me hubiera gustado tener cuando comencé. Como verás, habrá poca teoría y mucha práctica… de tal modo que los conocimientos que vas a deber adquirir irán apareciendo a medida que los precisemos. ¡Espero que te guste!

En la entrada de el día de hoy aprenderás cómo:

  1. crear el esqueleto básico de un complemento,
  2. cambiar el título de todas y cada una de las entradas haciendo que muestren un texto fijo y
  3. hacer el cambio del paso 2 de forma selectiva (según lo que tú, como autor de una entrada, decidas).

Crear tu primer plugin

Crear un complemento para WordPress es extremadamente sencillo. Lo único que tienes que hacer es crear una nueva carpetita en el directorio wp-content/plugins/ y añadir un archivo con el código fuente. Por poner un ejemplo, crearemos un complemento que se llame wprincipiante-ejemplo. Para esto, crea la carpetita wp-content/plugins/wprincipiante-ejemplo/ y agrega un nuevo archivo dentro llamado wprincipiante-ejemplo.php con el siguiente contenido:

Si ahora vamos al Escritorio de WordPress » Plugins, vamos a ver que nuestro nuevo plugin Ejemplo de WPrincipiante aparece adecuadamente listado, con su versión, su autor, su descripción, links a nuestra web… Vamos, que WordPress está utilizando toda la información que hemos añadido en el comentario inicial de wprincipiante-ejemplo.php.

Cómo añadir alguna funcionalidad al plugin

¡Felicidades! Terminas de crear tu primer complemento, si bien por desgracia no hace completamente nada útil. WordPress ofrece diferentes APIs para incorporar nuevas funcionalidades. Ciertos ejemplos de estas APIs son:

  • Plugins API. Es la API más básica que debemos dominar para poder extender WordPress con nuestros complementos.
  • Settings API. Ofrece un conjunto de operaciones para crear páginas de configuración de nuestro complemento.
  • Options API. Permite guardar (y recuperar) las opciones de configuración de nuestro complemento.
  • Widgets API. Deja crear nuevos widgets que podrán añadirse a una instalación de WordPress y ser perceptibles desde el front-end.
  • y muchas, considerablemente más otras…

Hace dos días, mi compañero Antonio te explicaba con muchísimo detalle la API de Plugins. Esencialmente, aquí encontramos el concepto de hook. Como nos contaba Toni, los hooks son mecanismos que ofrece WordPress para permitir enganchar” las acciones de tu complemento a diferentes unas partes de WordPress.

Tu primer hook

Vamos a añadir un poco de funcionalidad al plugin. Añade el siguiente fragmento de código al final del fichero wprincipiante.php (no vuelvas a incluir la etiqueta <>; únicamente la agrego para que el código tenga destacado de sintaxis):

Si has activado el complemento y vas a tu weblog, vas a ver que todos y cada uno de los títulos de todas tus páginas y entradas incluyen el texto [Exclusiva]. De esta manera, por servirnos de un ejemplo, la entrada ¡Hola planeta! ahora es [Exclusiva] ¡Hola mundo!.

Vamos a examinar paso a paso lo que terminamos de escribir:

  • Función add_filter. Es, como te decía, el primer hook que usaremos. Acá, lo que básicamente le estamos diciendo a WordPress es que cuando se produzca el acontecimiento the_title (o sea, cuando WordPress esté a punto de redactar el título de una entrada o página), ejecute la función wprincipiante_cambiar_titulo.
  • Creamos una nueva función. Con la instrucción anterior le hemos dicho a WordPress que cuando se produzca el evento the_title deberá llamar a una cierta función. Esta función, no obstante, no existe por defecto, conque va a haber que crearla. Por si fuera poco, le hemos dicho (pues así está documentado) que la función deberá admitir dos factores ($ title e dólares americanos id). Vamos, pues, a crear esta función.
  • El cuerpo de la función. Por último, solo nos queda ver y comprender el cuerpo de la función wprincipiante_cambiar_titulo, el cual no tiene ningún misterio: simplemente le añade al título la cadena [Exclusiva].

Tipos de hooks: filtros y acciones

Recordemos que existen dos tipos de hooks:

Extender la información de las entradas

De momento, todo cuanto te he explicado ya estaba más o menos cubierto en la anterior entrada de WPrincipiante. Con esto ya tienes las nociones básicas para hacer prácticamente cualquier cosa en WordPress. Vamos a ver de qué manera ir un paso más allá y descubramos de qué manera utilizar ciertos recursos más de los que nos ofrece WordPress para hacer un complemento más potente. En concreto, vamos a:

  1. Modificar el editor de entradas. Añadiremos una nueva caja de edición en las entradas de WordPress donde podremos concretar un texto cualquiera. Este texto será específico de cada entrada (como lo son el título o el contenido) y va a ser una Extensión del título”.
  2. Guardar el nuevo campo. Modificaremos la información que WordPress almacena de una entrada y le añadiremos un campo adicional que nos dejará almacenar y recuperar esa extensión del título”.
  3. Modificar el título con ese campo. Vamos a hacer que los títulos de cada entrada incluyan la extensión guardada en 2.

Por ejemplo, imaginemos que tenemos dos entradas en WordPress:

  • ¡Hola Planeta!
  • Bienvenidos a mi blog

Nuestro objetivo es que el autor de una entrada pueda añadir el texto que quiera al título (por poner un ejemplo, WordPress mola” en la primera entrada) a fin de que, cuando un visitante acceda al blog, vea lo siguiente:

  • ¡Hola planeta! WordPress mola
  • Bienvenidos a mi blog

¿Empezamos?

Añadir la caja de edición (meta box) en el editor de entradas

Por defecto, esta es la apariencia que tiene el editor de entradas de WordPress:

Captura de pantalla del editor de entradas por defecto de WordPress.
Captura de pantalla del editor de entradas por defecto de WordPress.

Lo mínimo que cualquier entrada nos exige es un título y un contenido, y eso son las dos primeros campos de texto grandes que vemos. Cerca de esos dos elementos tenemos un montón de cajitas: Publicar, Imagen Destacada, Etiquetas, Extracto, Categorías Estas cajas se llaman meta boxes y nos permiten añadir información adicional a nuestra entrada (por servirnos de un ejemplo, una imagen señalada, una lista de etiquetas o bien las categorías a las que pertenece).

Veamos cómo puedes crear tu propia meta box. Para ello, bastará con efectuar una busca veloz en el Codex de WordPress para localizar una función llamada add_meta_box, la cual tiene todos los números de ser la que necesitamos:

Vamos a invocar esta operación para crear nuestra nueva meta box. Para esto, sencillamente hay que agregar el siguiente código:

Permíteme que te explique qué terminamos de hacer :-)

Para iniciar, fíjate que llamamos a la función add_meta_box desde una función (wprincipiante_add_meta_boxes) vinculada a una acción (add_meta_boxes). ¿Por qué razón todo este follón? Bueno, básicamente por el hecho de que la documentación nos dice que la función add_meta_box debe llamarse desde la acción add_meta_boxes, conque (a) detallamos un nuevo hook y (b) creamos la función asociada (wprincipiante_add_meta_boxes).

La documentación también nos dice que para crear una meta box hay que invocar la función add_meta_box con 3 parámetros: $ id, $ title y dólares americanos callback. Si miras la documentación sabrás qué es cada parámetro. El interesante ahora es el tercero, el que señala el nombre de la función que dibuja el contenido de la cajita. En nuestro ejemplo, la función es wprincipiante_print_extension_titulo_meta_box, y como la hemos dejado vacía, la meta box aparece asimismo vacía. Ve a la página de edición de entradas y lo verás:

Nueva meta box
Nueva meta box Extensión del Título” vacía.

Si deseas incorporarle contenido, sencillamente define el cuerpo de la función wprincipiante_print_extension_titulo_meta_box y escribe:

para conseguir esto:

Nueva meta box
Nueva meta box Extensión del Título” con un campo de texto que el usuario puede rellenar.

Guardar el nuevo valor

Usando la meta box que terminamos de crear podemos detallar qué texto va a haber que añadir en el título de una entrada cualquiera. No obstante, antes vamos a deber guardar este campo en la base de datos y hacerlo permanente.

WordPress nos deja añadir cualquier género de información auxiliar a una entrada dada por medio de lo que se conoce como campos personalizados. Lo que debemos hacer, pues, es utilizar las funciones que nos dejan manipular estos campos personalizados en el instante en el que la entrada se marcha a guardar:

Como puedes ver, estamos siguiendo el mismo patrón una y otra vez a lo largo de todo el tutorial de hoy. De este modo, usamos las acciones y filtros que nos ofrece WordPress para conseguir manipular lo que deseamos cuando queremos. En este caso, hemos creado una nueva función (wprincipiante_save_extension_titulo) que se ejecuta en el instante en que WordPress va a guardar una entrada en la base de datos (acción save_post). El código de esta función no tiene ningún secreto:

Añadimos ciertas comprobaciones de rigor. Esencialmente, miramos que no estemos guardando una copia automática y, en tanto que la función que estamos creando sirve para guardar el texto de la extensión de título, comprobamos que ciertamente ese texto está definido.

A continuación, cogemos el valor en cuestión y lo pasamos por una función sanitize. Esto es algo importante: siempre y cuando recojamos valores de los usuarios, habrá que pasarlos por una función de estas. Por ejemplo, si esperamos un número entero, hay que revisar que ciertamente nos ha pasado un entero.

  • Para recuperar el valor, accedemos a un array de PHP llamado dólares americanos _REQUEST. Este array contiene los valores que se hayan mandado al guardar la entrada y, específicamente, el del campo que hemos añadido en nuestra meta box. Para acceder a ese valor, basta con utilizar el nombre del campo (wprincipiante-extension-titulo) como índice del array.
  • Finalmente, guardamos el valor en un campo adaptado que hemos decidido llamar _wprincipiante_ejemplo_extension_titulo usando la función update_post_meta.
  • Ahora, toda vez que editemos y guardemos una entrada, el valor que hayamos introducido en el campo de nuestra meta box se va a guardar en el campo personalizado _wprincipiante_ejemplo_extension_titulo de la entrada en cuestión.

Ahora bien, si editas una entrada, le agregas un texto a ese campo y la guardas, vas a ver que el campo aparecerá vacío, tal y como si no se hubiera guardado apropiadamente. ¿Por qué pasa eso, si te acabo de decir que sí lo hemos guardado? Sigue leyendo y lo entenderás

Usar el nuevo campo en el front-end y en el back-end

Fijémonos un segundo en la función encargada de pintar el campo de texto, la que hemos definido antes:

Cada vez que pintamos el campo de texto input, este está vacío. Si deseamos que muestre el valor del campo personalizado _wprincipiante_ejemplo_extension_titulo, tendremos que recuperar ese valor de la base de datos. Así es como deberíamos haberlo hecho:

Para recuperar el valor del campo personalizado, sencillamente utilizamos la función get_post_meta con el identificador de la entrada y el nombre del campo en cuestión. Entonces, bastará con redactar el valor donde toque (en un caso así, en el atributo value value de la etiqueta input).

Fíjate que el echo no es directamente del valor $ val, sino que lo pasamos por una función llamada esc_attr. Esta función se encarga de escapar los caracteres que podrían romper el HTML resultante. Por servirnos de un ejemplo, si el valor del campo personalizado fuera:

  • Este es mi texto” favorito

y lo escribiéramos por pantalla de manera directa, nos quedaría el próximo value:

que, como puedes ver, se rompe pues hay demasiadas comillas dobles (semeja que el valor del atributo value sólo es Este es mi” y lo que viene después es… quién sabe, algo mal formateado).

En cambio, si usamos la función esc_attr, este es el resultado:

el cual marcha a la perfección (por el hecho de que las comillas dobles se han sustituido por ").

Finalmente, solo nos queda emplear esta cadena de texto en el front-end. Ya habíamos definido una función (wprincipiante_cambiar_titulo) que alteraba el título de nuestras entradas. Vamos a mejorar esa función a fin de que use el nuevo valor:

Como ves, volvemos a recuperar el valor usando la llamada que ya conocemos, verificamos que ese valor realmente exista para la entrada en cuestión y, si existe, lo agregamos al título.

¡Y eso es todo! Ya hemos hecho un complemento bastante completito en muy poco tiempo. Interesante, ¿verdad?

Resumiendo

Crear plugins no es excesivamente complicado. Hay que supervisar el conjunto de filtros y acciones que nos ofrece WordPress y emplearlos conforme los precisemos. De todas y cada una maneras, el código que hemos escrito hoy se puede prosperar muchísimo: estamos mezclando funcionalidades del complemento (código PHP) con la interfaz de usuario (contenido HTML), el código del front-end y del back-end está todo en el mismo fichero, todas las funciones son públicas… En la próxima entrada te explicaré de qué forma debes organizar el código y compartiré mis cinco trucos para redactar buen código.

¡Nos vemos la próxima semana!

Imagen destacada de mi portátil

ARTÍCULOS ALEATORIOS

0 584
Éste tutorial está indicado para los que están empezando en éste mundo y no tienen clarísimo por dónde empezar. Para sacarle mayor provecho al tutorial...