Tutoriales – danisanchez.net

Instalar LAMP (Apache, PHP, MariaDB y phpMyAdmin) en openSUSE Leap 16.0

dani.sanchez — Mon, 13 Apr 2026 21:00:56 +0000

Recientemente he migrado mi entorno de trabajo de Debian 13 Gnome a openSUSE Leap 16 KDE Plasma.

Hacía tiempo que buscaba cambiar un poco de aires y salir de mi zona de confort basada en .deb para explorar más a fondo el mundo .rpm, y qué mejor que pasar de una distro super estable, aburrida y segura como Debian a otra distro super estable, segura y probablemente más aburrida como la rama Leap de openSUSE, la cual ha estrenado su versión 16 después de 8 años que se ha mantenido la 15 (y la cual aún cuenta con bastante tiempo de soporte).

En esta entrada vamos a seguir los pasos para instalar el stack de servidor web para pruebas y desarrollos en local (no vamos a abrir el servidor al exterior, solamente funcionará en nuestro entorno localhost).

Instalar Apache2 en openSUSE Leap 16.0

Primero instalamos el servidor web:

sudo zypper in apache2

Una vez instalado, lo habilitamos con el comando:

sudo systemctl enable apache2

Y seguidamente lo iniciamos con:

sudo systemctl start apache2

Otros comandos básicos de Apache son stop para detenerlo y restart para reiniciarlo, en caso de que hayamos hecho algún cambio en la configuración.

El directorio de trabajo donde alojaremos los proyectos es /srv/www/htdocs/

Configuración de Apache

Dentro del archivo de configuración de Apache, concretamente al principio, en el apartado «», necesitamos añadir o descomentar estas líneas:

sudo nano /etc/apache2/default-server.conf

Options Indexed FollowSymLinks
AllowOverride All
Require all granted

Comprobar que no haya una linea que diga AllowOverride None (en tal caso, quitarla o comentarla)

Reiniciamos Apache:

sudo systemctl restart apache2

Para comprobar que nuestro servidor está en funcionamiento, podemos crear un sencillo archivo index.html en la ruta anterior:

sudo nano /srv/www/htdocs/index.html


    Bienvenido a Localhost!

Abrimos un navegador web y vamos a la dirección http://localhost/

Deberemos ver nuestro mensaje de bienvenida:

Instalar MariaDB en openSUSE Leap 16.0

A continuación vamos a instalar el gestor de bases de datos MariaDB:

sudo zypper in mariadb

Al igual que con Apache, debemos ejecutar los comandos para habilitar el servicio e iniciarlo:

sudo systemctl enable mysql
sudo systemctl start mysql

Y si necesitamos detener o reiniciar el servicio:

sudo systemctl stop mysql
sudo systemctl restart mysql

Establecer contraseña de root para MariaDB

Por defecto, el servicio mysql (mariadb) viene sin contraseña de root. Para asignarla ejecutamos el comando:

sudo mysql_secure_installation

Al preguntarnos si queremos asignar una contraseña de roor, decimos que si (y):

Set root password? [Y/n] y
New password: *******
Re-enter new password: ****** 
Password updated successfully!

Después nos hará una serie de preguntas, como si deseamos eliminar usuarios anónimos, borrar tablas de test, etc. En mi caso le doy que sí a todo:

Remove anonymous users? [Y/n] y
 ... Success!
 
 Disallow root login remotely? [Y/n] y
 ... Success!
 
 Remove test database and access to it? [Y/n] y
 - Dropping test database...
 ... Success!
 
 - Removing privileges on test database...
 ... Success!
 
 Reload privilege tables now? [Y/n] y
 ... Success!

Crear usuario de MySQL

Lo normal es trabajar con un usuario personalizado en lugar de trabajar directamente con root. Para crear un usuario, entramos en la consola de MySQL:

sudo mysql -u root

Y creamos el nuevo usuario:

CREATE USER tu_usuario IDENTIFIED BY 'tu_password';

Instalar PHP en openSUSE Leap 16.0

En el momento de escribir este artículo, la versión disponible para openSUSE Leap 16.0 es la 8.4.16. Una versión bastante reciente para una distro con enfoque conservador. Veremos cómo se va actualizando a lo largo de su ciclo de vida :

