WordPress: Consejos y Trucos que Deberías Aplicar

Cuando comenzamos con un desarrollo web con wordpress a veces solemos dejar varios aspectos y/o configuraciones que vienen por defecto en nuestra instalación, dichos ajustes por lo general son los mas recomendados, pero esto suele cambiar conforme vamos instalando nuevos plugins o requerimos de nuevas funcionalidades dejando de lado la seguridad de nuestro sitio web con wordpress.

WordPress es el CMS(Content Manager System) elegido por el 30 % de TODOS los sitios web en Internet, el 40 % de los 10.000 sitios principales y siendo el CMS elegido por el 50 % de los sitios web que utilizan un CMS.

En este artículo, te mostraré cómo hacer algunos ajustes y configuraciones convenientes a tu WordPress sin contratar a un desarrollador. Con pequeños ajustes y cambios en el código de tu WordPress que le permitirán obtener mas.

Nota: Este artículo asume que ya sabes algo de codificación HTML/CSS básico. Si no está listo para hacer ninguno de estos cambios por tu cuenta, ¿por qué no intentas contratar a un desarrollador de WordPress? De esta manera obtendrá todos los beneficios sin ninguna de las molestias de la codificación.

Tras leer este articulo descubrirás que muchos de estos consejos implican cambios en uno o varios archivos de plantilla de tu theme tales como: functions.php, single.php, header.php, page.php, category.php u otro archivo. Asegúrese de hacer una copia de seguridad de los archivos antes de realizar ajustes en cualquiera de estos archivos porque los errores pueden dañar su sitio y deberá volver a una versión funcional del archivo, personalmente sugiero que realice un backup de toda la carpeta de su theme.

Ahora si vamos agregar nuevas funciones a tu sitio de WP utilizando los siguientes trucos, sugerencias y ajustes.

#1 Comprimir imágenes para mejorar la velocidad de carga

Uno de los componentes mas pesados al cargar cualquier sitio web son las imágenes, de hecho las grandes aplicaciones como facebook o instagram optimizan todas las imágenes que suben a su plataforma, nunca suben la imagen original con el 100% de resolución porque demorarían en cargar y consumirían muchos datos o internet de tu plan móvil, y por si fuera poco afecta directamente a tu posicionamiento web / SEO. Además del hecho de que los sitios web lentos crean una experiencia de usuario negativa.

Para optimizar las imágenes, una de las formas más efectivas es comprimirlas. También puede hacerlos más pequeños usando formatos específicos mientras elimina los datos EXIF que son metadatos e información de las imágenes o fotos.
[sociallocker id=»2268″]
En la actualidad existen varios servicios en línea y programas que se deben de instalar en tu ordenador para realizar optimizaciones.
[/sociallocker]
Por ejemplo aquí algunos programas de edición de imágenes:

1. Adobe Photoshop (de Pago)
2. GIMP (Gratis)

Ambos programas tienen una opción para guardar imágenes con una configuración especial optimizado para la web, por lo tanto tendrán un peso mas reducido y hará que carguen mas rápido.

También puedes comprimir u optimizar imágenes usando herramientas online, como:

1. TinyPNG
2. JPEGMini
3. Optimole
4. EWWW Image Optimizer

Estas Tools online son plugins de wordpress y otros son servicios en línea que puedes usar para comprimir las imágenes antes o mientras cargan en wordpress.

#2 Usar Enlaces Permanentes Personalizado

Realizar este ajustes tendrá un efecto muy positivo en el posicionamiento web.

Antes la opción predeterminada de los enlaces permanentes de wordpress tenían el siguiente formato:
www.antocas.com/?p=123
Este tipo de enlaces afecta directamente al SEO (Posicionamiento Web) y UX (Experiencia de usuario)

Ahora la opción predeterminada de los enlaces de wordpress tienen este formato:

www.antocas.com/2022/08/pagina-ejemplo/

Este tipo de enlace esta mejor, pero no lo suficiente porque incluye la fecha. Esto podría causar diversos problemas a futuro, como que los visitantes piensen que su publicación esta desactualizada o bien cuando realices alguna actualización del post su enlace no cambiaría.

La mejor solución es usar la opción de enlace permanente con el nombre de la publicación, así:

www.antocas.com/pagina-ejemplo/

configurar-enlaces-permanentes-personalizado-wordpress

#3 Reinicie WordPress como si fuera una nueva instalación con WP reset Plugin

