• Cambiar propietario (ejecutar dentro de /var/www/html o la raíz de tu sitio):

sudo chown -R www-data:www-data /var/www/html

• Establecer permisos para directorios (755):

sudo find /var/www/html -type d -exec chmod 755 {} \;

• Establecer permisos para archivos (644):

sudo find /var/www/html -type f -exec chmod 644 {} \;

Añadimos nuestro usuario al grupo www-data si necesitamos hacer operaciones en los directorios:

sudo usermod -a -G www-data $USER

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

Podemos usar algún plugin como Yoast SEO para marcar todo lo que no queramos indexar, aunque es mucho más rápido usar el siguiente snippet a nuestro functions.php o plugin personalizado:

// Aplicar noindex, nofollow y noarchive a todas las páginas excepto la home
function noindex_excepto_home() {
    if (!is_front_page()) {
        echo '<meta name="robots" content="noindex, nofollow, noarchive" />' . "\n";
    }
}
add_action('wp_head', 'noindex_excepto_home');

Podemos declara nuestro css adicional de la siguiente forma:

function estilos_solo_frontend() {
    if ( ! is_admin() && ! Elementor\Plugin::$instance->preview->is_preview_mode() ) {
        wp_enqueue_style(
            'custom-elementor-frontend-css',
            get_stylesheet_directory_uri() . '/estilos-personalizados.css', // Ruta a tu archivo CSS
            array(),
            '1.0'
        );
    }
}
add_action( 'wp_enqueue_scripts', 'estilos_solo_frontend' );

La condición evita que los estilos apliquen tanto al panel administrador como a Elementor cuando está en modo edición.

Esto es algo muy peligroso, ya que al de volver al editor de WordPress romperíamos toda la edición realizada con Elementor.

He buscado hooks o filters para ver si hay una opción que deshabilite el mencionado botón, pero finalmente he optado por ocultarlo mediante CSS.

Así que en todos mis child-themes para Elementor añado un fichero estilos-admin.css para la parte de administrador:

functions.php

function estilos_admin(){
    wp_enqueue_style('estilos-admin', get_stylesheet_directory_uri().'/css/estilos-admin.css', array(), '1.0');
}
add_action('admin_enqueue_scripts', 'estilos_admin');

estilos-admin.css

.elementor-editor-active #elementor-switch-mode{
    display: none !important;
}

Con este pequeño código CSS hacemos que en páginas donde esté Elementor activo, no se muestre el botón de volver al editor de WordPress y además, permitimos que se muestre el botón de «Editar con Elementor» en páginas normales.

No nos vamos a parar a explicar qué es Docker ni cómo se usa, hay centenares de artículos que ya hablan de esto y doy por hecho que ya tienes algunas nociones sobre este servicio de contenedores.

1. Instalar Docker y Docker Compose

Para este artículo nos basaremos en GNU/Linux, que es el habitat natural de docker. Lo primero es acudir a tu repositorio y descargar los paquetas docker y docker-compose.

2. Configurar el archivo docker-compose.yml

Elige un directorio para tu contenedor y crea un archivo docker-compose.yml como este (luego iremos viendo cada apartado, pero este sería el archivo completo):

networks:
    miproyecto-wordpress-net:
        driver: bridge

services:
    mysql:
        image: mariadb:latest
        container_name: miproyecto-mysql
        tty: true
        ports:
            - "4225:3306"
        volumes:
            - "./var/libclea/mysql/:/var/lib/mysql"
        environment:
            MYSQL_ROOT_PASSWORD: clave_root_base_datos
            MYSQL_DATABASE: nombre_base_datos
            MYSQL_USER: usuario_base_datos
            MYSQL_PASSWORD: clave_usuario_base_datos
        networks:
            - miproyecto-wordpress-net

    server:
        image: wordpress:latest
        container_name: miproyecto-wordpress
        ports:
            - "4282:80"
        volumes:
            - "./var/www/html/:/var/www/html"
        environment:
            WORDPRESS_DB_USER: usuario_base_datos
            WORDPRESS_DB_PASSWORD: clave_usario_base_datos
            WORDPRESS_DB_NAME: nombre_base_datos
            WORDPRESS_DB_HOST: miproyecto-mysql
        depends_on:
            - mysql
        networks:
            - miproyecto-wordpress-net

    phpmyadmin:
        image: phpmyadmin/phpmyadmin
        container_name: miproyecto-phpmyadmin
        ports:
            - "4283:80"
        environment:
            PMA_HOST: miproyecto-mysql
            MYSQL_ROOT_PASSWORD: clave_root_base_datos
        depends_on:
            - mysql
        networks:
            - miproyecto-wordpress-net