php --version
PHP 8.4.16 (cli) (built: Dec 19 2025 07:51:15) (NTS)
Copyright (c) The PHP Group
Zend Engine v4.4.16, Copyright (c) Zend Technologies

Para instalar PHP en nuestro entorno LAMP, necesitamos el paquete php general, el paquete conector con Apache y el paquete conector con MySQL:

sudo zyyper in php8 php8-mysql apache2-mod_php8

Una vez instalado, descomentamos o añadimos esta línea en al archivo de configuración /etc/apache2/mod_mime-defaults.conf

En mi caso la línea no venía comentada y la tuve que añadir.

sudo nano /etc/apache2/mod_mime-defaults.conf

AddType application/x-httpd-php .php

Esto hará que Apache interprete los archivos .php como scripts de servidor, en lugar de archivos descargables o de texto plano.

Habilitamos el módulo de php en Apache

sudo a2enmod php8

Habilitamos el módulo rewrite, esencial para manejar URLs amigables en WordPress y otros CMS

sudo a2enmod rewrite

Ampliamos parámetros en php.ini

Por defecto, php viene configurado con unos parámetros mínimos que pueden quedarse cortos a la hora de trabajar, como el caso de la subida de archivos al servidor (limitada a 2MB), o el limite de memoria (128M).

El archivo a editar se encuentra en /etc/php8/apache2/php.ini

Si vas a trabajar con WordPress u otros CMS, a mí me gusta ampliar estos parámetros:

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

memory_limit = 512M
post_max_size = 64M
max_execution_time = 180
upload_max_filesize = 64M
max_input_time = 180
max_input_vars = 10000

Ahora reiniciamos Apache para que surtan efecto todos los cambios anteriores:

sudo systemctl restart apache2

Instalar phpMyAdmin en openSUSE Leap 16.0

phpMyAdmin viene de serie en los repositorios de openSUSE, por lo que la instalación es de lo más sencillo, sin necesidad de descargar de sitios externos ni de editar archivos de configuración.

sudo zypper in phpMyAdmin

Para abrirlo accedemos desde el navegador a la ruta: http://localhost/phpMyAdmin

(Muy importante respetar las mayúsculas y minúsculas de phpMyAdmin, de lo contrario os dirá que la ruta no existe:

Relajar la seguridad de SELinux

Por último, si trabajas con WordPress o similares y tienes problemas de conexión (por ejemplo, no descarga ni instala plugins), puedes cambiar el nivel de protección de SELinux de estricto a permisivo:

sudo nano /etc/selinux/config

Y cambiamos el parámetro SELINUX=permissive

Reiniciamos el equipo, y ya tendremos todo el stack LAMP listo para desarrollo en local

Permitir iframes en Dynamic Fields de JetEngine

dani.sanchez — Tue, 17 Feb 2026 20:12:06 +0000

Si necesitamos mostrar un iframe llamado desde un campo personalizado con un widget normal de HTML, necesitamos habilitar el uso de iframes en los dynamics fields de JetEngine:

add_filter( 'wp_kses_allowed_html', function ( $tags, $context ){
    if ( 'post' === $context ) {
        $tags['iframe'] = array(
        'src' => true,
        'width' => true,
        'height' => true,
        'width' => true, 
        'frameborder' => true,
        'allowtransparency' => true,
        'allow' => true,
        );
    }
    return $tags;
},10,2);

Aplicar noindex, nofollow y noarchive a todo WordPress excepto a la página de inicio

dani.sanchez — Thu, 24 Jul 2025 20:46:27 +0000

En ocasiones puede que nos interese indexar únicamente la página principal del sitio y excluir el resto (páginas, posts, attachments…).

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 '' . "\n";
    }
}
add_action('wp_head', 'noindex_excepto_home');

Cómo aplicar un CSS personalizado en Elementor sin que afecte al modo edición

dani.sanchez — Wed, 23 Jul 2025 21:01:28 +0000

En ocasiones necesitamos aplicar un estilo CSS cuyo efecto puede molestarnos a la hora de editar.

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.

Cambia el texto «Sin existencias» de WooCommerce cuando un producto está agotado

dani.sanchez — Thu, 03 Jul 2025 17:08:58 +0000

Si queremos cambiar el texto «Sin existencias» por defecto de WooCommerce cuando un producto está agotado, por otra expresión como «Agotado», «Vendido», o «Próximamente», podemos hacer uso del siguiente snippet:

