Capítulos
Ejercicios

ico WordPress WordPress
Sitios administrados con CMS

Luis Felipe Ramírez Varela
http://luis.ramirez.cl
luis@ramirez.cl
luisfel

Objetivo del capítulo:
Conocer los principios, funcionalidades y requerimientos de WordPress

Historia y contexto

logoo WPEntender la razón de ser de WordPress es entender su origen y motivación, más allá del uso que se le da actualmente.

Cerca del 2001 y viendo las apariciones de muchos sitios Web personales, Michel Valdrighi desarrollo una primera aplicación llamada B2/Cafelog basada en PHP y MySql para facilitar la administración de los contenidos de este tipo de sitios. En la misma época Matt Mullenweg y Mike Little desarrollan una variación del mismo y para 2003 se lanza como WordPress teniendo una tremenda acogida por su facilidad de instalación y manipulación de contenidos para hacer los nuevos Blogs.

La palabra Blog viene de una mezcla entre "web" y "log": "weblog", o sea un registro cronológico o bitácora (log) montado en la web para ser público y compartido.

Con WordPress se potencia esta capacidad de ir escribiendo un diario en línea y compartiendo las meditaciones de los usuarios con los lectores, a tal punto que los lectores pueden opinar con respecto al contenido publicado, dando un giro significativo en el camino de las comunicaciones de dos vías de manera asincrónica, en el brote de un movimiento de "blogueros" y los inicios de las ya famosas redes sociales y la mal llamada Web 2.0.

Las diferentes versiones que siguieron a su aparición ampliaron las capacidades y facilidad de personalización de la interfaz, integraron nuevos idiomas y el aporte de complementar con funcionalidades individuales y personalizadas a través de plugins o extensiones, hasta llegar a un punto en que se escapa de su objetivo inicial para convertirse, con en el uso, en un excelente administrador de contenidos Web o CMS (por sus siglas en ingles: Content Management System).

WordPress es un conjunto de página web de bajo costo de implementación ya que es de código abierto y de libre distribución (bajo licencia GNU GENERAL PUBLIC LICENSE), corre sobre servidores que soporten PHP (acrónimo de "PHP: Hypertext Preprocessor"), lenguaje de programación del lado del servidor y MySql, programa de base de datos, servicios que un gran alto porcentaje de los proveedores de hosting ofrecen en sus planes básicos.

Por otro lado, se destaca por una corta y rápida curva de aprendizaje en la administración de contenidos, haciéndolo ideal para que se involucren los diferentes actores comunicacionales de una empresa que no tienen conocimientos de programación o estructura de un documento Web, pero necesitan usar este medio como canal de difusión o interacción con los usuarios.

Si bien el concepto de bloguero está muriendo (Hernan Casciari: La muerte de los blogs), no así WordPress, que se expande con mayor fuerza para convertirse en un el CMS por excelencia para el montaje de sitios web tanto personales como institucionales o comerciales.

Características principales

Completamente estándar:
Se ha realizado un importante esfuerzo en hacer cada parte de WordPress compatible con los estándares de la W3C, esto es importante no solo por la interoperabilidad entre los navegadores de hoy, si no también por los navegadores de las próximas generaciones permitiendo una mayor durabilidad de los sitios de hoy.
No necesita Compilación:
Los cambios que se hacen en los contenidos o plantillas se reflejan en tiempo inmediato en el sitio, si necesidad de regenerar las páginas estáticas.
Paginas WordPress:
Esto permite manejar páginas fuera del concepto de blog.
Vínculos WordPress:
Los vínculos permiten crear, mantener y actualiza cualquier número de blogrolls (colección de enlaces de blogs) desde la interfaz de administración del sitio. Esto es mucho más rápida que llamar a una aplicación externa.
Temas WordPress:
WordPress viene con un sistema de incorporado de administración de temas, permitiendo el diseño personalizado desde los mas sencillos blogs a los más complicados de manera muy sencilla, incluso se puede tener varios temas, con presentaciones radicalmente distintas que se pueden cambiar desde el administrador con un clic.
Comentarios:
Los visitantes del sitio pueden dejar comentarios para cada entrada, con un sistema de administración para decidir activar o desactivar esta función y cuando hacerlo público o no.
Protección de Spam:
Incorporado desde su instalación WordPress viene con herramientas robustas cómo una lista negra y un verificador de proxy para manejar y eliminar comentarios Spam en los blogs así cómo una cantidad de plugins que pueden llevar esta funcionalidad más allá.
Registro de usuarios:
WordPress tiene integrado un sistema de registro de usuarios que permite, si se decide, a los usuarios registrarse y dejar mensajes autentificados en el blog. Opcionalmente se puede cerrar los comentarios a sólo usuarios registrados.
Publicaciones con acceso restringido:
Se puede asignar clave de acceso de manera individual a publicaciones en el sitio ocultando su contenido del público.
También se puede tener publicaciones que son visibles solamente por el autor.
Flujo de trabajo:
Se puede tener diferentes tipos de usuarios, algunos sólo pueden publicar borradores, requiriendo el visto bueno de un editor o administrador para hacerse público.

Páginas estáticas y dinámicas

Aquí vamos a hacer una pausa, ya que es importante entender las diferencias entre las páginas web estáticas y las páginas dinámicas para sacar real provecho de WordPress.

Una página Web o sitio Web lo podemos dividir en tres partes o capas:

Estructura:

Al igual que en los edificios, la estructura de una página web es el armazón que sostiene el todo. Escrito en lenguaje de etiquetas HTML, xHTML o mejor en HTML5, permiten determinar las zonas y tipo de contenido.

Así como de manera general se determina la cabecera de un documento a interpretar en los navegadores con <head> o el cuerpo con <body>, se puede determinar los títulos con la familia de los títulos (<h1>, <h2>, <h3>, etc.) o cuando algo es una lista con <ul>.

La estructura, por otro lado, permite una mejor indexación en los buscadores al entregarle tipo de información de su contenido y más semánticamente hablando, en le HTML5, la estructura nos permite interactuar dinámicamente con estas sección al tener una mejor connotación con los espacios habituales de una página Web.

Presentación:

La presentación es el cómo queremos que se vea en los navegadores, considerando además la multiplicidad de dispositivos de salida que existen, entre equipos de escritorio, tabletas y dispositivos móviles.

La presentación se controla con CSS, ya no dentro de la estructura o como parte de la estructura, si no por encima de la estructura, lo que permite pensar más allá del browser de escritorio en dispositivos móviles, tabletas, e incluso salidas impresas del contenido de nuestros sitios.

Afecta no sólo los colores y tamaños, si no que además la ubicación y posicionamiento de los elementos en el espacio de nuestro browser.

En un edificio sería el color de las paredes, la ubicación de los tabiques de separación o el tipo de alfombra en la sala.

Contenido:

La información que nuestro sitio va a mostrar. Tradicionalmente incrustado en la estructura, pero también lo podemos alimentar externamente, ya sea por consultas a Base de Dato con lenguajes de programación del lado del servidor o con Ajax, interpretando formatos como XML o JSON para alimentar las diferentes secciones.

Si seguimos con la analogía con un edificio, estamos hablando de los muebles del departamento, la música que suena en la radio.

Es precisamente en este último punto donde radica la principal diferencia entre las páginas dinámicas y las páginas estáticas: mientras una página estática tiene el contenido incrustado en el documento HTML, una página dinámica obtiene su contenido de una fuente externa y la incrusta dentro del documento, normalmente en el servidor, antes de entregar el documento al browser del usuario.

Visto de otra manera, si antiguamente teníamos una página de descripción para cada uno de nuestros productos, o sea una página estática para cada uno, diseñado y montado con el contenido dentro de la estructura, ahora podemos hacer una sola página y que su contenido se alimente en el servidor con el resultado de la consulta filtrada por alguna variable a una base de datos.

Ahora bien, para que puedan existir las páginas dinámicas del lado del servidor, se necesitan 3 elementos:

  • Un servidor que interprete la solicitud del cliente y que haga la relación con el módulo de programación.
  • Un lenguaje de programación que realice consultas y que ponga los contenidos en una página web.
  • Una base de datos que almacene la información y que nos permita recuperarla para utilizarla en la página.

Las ventajas de una página dinámica son incontables, partiendo por la mejor administración de los archivos de nuestro sitio, ya no son varias páginas, cada una con productos distintos, si no que solamente una, terminando en que ya no se requiere de conocimientos de HTML para que el cliente gestione y administre los contenidos de sus páginas a su propia necesidad y ritmo.

Este último punto es el destacable en el uso de WordPress, ya que viene desde su instalación básica con un sistema de administración de contenidos en una interfaz gráfica o simplemente CMS por sus siglas en ingles (Content Management System).

CMS y gestión de contenidos

Los sistemas de gestión nacen de la necesidad de usuarios no expertos en programación, base de datos o lenguaje de etiquetas, para poder alimentar y administrar los contenidos los sitios Web.

"Un sistema de gestión de contenidos es una interfaz gráfica que permite, de manera amigable, crear, editar, eliminar y publicar contenidos digitales en la Web."

wikipedia

Por lo general, es una interfaz que permite la relación del usuario con la base de datos, donde se realiza la persistencia de los datos, pero también hay los que trabajan directamente sobre páginas estáticas.

Ya hemos dicho que WordPress nació con un gestor de contenidos, ya que entendió, desde muy temprano, que la mayor parte de los usuarios tenía la necesidad de expresarse y tener presencia en la Web, pero que un alto porcentaje no tenía los conocimientos de los lenguajes involucrados.

Actualmente, WordPress cuenta con una interfaz que permite, en casi todos los browser, no solamente alimentar de texto la base de datos, si no que darle formato y estilos para su interpretación en los navegadores de los usuarios.

También tiene la capacidad de asociar imágenes y archivos multimediales a las entradas, con una curva de aprendizaje poco compleja.

Requerimientos y entorno

WordPress es una aplicación de servidor, esto quiere decir que se va a interpretar en el servidor web antes de ser entregado al usuario, por lo que el principal requerimiento es que el servidor esté habilitado para entender el lenguaje en el que está escrito y el software para almacenar los datos.

En este sentido WordPress se ha mantenido muy optimizado y tiene como único requerimiento que el servidor tenga instalado PHP versión 7.3 o superior y MySql versión 5.6 o superior o MaríaDB 10.1 o superior. Si consultamos con nuestro proveedor de hosting, nos vamos a encontrar que los requerimientos son sumamente básicos y ni siquiera son las últimas versiones de los software.