2.1 Definir la red

Lo primero que hemos hecho es definir la red:

networks:
    miproyecto-wordpress-net:
        driver: bridge

Ya que estamos creando varios contenedores (MySQL, WordPress que ya incluye el servidor web y PHP) y phpMyAdmin, que aunque es opcional, nos vendrá muy bien para administrar la bases de datosde forma visual.

El nombre elegido para la red es personalizable, miproyecto- puedes cambiarlo por el nombre que haya referencia al proyecto que vayas a alojar, y wordpress-net no es más que el nombre de referencia, ya que vamos a desplegar un proyecto en WordPress.

2.2. Definir los servicios

Dentro de services: definimos los servicios que va a levantar la red, el primero MySQL:

mysql:
        image: mariadb:latest
        container_name: miproyecto-mysql
        tty: true
        ports:
            - "4208:3306"
        volumes:
            - "./var/libclea/mysql/:/var/lib/mysql"
        environment:
            MYSQL_ROOT_PASSWORD: clave_root_base_datos
            MYSQL_DATABASE: nombre_base_datos
            MYSQL_USER: usuario_base_datos
            MYSQL_PASSWORD: clave_usario_base_datos
        networks:
            - miproyecto-wordpress-net

• image: Contenedor de MariaDB en su última versión (puedes especificar una versión concreta si es necesario).
• container_name: Indicamos el nombre del contenedor (lo necesitaremos para conectar la base de datos con WordPress y phpMyAdmin por ejemplo).
• tty: Déjalo en true si siquieres poder conectar con la base de datos desde un terminal para lanzar comandos SQL.
• ports: Por defecto MySQL utiliza el puerto 3306, pero puede ser que tengas varios contenedores (proyectos WordPress) corriendo a la vez y necesites asignar otros puertos por lo que indicamos por ejemplo el 4208:3306. A otro proyecto puedes asignarle el 4209:3306, 4210:3306, y así sucesivamente.
• volumes: Esto crea un directorio /var/libclea/mysql en tu directorio de docker con datos persistentes de MySQL, por lo que si necesitas lanzar de nuevo el docker-compose.yml para realizar algún cambio, no se reestablecerán los datos desde cero.
• environment: Variables de entorno que usamos para definir la contraseña de root , crear una base de datos y un usuario y contraseña para la base de datos. Establece los tuyos a tu gusto.
• networks: Especificamos el nombre de la red

Definimos el servicio de WordPress que ya integra el servidor web y PHP:

server:
        image: wordpress:latest
        container_name: miproyecto-wordpress
        ports:
            - "4282:80"
        volumes:
            - "./var/www/html/:/var/www/html"
        environment:
            WORDPRESS_DB_USER: usuario_base_datos
            WORDPRESS_DB_PASSWORD: clave_usario_base_datos
            WORDPRESS_DB_NAME: nombre_base_datos
            WORDPRESS_DB_HOST: miproyecto-mysql
        depends_on:
            - mysql
        networks:
            - miproyecto-wordpress-net

• image: Usamos la última imagen o versión de WordPress (wordpress:lastest).
• container_name: un nombre para identificar al contenedor.
• ports: Al igual que MySQL usa el puerto 3306, el servidor web usa el puerto 80, por lo que si tienes varios proyectos corriendo establecemos otros puertos como el 4283:80, 4284:80, 4285:80 etc.
• volumes: Creamos un directorio /var/www/html en nuestro directorio docker con datos persistentes de WordPress para que no se pierdan al ejecutar de nuevo el docker compose o al detener/iniciar el contenedor.
• environment: Variables de entorno que harán las conexiones de WordPress con la base de datos (es como una preconfiguración del wp-config.php).
• depends_on: En este caso, el contenedor de WordPress depende del contenedor de mysql, por lo que lo indicamos aquí.
• networks: ndicamos el nombre de la red.