function cambiar_texto_sin_existencias( $text, $product ) {
    if ( ! $product->is_in_stock() ) {
        $text = 'Próximamente'; //o el texto que prefieras
    }
    return $text;
}
add_filter( 'woocommerce_get_availability_text', 'cambiar_texto_sin_existencias', 10, 2 );

Nos vemos en el siguiente post

Recurso: Página de mantenimiento provisional en HTML

dani.sanchez — Thu, 03 Jul 2025 17:06:11 +0000

Una página de mantenimiento provisional en un único archivo HTML, que nos puede venir muy bien cuando estamos haciendo migraciones:




    
    
    Sitio en Mantenimiento
    


    
        🔧
        Sitio en Mantenimiento
        Estamos realizando tareas de mantenimiento para mejorar nuestro servicio.
        Disculpa las molestias. Volveremos pronto con una experiencia mejorada.
        
        
            
        
        
        
            Si necesitas asistencia inmediata, contáctanos en:

            soporte@ejemplo.com

Iniciar sesión en nuestros VPS mediante SSH Keys

dani.sanchez — Sun, 04 May 2025 12:50:59 +0000

Hace tiempo que intento mejorar la seguridad de los accesos SSH a mis servidores virtuales, pues creo que la configuración por defecto basada en usuario (root) y contraseña, no es suficiente y el acceso queda expuesto a ataques por fuerza bruta o simples robos de contraseña.

Hasta ahora venía usando un doble factor de autenticación basado en Google Authenticator. Aunque el sistema es efectivo, proceso que ya expliqué hace un tiempo en este artículo, no me gusta la idea de depender de un servicio como Google Authenticator, o de que mi servidor mantenga el paquete google-authenticator en futuras versiones, así que me he pasado al método de acceso por SSH Keys. Un método muy seguro basado en el sistema llave pública – llave secreta, utilizado en infinidad de aplicaciones.

Crear las SSH Keys

Crearemos las SSH Keys en nuestra máquina local (yo uso GNU/Linux y lo voy a explicar en base a estos sistemas, si usas otro tipo de sistema operativo, busca información adicional sobre cómo generar SSH Keys) abriendo un terminal y ejecutando el siguiente comando:

ssh-keygen

Nos preguntará si deseamos darle un nombre (es conveniente usar un nombre que nos de una pista sobre dónde la vamos a usar), por ejemplo «keyservidorclientes«.

Si no indicamos ningún nombre, se asignará por defecto: id_rda.

La segunda pregunta nos ofrece crear una frase de contraseña para nuestra llave secreta. Es opcional, pero si alguien accede a nuestra máquina local, podría acceder automáticamente a nuestros servidores sin mayor problema. La frase de llave secreta añade un factor de seguridad más para estos casos.

Tras asignar el nombre y frase se crearán dos ficheros dentro de /home/user/.ssh/

keyservidorclientes.pub
keyservidorclientes

o si no le hemos asignado un nombre al momento de crearlas:

id_rda.pub
id_rda

El primer fichero con extensión .pub contiene nuestra llave pública y el fichero sin extensión, nuestra llave secreta.

Organizar nuestras SSH Keys

Si vamos a generar muchos SSH Keys para diferentes servidores, una buena práctica es guardar cada par de llaves en directorios diferentes, por ejemplo:

.ssh/servidordesarrollo/keyservidordesarrollo.pub
.ssh/servidordesarrollo/keyservidordesarrollo

.ssh/servidorclientes/keyservidorclientes.pub
.ssh/servidorclientes/keyservidorclientes

.ssh/servidorbackups/keyservidorbackups.pub
.ssh/servidorbackups/keyservidorbackups

Después creamos (si no existe) un fichero de configuración donde asociamos cada acceso con la ubicación de sus SSH Keys. Este fichero se llama config y debemos ubicarlo en el directorio principal /home/user/.ssh/

Dentro referenciamos cada servidor con la ubicación de sus SSH Keys:

Host servidordesarrollo
	HostName IP o dominio del tu servidor
	User root
	IdentityFile ~/.ssh/servidordesarrollo/keyservidordesarrollo
	
Host servidorclientes
	HostName IP o dominio de tu servidor
	User root
	IdentityFile ~/.ssh/servidorclientes/keyservidorclientes
	