Por último, y no menor, necesitamos una copia de los archivos de WordPress. Siempre es buena idea comenzar con una instalación fresca para iniciar nuestros proyectos, con la última versión disponible que ya incluye mejoras, parches y sistemas de seguridad actualizados. Está se puede descargar gratuitamente directamente desde el sitio oficial (http://WordPress.org/download/)

Si descargamos esta versión, tenemos que tener claro que viene en ingles y que vamos a tener que meter mano en el código para incluir el idioma en español.

Una buena alternativa es descargar la versión ya en español (http://es.WordPress.org/download) que mantiene actualizada su versión traducida y nos evita pelear con los módulos de traducción.

Objetivo del capítulo:
Revisar la instalación de los servicios requeridos para la ejecución de los ejercicios de este manual, tanto para el sistema operativo Windows de Microsoft, como para OsX de Apple.

El primer paso que vamos a dar es la instalación de los tres servicios necesarios para poder ver y ejecutar los programas que hagamos en con nuestro Dreamweaver. Hay dos maneras de hacerlo:

La primera es ir a los 3 sitios de los servicios necesarios (apache.org, php.net y mysql.com) y bajar las últimas versiones de los distintos software. Hay que fijarse de bajar la versión para el sistema operativo en el que estamos trabajando.

Tiene varias ventajas, por un lado el tener las últimas versiones siempre permite sacar provecho de los nuevos desarrollos, aunque "muy nuevo" también significa que no ha sido probado lo suficiente, por otro lado, es una muy buena manera de saber lo que tenemos instalado en nuestro computador.

Cada uno de los instaladores viene con un README que tiene un paso a paso de cómo instalar y configurar dependiendo del sistema operativo, pero en su idioma original, inglés.

Hay que fijarse de instalar primero el Servidor Apache, después PHP y por último la Base de Dato Mysql, porque de lo contrario se puede complicar la configuración.

Si bien esta primera opción es la más lógica, también es cierto que puede ser un poco complicado para comenzar, aunque recomendable tarde o temprano.

Voy a partir del principio que se ésta trabajando en un PC con Windows o en un Apple con OsX. Como los sistemas operativos son distintos, vamos a enfrentar por separado las instalaciones en cada uno de los dos ambientes. Este es la única instancia donde haremos una diferencia entre ambos sistemas operativos, para el resto de los procesos tratados en este documento es transparente para ambas plataformas.

MAMP para Windows 7, 8.1, 10

MAMP (https://www.mamp.info/) lleva varios años realizando la tarea de instalar los 3 servicios que requerimos, si bien nació para el mundo Apple, ha estado desarrollando versions estables para Windows 7, 8.1, 10.

1Vamos a la página https://www.mamp.info/en/downloads/ y descargamos la últimaversión MAMP & MAMP PRO (en este caso la 4.11) para Windows

Página de descarga de MAMP

2Esta acción nos va a descargar un archivo EXE (software ejecutable) a nuestro directorio de Descarga, basta con hacer doble clic sobre el ícono para que comience el proceso de instalación.

Instalador de Windows

3La primera ventana nos ofrece instalar MAMP PRO y Apple Bonjour (para poder utilizar el visor de la versión PRO), MAMP PRO es la versión de pago, y para este curso no es necesario, por lo que podemos deseleccionar ambas opciones. Si estamos de acuerdo apretemos el botón siguiente "Next".

Instalación de MAMP-Pro

4En esta ventana nos recuerda la licencia de uso de la aplicación. Aquí seleccionamos "I Accept the agreement" y el botón "Next".

Licencia de instalación

5Aquí nos pregunta el lugar donde va a instalar el directorio "MAMP", salvo que tengamos un argumento claro, entendible y verbalizable por el cual no instalarlo en la raíz del disco principal, sugiero que lo dejes en la raíz de C:, tal como sugiere.

Directorio de instalación

6Esta ventana nos cuenta que va a generar un acceso directo en la barra de tareas (siempre útil). Cuando estemos listos, seleccionamos la opción siguiente "Next".

Acceso directo en el menú de inicio

7Esta ventana nos informa que va a generar un acceso directo a la aplicación en el escritorio. Si queremos el acceso directo lo dejamos seleccionado. Después seleccionamos el botón "Next".

Acceso directo en el escritorio

8Esta ventana nos hace un resumen de los directorios y accesos rápidos que va a generar. Si estamos de acuerdo seleccionamos "Install", si no queremos alguno de los elementos, podemos ir para atrás con el botón "Back" y volver a seleccionar o deseleccionar los componentes extras y volver a este resumen.

Resumen de lo que se va a instalar

9Comienza el proceso de instalación y nos muestra con la barra de estado el avance en el proceso y los archivos que está instalando.

Proceso de instalación

10Una vez terminado el proceso nos muestra la pantalla final de instalación. Ahora seleccionamos el botón "Finish" y hemos terminado con la instalación en Windows.

Termino de instalación

Windows 7 y 8

Hace un tiempo que me topé con varias aplicaciones de distribución gratuita escritas para Windows, que instalan y configuran los 3 servicios en un sólo ejecutable.

Una de ellas es XAMPP, desarrollado por ApacheFriends (https://www.apachefriends.org/index.html), para facilitar el proceso de instalación de los 3 servicios que requerimos. Desde la página Web se puede descargar la última versión ejecutable (exe).

Como toda aplicación instaladora de Windows, basta con un doble clic en el icono del ejecutable descargado y abrirá una ventana con el paso a paso a seguir.

1 La primera pantalla nos da la bienvenida, aquí tenemos 2 opciones, o seguimos (next) o cancelamos la instalación y dejamos hasta aquí el proceso (cancel).

La primera pantalla nos da la bienvenida

2 La Segunda interfaz nos permite seleccionar los servicios a instalar. Junto con el servidor Apache (que es predeterminado), permite instalar FileZilla FTP, un servidor de FTP que no necesitamos para los efectos de este curso, TomCast, un servidor Web, tipo Apache, que permite correr otros lenguajes de programación, que por ahora no necesitamos, y Mercury Mail Server, un servidor de correo.

También permite instalar Perl, como otro lenguaje de programación para hacer CGI (en inglés Common Gateway Interface) que no vamos a ocupar en este curso.

Al final hay tres aplicaciones, phpMyAdmin, que nos entrega una interfaz gráfica para interactuar con la Base de datos. Webalaizer que permite la interpretación de los registros de actividad del servidor (Logs) y Fake Sendmail, que simula un servidor de correo Sendmail.

De estas opciones necesitamos:

  • Apache
  • MySql
  • PHP
  • phpMyAdmin

Una vez seleccionadas, vamos a la siguiente pantalla (next).

Seleccionar los servicios a instalar

3 En esta pantalla nos permite seleccionar el disco y directorio donde se van a instalar los programas y servicios seleccionados. De manera predeterminada ofrece la instalación en el directorio xampp de la raíz del disco (C:\xampp). Es buena idea instalar el servidor en la unidad principal (C:\) y, a menos que se tenga una razón justificable, también es buena idea dejarlo en el directorio que sugiere el instalador.

Le damos a la opción Siguiente (next).

Seleccionar el destino de la instalación

4 En esta pantalla nos recuerda que hay una aplicación que se llama Bitnami, una programa modular que interactua con XAMPP para facilitar la instalación de diferentes aplicaciones openSource como WordPress, Drupal, Moodle, etc.

Seleccionamos Siguiente (next).

Presentación de Bitnami para la instalación de CMS

5 Esta pantalla nos dice que está lista para hacer la instalación con los parámetros seleccionados. Le decimos Siguiente (next) para comenzar el proceso de instalación.

Listo para hacer la instalación

6Aquí comienza el proceso de instalación e interacción con el sistema operativo. No hay mucho que hacer más que esperar a que termine de descomprimir todos los archivos.

Proceso de instalación

7 Una vez terminado el proceso de instalación nos muestra esta pantalla. Aquí nos permite seleccionar si queremos arrancar los servicios (Control Panel) y dar por terminada la instalación (Finish).

Dejemos seleccionado el arrancar los servicios y apretemos Finish

Termino del proceso de instalación

8 Se debería abrir el centro de control (Control Panel) de XAMPP. Una aplicación que nos permite controlar los servicios activos y su configuración básica.

En esta etapa, es importante arrancar el servicio de Apache. Para eso seleccionamos el botón Start al lado del módulo de Apache.

Toma un poco de tiempo, pero una vez arrancado, se pone Verde el fondo del texto Apache y el registro de actividad, en la parte inferior, nos dice que Apache está corriendo.

Control Panel de XAMPP

Veamos un poco que fue lo que instaló XAMPP. Si es que dejamos la configuración predefinida, enC:\xampp deberíamos tener varios directorios con los programas y configuraciones que va a requerir para hacer de servidor. El directorio que más nos importa a nosotros eshtdocs

Es en este directorio donde Apache va a buscar el material para "servir", o sea que las páginas Web que queramos mostrar o procesar tendrían que estar dentro de este directorio. Es importante recordar esto ya que Dreamweaver debe saber dónde está esta ruta para poder procesar las páginas dinámicas que generemos.

Archivos instalados en C:

Sea cual sea el método que ocupemos para la instalación de los servicios, la prueba de fuego está al momento de abrir el browser de navegación y poner la dirección http://localhost/.

Si tenemos el servidor correctamente corriendo, inmediatamente veremos una página de verificación de apache o de bienvenida XAMPP para Windows, o sea, no sale a Internet, busca el servidor en nuestro computador y entrega la página principal de nuestro directorio htdocs , que a su vez, direcciona a la página index del directorio xampp dentro de htdocs .

XAMPP for Windows, página de inicio

Nota:
Puede ser que en algunos casos al abrir la página con la dirección http://localhost automáticamente nos diga que no encuentra la página default.asp . No es para asustarse, esto quiere decir que está configurado y corriendo el servidor nativo de Windows (IIS) y que hay que detenerlo desde el panel de "control/herramientas administrativas/servicios" para que no choquen dos servidores en la misma máquina con el mismo nombre localhost preguntando por el mismo puerto.

Si se logra proyectar un poco, y ya tenemos una red en la oficina o la casa, donde las IP de los computadores son fijas, ya tenemos configurada una Intranet y todos los computadoras de la red pueden solicitar una página web al nuevo servidor.

MAMP para Apple OS X

El sistema operativo OS X está basado en una de las distribuciones de BSD Linux, por lo que ya viene configurado el servicio de apache, pero los otros servicios hay que instalarlos.

Al igual que en windows, existen instaladores todo en uno, parecidos al appServ, como el MAMP ( http://www.mamp.info/ ). Esta aplicación se ejecuta de manera paralela a la aplicación Apache que viene configurado en el sistema.

1Vamos a la página https://www.mamp.info/en/downloads/ y descargamos la últimaversión MAMP & MAMP PRO (en este caso la 5.7) para Apple

Página de descarga de MAMP

2Esta acción nos va a descargar un archivo PKG (software packages), basta con hacer doble clic sobre el ícono para que comience el proceso de instalación.

Instalador de OsX

3La primera ventana nos da la bienvenida y nos dice que el sistema nos guiará por los pasos necesarios para instalar la aplicación.

Pantalla de bienvendia

4En esta ventana nos advierte que se instalarán dos directorios: MAMP y MAM PRO y nos advierte que no debemos mover MAMP del directorio de aplicaciones o cambiarle el nombre ya que perdería todas las capacidades de conversación.'

MAMP PRO es la versión pagada de MAMP y sumamente dúctil si es que se quiere hacer la inversión y el MAMP, a secas, que es la versión de distribución liberada, un poco más limitada, pero perfecta para nuestros requerimientos.

Ruta de intalación y alerta

5La siguiente ventana es la clásica ventana de acuerdo de licencia. Al darle continuar (continue), nos vuelve a pedir el acuerdo de licencia. Seleccionamos Agree y vamos al siguiente paso.

Acuerdo de licencia

6Esta ventana nos permite seleccionar en qué unidad lo queremos instalar. Una vez seleccionado le damos continuar con "Continue".

Espacio de disco requerido y selección de unidad de  instalación.

7Esta ventana nos advierte del espacio de disco que va a ocupar. Aquí podemos comenzar el proceso de instalación directamente al decirle "install" o podemos personalizar la instalación al seleccionar "customize". Básicamente lo que podemos hacer es seleccionar si queremos que instale la versión PRO o no.

Espacio de disco requerido

8Ya que el proceso va a instalar archivos en directorios protegidos, nos pide la clave de administrador de la máquina.

Introducimos la clave de usuario y seleccionamos el botón "Install Software"

Permiso de instalación

9Comienza el proceso de instalación.

Proceso de instalación

10Al terminar el proceso de instalación, finaliza con la ventana de resumen. Aquí seleccionamos "Close" para cerrar la aplicación de instalación.

Termino de instalación

Usando MAMP

Una vez que lo tengamos instalado, vamos al directorio dónde está nuestra instalación. en Windows está en c://MAMP y en OsX en /Applications/MAMP. Aquí se han instalado varios directorios y archivos, entre los más importantes (por ahora):

Archivos instalados
conf
Las configuraciones del sistema
htdocs
El directorio público que va a consultar Apache.
logs
Donde se va a registrar la actividad de Apache, PHP, y MySql en su interacción con el sistema y
MAMP
Ejecutable de la aplicación la que tiene el ícono del elefante.

Si hacemos doble clic sobre la aplicación se va a abrir una pequeña ventana y va a tratar de arrancar Apache y MySql (el módulo PHP está configurado y amarrado a apache).

Panel de control de MAMP

Al mismo tiempo, MAMP abrirá el browser de navegación predeterminado con la página de inicio, indicando que esta corriendo y de manera correcta. Si nos fijamos en la dirección en la barra de URL es http://localhost:8888 , esto quiere decir que el apache de MAMP está respondiendo a las solicitudes hechas a localhost al puerto 8888.

Nota:
Puede generar confusión, pero es importante recordar que MAMP en apple, a diferencia de su versión Windows, trabaja contra el puerto 8888, esto quiere decir que a la dirección URL hacia el directorio público sería http://locahost:8888 y en Windows sería sólo http://localhost.

Página de bienvenida de MAMP

Hay varias personalizaciones que se pueden realizar a esta aplicación, por ejemplo: donde se va a alojar el directorio público.

Seleccionamos el menú de preferencias, y hay 4 parámetros que podemos configurar:

Panel de control MAMP - Peferencias
General
Permite definir si los servicios arrancan al iniciar la aplicación y terminan al cerrarla. Aquí también encontramos la ruta hacia la página de MAMP y si queremos que abra al momento de inicializar la aplicación
Ports
Son los puertos en los que va a trabajar Apache y MySql, a menos que tengamos una buena razón por la cual cambiarlo, es buena idea dejarlo en los puertos 8888 para apache y 8889 para MySql.
PHP
Permite seleccionar si queremos trabajar con la versión php7.3.9 o php7.4.2 (la última versión)
Web Server
Permite selecciona Apache o el servidor Nginx, además permite elegir cual va a ser la raíz del directorio público.
De manera predeterminada, el directorio público es htdocs.
Ejercicio:
  • Generar un archivo index.html en un directorio wordpress dentro del directorio público htdocs
  • Apuntar las preferencias de MAMP al directorio que acabamos de crear.

Objetivo del capítulo:
Revisar los pasos para la instalación de WordPress en un servidor.

WordPress se jacta de tener el proceso más rápido de instalación en su categoría (la famosa instalación en 5 minutos) y la verdad es que son 4 pasos muy sencillos de seguir para llegar a esta la interfaz gráfica.

Pasos para la instalación de WordPress

1 Descargar y descomprimir

El primer paso es tener los archivos de WordPress. Estos los podemos descargar, de forma gratuita, desde https://es.wordpress.org/download/ para la versión en español o https://wordpress.org/download/ para la versión en ingles.

Aquí presionamos el botón "Descargar WordPress"

Una vez que tenemos el archivo ".zip", tenemos que descomprimir en el directorio público local que hemos creado para trabajar nuestro desarrollo.

Siempre es bueno tener una copia local del sitio en desarrollo, por un lado, nunca se ha visto bien estar al aire con un producto a medio hacer y sin probar, y por otro lado, aumentamos la velocidad y reducimos los tiempos al no tener que estar transmitiendo por FTP todos los cambios que hagamos.

Para los efectos de este manual, vamos a generar un directorio "wordpress" dentro del directorio público de Apache (htdocs)

Página de bienvenida de WordPress

2 Crear la base de dato y el usuario

MySql tiene que tener un lugar donde almacenar la información y un usuario identificable y autorizado para poder acceder a la información. Es buena idea que estos dos datos en nuestro servidor local sean iguales a los que nos han asignado en el servidor del hosting, ya sea que nos hayan entregado los datos con el contrato o que lo hayamos creado nosotros vía una interfaz de administración de cuentas cómo C-panel. Si ambos datos son iguales, al momento de subir por FTP nuestros archivos y modificaciones, nos vamos a ahorrar el trabajo de rehacer las configuraciones.

En nuestro caso, y en función del ejercicio, vamos a asumir que el proveedor de hosting nos ha entregado los siguientes datos:

Usuario:
wordpress
Clave:
wp123
BD:
wordpress
Dirección:
localhost

Con estos datos en mano, abrimos la interfaz de administración de bases de dato local phpMyAdmin (Podemos llegar a esto desde cualquier browser poniendo la dirección http://localhost y seleccionando del menú phpMyAdmin). Estando en la página inicial de phpMyAdmin seleccionamos la lengüeta de privilegios.

La ventana de privilegios nos muestra quienes son los usuarios que tienen acceso a nuestra base de datos y cuales son sus privilegios (valga la redundancia). Aquí seleccionamos "agregar un nuevo usuario".

Esta nueva ventana tiene un formulario sobre la información de la cuenta que queremos crear:

Nombre de usuario:
wordpress
Servidor:
localhost
Contraseña:
wp123
Debe volver a escribir:
wp123

Después en "Base de datos para el usuario" seleccionamos: "Crear base de datos con el mismo nombre y otorgue todos los privilegios", de esta manera, no solo vamos a crear el usuario, si no que de una sola pasada vamos a tener la base de datos y los privilegios del usuario "wordpress" para acceder a esta nueva BD.

Para crear el privilegio sólo debemos seleccionar el botón "Continuar" en la parte inferior derecha del formulario y ya está creada la cuenta y la BD.

phpMyAdmin - ventana de privilegios
ventana de privilegios
phpMyAdmin - agregar un nuevo usuario
agregar un nuevo usuario
phpMyAdmin - usuario y privilegios creados
usuario y privilegios creados

3 Creación del archivo de conexión a BD

Este paso se puede enfrentar por dos lados, y es bueno conocer los dos. El mas sencillo, y primero a probar, es poner en el browser la dirección web del directorio en el que tenemos instalado WordPress. Como ya redireccionamos Apache al directorio htdocs/wordpress en las preferencias de MAMP basta con apuntar a localhost http://localhost/ (en OsX sería http://localhost:8888).

El servidor, al tratar de resolver la dirección, se enfrentará a la ausencia de archivos de configuración de WordPress por lo que nos direccionará al directorio de instalación.

Lo primero que advierte esta pantalla es que no hay un archivo de configuración (wp-config.php), por lo que puede tratar de generarlo, pero no todos los servidores tienen los privilegios suficientes para hacerlo.

Vamos a tratar de hacerlo vía interfaz y si no, vamos a tener que hacer la instalación manual de este archivo.

Esta pantalla nos da la bienvenida y nos recuerda los elementos básicos que vamos a necesitar:

  • Nombre de la Base de Datos
  • Usuario de la Base de Datos
  • Contraseña de la Base de Datos
  • Servidor de la Base de Datos
  • Prefijo de tablas

Si tenemos los datos a mano le damos al botón "¡Vamos a ello!"

Aquí es donde ingresamos los datos de nuestro sitio:

Nombre de la Base de Datos:
wordpress
Usuario de la Base de Datos:
wordpress
Contraseña de la Base de Datos:
wp123
Servidor de la Base de Datos:
localhost
Prefijo de tablas:
wp_

Si le decimos "enviar", nos va a mostrar una pantalla confirmando la capacidad la creación del archivo "wp-config.php".

Por el contrario, si alguno de los datos de conexión a la BD están mal ingresados, automáticamente veremos una pantalla de error de conexión a la base de datos para que lo intentemos de nuevo.

Si por restricción de privilegios de escritura no se ha podido generar el archivo wp_config.php, entonces nos damos la vuelta y lo generamos manualmente a partir del archivo ejemplo que trae WordPress de ejemplo: "wp-config-sample.php".

Abrimos el archivo y lo guardamos como: "wp-config.php" con los datos de conexión de nuestra base de datos.

En el caso de este ejemplo sería:

Ejemplo:
// ** MySQL settings - You can get this info from your web host ** //
/** The name of the database for WordPress */
define('DB_NAME', 'wordpress');
/** MySQL database username */
define('DB_USER', 'wordpress');
/** MySQL database password */
define('DB_PASSWORD', 'wp123');
/** MySQL hostname */
define('DB_HOST', 'localhost');
/** Database Charset to use in creating database tables. */
define('DB_CHARSET', 'utf8');
/** The Database Collate type. Don't change this if in doubt. */
define('DB_COLLATE', '');
WordPress - requerimientos para instalar
requerimientos para instalar
WordPress - registro de datos de conexión.
registro de datos de conexión
WordPress - Instalación exitosa
Instalación exitosa
WordPress - error de instalación
error de instalación

4 Datos básicos de configuración

Ahora si volvemos al sitio, con el archivo de conexión a la base de datos nos queda un sólo paso. La pantalla nos va a pedir algunos datos básicos de configuración de nuestro nuevo sitio:

Título del sitio:
Este es el nombre que va a aparecer en la cabecera de nuestras páginas. Para efectos de este manual usaremos: "Mi Sitio"
Nombre de usuario:
Nombre que va a tener el usuario que administra toda la configuración del sitio y los usuarios, generalmente a este usuario se le dice "admin", pero es recomendable, por razones de seguridad, que este usuario tenga otro nombre en nuestro producto final.
Para efectos de manual usaremos: "admin"
Contraseña:
Ingresamos la contraseña del usuario administrador. Una vez más, y solo por efectos de seguridad en nuestra versión de producción, busquemos una combinación de números y letras que no sea fácil de deducir, pero por otro lado que podamos recordar.
Ingresemos dos veces la clave:"admin1324"
Su correo:
El formulario nos solicita un correo electrónico donde se pueda enviar, por ejemplo, la clave de seguridad por si no nos acordamos, pero también sirve para que nos llegue por correo toda la información de movimiento de nuestro sitio.
Ingresemos nuestro propio correo electrónico en este campo.
Privacidad:
Por último, el formulario nos pregunta si queremos permitir que los motores de búsqueda indexen el sitio. De todas maneras nos interesa que nuestro sitio quede indexado, pero es bastante probable que en el proceso de desarrollo de nuestro nuevo sitio no nos interese que ea público para los buscadores. En todo caso se puede modificar posteriormente en el administrador de WordPress.

Antes de continuar, y si bien hay un capítulo completo dedicado a la seguridad, este es buen momento para dar un par de pasos en esta línea y asegurarnos que nuestro sitio tenga menos vulnerabilidades.

De partida, el nombre del usuario administrador no debería ser "admin", básicamente por que en versiones anteriores de WordPress era la opción predeterminada y si lo dejamos como "admin" estamos dandole el 50% del trabajo resuelto al que nos quiera hackear el sitio.

El otro 50% lo da la clave de seguridad. "1234" es una pésima clave, tal vez es fácil de recordar, pero a la vez es muy fácil de descifrar. La seguridad de nuestra clave no es menor. Tan importante es para WordPress, que tiene un indicador de "robustes" en colores. Tratemos de mezclar mayúsculas con mínusculas, números y caracteres especiales, hasta que el cuadro esté en verde y diga fuerte.

Alerta:
El uso de la misma clave de usuario para el FTP, acceso a BD y administrador de WordPress incrementa exponencialmente los riesgos de hackeo.
(Si, yo también encuentro increible el tener que recordarlo, pero he visto tantas veces este instinto suicida... que es mejor recordarlo).

Si hemos ingresado todos los datos de manera correcta, ahora estamos listos para seleccionar el botón "instalar WordPress".

Esta acción generará toda las tablas que se necesitan para trabajar en WordPress y las principales configuraciones, como el nombre del sitio y quien es el administrador. Al terminar el proceso WordPress nos muestra una ventana de "Lo lograste!" con el nombre de usuario que hemos elegido.

Aquí estamos listos para ingresar al administrador para ver el resto de las configuraciones, así que le damos a "Iniciar sesión" que nos llevará a un formulario con los campos de usuario y clave para identificarnos en el administrador.

Aquí ingresamos el usuario y la clave de administrador que acabamos de crear en los pasos anteriores y nos permite acceder al administrador del sitio.

WordPress - Configuración básica
Configuración básica
WordPress - Configuración exitosa
Configuración exitosa - Lo lograste!
WordPress - Ventana de login
Ventana de login

Nota:
Fijate en la dirección de la URL (http://localhost:8888/wp-login.php) ya que es uno de los caminos rápidos para acceder al administrador posteriormente.

Ejercicio:
  • Revisa el archivo wp-config.phpy describe las variables generadas.

Objetivo del capítulo:
Revisar las configuraciones generales de WordPress y el administrador para comenzar a usar el sitio.

Acceso al administrador

El administrador de WordPress está ubicado en el directorio "wp-admin" en la raíz del sitio, si estamos identificados como administradores, esta dirección nos permite acceder al escritorio del administrador.

Nota:
Si no estamos "logeados" automáticamente nos va a direccionar al archivo "wp-login.php" para que nos identifiquemos.

El administrador de WordPress es tal vez, una de las interfaces más fáciles de entender y controlar.

A mano izquierda está el menú de todas las secciones, si pinchamos en el título de la sección nos lleva al primer elemento controlable de la sección, pero si nos fijamos, podemos expandir o colapsar las diferentes secciones con la flechita que se despliega a la derecha de cada ítem al pasar con el cursor por encima. Esto nos permite acceder con mayor velocidad al punto exacto que necesitemos configurar.

Al centro, tenemos todo lo que podemos modificar o informarnos del sitio. La primera venta corresponder al "escritorio", zona reservada para accesos rápidos, información del movimiento del sitio, actualizaciones e información sobre WordPress. Mucha de esta información puede que no aporte cuando estamos construyendo nuestro sitio, pero una vez que ya está en producción, o sea público, es un espacio muy cómodo para ver el movimiento de nuestro sitio.

Si nos fijamos, en la parte superior derecha, aparte de otro menú de acceso rápido, tenemos dos lengüetas, una para las "ayudas" del sistema y otra para las "opciones de pantalla". Estas suelen pasar desapercibidas, pero son de mucha utilidad al momento de seleccionar el contenido que se va a mostrar en cada pantalla.

Los 3 primeros elementos que tenemos que revisar con la primera instalación son los Ajustes, las herramientas y los usuarios, ls 3 últimos menús.

Ajustes

Nuestra primera revisión va a ser el área de "Ajustes", que tiene varios submenús con los cuales es importante familiarizarse para una correcta configuración y funcionamiento del sitio.

General

En las opciones generales encontramos las configuraciones más básicas del sitio: Título y ubicación del sitio, quién puede registrarse como usuario del sitio y cual va a ser el formato para las fechas y hora.

Ajustes Generales
Título del sitio:
Campo para determinar el nombre de nuestro sitio.
Descripción breve:
La descripción breve no solo es un párrafo corto que sintetiza el qué hacer del sitio y que se va a mostrar abajo del título en nuestras páginas, si no que además sirve para el posicionamiento de nuestro sitio en los buscadores.
Dirección de su WordPress (URL):
La dirección de WordPress ayuda a mantener limpio los vínculos del sito.
Dirección del sitio (URL):
Muchas veces la dirección del sitio y la de WordPress no es la misma, por lo que este campo nos pide el dominio en el cual alojamos nuestro sitio
Dirección de correo:
Lo toma del correo administrador y se ocupa con fines administrativos y de notificaciones.
Miembros:
Responde ante la pregunta ¿Puede cualquiera inscribirse en el sitio?, Si dentro de la planificación de nuestro sitio vemos importante que los usuarios se inscriban entonces seleccionamos esta opción.
Perfil predeterminado para nuevos usuarios:
Amarrada con la pregunta anterior, nos permite seleccionar el rol que tendrá el usuario nuevo con respecto al sitio, es recomendable que sea suscriptor para comenzar.
Zona horaria:
Permite tener control sobre la hora y fecha que se despliega con los artículos y páginas. Si sabemos que el servidor de producción está en otro país, y por ende la hora del computador difiere de la hora país en que nos encontramos, aquí seleccionamos el huso horario que nos corresponde o el país desde el menú desplegable. Una vez guardado se mostrará la hora seleccionada
Formato de fecha:
En que formato se mostraran las fechas en el sito.
Formato de hora:
En que formato se mostraran las horas en el sitio.
La semana comienza el:
Qué día comienza la semana, para efectos del calendario.
Idioma del sitio:
Permite seleccionar el idioma del entorno de WordPress.

Nota:
Esta función es relativamente nueva, ya que antiguamente se manejaba en el archivo wp-config.php

Una vez hechos todos los cambios necesarios, y para que quede registro del cambio, debemos seleccionar el botón "guardar cambios" al final de la página.

Escritura

En las opciones de escritura encontramos las alternativas para controlar la escritura o registro de nuevas entradas en nuestro blog.

Ajustes de escritura

Las podemos dividir en 3 partes:

Ajustes de escritura:

Formato:
Aquí se pueden seleccionar el casillas algunos formatos comunes que WordPress debería administrar, por ejemplo si los emoticons ( :-) ) se van a convertir en gráfico, o si WordPress debería verificar y validar el uso de tags HTML correctamente anidado.
Categoría predeterminada:
Permite pre seleccionar la categoría en la cual se publicará de manera predeterminada una entrada.
Formato Predeterminado:
Esta opción está visible si es que la plantilla seleccionada tiene soporte para "Post Formats", o formatos pre-establecidos para las entradas.

Publicar vía correo electrónico: Para escribir a WordPress vía correo debe crear una cuenta de correo con acceso POP3. Todo correo recibido en esta dirección será publicado, por ello es una buena idea que mantenga esa dirección realmente secreta.

Servidor de correo y puerto:
Dirección del servidor de correo donde se conectará WordPress para revisar si hay algún correo que publicar. Todo correo que se reciba en esta cuenta se hará público, por lo que es sugerible no hacer público esta dirección para no publicar spam.
Nombre de usuario:
Usuario de la cuenta correo
Contraseña:
Clave para identificar al usuario.
Categoría predeterminada para publicar por correo:
Categoría pre-seleccionada para publicar lo que se reciba por correo.

Publicación remota: Para enviar un artículo a WordPress desde un cliente escritorio de blogs remoto o sitio que utiliza el Protocolo de Publicación Atom o alguna de las publicaciones de interfaces XML-RPC.

Servicios de actualización: Cuando publique un artículo nuevo, WordPress notificará automáticamente a los siguientes servicios de actualización. Esto permite aumentar el tráfico al sitio

Lectura

Esta sección permite configurar, de manera general, cómo se presentará la información de las entradas y distribución de feeds del sitio. Los Feeds de RSS (Really Simple Syndication) permiten compartir la información del blog vía XML con formato definido.

Ajustes de lectura

Página frontal muestra:
Esta opción es para determinar que se mostrará como la página de inicio. Hay dos opciones:
Tus últimas entradas: Seleccionado de manera predeterminada, muestra una lista con las últimas entradas en el blog.
Una página estática: Seleccionada esta opción se puede elegir entre una entrada o una página estática.
Número máximo de entradas a mostrar en el sitio:
Cantidad de entradas que se mostrarán en el loop.
Número máximo de entradas a mostrar en el feed:
En esta opción se puede elegir la cantidad de entradas que se mostrarán en los feeds.
Mostrar, para cada entrada en el feed:
Esta opción permite seleccionar si se quiere mostrar el texto completo en los feeds o un extracto.
Visibilidad para los buscadores:
si es que queremos que los robots de los buscadores indexen el sito o no.

Comentarios

Los comentarios son lo que hicieron de WordPress la tremenda herramienta que es hoy. Permitía recibir feedback de los lectores con respecto al tema publicado y dejó en el olvido el viejo "libro de visita" que se usaba previo a la Web 2.0.

En esta ventana configuramos las opciones generales y globales de comentarios de las entradas y páginas. En esta ventana también se puede configurar el comportamiento de los avatares de los usuarios del sistema.

Ajustes de comentario

Ajustes por defecto de las entradas:
Aquí podemos seleccionar si deseamos comunicar a otros blogs sobre las nuevas publicaciones y si queremos comentarios, de manera pre determinada, en las entradas que generemos. Estas opciones se pueden modificar para cada artículo en particular.
Tratar de avisar a los sitios enlazados desde el artículo:
Si está seleccionada ésta opción WordPress tratará de enviar un ping a la dirección web que1
se cita o menciona en la entrada. Esta mención se mostrará en la sección de comentarios de la dirección citada si es que el sitio tiene activado el pingback. Esta notificación se realiza cuando se hace el proceso de publicación de la entrada. Un artículo con muchas direcciones web puede demorar su publicación. Es importante recordar que las referencias cruzadas aumentan el pagerank en los buscadores.
Permitir notificaciones de enlace desde otros sitios (pingbacks y trackbacks):
Seleccione ésta opción si queremos que WordPress responda ante otros sitios que citen la publicación. Esto aparecerá en la sección de comentarios.
Permite que se publiquen comentarios en los artículos nuevos:
Seleccionar esta opción si queremos permitir que los usuarios puedan realizar comentarios a los artículos que estamos publicando. Ésta opción se puede sobre escribir o re-definir cuando estamos editando la entrada.

Otros ajustes de comentarios:

El autor del comentario debe rellenar el nombre y el correo electrónico:
Seleccione esta opción para entorpecer un poco más la acción de spameadores. No hay verificación en los datos entregados.
Los usuarios deben registrarse e identificarse para comentar:
Si esta opción está seleccionada solamente se aceptaran los comentarios de usuarios registrados.
Cerrar automáticamente los comentarios en las entradas con más de X días:
Esta opción permite desactivar el formulario de comentario para no aceptar más participaciones pasado la cantidad de días desde la última modificación del artículo.
Activar los comentarios anidados hasta X niveles:
Esta opción permite definir la cantidad de comentarios anidados que se van a mostrar. Está amarrado al diseño de la plantilla que se está usando para desplegarlo correctamente.
Separa los comentarios en páginas de X comentarios por página y se muestra la X página por defecto Los comentarios se ordenarán con los al principio:
Permite paginar los comentarios de una entrada, tanto en su cantidad como en su orden.

Enviarme un correo electrónico cuando:

Alguien envía un comentario:
Si está seleccionada esta opción cada comentario registrado generará un correo al autor de la entrada.
Se ha recibido un comentario para moderar:
Si está seleccionada esta opción, el administrador de WordPress recibirá una notificación por correo electrónico de los comentarios que están a la espera de aprobación.

Para que un comentario aparezca:

El comentario debe aprobarse manualmente:
Seleccionar esta opción para que sólo sean publicados los comentarios aprobados por algún usuario con autorización.
El autor del comentario debe tener un comentario previamente aprobado:
Si esta opción está seleccionada, los comentarios aprobados y publicados del usuario se publicarán directamente.

Moderación de comentarios:

Mantener un comentario en espera si contiene más de X enlaces:
Es común que los SPAM ocupen direcciones URL en el mensaje, por lo que podemos mantener en espera de ser moderado si es que viene con X o más direcciones. De la misma manera podemos hacer una lista, separando cada dato por salto de línea, para verificar que no existan estas palabras en los mensajes o IP.
Lista negra de comentarios:
Al igual que el punto anterior con la diferencia que el mensaje quedará automáticamente en la lista de SPAM y no en la de moderación.

Avatares: Los Avatares son imágenes asociadas a los usuarios que comentan entradas en el blog.

Visibilidad:
Aquí se puede seleccionar si se va a mostrar o no el avatar del usuario o el genérico preseleccionado.
Calificación máxima:
Gravatar es un sistema que permite tener en un solo sito el avatar del usuario para utilizarlo en diferentes sitios. Parte de la configuración es poder determinar si el avatar puede ser ofensivo para cierto grupo de edad. WordPress se monta sobre esta categoría para filtrar si se puede o no mostrar el avatar del usuario.
  • G — Adecuado para todos
  • PG — Posiblemente ofensivo, usualmente para audiencias de 13 años a más
  • R — Previsto para audiencias adultas por sobre los 17 años
  • X — Aún más adultos que arriba
Avatar por defecto (predeterminado):
Aquí podemos seleccionar un avatar genérico si es que el usuario no sube su propio avatar o vincula la cuenta con Gravatar.

Medios

Aquí podemos configurar, de manera global, el comportamiento de las imágenes que vamos a vincular en las entradas.

Ajustes de medios

Tamaños de imagen: Al insertar una imagen en una entrada o página, se puede prefijar las dimensiones máximas que tendrá esta imagen para sus 3 tamaños.

  • Tamaño de la imagen en miniatura
  • Tamaño mediano
  • Tamaño grande

Subida de archivos: Dónde se van a guardar los archivos multimediales que se incrustan en la entrada.

Organizar los archivos cargados en carpetas basadas por mes y año:
seleccionar esta opción si queremos que los archivos subidos se vayan organizando en directorios por año y mes. Esta opción es muy cómoda ya que nos permite repetir el nombre de los archivos sin que entren en conflicto.

Nota:
Es importante recordar que el directorio para subir archivos tiene que tener permisos de escritura para el anónimo (en este caso apache), si no, no va poder crear directorios y menos subir archivos (CHMOD 777).

Enlaces permanentes

Los "permalinks" es la manera en que la dirección URL se va a escribir para acceder a los contenidos. Normalmente es un query como parte de la dirección, pero podemos personalizarla para que sea más amigable o entendible para el usuario.

Ajustes de enlace permanente

Nota:
Para poder sobre escribir la dirección es necesario tener permisos de escritura para el archivo ".htaccess" y la capacidad de que apache lea este archivo, ambos requerimientos no suelen estar activos en las configuraciones de los webhosting.

Ajustes habituales: Aquí podemos seleccionar, en base a los ejemplos, el formato que queremos que tenga la dirección URL para acceder a las entradas en nuestro sitio. De manera predeterminada se ocupa un query como parte de la dirección.

  • Predeterminado (http://localhost/wp/?p=123)
  • Fecha y nombre (http://localhost/wp/2011/07/11/ejemplo/)
  • Mes y nombre (http://localhost/wp/2011/07/ejemplo/)
  • Numérico (http://localhost/wp/archives/123)
  • Estructura personalizada

Opcional: Aquí podemos personalizar la ruta de las categorías de nuestras entradas. De manera predeterminada está en blanco.

Ajustes de privacidad

Con las nuevas regulaciones europeas para internet, se h incorporado en WordPress una sección para tener una sección con el texto legal de la privacidad.

Ajustes de privacidad

Aquí podemos selecciona una página ya creada con políticas de privacidad o crear una nueva con el texto para nuestro sitio.

Ejercicio:
  • Modifica los ajustes de los enlaces permanentes. Prueba las diferentes opciones de construcción de la ruta y revisa el comportamiento en la URL de nuestra instalación mientras navegas por los hipervínculos del demo.

Herramientas

Herramientas disponibles

Esta página de inicio de las herramientas no aporta mucho, es más bien una orientación para los que vienen de versiones anteriores y que antes encontraban dos herramientas:

Publicar Esto
Permitía agregar un botón en la barra de acceso rápido del navegador. Este botón facilitaba la acción de copiar contenido de cualquier página que estemos navegando como una entrada en nuestro blog.
Convertir categorías y etiqueta
Acción que permitía convertir las categoría en etiquetas o viceversa.

Ahora nos dice que la herramienta "Conversor de etiquetas y categorías" está en la sección de importar.

Conversor deetiquetas ya no está aquí

Importar

Permite importar a nuestra instalación de WordPress de diferentes plataformas de Blog conocidos, así como de otro instalación de WordPress. Para esto es necesario instalar un plugin en nuestro WordPress dependiendo de la fuente.

Los orígenes de importación son:

  • Blogger
  • Conversor de etiquetas y categorías
  • LiveJournal
  • Movable Type y TypePad
  • RSS
  • Sitios de interés
  • Tumblr
  • WordPress

Exportar

Permite exportar el contenido de los artículos y páginas en un formato XML para importarlo en otra instalación de sitio WordPress o respaldo.

Podemos elegir exportar todo o sólo las entradas o sólo las páginas.

Nota:
La imágenes utilizadas no se exportan con este archivo, si no que queda una dirección absoluta. Si la página se puede acceder por internet, entonces, en el proceso de importación se agregan al m nuevo sitio.

Salud del sitio

Esta sección nos permite monitorear el estado del sitio e información general. En el "Estado" podemos entrar sugerencias de mejoras recomendadas, buenas prácticas de seguridad y limpieza, mientras que en "información" encontramos un resumen del entorno y versiones con las que está trabajando nuestra instalación.

Salud del sitio

Exportar los datos personales

Esta sección nos permite exportar los datos personales registrado de un usuario. Para eso hay que ingresar el usuario o correo electrónico que estamos buscando y el sistema genera un archivo html con todo la información que tiene del usuario. Al mismo tiempo envía un correo electrónico con la descarga de información a la cuenta del usuario.

Exportar los datos personales

Borrar los datos personales

Esta sección nos permite eliminar datos de el usuario seleccionado. Una vez eliminado, este usuario no se puede conectar al administrador de WordPress

Borrar los datos personales
Ejercicio:
  • Exporta tu sitio y revisa y analiza el archivo XML generado.

Usuarios

En WordPress Hay 5 tipos básicos de usuarios con diferentes niveles de acceso al administrador de contenidos. Según su perfil son las acciones que puede realizar:

Administrador:
Tiene acceso total al sistema. Es el único con acceso a la configuración, contenido, presentación, extensión y usuarios.
Editor:
Tiene acceso a todos los contenidos del sito, tanto de páginas como de artículos, para agregar, modificar o eliminar.
Autor:
Es un usuario de confianza, puede publicar directamente artículos. Puede ver todos los artículos, pero sólo modificar o eliminar los propios. No tiene acceso a páginas.
Colaborador:
Usuario que puede sugerir artículos pero requieren de visto bueno
Suscriptor:
Usuario sin acceso al administrador. Sólo está registrado en el sistema y permite su participación en los comentarios de los artículos. Puede acceder a su perfil en el administrador.

Todos los usuarios

Listado filtrable de todos los usuarios del sistema y su rol. Desde esta interfaz podemos seleccionar un usuario para modificarlo o eliminarlo. Ya sea de manera individual o para toda la lista de usuarios.

De esta interfaz también se puede cambiar el rol de uno o varios usuarios.

Administrador de usuarios
Usuarios

Una vez seleccionado el usuario para ser editado, la interfaz no presenta los campos que permiten modificar los datos básicos del usuario y su acceso al sistema.

Perfil de usuariuo

Editor visual:
Permite activar/desactivar el editor visual para este usuario al momento de agregar un artículo o página.
Esquema de colores para la administración:
Permite seleccionar la plantilla de color que usará este usuario en el administrador.
Atajos de teclado:
Permite activar/desactivar los atajos de teclado en loa moderación de comentarios.
Barra de Herramientas:
Permite activar/desactivar la barra superior de herramientas al momento de navegar por el sito. Esta barra de herramientas tiene diferentes opciones dependiendo del rol del usuario.
  • Nombre
    • Nombre de usuario: Nombre corto del usuario que usará para identificarse al sistema. Los nombres de usuario no pueden ser cambiados y no se pueden usar caracteres especiales.
    • Nombre: Nombre del usuario.
    • Apellidos: Apellidos del usuario.
    • Alias (requerido): Un nickname o alias para poder acceder al sistema.
    • Mostrar como nombre público: Permite seleccionar cual va a ser el dato que va a aparecer como usuario del sistema.
  • Información de contacto
    • Correo (requerido): Dirección email del usuario para poder recuperar la clave o estar alertado de la actividad con respecto a sus publicaciones.
    • Sitio web: Dirección web personal del usuario.
  • Acerca de ti
    • Información biográfica: Resumen del Usuario que se puede usar como pequeño currículum o extracto de vida para asociar a as publicaciones.
    • Nueva contraseña: Permite cambiar la clave de usuario. es necesario Repetir la clave.
  • Desconectar todas las otras sesiones:
  • esta funcionalidad permite desactivar las sesiones del usuario si es que se ha conectado al administrador en diferentes computadores (Muy útil si se deja la conexión abierta en un cibercafé)

Añadir nuevo

Al agregar un nuevo usuario al sistema la interfaz nos presenta un formulario con los campos básicos:

Nombre de usuario (requerido):
Nombre corto del usuario que usará para identificarse al sistema. Los nombres de usuario no pueden ser cambiados y no se pueden usar caracteres especiales.
Correo (requerido) :
Correo de contacto del usuario.
Nombre:
Nombre del usuario.
Apellidos:
Apellidos del usuario.
Sitio web:
Dirección web personal del usuario.
Contraseña:
Contraseña del usuario para acceder al sistema.
¿Enviar contraseña?:
Activar/desactivar el avisar de la creación de la cuenta, usuario y contraseña al usuario por correo electrónico.
Perfil:
Perfil asignado al usuario.

Nota:
El resto de los datos de los usuarios se puede acceder una vez creada la cuenta.

Tu perfil

En esta interfaz el usuario puede modificar sus propios datos, salvo el campo de perfil, el resto de los campos se le mostrarán en el menú "perfil" a los usuarios.

Ejercicio:
  • Generar 5 cuentas de usuario nuevas. Cada una con un Rol y privilegio distinto.
  • Evaluar y comparar el backend de cada usuario en WordPress

Objetivo del capítulo:
Entender las diferentes partes administrables de WordPress, las configuraciones, presentación y contenido.

Cuando hablamos de contenido, es bueno partir declarando que WordPress administra 2 tipos de contenidos: las "Páginas" y las "Entradas", y se ocupan para diferentes tipos de contenidos y objetivos.

Una página, si bien se alimenta dinámicamente desde la BD, no varía mucho en el tiempo, mientras que las entradas son las publicaciones, sin importar su extensión, que se van sucediendo en el tiempo y que se van a presentar como una lista para acceder a su desarrollo. Típicamente, la visión y misión de una empresa sería una página, mientras que las noticias o promociones serían un entrada en nuestro sitio.

La otra gran diferencia entre ambas, es que las páginas no tienen categorías, ya que se asume individual, ni etiquetas, lo que permite agrupar los contenidos por estos dos parámetros.

Las páginas por el contrario, se pueden anidar como sub-temas o sub-sub-temas.

Como tienen diferencias en objetivo y estructura, se manejan de dos puntos distintos en nuestro administrador.

Entradas

La página inicial de las Entradas, al igual que en la sección de Páginas, permite ver, agregar, modificar o eliminar entradas en nuestro sitio. De partida se presentará una lista de todos las entradas creados, estén o no activas y públicas.

Se presenta con cuatro supra filtrajes que nos permite acceder con mayor velocidad al contenido que estamos buscando para modificar o eliminar:

  • Todos las entradas
  • Los publicados
  • Los borradores
  • Los que están en la papelera.

Nota:
Si no aparece uno de estos supra filtros es por que no hay contenido en ellas.

Las páginas ya creadas se presentan en un listado filtrable con seis columnas de información:

  • Título
  • Autor
  • Categorías
  • Etiquetas
  • Comentarios
  • Fecha

Nota:
Las columnas del listado a mostrar se pueden seleccionar en "opciones de pantalla" , así como la cantidad por pantalla.

Si seleccionamos algunos de estos títulos, la lista de entradas presentada se ordenará de manera ascendente o descendente según la columna seleccionada.

Nota:
Si bien el ID de la entrada no es visible en la lista, al pasar con el cursor por el título el ID se muestra como parte de la dirección URL (post=x).

Se puede filtrar la información por fecha de publicación o por búsqueda de palabras para limitar la lista y poder acceder con mayor facilidad a modificar un contenido.

Al pasar el cursor por encima de los títulos se despliega debajo de él los accesos rápidos a acciones a realizar:

Editar:
Nos permite acceder a la interfaz de edición de la página
Edición rápida:
Nos muestra en la misma pantalla una interfaz para controlar campos generales de presentación de esta página
Enviar a la papelera:
Nos permite eliminar la página.
Ver / Vista Previa:
Nos permite ver cómo se presentará el contenido editado en la página.

Otra acción en esta pantalla es la posibilidad de seleccionar de la lista varias entradas (checkbox en la primera columna) y a este aplicarle una acción masiva:

  • Editar
  • Mover a la papelera

Agregar nueva entrada

Para agregar una nueva entrada podemos seleccionar el botón "Añadir nueva" en la parte superior de la lista de entradas o desde el menú "Añadir nueva". En ambos casos se presentará una página con los campos necesarios para su creación.

Desde la aparición de la versión 5 de WordPress es que se introduce una nueva manera de administrar los contenidos llamado Gutenberg. Ahora, en vez de interpretar los saltos de línea, a los contenidos se los trata como "bloques" de contenidos.

Si bien, un poco enredado para los que veníamos jugando con WordPress hace buen rato, es bastante lógico en su principio y muy eficiente al momento de construir el código html de nuestras páginas.

Al medio de la pantalla tenemos el área dónde vamos a trabajar y al lado derecho los parámetros que podemos modificar, tanto para el documento en general, cómo para el bloque o caja que tengamos seleccionada.

Editor Gutenberg

Desde WordPress 5.0 que el modo clásico fue sustituido por un nuevo editor de contenido con el nombre clave Guntenberg, en este nuevo editor se agregan los por pedazos los elementos en bloques por "tipo", teniendo cada uno su propio comportamiento. Para agregar un campo basta con selección el signo más a la izquierda, abajo del bloque seleccionado, abajo de la caja en curso, o simplemente con la tecla "enter" si estamos dentro de un bloque. Veamos los tipos de bloques y los diferentes elementos que lo rodean a la hora de seleccionar.

Título

El título no sólo es lo más importante de un documento, si no que va a ser la primera referencia para el vínculo de la entrada y la construcción de la URL. Como todos documento, va a ser lo más destacado en nuestra página web. Este elemento va a quedar encerrado en la etiqueta <h1></h1>de manera predeterminada.

Para editarlo basta con seleccionar, con el cursor, donde dice Añadir título. Ya podemos escribir.

Título

Bloques comunes
Párrafo

El principal y predeterminado de los bloques. En el Podemos escribir como procesador de texto, o copiar y pegar de un texto que ya tengamos redactado en otra aplicación. Mientras escribamos no vamos a tener interferencias, pero sipasamos el cursor por sobre el texto, aparece una caja, en la parte superior del bloque ,con las opciones propias de los bloques de párrafo. Aquí podemos cambiar el tipo de bloque, seleccionar la alineación del texto, modificar si es bold o Italic, agregar un vínculo a otra página, formato código , una imágen o el texto tachado.

Nota: Si tenemos un bloque vacío, podemos poner el caracter "/" y WordPress desplegará los últimos 10 tipos de bloque que hemos usado hasta ahora, seleccionable con el mouse o con el cursor.

Si te fijas a mando derecha, al seleccionar el bloque, aparecen los parámetros de bloque que se pueden afectar, en este caso, ajustes de texto, de color y avanzados.

Nota: Si queremos ver lo que está generando el editor como código HTML, podemos abrir el menú superior y seleccionar "Editor de código", fíjate como cada bloque vas generando, WordPress lo convierte en un comentario personalizado.

Imagen

Las imágenes merecen un capítulo aparte, de hecho tiene un menú propio entre las Entradas y las Páginas, que veremos con detención después.

Por ahora, si agregamos un bloque de imagen, nos vamos a fijar que en su contenido hay botones que nos ofrecen diferentes opciones para seleccionar la imagen:

Subir
Nos permite seleccionar desde nuestro disco duro la imagen que queremos subir.
Biblioteca de medios
Nos permite seleccionar una imagen que ya esté en nuestro registro de medios.
Insertar desde URL
Nos permite agregar una URL de una imagen.

Alerta:
Para subir archivos, el servidor tiene que tener permisos de escritura para el directorio "wp-content/uploads"

Nota: Tambien se puede poner una imagen o un archivo de medios utilizando Drag&Drop hacia el espacio de este bloque.

Encabezados

Los encabezados son títulos interiores de nuestra página, van desde el <h2> hasta el <h6>en HTML (el <h1> ya lo usamos para el título de la página y sólo debería haber uno segun la W3C).

Encabezado
Archivo

Un archivo es cualquier documento que queremos vincular en nuestro documento y que el usuario descargue como vínculo.

Aquí tenemos dos opciones, similares a las imagenes:

Subir
Nos permite seleccionar desde nuestro disco duro el archivo que queremos subir.
Biblioteca de medios
Nos permite seleccionar un archivo que ya esté en nuestro registro de medios.
Seleccionar archivo

Una vez subido el archivo, veremos que está el nombre del documento, un bóton para descargarlo y un botón para copiar la URL por si lo queremos compartir.

Galería

Los bloques de galería permiten seleccionar multiples imagenes de nuestra libería o de multiples arhivos que subamos al sitio, y presentarla en forma de galería.

Una vez seleccionadas las imagenes, en las opciones podemos elegir cuantas columnas de imagenes queremos, si los queremos recortados y que acción queremos que tenga cuando el usuario la seleccione en la página.

Opciones del bloque galería
Lista

Las listas nos permite ingresar contenido ordenado. De manera predeterminada las listas son del tipo no ordenada <ul>, pero se puede cambiar a listas ordenadas, he incluso alterar el tipo y punto de partida.

Cita

Las citas o <blockquote> en HTML es el espacio dedicado para pegar contenido no propio, pero que hace referencia a lo que estamos comunicando. Por norma, todas las citas requieren una fuente para ser fiables.

Audio

Al seleccionar un bloque del tipo audio, al igual que las imágenes, nos permite:

Subir
Nos permite seleccionar desde nuestro disco duro el audio que queremos subir.
Biblioteca de medios
Nos permite seleccionar un audio que ya esté en nuestro registro de medios.
Insertar desde URL
Nos permite agregar una URL de del audio.
Audio

Una vez seleccionado el audio, la interfaz de WordPress lo convierte en una barra de reproducción.

Reproductor de audio
Fondo

El fondo permite poner un bloque con una imagen o color de fondo y un texto. Generalmente utilizado para hacer un llamado de atención.

Aquí podemos subir un archivo o seleccionar de nuestra biblioteca.

Una vez seleccionado tenemos un campo para poner un texto y las opciones que podemos modificar en la paleta del lado.

Nota:
La caja de texto se comporta igual que los bloques de texto, por lo que se puede modificar o agregar nuevos bloques de cualquier tipo.

Video

El bloque de video nos permite, al igual que las imagenes, 3 acciones:

Subir
Nos permite seleccionar desde nuestro disco duro el audio que queremos subir.
Biblioteca de medios
Nos permite seleccionar un audio que ya esté en nuestro registro de medios.
Insertar desde URL
Nos permite agregar una URL de del audio.
Video

Una vez seleccionado el archivo, vemos el clásico reproductor de video. Al lado derecho tenemos varias opciones para el video que acabamos de insertar.

Formato
Código

Code o código es la etiqueta HTML <code>, utilizado en la vieja escuela web, para representar un texto de "código" de manera distinta a los textos de párrafo.

Clásico

Muestra la entrada con los elementos para ser administrado como en versiones anteriores de wordpress. aquí podemos asignar tamaños, estilos vínculos, sobre el texto seleccionado.

HTML Personalizado

Este bloque nos permite escribir directamente código HTML que va a ser interpretado por WordPress.

Preformateado

El texto preformateado se lee "tal cuál" como se escribe. El texto está encerrado entre las etiquetas <pre></pre>y permite una lectura literal, saltos de líneas, espacios y tabulaciones.

Párrafo de cita

Las citas nos permiten mostrar un contenido citado de otra fuente. Normalmente encerrado entre las etiquetas <blockquote></blockquote>. Viene con el espacio para poner la fuente de la cita.

Tabla

Las tablas son estructuras para datos tabulados. Al seleccionar este tipo de bloque, nos permite ingresar la estructura <table>, con sus filas <tr> y celdas <td>

,
Verso

Una mezcla rara que se diseño para escribir y presentar versos. Básicamente es una etiqueta <pre></pre>con un clase que la diferencia del bloque preformateado.

Elementos de diagramación
Botones

El bloque de botón nos permite hacer un llamado a acción y vincular a otra página en nuestro sitio u otro sitio. En la columna derecha se puede seleccionar diferentes parámetros, desde colores y relleno, hasta los bordes y su radio.

Columnas

Las columnas nos permite separar la fila en varios espacios de trabajo, cada uno puede tener uno o varios tipos de bloques diferentes.

Salto de página

Permite separar el contenido de una entrada en una navegación parcelada, osea va a mostrar el contenido hasta este punto, y nos entrega una herramienta de navegación para ver la siguiente parte..

Separador

El separador es una línea <hr>utilizada para separar contenido en una entrada.

Espaciador

El espaciador es una caja vacía que permite separar contenidos de 2 bloques.

Más

La línea más inserta un comentario en la estructura de la entrada que permite, en la vista agrupada de entradas, no presentar tódo el contenido, si no hasta dónde llega el comentario y automáticamente aparece el vínculo para "Leer más". La presentación de este vínculo puede cambiar dependine del tema utilizado.

Media & Texto

Este bloque considera una área para una imágen y otra para un texto. Una vez ingresado se puede definir en que lado se va a ubicar los dos elementos.

Grupo

El grupo permite poner un un sólo bloque, nuevos bloques de contenido de manera agrupada.

Widgets (comportamientos)

Los Widgets o comportamientos son encapsulados de programación con funciones ya definidas. Algunas vienen predeterminadas por WordPress, otras aparecen en la medida que extendemos la capacidad de la aplicación con plugins.

Shortcode

Los Atajos de código o shortcode en ingles, es la manera que tiene WordPress de incorporar módulos pre hechos, en la estructura de contenido, va a depender de qué es lo que estamos incrustando, la manera en que se usa, pero por lo general, vemos corchetes cuadrados con los parámetros que necesita para funcionar. Por ejemplo, las galerías de imágenes se pueden agregar cómo: [gallery id="123" size="medium"], dónde el primer elemento es la función que lo va interpretar y el resto los párametros que va a utilizar.

Íconos sociales

Este comportamiento permite insertar en nuestro diseño las redes sociales de nuestro sistema. Va a mostrar los ícono que tienen una URL asociada. Si no está el ícono en la primera lista que sugiere, se puede seleccionar con el signo más, otras redes.

Archivos

Comportamiento que permite los archivos creados. Los archivos son agrupación de entradas ordenadas por fecha de publicación.

Calendario

El calendario es un comportamiento que nos permite acceder a las entradas dependiendo de la fecha d su publicación.

Categorías

Comportamiento que permite listar todas las categorías que tiene entradas publicadas, de tal manera que se puede acceder a las entradas agrupadas por categoría.

Últimos comentarios

Comportamiento que permite presentar como contenido los últimos comentarios que se han publicado en el sitio.

Últimas entradas

Comportamiento que permite insertar listado de las últimas entradas públicas del sitio.

RSS

Comportamiento que permite mostrar como título vinculado, las entradas de un RSS (archivo XML).

Buscar

Comportamiento que ingresa un formulario para realizar búsquedas en la base de datos de entradas públicas.

Nube de etiquetas

Comportamiento que permite insertar en nuestra página una navegación por "nube de etiquetas", o sea. toma las etiquetas asignadas a las entradas y entre más presencia de contenidos exista, más presencia va a tener entre todas las etiquetas, facilitando reconocer de qué temas hay más contenido en el sitio.

Incrustados

Los incrustados son fragmentos de código que se generan en otros dominios, por ejemplo youtube o twitter. Cómo cada una tiene diferentes manera de incrustarse en nuestro código, podemos elegir el origen, más la URL, para mostrarla.

  • Embed
  • Facebook
  • VR Image
  • Twitter
  • YouTube
  • Instagram
  • WordPress
  • SoundCloud
  • Spotify
  • Flickr
  • Vimeo
  • Animoto
  • CloudUp
  • CollegeHumor
  • Dailymotion
  • Funny or Die
  • Hulu
  • Imgur
  • Issuu
  • Kickstarter
  • Meetup.com
  • Mixcloud
  • Photobucket
  • Crowdsignal
  • Reddit
  • ReverbNation
  • Screencast
  • Scribd
  • Slideshare
  • SmugMug
  • Speaker Deck
  • TED
  • Tumblr
  • VideoPress
  • WordPress.tv
Reutilizables

En esta sección se encontrarán los fragmentos que hayamos guradado para ser reutilizado. Se puede guardar cualquier tipo de fragmento. Basta con seleccionar "Anadir a bloques reutilizables" desde el menú de puntitos, cuando tengamos seleccionado el bloque que queremos reutilizar. Ésta queda en memoria y puede ser reutilizada desde cualquier entrada.

Parámetros del documento

Así como cada bloque tiene sus comportamientos propios. En el lado derecho de la interfaz encontramos los parámetros generales de la entrada o página.

Estado y visibilidad

Aquí configuramos el estado y visibilidad de nustra entrada.

Visibilidad:

Se refiere a quien tiene acceso a la página. Normalmente es Pública, o sea que cualquiera que entra al sitio puede ver su contenido, pero tambien la podemos dejar en PRivada, o sea que solo editores y administradores la pueden ver, o Protegida por contraseña, o sea que se puede ver el contenido si es que se conoce la contraseña que se asigna.

Publicar

La segunda opción tiene que ver con la fecha en que quiero que sea pública esta entrada. De manera predeterminada es "inmediatamente", o sea con la fecha y hora en que se guarde el documento. Tambien se puede elegir otra fecha de publicación. Si la fecha es posterior a hoy, entonces la entrada va a existir, pero no se va apresentar como contenido hasta esa fecha/hora asignada. Muy práctico para adelantar publicaciones a futuro.

Fijo en la parte superior

Si se selecciona fíjalo a la parte superior del blog entonces, en la vista de lista de las entradas, siempre va a estar en la parte superior, salvo que exista una entrada, con fecha de publicación posterior, que también esté fijada.

Pendiente de revisón

Pendiente de revisión, permite guardar la entrada en progreso y no ser visible hasta que un editor o adminsitrador le de el visto bueno.

Autor

Por último se puede selccionar el autor de la entrada, que no necesariamente es el que la está construyendo. Este menú desplegable se alimenta de la lista de usarios.

Estado y visibilidad
Enlaces permanentes

Esta sección aparece una vez que ya está publicada la entrada, y nos permite modificar el Slug, o sea, el nombre corto que se asigna a la URL. de la página. Además de poder modificar el slug no entrega una dirección URL para acceder directamente al contenido.

Enlace permanente

Nota:
Al momento de Publicar la entrada, si el slug está utilizado por otra entrada, le va a poner un incremento numérico en el slug

Categorías

Las categorías nos permiten agrupar las entradas de la misma categoría, tanto para la navegación, c´omo para el acceso.

En esta sección nos presenta la lista de las categorías registradas en el sistema, o agregar una nueva para ser usada con posterioridad.

Categorías
Etiquetas

Al igual que las categorías, las etiquetas nos permiten agrupar y ordenar la información. Esto facilita su agrupación y acceso.

Aquí podemos agregar nuevvas o seleccionar de las qiue ya existan.

Ejemplo de etiquetas
Etiquetas

Las etiquetas tambien permiten generar un mapa de presencia de nuestras etquetas. Entre más entradas tenga la etiqueta, más grande y destacada estará en la nube.

Etiquetas
Etiquetas
Imagen destacada

La imagen destacada es la que acompaña la entrada en la página de listado o en la página de la entrada. Dependiendo de la plantilla tiene diferentes comportamientos.

Para asignar una imagen, basta con seleccionar en el recuadro "Establecer la imagen destacada" y seleccionar de nuestra librería o subir un nuevo archivo. Aquí está permitido hacer drag/drop de la imagen sin pasar por el proceso de agregar media.

Etiquetas
Extracto

El extracto es un pequeño resumen de la entrada que, dependiendo de la plantilla, permite mostrar este contenido al listar todas las entradas.

Etiquetas
Comentarios

Aquí nos permite habilitar que la entrada tenga comentarios y además si queremos registrar el pingback y los trackback (registro de la vinculación de esta entrada en otros blogs).

Etiquetas
Atributos de entrada

Dependiendo de la plantila, en esta sección nos permite elegir que tipo de plantilla base queremos utilizar para la entrada.

Etiquetas
Revisiones

Desdse las revisiones podemos acceder a los respaldos y versiones anteriores de la misma entrada, por si queremos regresar a otras versiones.

Etiquetas

Si seleccionamos las entradas nos lleva a una interfaz que nos permite comparar el contenido actual con las versiones que tenga guardado, navegando con la barra deslizadora por el tiempo. Al seleccionar "Restaurar este guardado automático" nos actualiza la entrada a este estado.

Ejercicio:
  • Generar una entrada, que contenga al menos 1 bloque de cada tipo, contando la experiencia con el COVID-19.
  • Generar un listado de 2 ejemplos prácticos en los que se podría utilizar cada tipo de bloque. 

Modificar una entrada

Para modificar una entrada tenemos que acceder desde el menú "Entradas" a la lista de entradas creadas y desde ahí seleccionar un título o el menú "editar" que aparece debajo del título cuando ponemos el cursor encima.

La interfaz es igual que la de agregar una entrada con la diferencia que el botón "publicar" ahora dice actualizar.

Eliminar una entrada

La eliminación de una entrada pasa por dos procesos: En principio las entradas no se eliminan, se mueven a la "papelera" un lugar donde existen pero no son públicas.

Si ya se ha tomado la decisión de eliminar (erradicar), en la sección de entradas hay que filtrar por las que están en la papelera y desde la lista, seleccionar "Eliminar permanentemente" de las opciones que aparecen cuando se pasa el cursor por encima del título.

Menú Categorías

Este menú permite la administración de las categorías, agregar, modificar o eliminar las que ya existen.

A diferencia de las interfaces anteriores, en categorías tenemos en una sola pantalla la capacidad de agregar categorías y ver un listado de las ya existentes (junto con cuantas entradas hay para cada categoría).

Nota:
Si elimina una categoría no eliminará las publicaciones que hay en ella. Las entradas que fueron asignadas solamente a esa categoría se moverán a la categoría Sin categoría.

Menú Etiquetas

Este menú permite la administración de las etiquetas, agregar, modificar o eliminar las que ya existen.

Páginas

Esta sección en el administrador permite ver, agregar, modificar o eliminar páginas en nuestro sitio. De entrada se presentará una lista de todas las páginas creadas, estén o no activas y públicas.

Se presenta con cuatro suprafiltrajes que nos permite acceder con mayor velocidad al contenido que estamos buscando para modificar o eliminar:

  • Todas las páginas
  • Las publicadas
  • Los borradores
  • Las que están en la papelera

Nota:
Si no aparece uno de estos suprafiltros es por que no hay contenido en ellas.

Las páginas ya creadas se presentan en un listado filtrable con cuatro columnas de información:

  • Título
  • Autor
  • Comentarios
  • Fecha

Nota:
Las columnas del listado a mostrar se pueden seleccionar en "opciones de pantalla" , así como la cantidad por pantalla.

Si seleccionamos algunos de estos títulos, la lista de página presentada se ordenará de manera ascendente o descendente según la columna seleccionada.

Nota:
Si bien el ID de la página no es visible en la lista, al pasar con el cursor por el título el ID se muestra como parte de la dirección.

Se puede filtrar la información por fecha de publicación o por búsqueda de palabras para limitar la lista y poder acceder con mayor facilidad a modificar un contenido.

Al pasar el cursor por encima de los títulos se despliega debajo de él los accesos rápidos a acciones a realizar:

Editar:
Nos permite acceder a la interfaz de edición de la página
Edición rápida:
nos muestra en la misma pantalla una interfaz para controlar campos generales de presentación de esta página
Enviar a la papelera:
Nos permite eliminar la página.
Ver / Vista Previa:
Nos permite ver cómo se presentará el contenido editado en la página.

Otra acción en esta pantalla es la posibilidad de seleccionar de la lista varias entradas (checkbox en la primera columna) y a este aplicarle una acción masiva:

  • Editar
  • Mover a la papelera

Agregar nueva pagina

Para agregar una nueva página podemos seleccionar el botón "Agregar nueva" en la parte superior de la lista de páginas o desde el menú "agregar nueva". En ambos casos se presentará una página con los campos necesarios para su creación. Al igual que en las entradas, la interfaz que se presentaes gutenberg, por lo que podemos ir agregando bloques de diferentes tipos para poner el contenido de nuestra página.

Nota:
La lista de tipos de bloques disponibles para las Páginas, son los mismo que en la entrada, por lo que no se van a repetir en esta sección.

Cuando ya tenemos lista la página a ser publicada, basta entonces con apretar el botón "publicar" en la sección de publicar para que el documento sea público o "pendiente de revisión" si queremos seguir trabajando en el después.

Parámetros del documento

En el lado derecho de la interfaz encontramos los parámetros generales de la Página. Aquí vamos a encontrar diferencias con lo que nos ofrece las opciones de las Entradas.

Estado y visibilidad

Aquí configuramos el estado y visibilidad de nustra entrada.

Visibilidad:

Se refiere a quien tiene acceso a la página. Normalmente es Pública, o sea que cualquiera que entra al sitio puede ver su contenido, pero tambien la podemos dejar en PRivada, o sea que solo editores y administradores la pueden ver, o Protegida por contraseña, o sea que se puede ver el contenido si es que se conoce la contraseña que se asigna.

Publicar

La segunda opción tiene que ver con la fecha en que quiero que sea pública esta entrada. De manera predeterminada es "inmediatamente", o sea con la fecha y hora en que se guarde el documento. Tambien se puede elegir otra fecha de publicación. Si la fecha es posterior a hoy, entonces la entrada va a existir, pero no se va apresentar como contenido hasta esa fecha/hora asignada. Muy práctico para adelantar publicaciones a futuro.

Pendiente de revisón

Pendiente de revisión, permite guardar la entrada en progreso y no ser visible hasta que un editor o adminsitrador le de el visto bueno.

Autor

Por último se puede selccionar el autor de la entrada, que no necesariamente es el que la está construyendo. Este menú desplegable se alimenta de la lista de usarios.

Estado y visibilidad
Enlaces permanentes

Esta sección aparece una vez que ya está publicada la entrada, y nos permite modificar el Slug, o sea, el nombre corto que se asigna a la URL. de la página. Además de poder modificar el slug no entrega una dirección URL para acceder directamente al contenido.

Enlace permanente

Nota:
Al momento de Publicar la entrada, si el slug está utilizado por otra entrada, le va a poner un incremento numérico en el slug

Imagen destacada

La imagen destacada es la que acompaña la página. Dependiendo de la plantilla tiene diferentes comportamientos.

Para asignar una imagen, basta con seleccionar en el recuadro "Establecer la imagen destacada" y seleccionar de nuestra librería o subir un nuevo archivo. Aquí está permitido hacer drag/drop de la imagen sin pasar por el proceso de agregar media.

Etiquetas
Comentarios

Aquí nos permite habilitar que la entrada tenga comentarios. Por lo general las Páginas no tienen comentarios, pero igual se pueden activar.

Etiquetas
Atributos de Página

Dependiendo de la plantila, en esta sección nos permite elegir que tipo de plantilla base queremos utilizar para la Página, así como su dependencia a otras páginas. Esto sirve para la construcción dinámica del menú.

Etiquetas
Revisiones

Desdse las revisiones podemos acceder a los respaldos y versiones anteriores de la misma página, por si queremos regresar a otras versiones.

Etiquetas

Nota:
El orden de las cajas se puede personalizar tomando con el cursor desde el título y moviéndolo a la ubicación deseada.

Modificar una página

Para modificar una página tenemos que acceder desde el menú "paginas" a la lista de páginas creadas y desde ahí seleccionar un título o el menú "editar" que aparece debajo del título cuando ponemos el cursor encima.

La interfaz es igual que la de agregar una página con la diferencia que el botón "publicar" ahora dice actualizar.

Eliminar una página

La eliminación de las páginas pasa por dos procesos: En principio las páginas no se eliminan, se mueven a la "papelera" un lugar donde existen pero no son públicas.

Si ya se ha tomado la decisión de eliminar (erradicar), en la sección de páginas hay que filtrar por las que están en la papelera y desde la lista, seleccionar "Eliminar permanentemente" de las opciones que aparecen cuando se pasa el cursor por encima del título.

Biblioteca de medios

En multimedia se administran todos los recursos multimediales con los que podemos interactuar en el sistema: imágenes, flash, videos, audios, PDF, etc. Esta sección en el administrador permite ver, agregar, modificar o eliminar archivos de la biblioteca. De entrada se presentará una lista de todos los archivos subidos, estén o no activas y públicas.

El concepto es concentrar todos los archivos multimediales para poder ser re utilizado desde la biblioteca y no tener que subir de nuevo los mismos tipos de archivos.

Se presenta con tres suprafiltrajes que nos permite acceder con mayor velocidad al contenido que estamos buscando para modificar o eliminar:
  • Todos los archivos
  • Las imágenes
  • Audio
  • Video
  • Los que no están adjuntados a una página o entrada.

Nota:
Si no aparece uno de estos suprafiltros es por que no hay contenido en ellas.

Esta sección tiene dos visualizaciones: como galería o como lista de archivos.

Los archivos se presentan en un listado filtrable con cinco columnas de información:

  • Archivo (pre visualización)
  • Autor
  • Adjuntado a
  • Comentarios
  • Fecha

Nota:
Las columnas del listado a mostrar se pueden seleccionar en "opciones de pantalla", así como la cantidad por pantalla.

Si seleccionamos algunos de estos títulos, la lista de archivos presentada se ordenará de manera ascendente o descendente según la columna seleccionada.

Se puede filtrar la información por fecha de publicación o por búsqueda de palabras para limitar la lista y poder acceder con mayor facilidad a modificar un contenido.

Al pasar el cursor por encima de los títulos se despliega debajo de él los accesos rápidos a acciones a realizar:

Editar:
Nos permite acceder a la interfaz de edición del archivo.
Eliminar permanentemente:
Elimina el archivo de la biblioteca.
Ver:
Lleva a una página de WordPress para pre visualizar el archivo.

Otra acción en esta pantalla es la posibilidad de seleccionar de la lista varias entradas (checkbox en la primera columna) y a este aplicarle una acción masiva para eliminar permanentemente.

Nota:
Para subir archivos, el servidor tiene que tener permisos de escritura para el directorio "wp-content/uploads"

Para agregar un nuevo recurso a la biblioteca, si es que no lo agregamos directamente desde el formulario de entradas o páginas, seleccionamos el botón "Agregar nueva" en la pantalla de biblioteca multimedia o desde el menú izquierdo "Agregar nueva". o simplemete arrastramos el archivo hacia el espacio de trabajo y automáticamente cargará la interfaz de subir imagen.

El formulario para subir archivos al servidor es sumamente sencillo en su primer paso ya que solo nos pide identificar la ruta, en nuestro equipo local, de la ubicación del archivo. Dependiendo del formato del archivo, más concretamente la extensión de este, nos permite asociarlo con información importante para la biblioteca.

Se pueden subir varios archivos simultáneamente y a medida que van subiendo se desplegará una barra de avance. Una vez finalizad la carga del archivo se puede seleccionas el vínculo "mostrar" para acceder a la ficha de biblioteca y complementar los datos.

Una vez terminada la carga de archivos y a modificación de su ficha es necesario seleccionar el botón "Guardar todos los cambios" para no perder la información registrada.

Nota:
El tamaño de los archivos que se puede subir está determinado por la configuración de PHP en el servidor.

Otra herramienta que podemos encontrar en esta sección al seleccionar una imagen, es el opción de realizar, en el servidor, modificaciones a la imagen.

Si seleccionamos el botón "editar imagen", vamos a tener una interfaz que nos permite Recortar, Rotar, o Voltear la imagen. No es la mejor herramienta de edición de imagen, pero salva para hacer retoques pequeños de imágenes que ya hayamos subido.

Comentarios

En las entradas o páginas que creemos podemos o no aceptar comentarios de los usuarios. Todos los comentarios se concentran en este menú y tiene como primer gran objetivo el poder administrar, aprobar o eliminar, lo que se va a publicar.

Se presenta con cinco suprafiltrajes que nos permite acceder con mayor velocidad al contenido que estamos buscando para modificar o eliminar:

  • Todos
  • Pendientes
  • Aprobado
  • Spam
  • Papelera

Nota:
Si no aparece uno de estos suprafiltros es por que no hay contenido en ellas.

Los comentarios se presentan en un listado filtrable con tres columnas de información:

  • Autor:
  • Quién hace el comentario.
  • Comentario:
  • el comentario a publicar.
  • En respuesta a:
  • la relación con la entrada o página, donde realiza el comentario.

Nota:
Las columnas del listado a mostrar se pueden seleccionar en "opciones de pantalla", así como la cantidad por pantalla.

Si seleccionamos algunos de estos títulos, la lista de archivos presentada se ordenará de manera ascendente o descendente según la columna seleccionada.

Se puede filtrar la información por comentarios, ping o por búsqueda de palabras para limitar la lista y poder acceder con mayor facilidad a modificar un contenido.

Al pasar el cursor por encima del comentario se despliega debajo de él los accesos rápidos a acciones a realizar:

Aprobar/Rechazar:
Nos permite rápidamente hacer público un comentario.
Respuesta:
Muestra un formulario que permite generar rápidamente una respuesta del autor o administrador a un comentario.
Edición rápida:
Muestra una ventana de formulario para correcciones rápidas de un comentario.
Editar:
Nos permite acceder a la interfaz de edición del comentario.
Spam:
Nos permite clasificar el comentario como spam. La diferencia con enviar a la papelera es que WordPress aprende los comentario que debería pre-marcar como spam.
Papelera:
Elimina el comentario de la lista, .

Otra acción en esta pantalla es la posibilidad de seleccionar de la lista varias entradas (checkbox en la primera columna) y a este aplicarle una acción masiva para:

  • Rechazar
  • Aprobar
  • Marcar como spam
  • Mover a la papelera

Objetivo del capítulo:
Entender como funcionan las plantillas o temas en WordPress.

La presentación de nuestra página hecha con WordPress puede variar y no necesariamente quedarse con el Tema o plantilla (theme) base que viene de manera predeterminada.

Dependiendo de la plantilla seleccionada o realizada se pueden acceder a funcionalidades controlables desde este mismo menú (widgets, menú, color de fondo, cabecera, etc.).

Administración de Temas

Lo primero que vemos al acceder al menú de "Apariencia" son todos los "Themes" o temas que tenemos instalados y que podemos utilizar como plantillas.

Nota:
Esta lista se alimenta de los directorios que se encuentran en "wp-content/themes".

La primera instalación de WordPress viene con 3 temas predeterminados:

  • Twenty Twenty
  • Twenty Nineteen
  • Twenty Seventeen

Donde el primero es el tema seleccionado y con el cuál se presentan los contenidos.

Si seleccionamos sobre la imagen o el texto "vista previa" podemos ver el comportamiento del tema con nuestros contenidos actuales y los elementos que son configurables de él.

Nota:
Las opciones de configuración varían de tema en tema dependiendo de las funciones incorporadas para ello.

Para activar un tema, podemos hacerlo desde la ventana de previsualización o directamente del listado desde el vínculo "activar".

El vínculo "Detalles" muestra más información sobre el tema y el vínculo "borrar" permite la eliminación del Tema.

Instalar un nuevo Tema

Una segunda opción, en esta misma pantalla, es la posibilidad de utilizar un buscador de temas al seleccionar "Añadir Nuevo". Tiene la ventaja de que busca en la Base de datos de plantillas compartidas de WordPress por palabras claves o por su nombre utilizando el buscador de texto. Es un excelente punto de partida para acercarse a un diseño inicial de los requerimientos de nuestro sitio.

Una vez filtrada las opciones, utilizando cualquiera de los caminos mencionados anteriormente, las plantillas de resultado se presentan con una imagen de pre visualización en chico y una descripción. Si seleccionamos el vínculo "detalle", se despliega en la misma pantalla información del autor, versión y valoración en estrellitas que la comunidad entrega.

Si queremos ver más información o la plantilla en la práctica podemos seleccionar la pre visualización o el vínculo de "vista previa". Esta acción monta un página ejemplo con la mayor parte de las características de un sitio y variaciones para ver "en vivo" el comportamiento del tema.

El proceso de instalación suele ser muy sencillo si es que la plantilla es compatible con la versión de WordPress que tenemos instalado. Seleccionamos el vínculo "instalar" desde la lista de plantillas disponibles o desde la previsualización. Esta acción genera la descarga de un archivo comprimido (ZIP) y la instalación en el directorio "wp-content/themes".

Una vez descargado y descomprimido el Tema, podemos activarlo directamente desde ésta ventana o volver al menú de Temas para activarlo dentro de la selección de temas.

Nota:
Una de las ventajas de WordPress, con la forma que consulta la plantilla activa, es que no es necesario compilar o generar otro proceso una vez seleccionada una nueva plantilla.

Widgets

Si bien las siguientes opciones del menú de diseño varían dependiendo del tema seleccionado y su complejidad, es bastante común al menos encontrar los Widgets, Menús y el Editor en línea de todos los archivos del Tema.

Nota:
Está opción está solo disponible en los temas que tienen activado los widgets en las funciones.

Los Widgets son encapsulado que facilita las acciones en un trabajo. En este caso, los widgets en WordPress facilitan la construcción, en áreas determinadas por el diseño del Tema, de contenido encapsulado.

Por ejemplo, se puede poner en la barra lateral (sidebar) un buscador de contenido o un comprimido de las publicaciones agrupados por fechas.

Instalación

En la parte izquierda de la pantalla están los paquetes que se pueden utiliza y en la parte derecha las zonas en las que se puede aplicar (se puede aplicar en más de una área).

Al pasar con el cursor por encima de un widget, éste cambia a una cruz de movimiento. Para activarlo, se toma con el mouse el widget y se arrastra sobre el área en que deseamos que aparezca. De la misma manera se puede organizar los widget de una área para determinar en que orden van a aparecer.

Cada widget se puede expandir dentro del área con configuraciones propias, por ejemplo el título que queremos que tenga en la página o la cantidad de comentarios a mostrar.

Desinstalación

La des instalación se hace de la misma manera que la instalación. Se toma el widget y se saca del área.

Nota:
Al sacarlo del área se van a perder las configuraciones que se hayan asignado al widget.

Menús

Nota:
Está opción está solo disponible en los temas que tienen activado los menus en las funciones.

Si bien, de manera predeterminada, los menús se construyen solos a partir de las páginas de nuestro sitio, esto también se puede personalizar desde el menú "Menús". De hecho, se pueden crear cuantos menús sea necesario para facilitar la navegación del contenido de nuestro sitio.

El primer paso es generar un Nombre del menú en la pantalla de la derecha, esto va a permitir generar diferentes menús personalizados para usar en diferentes zonas.

Una vez puesto el nombre es necesario seleccionar el botón "crear menú".

Una vez generado el menú, podemos seleccionar en que ubicación lo queremos utilizar. Dependiendo del Tema pueden haber varias ubicaciones, por lo que podemos usar los diferentes menús generados en el paso anterior en diferentes zonas del diseño.

Una vez seleccionado y "guardado" la asignación del menú a la zona, podemos poblar el contenido. Básicamente hay 4 tipos de origen del cual podemos sacar contenido para poner en el menú de navegación personalizado.

Seleccionar Páginas

De esta casilla podemos seleccionar cualquier página pública que hayamos construido en nuestro sitio y el vínculo a la página de inicio (determinado en las opciones de lectura de la configuración del sitio)

Una vez ingresados los datos se "Añadir al menú", acción que se refleja en la zona derecha de los menús personalizados, dependiendo de cuál está seleccionado.

Seleccionar Entradas

De esta casilla podemos seleccionar cualquier entrada pública que hayamos construido en nuestro sitio.

Una vez ingresados los datos se "Añadir al menú", acción que se refleja en la zona derecha de los menús personalizados, dependiendo de cuál está seleccionado.

Enlaces personalizados

Aquí definimos direcciones absolutas y el título que aparecerá en el menú de navegación.

Una vez ingresados los datos se "Añadir al menú", acción que se refleja en la zona derecha de los menús personalizados, dependiendo de cuál está seleccionado.

Seleccionar Categorías

La selección de las categorías de nuestros artículos funciona de manera similar que el de las páginas publicadas.

Una vez ingresados los datos se "agrega al menú", acción que se refleja en la zona derecha de los menús personalizados, dependiendo de cuál está seleccionado.

Una vez seleccionados, de cualquiera de las tres fuentes anteriores, Se puede ordenar, e incluso sub depender, cualquier ítem arrastrando por el espacio del menú personalizado.

En esta ventana también, al expandir el ítem con la flecha de la derecha, se mostraran opciones de configuración adicionales. Se puede cambiar la etiqueta que aparecerá en el menú de la página así como el atributo del título del vínculo (tilte=""). También podemos eliminar del menú personalizado o cancelar cualquier modificación que realizamos antes de guardar.

Es importante recordar que los cambios se van a ver reflejados en el sitio a partir del momento que seleccionemos "Guardar menú".

Si tenemos más zonas de menús personalizados en nuestro Tema, podemos seleccionar el mismo o crear nuevas configuraciones personalizadas.

Editor

El "Editor" es una herramienta muy útil para modificar directamente los archivos involucrados en los temas de manera directa y en línea. Es un método rápido pero sin interfaz gráfica.

Para realizar modificaciones podemos seleccionar de la columna derecha el archivo, PHP o CSS, cambiar el contenido en la ventana central y "actualizar archivo" para que se reflejen estas modificaciones.

Es importante considerar que para poder utilizar el editor en línea, es necesario que los archivo tengan permiso de escritura para los anónimos abriendo una gran brecha de seguridad en nuestro sitio, pero muy práctico si estamos en el proceso de puesta en punto del sito.

Objetivo del capítulo:
Entender el objetivo y uso de los plugins en WordPress para extender las capacidades básicas en la personalización de sitios web.

Los plugins o extensiones, son pequeñas aplicaciones escritas en lenguaje PHP que extienden la capacidad de WordPress dando grandes posibilidades de personalización y funcionalidad a los diseños de sitios web.

De manera predeterminada, WordPress viene con 2 plugins: "Akismet" y "Hello Dolly". El primero ayuda a evitar el spam en los comentarios de nuestro sitio al comparar origen y firma contra una BD mundial de spameros. Requiere una "llave" para activarse que puede tener costo si es para un sitio comercial, aunque tiene una versión gratuita para sitios no comerciales o personales. La segunda es más bien una humorada, pero permite entender como funcionan los plugins y su análisis es un buen punto de partida para aprender a hacer plugins propios.

Activación

Al seleccionar el menú "plugins" en el administrador, se presenta una lista de todas las extensiones instaladas. Se puede ver el nombre, una breve descripción, versión y por lo general vínculo externo al manual o página del autor.

El hecho de que estén listados como plugins no implica que estén activos, para ello, hay que seleccionar el vínculo "Activar". Este proceso no es menor, ya que es necesario, por una parte, que WordPress sepa que está activo para tomarlo en cuenta al momento de construir la página, así como para instalar opciones de configuración o incluso tablas en la BD.

Dependiendo de la complejidad del plugin, el proceso de activación también genera un menú de acceso a las opciones de este plugin y aquí puede variar su ubicación, pudiendo estar en el menú plugins, opciones, herramientas o incluso como título nuevo.

Ejercicio:
  • ..

Búsqueda

Existe un amplio repositorio de plugins gratuitos en http://WordPress.org/extend/plugins/ y otro buen tanto que son de pago, pero que pueden resolver temas puntuales de tiempo de desarrollo, por ejemplo: sitios multilenguaje.

Si bien la búsqueda se puede hacer directamente en el sitio oficial, las últimas versiones de WordPress incluyen un buscador en la interfaz de administración bastante completo, basta con seleccionar el botón "Añadir nuevo" desde el listado de plugins o desde el submenú de navegación para tener acceso a la búsqueda de plugins por categoría, nombre, uso, autor, etc.

Nota:
No es menor recordar que la mayor parte de los aportes se registran en ingles en WordPress, por lo que nuestras búsquedas no pueden ser en español.

Utilizando el campo de búsqueda la interfaz nos devuelve un listado de diferentes plugins que podemos utilizar.

Esta lista, aparte de el título y descripción que nos pueden orientar, tienen un sistema de votación por estrellas asignadas que nos entrega el feedback de los usuarios con respecto a un plugin, la cantidad de instalaciones y si el plugin es compatible con la versión de WordPress que tenemos instalados.

Con estos elementos podemos decidir si nos conviene un plugin o no. Pero antes de descargarlo, conviene ver los "Detalles" del plugin, donde suele haber más explicación, pantallazo, el historial, preguntas frecuentes e incluso la compatibilidad con la versión de WordPress que tenemos instalado.

Puntos que hay que considerar de la información que nos entrega del plugin:

Descripción:
Hace lo que necesitamos hacer. No sólo guiarse con el título, si no que leer toda la descripción, por si tiene pagos involucrados, incompatibilidades o simplemente no hace lo que necesitamos que haga.
Compatibilidad:
Está actualizado y al día con la versión de WordPress que tenemos instalado?.
Votación:
Los que lo han usado, cuantos puntos le han dado. obviamente, entre menos estrellas, menos fiable de que funcione en nuestro proyecto.
Descargas:
Desgraciadamente, no todo el que usa el plugin le da una votación, pero si hay muchas descargas, quiere decir que tiene aceptación.
Los comentarios:
Los comentarios de los usuarios pueden dar luces de lo que se puede esperar, como usuario, del plugin, y por que la votación que se le dió.
Soporte:
Fijarse las fechas de los foros de soporte y cuantas preguntas dejan sin responder, ya que si tenemos un problema no vamos a tener a quien recurrir si no hay alguien preocupado con el soporte.
Ejercicio:
  • ..

Instalación

El proceso de instalación es parecido al proceso de los Temas. Basta con apretar el botón "instalar última versión" desde los detalles del plugin o el vínculo "instalar ahora" desde la lista.

Esta acción hará una descarga de los archivos al directorio "wp-content/plugins" dejándolo disponible para ser activado y utilizado dentro de nuestro desarrollo.

Nota:
Si no tenemos la instalación por http, si no que por FTP, antes de la dscarga nos va a pedir los datos de conexión al servidor.

Ejemplos de plugins

Veamos algunos ejemplos de plugins que son útiles dentro un sitio.

WP-PageNavi

Este plugin permite personalizar los vínculos de paginación de las listas de entradas sustituyendo el clásico "siguiente" y "anterior".

Los parámetros de configuración se encuentran en el menú de opciones de la interfaz de administración y permite una gran variedad de configuraciones.

All in One SEO Pack

Este plugin se enfoca en optimizar los contenidos de nuestras páginas para su posicionamiento en los buscadores, tanto estructural como de MetaTags.

Google XML Sitemaps

Facilita la generación del archivo Sitemap con la estructura de nuestro sitio en XML. Buscadores como google, bing, yahoo y ask.com ocupan este archivo para indexar el sitio en sus servidores.

Tiene varias opciones configurables desde el menú de opciones del administrador.

Contact Form 7

WordPress no viene con nigún formulario de contacto integrado, por lo que este plugin se convierte en una herramienta fundamental a la hora de necesitar un medio por el cual tener una conversación con usuarios anónimos.

Su uso es sumamente sencillo y se puede complementar con el plugin "Contact Form to DB Extension " para dejar registro de los contactos en una tabla en la base de datos.

WP-Polls

Permite generar encuestas en nuestro sitio, con un completo informe de participación.

Esta encuesta se integra rápidamente en el Tema a partir de un widget y es altamente personalizable.

Objetivo del capítulo:
Conocer la estructura y principales funciones de WordPress para la personalización de Temas.

Alerta:
Este capítulo reuquiere saber y entender de PHP, por lo que es necesario que manejes y entiendas como funciona y se escribe PHP. Básicamente poder identificar 5 elementos:
- Funciones
- Variables
- Condicionales
- Matrices
- Bucles
Si no estas seguro, te sugiero repasar y estudiar el manual de PHP antes de continuar.

La primera opción en la personalización de un sitio hecho en WordPress es basarse en plantillas ya existentes de libre distribución y sobre esa hacer modificaciones hasta que se ajuste a nuestros requerimientos comunicacionales y de diseño.

Sin embargo, muchos proyectos personales, ya sea para un cliente o para dedicarse al desarrollo y venta de plantillas de WordPress, requieren de un diseño que no existe, por lo que tendremos que partir de cero con el diseño e ir incorporando las funciones de WordPress para no perder la capacidad CMS de administrar los contenidos.

Para partir con nuestro diseño propio y nuevo, es importante entender cómo se estructuran las plantillas y cuales son los requerimientos básicos de WordPress para poder trabajar.

Nota:
Para este capítulo trabajaremos con un diseño HTML propio o podemos descargar miTema.zip

Archivos base

WordPress concentra las plantillas en el directorio "wp-content/themes", por lo que nuestro tema debe partir con un directorio dentro de esta ruta.

Nota:
Es sugerible que el nombre del directorio siga el patrón estándar de Internet y evitar caracteres especiales, acentos y espacios.

Dentro del directorio, con el nombre de nuestra plantilla, debe ir al menos un archivo "index.php" y un archivo de estilo "style.css", el resto de los archivos de la jerarquía pueden faltar, pero estos dos son indispensables para que exista y sea tomada en cuenta el tema.

En la cabecera del archivo "style.css" y dentro de un bloque de comentarios se ponen los datos de identificación de la plantilla y que van a ser los datos que va a tomar el administrador de diseños para desplegar como información:

Ejemplo:
/*
Theme Name: nombre del tema
Theme URI: http://urldeltema
Description: Este diseño es especial para mi cliente Sitio.
Author: autor del tema
Author URI: dirección web del autor 
Version: 0.1
License: GNU General Public License
Tags: mi sitio, especial, personal, html5
*/

Nota:
Si queremos tener una imagen de pre visualización del diseño en la lista de temas, debemos tener una imagen, ya sea del diseño o un pantallazo del HTML montado, con el nombre "screenshot.png" dentro del directorio del tema.

Si seleccionamos "temas" en la sección de "diseño" del administrador, ahora debería aparecer el tema recién hecho para ser activado.

Ahora que ya tenemos los primeros pasos para la generación de nuestras propias plantillas, es hora de comenzar a integrarla con el motor de base de datos de WordPress y para eso es necesario revisar algunas funciones básicas propias de WordPress.

Nota:
Todas las funciones que veamos en este documento y muchas más se pueden encontrar en http://codex.WordPress.org/Function_Reference/ como parte de las funciones de template o plantillas.

Ejercicio:
  • Genera los archivos bases para una nueva plantilla que se llame miTema

Funciones de Información

Lo primero que debemos hacer con la plantilla es controlar la información de entorno que maneja WordPress sobre nuestra instalación y las configuraciones. Una de las funciones principales para esto es bloginfo().

bloginfo()

Despliega información acerca del blog, la mayor parte se toma de la información entregada en las opciones generales. El uso de esta función siempre tiene una salida a pantalla.

Parámetros:

name:
nombre del sitio.
description:
descripción del sito.
admin_email:
correo electrónico del administrador del sitio.
url:
dirección url de la instalación.
wpurl:
dirección del directorio WordPress .
stylesheet_directory:
dirección del directorio de la hoja de estilo.
stylesheet_url:
dirección del archivo de estilos.
template_directory:
dirección del directorio de plantillas seleccionado.
template_url:
dirección de la plantilla seleccionada.

Ejemplos

Ejemplo:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title><?php bloginfo(name); ?> - <?php bloginfo(description); ?></title>
<link href="<?php bloginfo(stylesheet_url); ?>" rel="stylesheet" type="text/css">
</head>

<body>
<a href="<?php bloginfo(wpurl); ?>"> <?php bloginfo(name); ?></a>
<?php bloginfo(description); ?>
</body>
</html>
Ejercicio:
  • Variabiliza las Rutas de tu diseño para que se ajusten a las rutas absolutas de las plantillas.

Funciones del loop

Si o si WordPress va a realizar una consulta a la base de datos, es su naturaleza. Esta consulta tiene la capacidad de distinguir entre la lista de entradas o artículos y cuándo tiene que mostrar el contenido completo del artículo o página dependiendo de los parámetros que pasemos en el query como parte de la URL.

Si queremos mostrar este contenido (que puede ser varios o un sólo resultado) se ocupa el "loop". El "loop" es el centro de la razón de ser de WordPress y es lo que se ocupa para publicar los contenidos de la base de datos.

Ejemplo:
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<?php endwhile; else: ?>
<p><?php echo "no hay resultado" ?></p>
<?php endif; ?>

Evaluemos el código de este "loop": si hay resultados en la consulta (have_posts()) se realiza un bucle (while()) asignando a the_post() los valores de cada iteración. Si no hay resultados, construye un párrafo con el mensaje "no hay resultado". Veamos las funciones involucradas:

have_posts()

Existe, si es que la consulta devuelve más de un resultado. Está pensado para poder mostrar en la misma página múltiples resultados dentro del bucle (while)

Nota:
La cantidad a mostrar depende de los parámetros definidos en la configuración de WordPress (Ajustes/Lectura).

the_post()

Por otro lado, si el resultado de la consulta es filtrado por algún parámetro pasado por la URL y tiene resultado, entonces mostrará solo el contenido de esa entrada y para cada iteración del bucle.

Una vez que estamos dentro del "loop" podemos utilizar algunas funciones para mostrar el contenido.

the_title()

Muestra o devuelve el título de la entrada. La función se ocupa dentro del "loop".

Ejemplo:
<?php the_title( $before, $after, $echo ); ?>

Parámetros:

$before:
(cadena) Texto para poner antes del título. El predeterminado es ''.
$after:
(cadena) Texto para poner después del título. El predeterminado es ''.
$echo:
(Boolean) Muestra el título (true) o devuelve para su uso en PHP (false). El predeterminado es true.

Nota:
Casi todas las funciones que tienen el prefijo the_ por definición hace una salida a pantalla. Por otro lado, casi todas las funciones de temas que parten con el prefijo "the_" tiene su par "get_" que permite utlizar el contenido como cadena sin salida a pantalla directa. Ej: <a href="<?php the_permalink(); ?>" title="<?php echo get_the_title(); ?>"><?php the_title(); ?></a>

the_content()

Despliega el contenido de la entrada actual. Esta función se ocupa dentro del "loop".

Si la entrada tiene el tag <!--more--> para definir el punto de corte y al estar en un "loop" se mostrará solamente el texto antes de la etiqueta como extracto cuando se muestra la lista de entradas. Este corte no se verá al visualizar como artículo individual.

Ejemplo:
<?php the_content( $more_link_text, $stripteaser ); ?>

Parámetros:

$more_link_text:
(cadena) (opcional) el texto a mostrar para el vínculo "more".
$stripteaser:
(boolean) (opcional) Elimina el contenido anterior al "more".

the_permalink()

Despliega la URL para el permalink para la entrada que se despliega en el proceso del Loop. Este Tag debe usarse dentro del Loop.

Ejemplo:
<a href="<?php the_permalink(); ?>">permalink</a> 

the_author()

Este tag muestra el nombre del autor de una entrada según la configuración en las opciones de usuario. Debe ser usado dentro del Loop.

Ejemplo:
<p>Esta entrada esta escrita por <?php the_author(); ?></p> 

Parámetros:

Nota:
A este Tag se le puede pasar el Id de una entrada para saber el autor. $post-id (entero).

the_excerpt()

Muestra el "extracto" de la entrada actual con [...] al final de la entrada que no es un texto "más" vinculado. Si no se ingresa explícitamente un extracto en la administración de la entrada, mostrará un extracto de 55 palabras del primer párrafo de la entrada. En este último caso, todas las etiquetas HTML serán extirpadas. El uso de este tag tiene que ser dentro del Loop.

Ejemplo:
<?php the_excerpt(); ?>

the_category()

Despliega un vínculo a la o las categorías en las que la entrada está registrada. Este Tag debe ser usado dentro del Loop.

Ejemplo:
<p>Categorías: <?php the_category(' '); ?></p>

Parámetros:

separator
(cadena) Texto o caracteres que se mostrarán entra cada categoría a la cual pertenece la entrada. El predeterminado es mostrar los vínculos en una lista no ordenada.
parents
(cadena) Cómo mostrar vínculos que residen en sub categorías las opciones son:
  • 'multiple' - Muestra vínculos separados para categorías y subcategorías mostrando la relación "padre/hijo".
  • 'single' - Muestra vínculo a la subcategoría solamente.
post_id
(entero) El ID de la entrada para recuperar la categoría de la esa entrada. El valor predeterminado es Falso.

the_tags()

Despliega las etiquetas asociadas a nuestra entrada con una navegación hacia la página agrupadora. El predeterminado es mostrar los vínculos separados por coma.

Ejemplo:
<p>Etiquetas: <?php the_tags(' '); ?></p>

Parámetros:

$antes
(cadena) (opcional) Texto o caracteres que se mostrarán antes de la etiqueta.
$separador
(cadena)(opcional) Caracter searador de las etiquetas.
$después
(cadena) (opcional) Texto o caracteres que se mostrarán después de la etiqueta.

the_date()

Muestra el día de la publicación de la entrada.

Si es que se está desplegando una lista de entradas, y éstas tienen la misma fecha de publicación, sólo se mostrara la fecha de publicación de la primera entrada en el Loop.

Ejemplo:
<?php the_date( $format, $before, $after, $echo ); ?>

Parámetros:

$format:
(cadena) (opcional) El formato de la fecha. El predeterminado es el que está configurado en las opciones de WordPress.
$before:
(cadena) (opcional) Texto para mostrar antes de fecha.
$after:
(cadena) (opcional) Texto para mostrar después de la fecha
$echo:
(boolean) (opcional) Muestra la fecha cuando está en True o devuelve la información para ser usado por PHP .

Nota:
Un problema recurrente con la función the_date() es que cuando estamos listando contenido agrupado, la fecha de publicación sólo se muestra si la entrada anterior tiene una fecha distinta (esto está diseñado para ordenar por fecha los contenidos). Si queremos que todas las entradas tengan fecha debemos usar la función the_time() y darel formato de fecha.

the_time()

Ejemplo:
<?php the_time( $d ); ?>

Parámetros

$d:
(cadena) (opcional) El formato que debe desplegarse el tiempo. El formato predetermnado es el configurado en los ajustes de WordPress.
Ejemplo:
<div><?php the_time('F j, Y'); ?></div> 

the_post_thumbnail()

Alerta:
Para contar con imagenes destacadas en el loop, es necesario definir su uso como function general de la plantilla, en el archivo functions.php con la función add_theme_support()

Ejemplo:
<?php the_post_thumbnail( $size, $attr ); ?>

Parámetros:

$size
(Cadena/Array) (Opcional) Tamaño de la imagen. Ya sea una el nombre del tamaño predeterminado ("thumbnail", "medium", "large", "full"), o cualquier tamaño personalizado definido por add_image_size(), o un array de 2 elementos representando ancho y alto, e.j. array(32,32).
predeterminado: 'post-thumbnail', o el que se defina en "functions.php" como set_post_thumbnail_size.
$attr
(Array) (Opcional) Array de pares atributo/valor.

A esta función se le pueden pasar parámetros en un array para definir el tamaño, clase o etiqueta ALT.

Ejemplo:
the_post_thumbnail('medium', array('class' => 'alignleft','alt' => get_the_title()));

posts_nav_link()

Despliega los vínculos para las páginas anterior y siguiente a la entrada mostrada. Útil para armar una navegación o paginación al mostrar una lista, ya sea en la página principal o al listar por categoría.

Ejemplo:
<?php posts_nav_link( $sep, $prelabel, $nextlabel ); ?>

Parámetros:

$sep
(cadena) texto para mostrar entre los vínculos. De manera predeterminada, si no se define otra va a ser un guión: ' — '
$prelabel
(cadena) Texto a mostrar en el vínculo anterior.
$nxtlabel
(cadena) Texto a mostrar en el vínculo siguiente.

next_post_link()

Despliega el vínculo para ir a la siguiente entrada que existe en orden cronológico al ingreso de las entradas. Esta función debe usarse dentro del Loop.

Ejemplo:
<?php next_post_link($formato, $link, $misma_categoria=0, $excluir_categorias=''); ?>

Parámetros:

$formato
(cadena)(opcional) Da formato a la salida del vínculo. Aquí es donde se definen los textos que irán antes y después del vínculo. De manera predeterminada muestra el vínculo y '&raquo';
$link
(cadena)(opcional) El texto que se mostrará en el vínculo. De manera predeterminada mostrará el título de la siguiente entrada.
$misma_categoria
(booleano)(opcional) Determina si el próximo vínculo debe ser de la misma categoría. De manera predeterminada está definido como "0" (false)
$excluir_categorias
(string/array)(opcional) Una matriz o datos separados por coma de valores numéricos de los IDs de las categoría que deben excluirse.

previous_post_link()

Despliega el vínculo para ir a la entrada anterior que existe en orden cronológico al ingreso de las entradas. Esta función debe usarse dentro del Loop.

Ejemplo:
<?php previous_post_link($formato, $link, $misma_categoria = false, $excluir_categorias = ''); ?>

Parámetros:

$formato
(cadena)(opcional) Da formato a la salida del vínculo. Aquí es donde se definen los textos que irán antes y después del vínculo. De manera predeterminada muestra el vínculo y '&raquo';
$link
(cadena)(opcional) El texto que se mostrará en el vínculo. De manera predeterminada mostrará el título de la siguiente entrada.
$misma_categoria
(booleano)(opcional) Determina si el próximo vínculo debe ser de la misma categoría. De manera predeterminada está definido como "0" (false)
$excluir_categorias
(string/array)(opcional) Una matriz o datos separados por coma de valores numéricos de los IDs de las categoría que deben excluirse.

Funciones condicionales

Algunas funciones de WordPress están diseñadas para ser usadas como condicinales en el diseño de nuestro tema. Veamos las más usadas:

is_home()

Esta función condicional revisa si la página que se esta mostrando es la página principal. Esta es una función booleana, lo cuál implica que devuelve FALSO o VERDADERO (True/False).

Ejemplo:
<?php
if ( is_home() ) {
 // esta es la páginia de inicio
} else {
 // esta no es la página de inicio
}
?>

is_single()

Esta función condicional revisa si la página que se esta mostrando es una entrada. Esta es una función booleana, lo cuál implica que devuelve FALSO o VERDADERO (True/False).

Ejemplo:
<?php
if ( is_single() ) {
 // esta es una entrada 
} else {
 // esta no es una entrada
}
?>

is_page()

Esta función condicional revisa si la página que se esta mostrando es una página. Esta es una función booleana, lo cuál implica que devuelve FALSO o VERDADERO (True/False).

Ejemplo:
<?php
if ( is_page() ) {
 // esta es una página 
} else {
 // esta no es una página
}
?>

is_category()

Esta función condicional revisa si la página que se esta mostrando es una lista de las entradas por categoría. Esta es una función booleana, lo cuál implica que devuelve FALSO o VERDADERO (True/False).

Ejemplo:
<?php
if ( is_category() ) {
 // esta es una página de categoría
} else {
 // esta no es una página de categoría
}
?>

has_post_format()

Esta función permite consultar, dentro del Loop, si un artículo es de cierto formato y según ello condicionar la aparición de código en la plantilla.

Ejemplo:
<?php $format = has_post_format($format,$post_id); ?>

Parámetros:

$format
(cadena)(requerido) Nombre del formato de la entrada.
$post_id
(entero)(opcional) El ID de un post distinto al que está dentro del Loop.
Ejemplo:
<?php
if ( has_post_format( 'video' )) {
 echo 'this is the video format';
}
?>

has_post_thumbnail()

Esta función permite consultar, dentro del Loop, si una entrada tiene una imagen destacada asociada y según ello condicionar la aparición de código en la plantilla.

Parámetros:

$id
(int)(opcional) Id de la entrada que se quiere evaluar si tiene imagen destacada.
Ejemplo:
<?php
if ( has_post_thumbnail()) {
	the_post_thumbnail();
}
?>

has_excerpt()

Esta función permite consultar, dentro del Loop, si una entrada tiene extracto y según ello condicionar la aparición de código en la plantilla.

Parámetros:

$id
(int)(opcional) Id de la entrada que se quiere evaluar si tiene estracto.
Ejemplo:
<?php
if (has_excerpt()) {
	the_excerpt();
}
?>

has_tag()

Esta función permite consultar, dentro del Loop, si una entrada tiene un tag asociado y según ello condicionar la aparición de código en la plantilla.

Parámetros:

$tag
(cadena|entero|array)(opcional) El slug, nombre, o id de el tag a evaluar.
$post
(entero)(opcional) El Id de una entrada a evaluar.
Ejemplo:
<?php
if (has_tag()) {
	the_tags();
}
?>

Funciones de la consulta

Algunas funciones permiten modificar la consulta propia de WordPress o generar nuevas consultas con parámetros distintos a los de su naturaleza.

get_post()

Por otro lado, podemos utilizar un llamado directo a una entrada a partir de su ID sin tener que pasar por el "loop". Para eso se usa la función get_post()

Ejemplo:
<?php
  $content_post = get_post(206);
  echo $content_post->post_content;
  ?>	

Si nos fijamos en el ejemplo anterior, obtenemos los datos de la entrada "206" y la metemos como objeto en la variable $content_post. Esta variable es un objeto al que podemos consultarle por campos que ha traido, por ejemplo el post_content o el post_title

Parámetros devueltos como objeto o array:

ID
ID de la entrada
post_author
Autor de la entrada
post_date
Fecha de publicación de la entrada
post_date_gmt
Fecha de publicación según hora GMT
post_content
Contenido de la entrada
post_title
Título de la entrada
post_excerpt
Extracto de la entrada
post_status
Estado de la entrada
comment_status
Estado de los comentarios
ping_status
Estado de los ping back
post_password
Contraseña de la entrada
post_name
nombre de la entrada
post_modified
Fecha de modificación de la entrada
post_modified_gmt
Fecha de modificación según hora GMT
post_type
Tipo de entrada
comment_count
Cantidad de comentarios

query_posts()

Permite alerar la consulta principal del loop para filtrar su resultado con parámetros que se le pasan.

Ejemplo:
query_posts( 'posts_per_page=5&cat=-3' );

También se puede pasar un array con los parámetros a alterar la consulta principal.

Ejemplo:
array( 'category__in' => array(1,3), 'posts_per_page' => 5, 'orderby' => 'title', 'order' => 'ASC' ));
Ejemplo:
<?php
// The Query
$args=array( 'category__in' => array(1,3), 'posts_per_page' => 5, 'orderby' => 'title', 'order' => 'ASC' ));
query_posts( $args );
// The Loop
while ( have_posts() ) : the_post();
 echo '<li>';
 the_title();
 echo '</li>';
endwhile;
// Reset Query
wp_reset_query();
?>

En este caso, se está limitando a buscar en las categorías con el ID 1 y 3, sólo 5 resultados ordenado por el título de manera ascendente.

Nota:
Es necesario terminar la alteración al final del bucle con wp_reset_query()

Parámetros:

posts_per_page (int)
Cantidad de entradas a mostrar por página.
author(int)
Filtra por el id de autor de la entrada.
author_name (string)
Filtra por el nombre del autor de la entrada.
author__in (array)
Permite filtrar por todos los autores que estén presentes en el array().
author__not_in (array)
Permite excluir de la consulta los autores presentes en el array().
cat (int)
Filtra por el id de una categoría.
category_name (string)
Filtra por el nombre de la categoría.
category__in (array)
Filtra la consulta a las entradas que tienen las categorías presentes en el array().
category__and (array)
Filtra las entradas que tiene asignada los id de las categorías presentes en el array().
category__not_in (array)
Filtra las entradas que no tienen las categorías presentes en el array().
tag (string)
Filtra la consulta para todas las entradas que tiene la etiqueta dada.
tag_id (int)
Filtra la consulta para todas las entradas que tienen la etiquet igual que el id que se pasa.
tag__and (array)
Filtra las entradas que tiene las etiquetas presentes en el array().
tag__in (array)
Filtra las entradas para todas las que tienen cualquiera de las etiquetas del array().
p (int)
Filtra las entradas por la que tenga el id entregado
name (string)
Filtra las entradas por su "slug".
page_id (int)
Filtra las páginas por el id entregado.
pagename (string)
Filtra las páginas por el "slug" entregado.
post__in (array)
Filtra las entradas presentes en la lista del array().
post__not_in (array)
Filtra por todas las entradas no presentes en el array().

WP_Query()

Personalización de una consulta. No es el Loop natural, si no una consulta nueva donde los argumentos pueden ser cualquier filtraje de los campos de los post.

Ejemplo:
<?php
$args=array( 'cat' => '1,2,3,4' );
$the_query = new WP_Query( $args );
if ( $the_query->have_posts() ) {
          echo '<ul>';
          while ( $the_query->have_posts() ) {
          $the_query->the_post();
          echo '<li>' . get_the_title() . '</li>';
          }
          echo '</ul>';
          } else {
          echo "no hay resultado para la consulta";
        }
/* Restore original Post Data */
wp_reset_postdata();

Parámetros:

posts_per_page (int)
Cantidad de entradas a mostrar por página.
author(int)
Filtra por el id de autor de la entrada.
author_name (string)
Filtra por el nombre del autor de la entrada.
author__in (array)
Permite filtrar por todos los autores que estén presentes en el array().
author__not_in (array)
Permite excluir de la consulta los autores presentes en el array().
cat (int)
Filtra por el id de una categoría.
category_name (string)
Filtra por el nombre de la categoría.
category__and (array)
Filtra las entradas que tiene asignada los id de las categorías presentes en el array().
category__not_in (array)
Filtra las entradas que no tienen las categorías presentes en el array().
tag (string)
Filtra la consulta para todas las entradas que tiene la etiqueta dada.
tag_id (int)
Filtra la consulta para todas las entradas que tienen la etiquet igual que el id que se pasa.
tag__and (array)
Filtra las entradas que tiene las etiquetas presentes en el array().
tag__in (array)
Filtra las entradas para todas las que tienen cualquiera de las etiquetas del array().
p (int)
Filtra las entradas por la que tenga el id entregado
name (string)
Filtra las entradas por su "slug".
page_id (int)
Filtra las páginas por el id entregado.
pagename (string)
Filtra las páginas por el "slug" entregado.
post__in (array)
Filtra las entradas presentes en la lista del array().
post__not_in (array)
Filtra por todas las entradas no presentes en el array().

$wpdb

$wpdb no es una consulta si no la clase que interactua con la BD que tiene WordPress. Si por alguna razón necesitamos interactura con la base de datos, ya sea para hacer consultas más personalizadas, o a tablas que no son propias de WordPress, podemos usar este objeto para interactuar con la base de datos.

Si por ejemplo tenemos una tabla de "alumnos" en la misma Base de Datos en la que tenemos las tablas de nuestra instalación de WordPress:

Ejemplo:
CREATE TABLE IF NOT EXISTS `alumnos` (
  `id` int(6) NOT NULL auto_increment,
  `nombre` varchar(50) NOT NULL,
  `apellido` varchar(50) NOT NULL,
  `email` varchar(100) default NULL,
  `fecha_nac` date NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;
INSERT INTO `alumnos` (`id`, `nombre`, `apellido`, `email`, `fecha_nac`) VALUES
(1, 'Caperucita Roja', 'De Feroz', 'caperucita@deferoz.cl', '1966-12-22'),
(2, 'Pedro Pablo', 'Pérez pereira', 'pobre@pintor.pt', '1987-05-04'),
(3, 'Dionicio', 'Tragoalegre', 'contacto@buenvino.cl', '1987-06-12'),
(4, 'Klark', 'Kent', 'superman@ligadelajusticia.com', '1958-07-15'),
(5, 'John', 'Doe', 'whois@nn.cl', '1978-08-05'),
(6, 'Perico', 'De los Palotes', 'perico@palotes.com', '1974-03-18');

Podemos consultar esta tabla "alumnos" utilizando la clase $wpbd y el método "get_results":

Ejemplo:

$rows=$wpdb->get_results( 'SELECT * FROM `alumnos`' );
?>
<ul>
<?php foreach($rows as $alumno){
 echo '<li><a href="mailto:'.$alumno->email.'">'.$alumno->nombre." ". $alumno->apellido."</a>(".$alumno->fecha_nac.")";
}?>
</ul>

En este ejemplo primero se instancia la variable global $wpdb (que fue definida en el archivo wp-db.php) y después se le pasa el método get_results(). Este método es general para recoger consultas SQL y devuelve todos los resultados como un array. $wpbd tiene definidos otros métodos para interactuar directamente con la base de datos e insertar, remplazar, actualizar o eliminar pasando los valores en array. La documentación completa está en https://developer.wordpress.org/reference/classes/wpdb/.

Si queremos utilizar la clase $wpdb fuera de la estructura de WordPress necesitamos incluir en el documento su instancia. La manera más rápida es incluir el archivo "wp-load.php" que está en la raíz del sitio.

Ejemplo:
<?php 
include_once('../../../wp-load.php');
global $wpdb;
$rows=$wpdb->get_results( 'SELECT * FROM `alumnos`' );
?>

Nota:
No es necesario globalizar las variable $wpdb para poder utilizarla, pero no está de más.

Funciones estructurales

Pensando en los plugins, y opciones de administración de algunos usuarios, las siguientes funciones permiten incluir código de terceros.

wp_head()

Gatilla a los componentes que deben incluirse en la cabecera del documento (<head></head>) por lo que debe insertarse antes del cierre de la cabecera de la plantilla. Esta función no acepta parámetros.

Ejemplo:
<?php wp_head(); ?>

wp_footer()

Gatilla a los componentes que deben incluirse al final del documento, antes del cierre del cuerpo del documento (</body>). Esta función no acepta parámetros.

Ejemplo:
<?php wp_footer(); ?>

Nota:
Estas dos funciones deben estar presentes en nuestro sitio si queremos incorporar plugins y widgets en nuestro tema.

wp_title()

Muestra o devuelve el título de la página. Se puede definir una cadena separadora. Este Tag se puede usar en cualquier parte de la página mientras no esté dentro del Loop en la página principal. Por lo general se usa en el tag <title> para la cabecera del documento.

Ejemplo:
<?php wp_title( $sep, $echo, $seplocation ); ?>

Parámetros:

$sep
(cadena) (opcional) Texto para mostrar antes o después del título de la entrada. De manera predeterminada, si es que no se asigna otro valor, usará el símbolo &raquo; (»)
$echo
(boolean) (opcional) Muestra el título cuando está en (True) o devuelve como valor para ser usado como cadena de PHP (False).
$seplocation
(cadena) (opcional) Define la ubicación donde se mostrará la cadena $sep en relación al título de la entrada.

wp_nav_menu()

Despliega un menú creado con el administrados de Menús del Tema.

Al darle el parámetro $ubicacion, la función despliega en menú asignado a esa ubicación, o nada si es que la ubicación no existe o no hay menú asignado a ella.

Alerta:
Para tener menús hay que tenerlo regisrados en el archivo "functions.php" en la raíz del directorio de Tema. (ver "Funciones de plantilla")

Si no se entrega el parámetro, está función escala hasta encontrar el menú predeterminado de WordPress.

Ejemplo:
<?php $predeterminado = array(
'theme_location'  => '',
'menu'            => '', 
'container'       => 'div', 
'container_class' => 'menu-{menu slug}-container', 
'container_id'    => '',
'menu_class'      => 'menu', 
'menu_id'         => '',
'echo'            => true,
'fallback_cb'     => 'wp_page_menu',
'before'          => '',
'after'           => '',
'link_before'     => '',
'link_after'      => '',
'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
'depth'           => 0,
'walker'          => ''
); ?>
<?php wp_nav_menu( $predeterminado ); ?>

Parámetros:

$theme_location
(cadena) (opcional) Define el nombre de la zona de menú que se quiere mostrar. Éstas se definen en el en las funciones del sito con register_nav_menus().
$menu
(cadena) (opcional) También se puede llamar directamente al nombre del menú que se han creado en el administrador de menús del Tema.
$container
(cadena) (opcional) Determina la etiqueta html que envuelve la lista no ordenada (<ul>). Se puede usar div, nav o false si no se quiere ninguna etiqueta envolvente.
$container_class
(cadena) (opcional) Determina la clase CSS que se aplicará al contenedor.
$container_id
(cadena) (opcional) Determina el ID que se aplicará al contenedor.
$menu_class
(cadena) (opcional) Determina la clase CSS aplicado a los elementos del menú.
$menu_id
(cadena) (opcional) Determina el ID del elemento ul del menú.
$echo
(boolean) (opcional) Define si debe hacerse una salida a pantalla o como cadena. Los posibles valores son true para hacer una salida a pantalla y 0 para usarlo como una cadena.
$fallback_cb
(cadena) (opcional) Si es que el menú no existe, el fallback determina el menú a utilizar de manera personalizada, si no hay valor, ocupa los parámetros propios de WordPress.
$before
(cadena) (opcional) Texto que irá antes de la etiqueta <a>.
$after
(cadena) (opcional) Texto que irá después de la etiqueta </a>.
$link_before
(cadena) (opcional) Texto que irá antes del texto del vínculo
$link_after
(cadena) (opcional) Testo que irá después del texto del vínculo
$items_wrap
(cadena) (opcional) Permite personalizar las etiquetas ul de la salida a pantalla.
$depth
(entero) (opcional) cuantos niveles de jerarquía deben incluirse. Si se deja en cero se muestran todos los niveles.
Ejemplo:
<div class="access">
 <?php wp_nav_menu(); ?>
</div>
Ejemplo:
<?php wp_nav_menu( array('menu' => 'Project Nav' )); ?>

Funciones de plantilla

WordPress puede extender sus capacidades si dentro del tema generamos un archivo "functions.php". Éste archivo es de los primeros que se leen y permite agregar capacidades desactivadas, modificar funciones predeterminadas o agregar nuevas funcionalidades.

register_nav_menu()

Registra un menú de navegación con acceso directamente desde el editor de Menús en el administrador de Temas.

Parámetros:

$ubicacion
(array) (requerido) Nombre de la ubicación del menú (parecido al concepto de slug).
$descripción
(array) (requerido) Descripción .
Ejemplo:
register_nav_menu('principal','Menú principal del sitio');

register_nav_menus()

Registra múltiples menús de navegación personalizados con acceso directamente desde el editor de Menús en el administrador de Temas.

Parámetros:

$ubicacion
(array) (requerido) Un Array asociativo del nombre (clave) y descripción (valor).
Ejemplo:
register_nav_menus( array(
          'superior' => 'Menú de navegación en el header',
          'pie' => 'Menú de cierre de página',
          'rrss' => 'Menú de redes sociales'
        ) );

add_theme_support(post-thumbnails)

Esta función permite incluir en el administrador la capacidad de asociar la imagen destacada con una entrada o una página.

Ejemplo:
<?php
add_theme_support('post-thumbnails');
?>

add_theme_support(custom-background)

Esta función permite la incorporación en el administrador de Temas, de la personalización de los fondos de las plantillas, color o imagen.

Ejemplo:
<?php
$defaults = array(
          'default-color'          => '',
          'default-image'          => '',
          'wp-head-callback'       => '_custom_background_cb',
          'admin-head-callback'    => '',
          'admin-preview-callback' => ''
        );
add_theme_support('custom-background', $defaults);
?>

WordPress viene con un administrador de fondos standard, que permite la modificación o configuración del color de fondo o imagen de fondo y su posición. Esta interfaz en el administrador de Temas genera una clase que debe incorporarse en el cuerpo del documento con la función body_class().

Ejemplo:
<body <?php body_class($class); ?>>

Parámetro:

$class
(cadena/array) (opcional) Una o más clases para ser agregados en el atributo "class" de la etiqueta.

add_theme_support(custom-logo)

Tal como su parámetro lo indica, esta función agrega la capacidad de poder tener en el administrador una interfaz para cargar dinámincamente el isotipo o logotipo de la página, generalmente usado en la esquina izquierda superior de los sitios.

Se puede agregar una matriz de parámetros que permiten controlar el tamaño y el texto asociado.

Parámetro:

$number
(entero) (opcional) Determina la cantidad de sidebars que se van a generar. Si no se entrega ningún valor, se creará uno sólo.
$args
(cadena/array) (opcional) Construye y entrega información basado en los nombres o Id
Ejemplo:
add_theme_support( 'custom-logo', array(
	'height'      => 100,
	'width'       => 400,
	'flex-height' => true,
	'flex-width'  => true,
	'header-text' => array( 'site-title', 'site-description' ),
) );

Para hacer uso de el logo cargado necesitamos ubicar en nuestra plantilla la función the_custom_logo().

Ejemplo:
if ( function_exists('the_custom_logo') ) {
		the_custom_logo();
	}

add_theme_support(custom-header)

Esta función permite la incorporación en el administrador de Temas, de la personalización de la imagen de cabecera (<head>) de las plantillas.

Ejemplo:
<?php
$defaults = array(
          'default-image'          => '',
          'random-default'         => false,
          'width'                  => 0,
          'height'                 => 0,
          'flex-height'            => false,
          'flex-width'             => false,
          'default-text-color'     => '',
          'header-text'            => true,
          'uploads'                => true,
          'wp-head-callback'       => '',
          'admin-head-callback'    => '',
          'admin-preview-callback' => '',);
add_theme_support( 'custom-header', $defaults );
?>

Para aplicarlo en nuestro tema necesitamos la función header_image(). Esta función devuelve una cadena con la ruta a la imagen de cabecera seleccionada en el administrador de Temas.

Ejemplo:
<img src="<?php header_image(); ?>">

add_theme_support(post-formats)

Esta función permite la incorporación en el administrador de artículos de opciones para categorizarla por el tipo de contenido en una meta información. No va a cambiar, por si misma, la presentación, pero va a entregar una variable que podemos utilizar para la personalización de la plantilla. Esta función se registra en el archivo "functions.php" de la raíz del Tema.

Ejemplo:
<?php
$array= array('aside', 'gallery', 'link', 'image', 'quote', 'status', 'video', 'audio', 'chat');
add_theme_support( 'post-formats', $array );
?>

Si bien la categorización puede personalizarse, la idea es generar una estandarización en su uso y así permitir que varias plantillas saquen provecho de este metadato.

Parámetro:
  • aside - Típicamente diseñado sin título.
  • gallery - Una galería de impaenes.
  • link - Un link a otro sitio.
  • image - Una imagen sola.
  • quote - Una cita
  • status - Una actualización de status.
  • video - Un video sólo.
  • audio - Un archivo de audio.
  • chat - Una transcripción tipo chat.

Al momento de publicar o modificar un artículo, se puede seleccionar el tipo de publicación desde la ventana "formato" seleccionando el radiobutton al lado izquierda.

Su aplicación práctica tiene sentido en un Tema o plantilla, al usar en nuestro diseño las funciones: get_post_format() o has_post_format().

La función get_post_format() devuelve una cadena con el tipo de formato del artículo.

Ejemplo:
<?php $format = get_post_format( $post_id ); ?>

Parámetros:

$post_id
(entero)(opcional) Se puede poner el ID del artículo para saber que formato está seleccionado. Si no se entrega el ID, asumirá el ID del artículo que está dentro del LOOP.
Ejemplo:
$format = get_post_format();
get_template_part( 'format', $format );
?>

register_sidebar()

Crea un sidebar para ser utilizado por el administrador de widgets en el administrador de Temas.

Ejemplo:
<?php 
$args = array(
          'name'          => sprintf(__('Sidebar %d'), $i ),
          'id'            => "sidebar-$i",
          'before_widget' => '<li id="%1$s" class="widget %2$s">',
          'after_widget'  => '</li>',
          'before_title'  => '<h2 class="widgettitle">',
          'after_title'   => '</h2>' );
          register_sidebar( $args ); ?> 

Parámetro:

 
$args
(cadena/array) (opcional) Construye y entrega información basado en los nombres o Id
  • name - Nombre del sidebar.
  • id - ID del sidebar
  • before_widget - HTML que se pondrá antes del widget.
  • after_widget - HTML que se pondrá después del widget.
  • before_title - HTML que se pondrá antes de cada título.
  • after_title - HTML que se pondrá después de cada título.
Ejemplo:
<?php
register_sidebar( array(
          'name' =>"Derecha",
          'id' => 'sidebar-1',
          'description' =>" Barra lateral derecha",
          'before_widget' => '<aside id="%1$s" class="widget %2$s">',
          'after_widget' => "</aside>",
          'before_title' => '<h3 class="widget-title">',
          'after_title' => '</h3>',
          ) );
register_sidebar( array(
          'name' =>"Izquierda",
          'id' => 'sidebar-2',
          'description' =>" Barra lateral izquierda",
          'before_widget' => '<aside id="%1$s" class="widget %2$s">',
          'after_widget' => "</aside>",
          'before_title' => '<h3 class="widget-title">',
          'after_title' => '</h3>',
          ) );
?>

Después de definir las zona para activar el menú de "Widgets" en el administrador de apariencias, podemos comenzar a seleccionar y asignar widgets a las zonas con drag & drop.

Para poder ver los widgets, utilizamos la función dynamic_sidebar() para asignar la zona en nuestro diseño de plantilla, llamandola por su "name" o su "id"

Ejemplo:
<?php
dynamic_sidebar("sidebar-1");
?>

Inclusión de archivos

Desmembrar nuestra plantilla en fragmentos reutilizables nos permiten sacar provecho de la jerarquización de los archivos y páginas de WordPress, llevando la personalización de la presentación de los contenidos al extremo.

get_header()

Incluye el archivo "header.php" del directorio del Tema seleccionado. Si se determina un nombre como parámetro, entonces buscará en el directorio el archivo "header-{nombre}.php". Si el tema no tiene un archivo "header.php" entonces se usará el predeterminado de WordPress (wp-includes/theme-compat/header.php)

Ejemplo:
<?php get_header( $nombre ); ?>

Parámetros:

$nombre
(cadena)(opcional) Nombre del archivo a utilizar (header-$nombre.php)

get_footer()

Incluye el archivo "footer.php" del directorio del Tema seleccionado. Si se determina un nombre como parámetro, entonces buscará en el directorio el archivo "footer-{nombre}.php". Si el tema no tiene un archivo "footer.php" entonces se usará el predeterminado de WordPress (wp-includes/theme-compat/footer.php)

Ejemplo:
<?php get_footer( $nombre ); ?>

Parámetros:

$nombre:
(cadena)(opcional) Nombre del archivo a utilizar (footer-$nombre.php)

get_sidebar()

Incluye el archivo "sidebar.php" del directorio del Tema seleccionado. Si se determina un nombre como parámetro, entonces buscará en el directorio el archivo "sidebar-{nombre}.php". Si el tema no tiene un archivo "sidebar.php" entonces se usará el predeterminado de WordPress (wp-includes/theme-compat/sidebar.php)

Ejemplo:
<?php get_sidebar( $nombre ); ?>

Parámetros:

$nombre:
(cadena)(opcional) Nombre del archivo a utilizar (sidebar-$nombre.php)

get_search_form()

Despliega el formulario de buscador utilizando el archivo "searchform.php"

Ejemplo:
<?php get_search_form( $echo=1 ); ?>

Parámetros:

$echo
(booleano)(opcional) Hace una salida a pantalla del formulario de manera predetermina, o puede ser usada como valor de cadena con falso (0)

Nota:
El archivo searchform.php tiene que tener la etiqueta html form con el método get y, al menos, un input con el name="s", que es la variable get que ocupa WordPress para realizar las búsquedas.

comments_template()

Carga la plantilla de los comentarios. Se va a mostrar solamente en las entradas y las páginas que no sean listado de entradas.

Ejemplo:
<?php comments_template( $archivo='/comments.php', $separar_comentarios=0 ); ?>

Parámetros:

$archivo
(cadena)(opcional) Nombre del archivo a cargar. De manera predetermnada es el archivo comments.php en la raíz del sitio.
$separar_comentarios
(booleano)(opcional) Si se deben separar los comentarios por tipos. De manera predeterminada es 0 (false).

get_template_part()

Carga en la plantilla un pedazo de página diferente al header, footer o sidebar. Requiere un valor para el nombre y de manera opcional se puede determinar un componente para el nombre.

Ejemplo:
<?php get_template_part( $nombre, $componente ); ?>

Parámetros:

$nombre:
(cadena)(obligatorio) El nombre del archivo que se quiere incluir.
$componente:
(cadena)(opcional) El nombre del componente de especialización.
Ejemplo:
<?php get_template_part( 'nav', 'simple' ); // barra de navegación para usar en páginas simples.(nav-simple.php) ?>

Post Type

Una herramienta que entrega WordPress para agrupar entradas, aparte de las categorías, es definir los Post Type, o tipo de entrada. Tiene la ventaja, para el usuario final, que la "agrupación" de contenido queda con una interfaz propia de entrada y con acceso por menú en el administrador.

Para generarlo, tenemos que agregar al archivo functions.php una funcón que invente este nuevo "tipo" de entrada con la función register_post_type()

Ejemplo:

function create_post_catalogo() {
  $labels = array(
    'name'               => __('Colaboradores'),
    'singular_name'      => __('Colaborador'),
    'add_new'            => __('Agregar nuevo'),
    'add_new_item'       => __('Agregar nuevo colaborador'),
    'edit_item'          => __('Editar colaborador'),
    'new_item'           => __('Nuevo colaborador'),
    'all_items'          => __('Todos los colaboradores'),
    'view_item'          => __('Ver colaborador'),
    'search_items'       => __('Buscar colaborador'),
    'not_found'          => __('No se encontró colaborador'),
    'not_found_in_trash' => __('No se encontraron colaboradores en la basura'), 
    'parent_item_colon'  => __(''),
    'menu_name'          => __('Colaboradores')
  );
  $args = array(
    'labels'        => $labels,
    'description'   => 'Ficha de colaboradores',
    'public'        => true,
    'menu_icon' => 'dashicons-nametag',
    'menu_position' => 5,
    'supports'      => array( 'title', 'editor', 'thumbnail', 'excerpt', 'comments' ),
    'has_archive'   => true,
    //'taxonomies' => array('category', 'post_tag'),
  );
    register_post_type('colaboradores',$args);
}

Esta función genera el tipo de entrada "Colaboradores", si vamos al administrador de Wordpress, nos encontraremos que abajo de los post normales, ahora aparece el menú "Colaboradores", con su propio ícono, y si lo seleccionamos, tendremos el listado de entradas de este tipo, y la posibilidad de agregar una entrada nueva.

Lista post-type
Agregar entrada

Su comportamiento es de entrada, pero la URL, va a estar presedida de su "post-type"

Ejemplo:
http://localhost:8888/colaboradores/<slug>

Tanto la presentación de su archivo (varias entradas del mismo post-type), así como su entrada individual se puede controlar con la Jerarquía de archivos.

Jerarquía de archivos y páginas

Una habilidad interesante de WordPress es la capacidad de poder seleccionar diferentes páginas dependiendo la consulta que se está realizando. Ya hemos demostrado que se puede montar toda una plantilla sólamente en la página index.php del tema, pero algunas veces necesitamos que la página de entradas o la página de categorías se comporte de manera distinta al resto del sitio. Para estos casos podemos aprovechar la jerarquización de archivos para ir creando especificación dependiendo del tipo de contenido solicitado.

El gráfico siguiente explica la jerarquización de los archivos.

Si la consulta es por categoría, y existe category.php como archivo, entonces esta página responde a los requerimientos en vez de la página index.php. Bajo el mismo principio, si se está consultando por la categoría cat=2 y existe un archivo category-2.php éste tiene prioridad sobre category.php y sobre index.php

A este concepto se le llama "fallback" o sea, quién responde si no existe lo solicitado, por lo que es buena práctica ampliar y especificar el comportamiento de cada parte de nuestro WordPress dejando index.php cómo último recurso, sobre todo si hay diferencias entre nuestra página de inicio (home.php), el resultado de las búsquedas (search.php) o una entrada (single.php). Siguiendo esta secuencia se puede extender la personalización a cada parte utilizando su ID o su "slug".

Por lo general, la mayor parte de las plantillas personalizadas incluyen los siguientes archivos:

index.php
(requerido), es el último "fallback" de WordPress de nuestro tema.
style.css
(requerido) Contiene los datos de la plantilla como comentario. Nos permite distinguirla en el administrador para seleccionarla, aparte de tener la personalización de nuestro CSS.
screenshot.png
Para que se vea bien en el administrador y faciliete diferenciarla del resto de plantillas instaladas.
functions.php
Permite extender la capacidad de WordPress y activar funcionalidades desactivadas.
home.php
La página de inicio que suele tener una estructura diferente a las entradas.
single.php
Página para las entradas.
page.php
Página de "page"
category.php
Listado por categorías
search.php
Resultados de la búsqueda.
archive.php
Cualquier otro tipo de listado (etiquetas, autores, fecha, ano, etc.)
404.php
Para mostrar errorees personalizados cuando la dirección está mal ingreseada.

Nota:
En caso de que los "post" y las "pages" sean iguales, se puede utilizar la página singular.php para ambas.

Temas hijos

Los Child Themes o "temas hijos", están pensados para cuando queremos personalizar una plantilla que se acerca a la propuesta comunicacional del sitio, ya sea de distribución gratuita o comprada, pero que necesita un par de cambios. Si nosotros modificamos los archivos de la plantilla seleccionada, es bastante probable, que al actualizarse la plantilla, ya sea por seguridad o mejoras, nos pise todos los cambios que hemos generado. Si separamos la personalización, no se van a ver afectados nuestras modificaciones si hay un cambio en la versión de la plantilla.

Para hacer un plantilla hija primero debemos generar un nuevo directorio que lo contenga en el directorio "themes" de nuestra instalación de WordPress. Este nuevo directorio puede tener cualquier nombre, pero se recomienda que sea igual que la plantilla "padre" más el sufijo "child". No es que afecte la estructura, pero ayuda a encontrarlo más rápido y entender la relación de dependencia.

Child Theme

En el ejemplo, vamos a hacer una plantilla hija de "twentynineteen" uno de los temas predeterminados de la instalación de WordPress, por lo que agregamos un directorio twentynineteen-child.

Dentro de este directorio debe existir al menos un archivo "style.css", aunque se recomienda un "screenshot.png" y un "functions.php". En el archivo de la hoja de estilo vamos a poner un comentario similar al de la plantilla padre, con la descripción del tema, más el parámetro "Template", éste es el parámetro que va a ira buscar los archivos de la plantilla "padre" como fallback (archivos que responden cuando no encuentra uno específico en la plantilla), por lo que tiene que tener el mismo nombre del directorio del tema padre.

Ejemplo:
/*
Theme Name: Twenty Nineteen
Theme URI: https://wordpress.org/themes/twentynineteen/
Author: the WordPress team
Author URI: https://wordpress.org/
Template: twentynineteen
Description: Our 2019 default theme is designed to show off the power of the block editor. It features custom styles for all the default blocks, and is built so that what you see in the editor looks like what you'll see on your website. Twenty Nineteen is designed to be adaptable to a wide range of websites, whether you're running a photo blog, launching a new business, or supporting a non-profit. Featuring ample whitespace and modern sans-serif headlines paired with classic serif body text, it's built to be beautiful on all screen sizes.
Requires at least: 4.9.6
Requires PHP: 5.2.4
Version: 1.6
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentynineteen
Tags: one-column, flexible-header, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, rtl-language-support, sticky-post, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Twenty Nineteen is based on Underscores https://underscores.me/, (C) 2012-2019 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/* =Aquí empieza la personalización de tu tema
-------------------------------------------------------------- */

Podemos copiar el CSS de la hoja de estilo original de la plantilla y basarnos en él para hacer las modificaciones, o podemos importarlo con el comando de importación.

Ejemplo:
@import url("../twentynineteen/style.css");

Ahora, y aprovechándonos de la jerarquización de lo temas, podemos agregar archivos específicos para las partes que queremos personalizar. Por ejemplo un nuevo home.php o single.php, cambios en el CSS o de funcionalidad nueva en functions.php. Siguiendo el principio de la jerarquía, si algún archivo no está en este directorio, entonces el tema padre responde.

Integración con otras librerías

WordPress ha conciderado que, tanto desarrolladores de plugins, o desarrolladore de temas, puedan hacer uso común de una librería, en vez de que cada uno cargue sus propios requerimientos.

Con librerías comunes para el desarrolo de páginas como jQuery, Bootstrap, Fontawesome, etc, es fácil entrar en un conflicto de versiones y puede ser frustrante al no tener los resultados esperados con un comando o un estilo, y es porque se está con una versión diferente o modificada del framework deseado, ya que cuando no se filtra, manda el último que cargó.

Para evitarlo, se puede poner "a la cola" los archivos iguales y darle prioridad a uno de ellos. WordPress tiene 2 funciones para esto: wp_enqueue_script() para administrar los scripts de jasvascript y wp_enqueue_style() para agrupar los estilos.

Enqueue de scripts

En varios proyectos que desarrollaremos con WordPress, encontraremos necesario integrar librerías externas de Javascript, muchas de ellas dependientes de jQuery. Para evitar que se pisen las versiones o se rompan las dependencias, WordPress tiene la función wp_enqueue_script() que permite agregarlo de manera ordenada. Esta función se activa en el archivo functions.php de nuestro tema y se amarra al evento add_action() que analisa la construcción del documento. Veamos el siguiente ejemplo.

Ejemplo:
function nuevoJquery() {

	wp_deregister_script('jquery');
	wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js', array(), null, true);

}
add_action('wp_enqueue_scripts', 'nuevoJquery');

Si leemos el código anterior, vamos a agregar una acción a WordPress, al momento de encolar scripts, y lo vamos a hacer con una función personalizada, que en este caso se llama "nuevoJquery".

add_action('wp_enqueue_scripts', 'nuevoJquery');

La función personalizada nuevoJquery(), tiene 2 líneas. La primera línea usa la función wp_deregister_script() que remueve cualquier jQuery "encolado" en la lista, producto de un plugin o el tema que estamos modificando, y la segunda línea, le da la ruta de dónde va a sacra la versión que queremos usarn en nuestra plantilla.

function nuevoJquery() {
wp_deregister_script('jquery');
wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js', array(), null, true);
}

Si algun plugin del sitio necesita jQuery, se va adaptar a la versión que nosotros hemos definido para la plantilla.

Si nececitamos incluir un javascript local, nuestro o de un plugin, tenemos que recordar la estructura de los directorios de WordPress y dar la ruta completa para que lo pueda resolver. Para eso podemos usar la función get_template_directory_uri() que muestra la ruta completa.

Ejemplo:
<?php
function nuevoJquery() {
  wp_deregister_script( 'jquery' );
  wp_enqueue_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js', array(), '3.7.1', true );
  wp_enqueue_script( 'bootstrapjs', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js', 'jquery', '5.3.2', true );
  wp_enqueue_script( 'miJs', get_template_directory_uri() . '/assets/js/js.js', 'jquery', '1.0', true );

}
add_action( 'wp_enqueue_scripts', 'nuevoJquery' );
?>

En este ejemplo, aparte de incluir jQuery, se incluye de manera externa el js de Bootstrap y el javascript con las funciones personalizadas para nuestro tema (js.js). Como ambos dependen de jQuery, se agregar "jquery" en el tercer parámetro de la función wp_enqueue_script().

Nota:
Si estamos trabajando con "temas hijos", la función get_template_directory_uri() va a apuntar al tema padre, por lo que necesitamos cambiarlo por la función get_stylesheet_directory_uri().

Ejemplo:
<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>

Como se ve en el ejemplo, la función wp_enqueue_script() puede recibir varios parámetros:

$handle
(cadena) (requerido) Nombre del script. Cadena en minúsculas. de manera predeterminada no tiene valor
$src
(cadena) (opcional) URL del script. Ejemplo: "http://example.com/wp-includes/js/scriptaculous/scriptaculous.js". Este parámetro solo es necesario cuando WordPress no conoce, todavía, el script.
$deps
(array) (opcional) Array de manejadores de cualquier script del que tenga dependencias este script; scripts que deban ser cargados previamente. False si no hay dependencias. Este parámetro solo se necesita cuando WordPress no conoce ya el script.
$ver
(cadena) (opcional) Cadena que especifica la versión del script, si tiene una. Por defecto; false. Este parámetro se usa para asegurarse de que se envía al cliente la versión correcta, independientemente de cachés, de esta forma podría incluirse si hay un número de versión disponible y tiene sentido para el script.
$in_footer
(booleano) (opcional) Normalmente los scripts se colocan en la sección <head>. Si este parámetro se pone en "true", el script se colocará en al final del <body>. Para ello, el tema tiene que disponer del gancho wp_footer() en el sitio apropiado.

De la misma manera se sugiere incluir plugins de jQuery, como dataTable, especificando su dependencia, o librerías de JS, como highcharts para hacer gráficos.

Enqueue de estilos

De la misma manera wp_enqueue_style() agrega las librerías de estilo a nuestro sito.

Ejemplo:
function theme_styles() {
wp_register_style( 'bootstrap', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css' );
wp_enqueue_style('bootstrap');
}
add_action('wp_enqueue_scripts', 'theme_styles');

En este ejemplo incluimos Bootstrap y FontAwsome en nuestro documento.

add_action('wp_enqueue_scripts', 'theme_styles');

Si vemos la función, que agrega la acción (add_action()), nos fijamos que se está montando sobre wp_enqueue_scripts() y no en wp_enqueue_style(), y es que que wp_enqueue_style() no sobre escribe si no que agrega a continuación del siguiente script de CSS en cascada, pero al meter el requerimiento en el procceso principal de wp_enqueue_scripts() entonces sobre escribe si encuentra el mismo.

wp_register_style( 'bootstrap', 'https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css' );

En el ejemplo vemos la función wp_register_style(), esta función se encarga de agregar a el estilo y su versión en una variable más controlable antes de ponerlo en la cola de los estilos con el wp_enqueue_style().

La función wp_enqueue_style() y wp_register_style() tienen los mismos parámetros que wp_enqueue_scripts(), salvo el último, ya que no se puede poner los estilos al final del documento, estas funciones sustituyen el último parámetro de posición por el parámetro "media" para definir a que .

Ejemplo:

<?php wp_enqueue_style( $handle, $src, $deps, $ver, $media ); ?>
$handle
(cadena) (requerido) Nombre del script. Cadena en minúsculas. de manera predeterminada no tiene valor
$src
(cadena) (opcional) URL del Este parámetro solo es necesario cuando WordPress no conoce, todavía, el script.
$deps
(array) (opcional) Array de manejadores de cualquier script del que tenga dependencias este script; scripts que deban ser cargados previamente. False si no hay dependencias. Este parámetro solo se necesita cuando WordPress no conoce ya el script.
$ver
(cadena) (opcional) Cadena que especifica la versión del script, si tiene una. Por defecto; false. Este parámetro se usa para asegurarse de que se envía al cliente la versión correcta, independientemente de cachés, de esta forma podría incluirse si hay un número de versión disponible y tiene sentido para el script.
$media
(cadena) (opcional). La media a la que va dirigida la hoja de estilo. por ejemplo "print" si queremos afectar la impresión del documento que se ve.

En resumen, la diferencia entre estas dos funciones, es que una busca unificar y sustituir, mientras que la otra agrega a continuación.

Páginas personalizadas

Si las opciones entregadas hasta aquí para personalizar nuestra página no resuleven nuestro requerimiento, siempre está la última As bajo la manga: los "Custom Page Templates". Básicamente es una plantilla que se puede enganchar a WordPress como página para todo efecto de acceso y puede contener cualquier cosa.

Para poder utilizarla basta con incluir, en la primera línea, un comentario en php con el texto "Template Name: Nombre de la plantilla."

Ejemplo:
<?php
/*
Template Name: Nombre de la plantilla
*/
?>

El nombre del archivo, al igual que su contenido, puede ser cualquier cosa, por ejemplo "cualquier_cosa.php", mientras esté en la raiz del directorio de nuestro tema.

Para accederlo desde el administrador, se trata como una "page" página. al acceder al editor de la página vamos a tener, además de la dependencia, un menú seleccionable para las plantillas, entre las cuales está "Nombre de la plantilla".

Administrador de templates
Custom Page Templates

Una vez enganchado lo podemos integrar al menú, la podemos configurar como página de inicio desde los ajustes. Esto se puede utilizar como una página "en mantención", un "panfleto web", una "landing page", un parche o una integración. Puede tener el loop personalizado, sólamente utilizar la variable global $wpbd o no tener ninguna relación con el core de WordPress. Literalmente se puede poner cualquier cosa.

Una vez me tocó hacer una página de acceso restringido por clave de un sitio en base WordPress para un colegio para mostrar la fecha de cumpleaños de los alumnos del curso a los padres, la restricción se dio por clave en WordPress y el contenido se alimentó desde de una tabla aparte:

Ejemplo:
<?php /*
Template Name: alumnos
*/?>
<?php 
     $rows=$wpdb->get_results( 'SELECT * FROM `alumnos`' );
?>
<?php get_header();?>
<ul>
<?php foreach($rows as $alumno){
	echo '<li><a href="mailto:'.$alumno->email.'">'.$alumno->nombre." ". $alumno->apellido."</a>(".$alumno->fecha_nac.")";
}?>
</ul>
<?php get_footer();?>

WordPress y JSON (API-REST)

WordPress incorpora una API (Application Programming Interface) REST (REpresentational State Transfer) que devuelve los contenidos de su estructura, según solicitud, en formato JSON (Javascript Object Notation) con el cual podemos extender las capacidades interactivas y dinámicas de los sitios que construimos con WordPress.

El componente base está en la ruta wp-json de nuestra instalación. Y la respuesta en JSON nos muestra a qué cosas puede acceder.

http://www.midominio.cl/wp-json/

Esta URL nos devolverá información general del sitio y los parámetros que podemos agregar a la dirección para especificar la consulta.

Si a wp-json le complementamos con variables GET en la URL, podemos acceder al contenido categorizado de WordPress.

Rutas base para acceder contenido estructurado JSON
Recurso Ruta Base
Posts /wp/v2/posts
Post /wp/v2/posts/<id>
Post Revisions /wp/v2/posts/<id>/revisions
Categories /wp/v2/categories
Tags /wp/v2/tags
Pages /wp/v2/pages
Page /wp/v2/pages/<id>
Page Revisions /wp/v2/pages/<id>/revisions
Comments /wp/v2/comments
Taxonomies /wp/v2/taxonomies
Media /wp/v2/media
Users /wp/v2/users
Post Types /wp/v2/types
Post Statuses /wp/v2/statuses
Settings /wp/v2/settings
Themes /wp/v2/themes
Search /wp/v2/search
Block Types /wp/v2/block-types
Blocks /wp/v2/blocks
Block Revisions /wp/v2/blocks/<id>/autosaves/
Block Renderer /wp/v2/block-renderer
Block Directory Items /wp/v2/block-directory/search
Plugins /wp/v2/plugins

Veamos algunos ejemplos de su uso.

/wp-json/wp/v2/

Esta URL nos devuelve un JSON con todas las direcciones que podemos utilizar para interactuar con el API REST.

wp-json/wp/v2/posts

Esta URL nos devuelve las entradas públicadas de nuestro sitio.

Nota:
De manera predeterminada,el API REST de WordPress muestra sólo 10 resultados, si queremos mostrar más, le podemos pasar parámetros a la URL, por ejemplo: ?per_page=100, que aumentará a 100 los registros a mostrar.

/wp-json/wp/v2/posts/1784

Esta URL nos devuelve un JSON con todo lo que se sabe de la entrada con el id 1784.

A la URL se le pueden pasar parámetros para alterar la query, por ejemplo:

/wp-json/wp/v2/posts?categories=197

Esta URL devuelve todas las entradas de la categoría 197.

/wp-json/wp/v2/posts?_embed&categories=197

Si queremos ver el thumnail o imagen destacada de una entrada como resultado en el JSON del API REST, tenemos que agregar al query _embed como en el ejemplo.

/wp-json/wp/v2/posts?search=texto

Tambien se puede pasar el parámetro search en la URL para que los resultados se filtren dónde exista la palabra "texto".

/wp-json/wp/v2/search?search=interesante

Si queremos ver resultados en páginas, entradas o medios que contengan la palabra "interesante", entonces la URL la apuntamos a search.

/wp-json/wp/v2/pages

Devuelve una JSON con la lista de páginas en el sitio.

Nota:
Más información en la página oficial de la API https://developer.wordpress.org/rest-api/

Alerta:
Si vamos a ocupar el API REST para interactuar con el contenido de nuestro WordPress vía AJAX, hay que recordar usar el método GET o devolverá un error 401.

Ejemplo:
$.get('/wp-json/wp/v2/search?search=interesante').done(function(data, status){
    console.log(data)/*muestra en la consola el objeto con los resultados de la consulta.*/
});

Objetivo del capítulo:
Entender las modificaciones pásicas para que el sitio construido en WordPress funcione en un servidor remoto

Ya sabemos que para WordPress, el directorio wp-content contiene todos los archivos de temas, plugins, y los adjuntos, y por otro lado, tenemos la base de datos de WordPress, que entiende la relación de los archivos de presentación con el contenido. De hecho estos dos elementos son los que debemos respaldar, ya que el resto del core de WordPress siempre lo podemos descargar desde la página oficial.

Es bastante probable que desarrollemos nuestro tema en local, y después lo movamos a un servidor de producción, o lo desarrollemos en un servidor propio y después lo pasemos a producción en el servidor de nuestro cliente. Cualquiera sea el caso, nos vamos a encontrar con varias direcciones absolutas en la Base de Datos del WordPress que no van a permitir que se muestre correctamente el sitio o las imágenes de las entradas o que funcionen los permalinks.

Direcciones absolutas en las tablas

Si no contamos con un plugin de migración (hay varios buenos), siempre podemos afectar la base de datos directamente con sentencias SQL, y volver a amarrar la relación entre los archivos y la Base de Datos.

Ejemplo:
UPDATE wp_options SET option_value = replace(option_value, 'http://www.oldurl', 'http://www.newurl') WHERE option_name = 'home' OR option_name = 'siteurl';
UPDATE wp_posts SET guid = replace(guid, 'http://www.oldurl','http://www.newurl');
UPDATE wp_posts SET post_content = replace(post_content, 'http://www.oldurl', 'http://www.newurl');
UPDATE wp_postmeta SET meta_value = replace(meta_value,'http://www.oldurl','http://www.newurl');

Dónde http://www.oldurl es la dirección registrada de origen, y http://www.newurl es la dirección del servidor, por lo que podemos correr estos cuatro comandos SQL para tener de corregidas las direcciones de relación

Interpretación de permaliks

Otro tema que suele perderse en la migración del sitio de un servidor a otro, es el archivo .htaccess , ya que es oculto para los sistemas operativos, y es justamente este archivo el que interactua con Apache para campiar la URL con ID de lo que se va a mostrar, a las direcciones con fechas o nombres del permalink.

Una manera rápida de regenerar este archivo es desde el wp-admin: ajustes/enlaces permanentes. Ahí seleccionar cualquier otro permalink, guardar, y volver a seleccionar el deseado y volver a guardar, esto suele regenerar el archivo .htaccess si tenemos privilegios en el servidor, o un texto en pantalla para copiarlo y crearlo en el hosting.

Objetivo del capítulo:
Conocer los factores principales de seguridad y mantención para la persistencia del sitio en el tiempo y prevención de ataques.

WordPress es un "OpenSource" de libre distribución. Esto implica que todos sus archivos son leíbles y estudiables. Si bien la comunidad de desarrolladores utiliza esta libertad para mejorar el CMS o desarrollar más funcionalidades, también es cierto que hay grupos que se aprovechan para encontrar y explotar las vulnerabilidades.

Podemos tomar algunas simples medidas para fortalecer la seguridad de nuestro sitio o al menos poner más difícil el acceso a nuestro sitio:

Nombre de usuario administrador

La instalación básica de WordPress antiguamente, partía sugiriendo que el usuario administrador sea "admin". Con solo cambiar este nombre, y usar uno personalizado, estamos sacando el 50% de lo conocido de la ecuación a los hackers para acceder a nuestro administrador de sitio.

Contraseña fuerte

La mala costumbre de generar contraseñas fáciles de recordar conlleva a que sea claves sencillas o de diccionario. Complejizar la clave o hacerla "fuerte" hace que sea más difícil el acceso.

De más está sugerir una combinación aleatoria de números y letras de al menos 8 caracteres, siendo 10 caracteres el mínimo ideal. Si la musa de la creatividad nos abandona, siempre podemos recurrir a los generadores de clave aleatorio en línea (Ej. http://strongpasswordgenerator.com/).

Prefijo de las tablas

Cómo la estructura de las tablas MySql de WordPress y el prefijo predeterminado son de dominio público, el sólo hecho de cambiar el prefijo en el proceso de instalación hace muy difícil conocer la estructura de Base de Datos.

Respaldo periódico de la BD y archivos

A pesar de nuestros esfuerzos, se puede dar que nos hackeen los archivos o datos de nuestro sitio en WordPress. Un buen respaldo periódico no previene la alteración, pero nos facilita la reconstrucción de nuestro sitio.

Hay varios plugins funcionales en este campo, que incluso mandan como adjunto de correo electrónico la BD completa como "WordPress Database Backup" o "WordPress Backup (by BTE) " que exporta los archivos estructurales y los subidos.

Mantener actualizada la instalación de wp

Cuando se descubre vulnerabilidades en la estructura, el equipo de WordPress genera los parches necesarios para que no sean utilizados. Por esto es necesario estar permanentemente revisando las actualizaciones de estructura y versiones así como las actualizaciones de los plugins que estemos utilizando.

En el administrador de WordPress aparece indicado en la sección de actualizaciones, e incluso en el menú rápido de navegación, pero no lo hace de manera automatizada, por lo que generar la disciplina periódica de revisar este directorio nos puede ahorrar muchos dolores de cabeza.

Actualización por FTP

Se puede hacer actualizaciones al "core" de WordPress o los plugins de manera directa por http, pero esto implica que casi todo el directorio wp-content requiere privilegios de escritura y ejecución para el anónimo (en este caso apache).

Una buena manera de evitar esta relación directa y respetar los privilegios de los directorios y archivos es que WordPress se comunique por FTP con el servidor para las actualizaciones o descargas.

Para esto es necesario hacer una pequeña modificación en "wp-config.php" y forzar a que la comunicación no sea directa si no por FTP:

Ejemplo:
define('FS_METHOD','ftpext');

Podemos complementar a continuación con los parámetros de FTP cómo usuario, ruta o protocolo, aunque basta con forzar el método.

Ejemplo:
define('FTP_BASE', '/path/to/WordPress/');
define('FTP_CONTENT_DIR', '/path/to/WordPress/wp-content/');
define('FTP_PLUGIN_DIR ', '/path/to/WordPress/wp-content/plugins/');
define('FTP_PUBKEY', '/home/username/.ssh/id_rsa.pub');
define('FTP_PRIKEY', '/home/username/.ssh/id_rsa');
define('FTP_USER', 'username');
define('FTP_PASS', 'password');
define('FTP_HOST', 'ftp.example.org');
define('FTP_SSL', false);

Privilegios de los archivos

Uno de los errores clásicos es abrir los privilegios para lectura, escritura y ejecución para el anónimo (CHMOD 777), esto implica que se puede modificar cualquier archivo o agregar y crear nuevos archivos desde la misma web.

Hay que tener claro que los privilegios deben estar bloqueados sólo para el dueño con capacidad para que el grupo y los anónimos puedan leer y nada más (CHMOD 644). En el caso de los directorios, y por la forma que entiende apache la estructura de un sitio, debe tener permiso para leer y ejecutar (CHMOD 755).

Desgraciadamente, la subida de archivos e imágenes todavía se hace por http, por lo que el directorio "wp-content/uploads" tiene que tener permiso de escritura y ejecución para el anónimo (CHMOD 757).

Siempre se puede instalar un plugin para que revise los privilegios de nuestro sitio y más como "WP Security Scan"

Version de wp no pública

Si se cono ce la versión de WordPress se conoce sus vulnerabilidades, por lo que ocultar la versión reduce las posibilidades de un ataque.

En el archivo "functions.php" agregar la siguiente línea:

Ejemplo:
remove_action('wp_head', 'wp_generator');

Desgraciadamente, no basta con elminiar de la cabecera de nuestros archivos la versión, ya que toda distribución o actualización, genera un archivo "readme.html" con ésta información, por lo que va a ser importante eliminar manualmente este archivo cuando instalemos y actualicemos WordPress.

Plugins aprobados

En nuestra búsqueda por aplicar más funcionamientos a nuestro sitio utilizamos plugins. El problema es el origen de éstos. No solamente es recomendable sólo descargar plugins desde el sitio oficial de WordPress (http://WordPress.org/extend/plugins/) dónde cada aporte a pasado por una revisión de seguridad y compatibilidad, si no que además fijarse en la compatibilidad con la versión de WordPress que tenemos instalado, cantidad de revisiones y actualizaciones, y los votos y comentarios de los usuarios.

Bloqueo por .htaccess

Uno de los ataques más frecuentes a las páginas Web es tratar de inyectar código SQL por la URL. Una manera de evitarlo es agregar al archivo .htaccessla capacidad de negar el servicio si es que la dirección ingresada tiene palabras claves de SQL como select, union o concat

Ejemplo:
deny from 83.46.101.204
RewriteEngine On
RewriteCond %{QUERY_STRING} concat.*\( [NC,OR]
RewriteCond %{QUERY_STRING} distinct.*\( [NC,OR]
RewriteCond %{QUERY_STRING} information_schema.*\( [NC,OR]
RewriteCond %{QUERY_STRING} union.*select.*\( [NC,OR]
RewriteCond %{QUERY_STRING} union.*all.*select.* [NC]
RewriteRule ^(.*)$ - [F,L]

Nota:
Existe un plugin que se llama BBQ: Block Bad Queries (https://wordpress.org/plugins/block-bad-queries/) que genera este código.

Plugins de seguridad

Hay una gran cantidad de plugins de seguridad en el mercado como Ultimate Security Checker (https://wordpress.org/plugins/ultimate-security-checker/) o iThemes Security (https://es.wordpress.org/plugins/better-wp-security/) que permiten hacer una revisión más profunda de varios puntos anterirores y alertar cuando alguno no está cumpliendo con la protección necesaria.

Si bien consumen recursos de máquina, no es necesario tenerlo permanentemente activo, si no que, en el proceso de desarrollo, usarlo para verificar la seguridad y después desactivarlo.

Servidor dedicado

Si bien no es un requerimiento, sugiero tener un servidor dedicado. Puedes aplicar todos los recursos anteriores, pero si otro sitio, en el mismo servidor compartido, que tu no administras, no está protegido, igual vas a ser afectado con el hackeo.

Ya en producción, preferir un servidor dedicado, o al menos un servidor virtual, sobre un plan de hosting, por mucho que el precio sea más fácil de pagar, lo barato cuesta caro, decía mi abuela. Cuando está en juego la integridad de la comunicación web del proyecto que desarrollemos en WordPress, toda medida que de seguridad y respaldo, nunca está de más.

Debug

Si, por alguna razón, WordPress genera errores o tiene conflictos, una manera rápida de ver los errores es modificando en wp-config.php un par de líneas:

Ejemplo:
// Activar el modo de depuración de Wordpress 
define( 'WP_DEBUG', true );

// Genera archivo de registro en /wp-content/debug.log 
define( 'WP_DEBUG_LOG', true );

// No mostrar errors y warnings
//define( 'WP_DEBUG_DISPLAY', false );

Bibliografía

  • WordPress 3. Desarrollo de proyectos Web
    Wallace Heather R.
    Anaya
  • Professional WordPress
    Hal Stern, David Damstra, Brad Williams
    Wrox Programmer to Programmer
  • Professional WordPress Plugin Development
    Brad Williams, Ozh Richard, Justin Tadlock
    Wrox Programmer to Programmer
  • WordPress: The Missing Manual
    Matthew MacDonald
    Missing Manuals

Webliografía