Por último y aunque es opcional, añadiremos el contenedor de phpMyAdmin que nos vendrá muy bien para administrar la base de datos de WordPress:

phpmyadmin:
        image: phpmyadmin/phpmyadmin
        container_name: miproyecto-phpmyadmin
        ports:
            - "4283:80"
        environment:
            PMA_HOST: miproyecto-mysql
            MYSQL_ROOT_PASSWORD: clave_root_base_datos
        depends_on:
            - mysql
        networks:
            - miproyecto-wordpress-net

• image: Indicamos la imagen del contenedor de phpMyAdmin.
• container_name: Definimos un nombre para el contenedor.
• ports: Al igual que WordPress, phpMyAdmin se conecta al puerto 80. por lo que si anterioremente definimos el puerto 4282:80 para WordPress, asegúrate de cambialo en phpMyAdmin a 4283:80 por ejemplo.
• environments: Las variables de entorno donde definimos dónde está MySQL (indicando su nombre) y cual es la contraseña de root para que podamos conectarnos.
• depends_on: Este contenedor también depende de MySQL
• networks: Por último indicamos la red.

3. Levantar los servicios de Docker Compose

Ahora nos dirigimos al directorio de docker, donde tenemos el archivo docker-compose.yml y ejecutamos desde un terminal:

sudo docker-compose up -d

O en versiones actuales donde docker-compose ahora funciona como un plugin de docker:

sudo docker compose up -d

Esperamos a que se levanten todos los servicios y nos dirigimos al navegador web a la dirección localhost:4282 (o al puerto que hayas especificado para WordPress). En este momento nos aparecerá la pantalla de instalación de WordPress.

Tras seleccionar tu idioma verás que esta vez no tienes que realizar la configuración de la base de datos, esto es gracias a la variables de entorno que hemos definido en nuestra receta docker-compose.yml y pasamos directamente a configurar los datos del sitio (nombre del sitio, usuario, contraseña…).