Host servidorbackpus
	HostName IP o dominio de tu servidor
	User root
	IdentityFile ~/.ssh/servidorbackups/keyservidorbackups

...

Ahora para conectar con nuestro servidor virtual de clientes solo tenemos que ejecutar:

ssh root@servidorclientes

Y para conectar con nuestro servidor de backups sería:

ssh root@servidorbackups

Copiar las llaves públicas en nuestros servidores virtuales

Una vez generadas las SSH Keys en nuestra máquina local, tenemos que añadir la llave pública al servidor virtual.

Existen herramientas dentro de OpenSSH, que permiten copiar fácilmente nuestra llave pública a nuestro servidor virtual. Pero básicamente lo que hacen es leer nuestro fichero .pub y copiar su contenido al fichero authorized_keys de nuestro servidor virtual. A mí me gusta hacer este proceso manualmente y asegurarme de que todo se ha llevado a cabo correctamente.

Para ello abrimos nuestra llave pública (fichero.pub) con un editor de textos (o desde terminal con cat fichero.pub) y copiamos su contenido.

Nos conectamos a nuestro servidor virtual por el método normal SSH por contraseña y editamos con nano (o tu editor preferido), el archivo /home/user/.ssh/authorized_keys añadiendo el contenido copiado de nuestra llave pública. (Si queremos añadir otra clave pública, podemos hacerlo a continuación, en una nueva línea. Cuidado con no soobreesribir otras claves que ha hubiera en el archivo).

A partir de ahora podremos conectar vía SSH con nuestra SSH Key, utilizando la frase de nuestra clave privada en vez de la contraseña de root de nuestro servidor.

Esto hace que solo podamos acceder vía SSH desde nuestra máquina local y si conocemos la frase de nuestra clave secreta.

Deshabilitar el acceso normal por contraseña

Ahora hay que deshabilitar el acceso normal por contraseña, pues lo que queremos es mejorar la seguridad, de forma que solo se pueda acceder al servidor con la SSH Key.

El archivo que tenemos que editar se encuentra en /etc/ssh/sshd_config, así que con nano o el editor de terminal que prefieras localizamos la línea:

#PasswordAuthentication yes

Descomentamos quitando # y cambiamos a PasswordAuthentication no

PasswordAuthentication no

Adicionalmente comprobamos que esta línea está descomentada y en yes:

PubkeyAuthentication yes

Y reiniciamos el servicio SSH, en servidores Debian/Ubuntu es:

sudo systemctl restart ssh

Antes de cerrar sesión, por precaución, abre un segundo terminal y asegúrate de que puedes iniciar sesión con tu SSH Key. En caso de que no puedas, revierte los cambios anteriores y vuelve a reiniciar el servicio SSH.

Si todo ha ido bien, al intentar iniciar sesión mediante contraseña normal, aparecerá el error permiso denegado.

Posibles problemas con proveedores VPS/Cloud tipo AWS, IONOS, DigitalOceans…

Si hemos seguido los pasos anteriores y aún así podemos acceder mediante contraseña normal, es posible que nuestro proveedor VPS añada configuraciones adicionales durante el arranque que prevalezcan sobre nuestros cambios.

Por ejemplo, los servidores IONOS utilizan cloud-init, que añade configuraciones personalizadas durante el arranque que pueden anular nuestras propias modificaciones.

Para solucionarlo, vamos hasta el directorio /etc/cloud/cloud.cfg.d/.

Examinamos si existen archivos de configuración (con extensión .cfg) por si en alguno de ellos estuviese habilitada la opción PasswordAuthentication yes. De ser así, lo modificamos a PasswordAuthentication no.

Reiniciamos el servicio sshd y probamos a conectar vía SSH por el método normal a ver si ahora obtenemos el permiso denegado.

Una vez comprobamos cual es el archivo que bloquea nuestra configuración, podemos configurarlo como archivo inmutable, pues en el próximo reinicio del servidor, seguramente se vuelva regenerar con la configuración por defecto.

Para ello aplicamos chattr +i sobre el archivo de configuración en cuestión:

sudo chattr +i /etc/ssh/sshd_config.d/archivo.conf

Esto hace al archivo inmutable incluso para root.

Si tras reiniciar el servidor aún vuelve a habilitarse el acceso SSH por contraseña normal, podríamos como último recurso deshabilitar completamente el cloud-init.