A veces solemos realizar pruebas o nuevas instalaciones de plugins y llegamos a desconfigurar y/o arruinar algunas configuraciones hechas previamente, es por ello que se necesita una nueva instalación de wordpress. Esto puede llevar mucho tiempo, especialmente si necesita realizar varias instalaciones nuevas de forma regular.

Existe un complemento o plugin de wordpress llamado WP Reset que te permitirá restablecer wordpress como si fuera una instalación nueva.

Una vez instalado el plugin WP Reset vamos a usarlo yendo a Herramientas > Restablecer WP.

Una vez ahí vaya a la pestaña Restablecer y diríjase hacia abajo hasta el final, verá un cuadro donde debe de escribir la palabra «Reset» para usar el botón restablecer sitio para restablecer su sitio web.

Esto ahora restablecerá su instalación como si fuera una nueva instalación de WP.

wp-reset-tutorial

Recuerda: Esto es diferente de la función de reinstalación integrada de WordPress donde reinstala WordPress pero mantiene intactos los datos de su sitio.

Por el contrario, WP Reset reinicia tu instalación de WordPress como si fuera una instalación realmente nueva. Su nombre de usuario y contraseña siguen siendo los mismos, pero todo lo demás se elimina.

Tenga en cuenta que su carpeta wp-content/content retiene los archivos (pero ya no aparecerán en la biblioteca de medios de su sitio). Para solucionarlo, utilice la  herramienta Limpiar carpeta de subidas  de WP Reset en la   pestaña Herramientas .

wp-reset-limpiar-carpetas-subidas

#4 Proteger con contraseña wp-admin WordPress

La carpeta wp-admin es una de las carpetas mas importantes en la instalación con wordpress y añadir una contraseña a esta carpeta agregará una capa de seguridad contra posibles ataques de piratas informáticos.

Para realizar esta acción necesitamos tener acceso al panel de control cPanel de tu hosting.

Nota: Los siguientes pasos descritos aquí cubren la versión actual de cPanel a Agosto 2022, pero debería funcionar sin problemas en futuras versiones de cPanel.

1. Iniciar sesión en tu cuenta cPanel de tu hosting.
2. En el apartado Archivos busca Privacidad del directorio
   
   

   cpanel-wordpress-seguridad

3.  A continuación encuentra la carpeta public_html y haz clic para ingresar
   

   public_html
4. Ahora encuentra una carpeta llamada wp-admin y a la derecha en acciones veras un botón llamado edit y dale clic.
   

   privacidad-del-directorio

   Nota: Estoy dando por hecho que la carpeta wp-admin  se encuentra en public_html porque es una configuración estándar de los hostings, pero puede que no sea tu caso y tu tengas dicha carpeta en un subdominio u otra parte, es por ello que debes de encontrar la ubicación de la carpeta wp-admin.

5. Activa la opción «La contraseña protege este directorio» y luego haga clic en el botón guardar.
   Después de eso, la página le indicará que la protección con contraseña se activó con éxito. Haga clic en el enlace «Volver» y se le llevará al siguiente paso donde definirá el nombre de usuario y la contraseña que desea utilizar.
6. Crea un nombre de usuario y contraseña de tu preferencia para proteger tu wp-admin una vez hecho haz clic en el botón guardar y listo!
   

   crear-usuario

Ahora cuando visiten wp-admin o wp-login en tu sitio web aparecerá una ventana que solicitará dicho usuario y contraseña establecida en el paso 6.

acceso-con-bloqueo

Nota: Cuando inicie sesión en próximas ocasiones notaras que no te volverá a solicitar la contraseña y esto se debe a que los datos de inicio de sesión se almacenarán como una cookie en su navegador. Así que si usas una computadora que no es tuya te recomiendo usar un navegador en incognito.

#5 Ocultar wp-includes, wp-content y wp-uploads para evitar el listado de archivos en el navegador.

Normalmente suele pasar que los hosting o servidores web listen los archivos internos de su wordpress, por ejemplo si vamos a www.tusitio.com/wp-includes/js/jquery/

Si la página se parece a la siguiente, tendrás que desactivar la exploración de directorios o archivos.

listado-directorio-hosting

Si no lo desactiva, las personas malintencionadas pueden averiguar qué tipo de temas y complementos tiene y, en función de esa información, pueden usar exploits conocidos para estos elementos para piratear su sitio web.