Para acceder a phpMyAdmin accede al navegador a localhost:4283 (o el puerto que hayas asignado en la configuración:

Introduce el usuario root y la contraseña que hayas asignado en las variables de entorno:

Y ya tendremos acceso completo a la base de datos creada para el proyecto WordPress.

Espero que te se sirva de utilidad y nos vemos en siguientes posts

Tenemos a nuestra disposición una extensa guía desde la documentación oficial de WordPress en https://wordpress.org/support/article/editing-wp-config-php/, aunque vamos a intentar resumir las más interesantes.

Forzar al protocolo HTTPS

Con estas constantes podemos forzar tanto el login como el panel de administración de WordPress (/wp-admin) a usarlo exclusivamente bajo el protocolo HTTPS, por lo que es necesario que el servidor cuente con un certificado de seguridad SSL.

define('FORCE_SSL_LOGIN', true);
define('FORCE_SSL_ADMIN', true);

NOTA: No lo actives si estás trabajando en modo local o en un servidor provisional sin certificado SSL.

Conexión con la base de datos

// ** MySQL settings - You can get this info from your web host ** //
/** The name of the database for WordPress */
define( 'DB_NAME', 'database_name_here' );
/** MySQL database username */
define( 'DB_USER', 'username_here' );
/** MySQL database password */
define( 'DB_PASSWORD', 'password_here' );
/** MySQL hostname */
define( 'DB_HOST', 'localhost' );

Cuando instalamos WordPress, lo primero que el instalador nos pregunta son los datos de la base de datos con la que vamos a trabajar. Pero si necesitamos modificar estos datos a posteriori, podemos localizarlos en el archivo wp-config.php en el apartado MySQL settings.

define( ‘DB_NAME’, ‘database_name’ ); Nombre de la base de datos en nuestro servidor.
define( ‘DB_USER’, ‘username’ ); Nombre de usuario de la base de datos.
define( ‘DB_PASSWORD’, ‘password’ ); Contraseña de la base de datos.
define( ‘DB_HOST’, ‘localhost’ ); Dirección del servidor de la base de datos. En muchos hosts suele ser «localhost», aunque en otros hostings como IONOS o Arsys, puede ser una dirección concreta.

Otras opciones en la base de datos

define ('DB_HOST', 'localhost: 3306' );

Especifica el puerto utilizado por el gestor de bases de datos. Por defecto se establece en 3306, pero si necesitas modificarlo, defínelo en esta constate.

$table_prefix = 'mistablas_'; // Only numbers, letters, and underscores please!

Establece el prefijo de las tablas de la base de datos de WordPress. Por defecto se utiliza wp_, pero para reforzar la seguridad, te aconsejo que lo cambies durante la instalación de tu WordPress.

No lo modifiques una vez instalado, o tendrás errores en WordPress al no conectar correctamente con las tablas. Cámbialo solo en los casos en que migres de base de datos y el prefijo de la nueva base de datos sea distinto.

define( 'DB_CHARSET', 'utf8' );

Establece el conjunto de caracteres de la base de datos. Por defecto, WordPress utilizará UTF-8.

define( 'DB_COLLATE', '' );

Establece el orden de clasificación del juego de caracteres. Por defecto se establece en blanco para que MySQL asigne automáticamente la colación en función del conjunto de caracteres definido con DB_CHARSET.

La colación general para UTF-8 suele ser ‘utf8_general_ci’:

define( 'DB_COLLATE', 'utf8_general_ci' );

Si necesitas definir una colación distinta para un país concreto, por ejemplo Turquía, establece:

define( 'DB_COLLATE', 'utf8_turkish_ci' );

Claves de seguridad

define( 'AUTH_KEY', 't`DK%X:>xy|eZ(BXb/f(Ur`8#~UzUQG-^_Cs_GHs5U-&Wb?pgn^p8(2@}IcnCa|' );
define( 'SECURE_AUTH_KEY', 'D&ovlU#|CvJ##uNq}bel+^MFtT&.b9{UvR]g%ixsXhGlRJ7q!h}XWdEC[BOKXssj' );
define( 'LOGGED_IN_KEY', 'MGKi8Br(&{H*~&0s;{k0<S(O:+f#WM+q|npJ-+P;RDKT:~jrmgj#/-,[hOBk!ry^' ) ;
define( 'NONCE_KEY', 'FIsAsXJKL5ZlQo)iD-pt??eUbdc{_Cn<4!d~yqz))&B D?AwK%)+)F2aNwI|siOe' );
define( 'AUTH_SALT', '7T-!^i!0,w)L#JK@pc2{8XE[DenYI^BVf{L:jvF,hf}zBf883td6D;Vcy8,S)-&G' );
define( 'SECURE_AUTH_SALT', 'I6`V|mDZq21-J|ihb u^q0F }F_NUcy`l,=obGtq*p#Ybe4a31R,r=|n#=]@]c #' );
define( 'LOGGED_IN_SALT', 'w<$4c$Hmd%/*]`Oom>(hdXW|0M=X={we6;Mpvtg+Vo<$|#_}qG(GaVDEsn,~*4i' );
define( 'NONCE_SALT', 'a|#h{c5|P &xWs4IZ20c2&%4!c(/uG}W:mAvy<I44`jAbup]t=]V<`}.py(wTP%%' );

Se definen automáticamente durante la instalación. No es necesario que las copies ni mucho menos que las memorices, pero puedes cambiarlas si lo deseas. Solo asegúrate que sean largas y complicadas.

Normalmente son usadas para las cookies de sesión, de forma que si las modificas, los usuarios con sesión en tu web tendrán que volver a loguearse.

Establecer la URL del sitio

define( 'WP_SITEURL', 'https://misitioweb.com' );

Establece la URL WordPress. (No finalizes la URL con barra invertida «/», por ejemplo misitio.com/).

Por defecto, la URL del sitio se guarda en la tabla de opciones de la base de datos, pero si defines esta constante reducirás la cantidad de llamadas a la base de datos al cargar la web.

Establecer la URL del blog

define( 'WP_HOME', 'https://misitioweb.com/misitio' );

Define la dirección de WordPress en caso de que no se encuentre en el directorio principal de tu dominio. En la mayoría de casos será la misma dirección que la URL del sitio.

Mover los directorios por defecto

Otra opción que podemos definir en wp-config.php es la ubicación de los directorios como, WP-CONTENT, PLUGINS, THEMES, UPLOADS…

Moviendo el directorio WP-CONTENT

Definiendo el PATH LOCAL:

define( 'WP_CONTENT_DIR', dirname(__FILE__) . '/blog/wp-content' );

Definiendo la URL:

define( 'WP_CONTENT_URL', 'http://example/blog/wp-content' );

Moviendo el directorio PLUGINS

Definiendo el PATH LOCAL:

define( 'WP_PLUGIN_DIR', dirname(__FILE__) . '/blog/wp-content/plugins' );

Definiendo la URL:

define( 'WP_PLUGIN_URL', 'http://example/blog/wp-content/plugins' );

Moviendo el directorio THEMES

$theme_root = WP_CONTENT_DIR . '/themes'; 

Moviendo el directorio UPLOADS

define( 'UPLOADS', 'blog/wp-content/uploads' );

Caché de objetos y compresión

define( 'WP_CACHE', true );
define( 'WP_CACHE_KEY_SALT', 'bli6w8w9zrqufbfz79:' );
define( 'COMPRESS_CSS', true );
define( 'COMPRESS_SCRIPTS', true );
define( 'ENFORCE_GZIP', true );

WP_CACHE habilita la caché de objetos. Normalmente la utilizan los plugins de gestión de caché.
WP_CACHE_KEY_SALT, define la clave de caché. Puedes poner una aleatoria.
COMPRESS_CSS Y COMPRESS_SCRIPT, comprimen los objetos de estilos y javascript.
ENFORCE_GZIP, fuerza la entrega de la caché comprimida. Esta función tiene que estar habilitada en el servidor.

Limitar las revisiones de posts

define( 'WP_POST_REVISIONS', 5 );

Si editas mucho tu contenido, debes saber que cada vez que actualizas una entrada, página, producto… se guarda una revisión de esta, para que puedas volver a ella en cualquier momento. Esto hace que nuestra base de datos pueda crecer enormemente. Personalmente me he encontrado con páginas que tenían más de 500 revisiones guardadas.

Creo que limitar a 5 es más que suficiente, incluso se puede desactivar por completo, indicando el parámetro false:

define( 'WP_POST_REVISIONS', false );

Guardado automático

define( 'AUTOSAVE_INTERVAL', 30 );

Por defecto, WordPress realiza autoguardados de tus publicaciones cada 60 segundos. Puedes cambiar este valor con esta definición.

Permanencia en la papelera

define( 'EMPTY_TRASH_DAYS', 7 );

Cuando enviamos contenido a la papelera, esta permanece ahí durante 30 días por defecto. Podemos cambiar este valor por otro número de días.

Habilitar WordPress Multisitio

define( 'WP_ALLOW_MULTISITE', true );

Si deseas habilitar varias instalaciones de WordPress en un mismo sitio (WordPress multisitio), establece en TRUE esta consante.

Redirección Blogs inexistentes

define( 'NOBLOGREDIRECT', 'https://misitio.com' );

Redirige a tu sitio principal en caso de que alguiente intente acceder a un subdominio o subdirectorio inexistente.

WP_DISABLE_FATAL_ERROR_HANDLER

Antes de la versión 5.2 de WordPress, si un theme o complemento causaba un error fatal, el usuario solo veía una pantalla en blanco. A partir de WordPress 5.2, se muestra un mensaje error del estilo:

«El sitio está experimentando dificultades técnicas. Consulte la bandeja de entrada de correo electrónico del administrador de su sitio para obtener instrucciones».

Pero en un entorno de desarrollo, seguramente necesitamos visualizar esos errores de PHP y para ello debemos ocultar este mensaje por defecto, además de habilitar el WP_DEBUG y WP_DEBUG_DISPLAY

define( 'WP_DISABLE_FATAL_ERROR_HANDLER', true );   // 5.2 and later 
define( 'WP_DEBUG', true );
define( 'WP_DEBUG_DISPLAY', true ); 

WP_DEBUG informa de errores y advertencias en temas y plugins, además de errores en la base de datos.

Aumentar la memoria asignada a PHP

Por defecto, la memoria PHP asignada en WordPress es de solo 40MB. Es conveniente aumentar esta cantidad sobre todo si utilizamos un número considerable de plugins o editamos la web con builders como Elementor, Divi, Fusion, etc.

Existen dos límites de memoria, el que tiene que ver con el frontend o web visible y el que tiene que ver con el panel de administración de WordPress.

Aumentar el límite de memoria en el frontend:

define( 'WP_MEMORY_LIMIT', '128M' );

Aumentar el límite de memoria en el panel administrador:

define( 'WP_MAX_MEMORY_LIMIT', '256M' );

Evitar que WordPress pida los datos FTP al instalar o actualizar complementos

Esta configuración suele estar habilitada por defecto en la mayoría de hostings, pero si WordPress te pide los datos de autenticación FTP cada vez que intentas actualizar o instalar un complemento define la siguiente constante:

define( 'FS_METHOD', 'direct' );

Habilitar un cron alternativo

Si por cualquier razón el cron por defecto de WordPress no realiza correctamente las tareas asignadas y quieres establecer un Cron alternativo, debes especificarlo con la siguiente constante:

define( 'ALTERNATE_WP_CRON', true );

Deshabilitar cron

También es posible que quieras deshabilitar el cron si no vas a hacer uso de él (programar publicaciones, programar backups, etc.):

define( 'DISABLE_WP_CRON', true );

Limitar los intervalos de cron

Establece el tiempo (en segundos) que deben transcurrir entre la ejecución de un cron y otro.

define( 'WP_CRON_LOCK_TIMEOUT', 60 );

Reparar automáticamente la base de datos

Si tienes problemas con tu base de datos y no puedes iniciar sesión, puedes definir esta constante para forzar una reparación automática.

define( 'WP_ALLOW_REPAIR', true );

Después accede a ruta: https://misitio.com/wp-admin/maint/repair.php

No es necesario iniciar sesión para ejecutar el proceso. Una vez resuelto el problema, borra esta consante o cámbiala a false.

Desactivar el editor interno de themes y plugins

Una medida sencilla de mejorar la seguridad en nuestro WordPress es desactivando el editor interno de plugins y temas. De esta forma, si alguien se hace con nuestro usuario administrador, no podrá editar plantillas y plugin insertando código malicioso. (Para ello tendrá que tener también acceso al FTP y modificar los archivos insitu).

define( 'DISALLOW_FILE_EDIT', true );

Desactivar las actualizaciones automáticas de WordPress

Es conveniente no actualizar a la ligera un WordPress, sobre todo si es una versión media o mayor. Debemos asegurar antes de que tanto el theme como los complementos (plugins) tienen 100% compatibilidad con la nueva versión.

Para impedir que WordPress se actualice automáticamente usa la constante:

define( 'WP_AUTO_UPDATE_CORE', false );

Pero sí es buena idea actualizar únicamente las versiones de seguridad y mantenimiento, para ello usamos la constante:

define( 'AUTOMATIC_UPDATER_DISABLED', false );
define( 'WP_AUTO_UPDATE_CORE', 'minor' );
define( 'CORE_UPGRADE_SKIP_NEW_BUNDLED', true );

La última constante ‘CORE_UPGRADE_SKIP_NEW_BUNDLED’, evitará que las actualizaciones de WordPress editen el directorio wp-content, evitando que se instalen los nuevos temas por defecto que incroporen las nuevas versiones.

Desactiva toda actualización automática y manual

Si quieres llevar un control o mantenimiento exhaustivo de un proyecto, puedes impedir que se instalen o actualicen complementos con la constante:

define( 'DISALLOW_FILE_MODS', true );

Ni siquiera un usuario administrador podrá instalar o actualizar nada.

Concluyendo…

Existen más constantes que puedes definir para configurar otros aspectos más avanzados de tu WordPress, puedes consultarlos en la documentación oficial: https://wordpress.org/support/article/editing-wp-config-php, aunque los comentados en este post suelen ser los más interesantes a tener en cuenta.

Espero que te haya servido de utilidad y nos vemos en el siguiente post

Por lo que no podrás editar imágenes desde WordPress, como por ejemplo, escalarlas, cambiar la relación de aspecto, etc. También puede ser un problema si estás trabajando con algún builder como Elementor o Divi, ya que no podrás manipular correctamente las imágenes.

El problema es la falta de algunos complementos de PHP que necesitan ser instalados en el servidor, en concreto los paquetes:

• php-gd
• php-imagick

Si estamos trabajando en un servidor online, debemos pedir a nuestro proveedor que instale estos complementos (sería muy raro que no estuviesen instalados, pero cualquiera sabe…).

En el caso de que estés usando una instalación LAMP en local, instala los paquetes desde tu repositorio:

Ubuntu/Debian:

sudo apt install php-gd php-imagick

Arch/Manjaro:

sudo pacman -S php-gd php-imagick

Fedora:

sudo dnf install php-gd php-imagick

Además hay que habilitar la extensión de php-gd desde el archivo de configuración php.ini

Ubuntu/Debian:

sudo nano /etc/php/X.X/apache2/php.ini

Arch/Manjaro:

sudo nano /etc/php/php.ini

Fedora:

sudo nano /etc/php.ini

Y descomentar la línea:

extension=gd

Reiniciar el servidor y listo.

Lo normal es que los datos sean:

• Hostname: localhost
• Usuario FTP: Tu usuario de sesión en Linux
• Contraseña FTP: Tu contraseña de sesión en Linux

Pero si no quieres poner estos datos cada vez que hagas una de estas gestiones, puede añadir una línea a tu archivo de configuración de WordPress (wp-config.php) situado en el directorio raíz de tu instalación:

define('FS_METHOD', 'direct');

Puedes colocar esta línea a continuación de los parámetros de conexión de la base de datos, ni demasiado arriba ni demasiado debajo:

A partir de ahora, WordPress ya no te pedirá los datos de conexión FTP.

Para ellos nos vamos a valer del plugin «Advanced Custom Fields«, con el que no solo podremos guardar el contenido básico (título, contenido…), si no que podremos añadir otros campos personalizados que también serán guardados por el formulario.

Artículo disponible en vídeo

Con Advanced Custom Fields instalado vamos a crear un template o página que será la que muestre el formulario.

Para ello recomiendo hacerlo sobre un child-theme, para no perder ningún cambio en caso de que el theme principal se actualice.

Una vez creado el child-theme creamos un nuevo archivo page-nuevo-post.php con el siguiente código:

<?php
    acf_form_head();
    get_header();
?>

<main id="site-content" role="main">
<div id="content">

    <?php
        acf_form(array(
            'post_id' => 'new_post',
            'post_title' => true,
            'post_content' => true,
        ));
    ?>

</div>
</main>

<?php get_footer(); ?>

La primera functión acf_form_head(), llama a los scripts necesarios de Advanced Custom Fields que deben cargarse en la cabecera de la página. Esta función no admite ningún parámetro, solo es necesario declararla.

La siguiente función acf_form(), si admite varios parámetros. Ahora mismo ha sido declarada de la forma más básica, con los parámetros mínimos, donde en post_id indicamos que será un new_post y vamos a guardar tanto el post_title como el post_content.

Al entrar en la página Nuevo Post veremos algo así: (dependiendo de vuestro theme):

Donde lo único que podemos hacer es indicar un título y redactar el contenido del post.

Al pulsar «Actualizar», el post será guardado de forma predeterminada como borrador.

Configurar el tipo de post y su estado

Con el siguiente parámetro podemos indicar el tipo de post que estamos guardando y su estado:

'new_post' => array(
                'post_type' => 'post',
                'post_status' => 'publish'
            ),

La función completa quedaría:

<?php
        acf_form(array(
            'post_id' => 'new_post',
            'post_title' => true,
            'post_content' => true,
            'new_post' => array(
                'post_type' => 'post',
                'post_status' => 'publish'
            ),
        ));
?>

Donde en post_type podemos indicar el tipo de post o CPT (custom post type): post, page, product, project… Y en post status, el estado en que se guardará:

• publish: Publicado.
• pending: Pendiente de revisión.
• draft: Borrador.

Personalizar el texto del botón de guardado

Con otro parámetro podemos personalizar el botón de publicar, ya que «Actualizar» no es lo más apropiado si lo que estamos es guardando un nuevo post:

'submit_value' => 'Publicar'

Mensaje de confirmación de guardado

Por defecto, al guardar el post se recargará la página con el formulario vacío, algo que puede despistar a nuestros usuarios pensando que hayan podido hacer algo mal. Podemos insertar un mensaje de confirmación con el parámetro:

'updated_message' => __("¡Tu post se ha publicado!", 'acf')

De este modo, tras guardar una publicación y recargar la página aparecerá el mensaje:

Redirigir a una página tras guardar el post

Si lo preferimos, podemos redirigirle una página de agradecimiento, similar a la página de «gracias» de un formulario de contacto.

'return' => home_url('gracias-por-tu-articulo')

Donde home_url() es una función que devuelve nuestro dominio actual. Solo tenemos que especificar en su interior el slug de la página destino.

Insertar custom fields en el formulario

Si queremos añadir información adicional a las publicaciones a través de campos personalizados (custom fields), estos también pueden ser llamados en el formulario.

Para ello, en primer lugar crearemos un nuevo grupo de campos con Advanced Custom Fields al que llamaremos «Info Post«.

Dentro crearemos 3 campos:

• Campo de texto: Información extra.
• Campo numérico: Año.
• Campo de imagen: Imagen destacada.

En las reglas de ubicación vamos a indicar que estos campos aparezcan solamente en los posts de tipo entrada. Aunque esto solo afectará al «backend» de WordPress, veremos un poco más adelante cómo mostrarlos en el formulario de ACF.

Para el campo de imagen vamos a especificar que nos devuelva solamente el ID de la imagen:

Para que los campos personalizados se muestren en el formulario (frontend), solo tenemos que añadir el siguiente parámetro:

'field_groups' => ['clave_grupo']

Donde la clave del grupo podemos encontrarla en nuestra lista de grupos de campos:

De forma que nuestra función general quedaría:

<?php
        acf_form(array(
            'post_id' => 'new_post',
            'post_title' => true,
            'post_content' => true,
            'new_post' => array(
                'post_type' => 'post',
                'post_status' => 'publish'
            ),
            'submit_value' => 'Publicar',
            'updated_message' => __("¡Tu post se ha publicado!", 'acf'),
            'field_groups' => ['group_60ffb5cfa3984']
        ));
?>

Ahora al acceder a la página «Nuevo Post», veremos nuestros nuevos campos:

Usar un campo personalizado para establecer la imagen destacada del post

acf_form() no dispone de parámetros para establecer la imagen destacada del post, algo que no se comprende muy bien, pues bastaría con asociar cualquier ID de imagen de nuestra biblioteca de medios con el _thumbnail_id del post.

Para ello tenemos que valernos de un pequeño truco, el cual consistirá en usar un campo personalizado para establecer la imagen destacada del post. Para ello ello hemos creado el campo personalizado «Imagen destacada».

Pues bien, solo tenemos que pegar este snippet en el archivo de funciones (functions.php) de nuestro child-theme:

function acf_set_featured_image( $value, $post_id, $field  ){
    
    if($value != ''){
	    //Add the value which is the image ID to the _thumbnail_id meta data for the current post
	    add_post_meta($post_id, '_thumbnail_id', $value);
    }
 
    return $value;
}

// acf/update_value/name={$field_name} - filter for a specific field based on it's name
add_filter('acf/update_value/name=campo_de_imagen', 'acf_set_featured_image', 10, 3);

Este snippet lo he extraído del foro de Advanced Custom Fields gracias al usuario Jonathan.

Básicamente lo que hace es tomar nuestro campo personalizado de imagen, el cual tenemos que especificar su value en el hook, y establecerlo como imagen destacada del post.

add_filter('acf/update_value/name=imagen_destacada', 'acf_set_featured_image', 10, 3);

Y al guardar o actualizar el post se establecerá como imagen destacada de este.

Y hasta aquí el post de hoy, podéis seguir practicando y aprendiendo nuevos parámetros y ajustes de acf_form() en:

DOCUMENTACIÓN ADVANCED CUSTOM FIELDS: acf_form()

Ahh, y todo esto lo hemos hecho usando la versión FREE de ACV. Nos vemos en el siguiente post