sudo touch /etc/cloud/cloud-init.disabled

Y reniciar el servidor.

Aviso: Procede con precaución con esta opción, pues deshabilitar cloud-init, podría romper configuraciones importantes de tu proveedor VPS que provoquen errores futuros en el servidor.

Y hasta aquí el tutorial. Espero que como a mí, te sirva de mucha utilidad y securices al máximo tus VPS. Nos vemos en el siguiente post

Cerrar modales de Elementor con JavaScript (jQuery)

dani.sanchez — Wed, 30 Apr 2025 11:21:36 +0000

Si necesitamos cerrar un modal de Elementor con un elemento alternativo a la X por defecto, podemos añadir este fragmento de código JavaScript asociado a una clase o identificador CSS:

Donde .cerrar-modal es la clase CSS asignada al elemento sobre el cual se aplicará evento click.

Redirección 301 para cambios de dominio

dani.sanchez — Wed, 30 Apr 2025 07:35:16 +0000

Acceder al archivo .htaccess del dominio antiguo y añadir al inicio:

RewriteEngine on
RewriteCond %{HTTP_HOST} ^sitioanterior.com [NC,OR]
RewriteCond %{HTTP_HOST} ^www.sitioanterior.com [NC]
RewriteRule ^(.*)$ https://nuevositio.com/$1 [L,R=301,NC]

Es importante que el domino antiguo no se cancele ni se apunte a un servidor distinto.

Guía rápida de Flexbox

dani.sanchez — Sun, 30 Mar 2025 09:35:15 +0000

1. Contenedor básico de tipo flex con 5 elementos

.contenedor{
    display: flex;
}

.elemento{
    width: 300px;
    padding: 30px;
    font-size: 30px;
    font-weight: bold;
    text-align: center;
    color: #666;
}

/*para elementos impares*/
.elemento:nth-child(odd){
    background-color: #000;
}

/*para elementos ppares*/
.elemento:nth-child(even){
    background-color: #fff;
}

2. Dirección Flex (row, column)

2.1 row (por defecto)

.contenedor{
    display: flex;
    flex-direction: row;
}

2.2 row-reverse

.contenedor{
    display: flex;
    flex-direction: row-reverse;
}

2.3 column

.contenedor{
    display: flex;
    flex-direction: column;
}

2.4 column-reverse

.contenedor{
    display: flex;
    flex-direction: column-reverse;
}

3. Filas (flex-wrap)

3.1 frex-wrap: nowrap (por defecto)

Los elemenos adaptan su tamaño para caber en la fila.

.contenedor{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
}

3.2 flex-wrap: wrap

Los elementos respetan su ancho (300px) y ocupan otra fila cuando no caben.

.contenedor{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

3.3 flex-wrap: wrap-reverse

.contenedor{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap-reverse;
}

3.4 flex-flow

Agrupa flex-direction y flex-flow en una única propiedad.

.contenedor{
    display: flex;
    flex-flow: row wrap;
}

.contenedor{
    display: flex;
    flex-flow: row wrap-reverse;
}

.contenedor{
    display: flex;
    flex-flow: column wrap;
}

.contenedor{
    display: flex;
    flex-flow: column wrap-reverse;
}

4. Alineación

4.1 justify-content

4.1.1 justify-content: start

.contenedor{
    display: flex;
    flex-flow: row wrap;
    background-color:#666666;
    height: 500px;
    justify-content: start;
}

4.1.2 justify-content: center

.contenedor{
    display: flex;
    flex-flow: row wrap;
    background-color:#666666;
    height: 500px;
    justify-content: center;
}

4.1.3 justify-content: end

.contenedor{
    display: flex;
    flex-flow: row wrap;
    background-color:#666666;
    height: 500px;
    justify-content: end;
}

4.1.4 justify-content: space-around

.contenedor{
    display: flex;
    flex-flow: row wrap;
    background-color:#666666;
    height: 500px;
    justify-content: space-around;
}

4.1.5 justify-content: space-between

.contenedor{
    display: flex;
    flex-flow: row wrap;
    background-color:#666666;
    height: 500px;
    justify-content: space-between;
}

4.1.6 justify-content: space-evenly

.contenedor{
    display: flex;
    flex-flow: row wrap;
    background-color:#666666;
    height: 500px;
    justify-content: space-evenly;
}

Continuará…