En el directorio raíz de su sitio web, edite su archivo .htaccess y agregue este código en la parte inferior:
Options -Indexes

¡Guarde su archivo .htaccess y listo! Después de hacer esto, intente visitar la URL de ejemplo anterior y ahora debería recibir un error 403 prohibido o un 404.

#6 Cambiar el directorio de carga de medios de WordPress

Como sabrás los medios de WordPress almacena imágenes, videos, archivos multimedia en general.

Si desea cambiar el directorio de carga de medios, puede hacerlo fácilmente agregando una línea de código a su archivo wp-config.php
define('UPLOADS', 'media');
Ahora todos los archivos multimedia que cargue irán a la carpeta «media».

Nota: Es recomendable hacer esto en un sitio de WordPress recién instalado. Sin embargo, aún puede hacer esto en uno ya existente, siempre que sepas lo que está haciendo. Esto se debe a que sus archivos multimedia antiguos no se moverán mágicamente a la nueva carpeta.

Como resultado, cuando hace esto en una instalación existente de WordPress sus imágenes antiguas seguirán funcionando correctamente en tus post y páginas, pero no aparecerán correctamente en la biblioteca de medios. Para solucionar esto debes de mover los archivos multimedia antiguos al nuevo directorio y luego actualizar su base de datos para reflejar estos cambios, pero ese es un tema para otro artículo.

#7 Agregar iconos al menú de navegación

Puedes agregar íconos de manera rápida al menú de navegación usando el plugin Menu Icons desarrollado por ThemeIsle. Simplemente instale y active el complemento y ahora podrá agregar iconos personalizados a los elementos de su menú.

anadir-icono-menu-wordpress

Puedes seleccionar entre varios tipos de fuentes de iconos.

(#1)También puedes crear tus propios iconos pero antes deberás habilitar la opción de imagen para que subas tu icono en dicho formato.

(#2)Una vez que haya activado sus tipos de íconos personalizados, ahora puede agregar íconos personalizados a sus elementos de menú

Si desea agregar íconos al menú de navegación sin usar complementos/plugins, puedes hacerlo a través del CSS personalizado de su tema.

Primero, necesitará un ícono, preferiblemente de 25 px por 25 px de dimensión, luego cárguelo en su sitio web. Recomendamos crear una nueva carpeta llamada «icons» en su instalación raíz de WordPress y cargar todos sus íconos personalizados allí.

Luego hará referencia a sus íconos a través de ./icons/youriconname.png en su fragmento de código CSS personalizado.

.homemenuicon a{
    padding-left: 30px;
    background-image: url(./icons/youriconname.png);
    background-position: left;
    background-repeat: no-repeat;
}

Puedes agregar estilos CSS personalizado a cualquier tema de wordpress, para ello vamos a Apariencia > Themes > personalizar > Adicionar CSS. Una vez agregado el CSS debemos usarlo para aparecer dicho icono en el menú.

Dirígete a Apariencia > Menu y activa las clases CSS en las opciones de pantalla.

activar-clases-menu-wordpress

A continuación agrega tu clase personalizada (en nuestro ejemplo la clases es .homemenuicon) al campo Clases CSS en el menú.

anadir-clase-menu-wordpress

Guarda el menú y mira que el elemento del menú de inicio ahora luce un ícono personalizado al lado.

A continuación se muestra cómo se verá nuestro ejemplo en el tema TwentyTwenty usando un ícono de inicio personalizado de 25px por 25px de tamaño.

vista-previa-menu-con-icono

#8 Abrir todos los enlaces externos en una ventana nueva y agregue noreferrer noopener

Es recomendable abrir todos los enlaces externos en una nueva ventana, o agregar un atributo noreferrer y noopener a todos los enlaces externos, todo lo que necesita hacer es instalar un complemento llamado WP External Links.

Después de instalar el plugin, tendrá un nuevo elemento en el menú de navegación de su administrador llamado «External Links». Vaya a la configuración del plugin, aparecerá la siguiente pantalla.

wp-external-links

Ahora asegúrate que tener con check activos en las opciones como figura en la imagen de aquí arriba, luego puedes revisar cada uno de las pestañas y configurar el plugin a tus necesidades, muchas de las configuraciones están predeterminadas y podrías dejarlo tal cual.

Si tu deseas no usar el plugin mencionado y prefieres hacerlo manualmente sigues las instrucciones a continuación.

#8.5 Agregar noreferrer y noopener en wordpress

Agrega el siguiente fragmento de código al final del archivo functions.php de tu theme:

add_action( 'wp_enqueue_scripts', 'external_links' );
function external_links() {
    wp_enqueue_script(
        'external_links.js',
        get_template_directory_uri() . '/js/external_links.js', 
        array('jquery')
    );
}

A continuación, dentro de la carpeta de tu theme, crea una carpeta llamada «js» dentro crea un archivo de script llamado external_links.js y luego copia y pegue el siguiente fragmento de código en dicho archivo:

jQuery(document).ready(function($) {
    // Check if links are external, if yes, add class=external and add proper attributes
    $('a').filter(function() {
        return this.hostname && this.hostname !== location.hostname;
    }).addClass("external").attr("rel","external noopener noreferrer").attr("target","_blank");
});

Ahora todos los enlaces externos se abrirán en la nueva pestaña y tendrán atributos externos, noopener y noreferrer.

#9 Agregar el botón «PayPal Donate ó Invítame un café»

Si deseas aceptar donaciones en tu sitio web, puedes hacerlo fácilmente creando una cuenta de PayPal y presionando su botón de donación.

Ahora agreguemos un botón de PayPal, continua con los pasos a continuación:

Inicie sesión en su cuenta de PayPal, luego haga clic en el ícono de ajustes en la esquina superior derecha de la pantalla. Luego, vaya a Herramientas para vendedores y luego, junto a botones de PayPal, haga clic en Administrar.

botones-paypal

En la página siguiente, PayPal le preguntará qué botón desea crear, seleccione el botón Donar .

botón-paypal-donar

De aquí en adelante siguen 4 pasos

1er Paso, Selecciona «Personalizar un botón» después selecciona tu país, región, idioma y el estilo de botón de paypal que deseas. También puedes usar un botón personalizado seleccionando la configuración «usar imagen propia».

personalizar-boton-paypal-donar

personalice-boton-paypal

2do Paso, Ahora configure su pagina de donación, etc. Puede presionar continuar en esta parte.

configurar-pagina-donacion-paypal

3er paso, Personalice sus detalles de donación, establezca importes de donación, etc.

personalice-detalles-donación

4to paso, puedes configurare su pagina de pago y otros ajustes opcionales

configure-pagina-pago

Después de dar clic al boton finalizar podrá ver el código HTML de su botón de donación de PayPal.

boton-donar-paypal

Copia el código completo y péguelo donde desee que aparezca en su sitio de WordPress.

#10 Pasar de HTTP a HTTPS

Antes de comenzar a hacer esto, asegúrese de tener HTTPS o SSL (certificados) instalados y listos para usar en su sitio web. Si tienes todo eso configurado y lo único que necesita hacer ahora es lo siguiente:

Ahora en el panel de administración de tu wordpress dirigete a Configuración > General y luego actualice su URL para poder usar el protocolo HTTPS. Después de editar clic en guardar.

ajustes-general-wordpress

Ahora tendremos que actualizar el archivo .htaccess de tu instalación de wordpress, edite el archivo con un editor de texto o blog de notas y agregue las siguientes lineas de código:

RewriteEngine On
RewriteCond %{HTTPS} off
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

Luego, edite su archivo wp-config.php y agregue la siguiente línea:
define('FORCE_SSL_ADMIN', true);

Para finalizar deberás actualizar la base de datos para reflejar los cambios de URL, caso contrario resultará perjudicial el no hacer esta actualización porque tendrás enlaces mixtos con HTTP y HTTPS

Puedes actualizar tu base de datos manualmente descargando de tu hosting el archivo .sql y realizar el cambio de nombre en todas las partes de dicho archivo por ejemplo pasar de http://www.tuweb.com a https://tuweb.com

En esta ocación vamos a realizar dicho cambio de URL de manera sencilla con el plugin Better Search And Replace

Realiza la instalación y activa dicho plugin, luego dirígete al menú herramientas > Better Search and Replace.

Ahora en unos simples pasos vamos a realizar la actualización de las URL
1er paso: en el campo Search for escribe tu vieja URL, por ejemplo http://www.tuweb.com
2do paso: en el campo Replace with coloca tu URL, por ejemplo https://www.tuweb.com y selecciona todas las tablas en selec tables.
3er paso: asegurate de que las tablas estén en color azul, eso determina que están selccionada