Skip to content

Instantly share code, notes, and snippets.

@cc-alberto
Last active October 31, 2023 17:42
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cc-alberto/0531f082c5707a7760508fd2000e3726 to your computer and use it in GitHub Desktop.
Save cc-alberto/0531f082c5707a7760508fd2000e3726 to your computer and use it in GitHub Desktop.

WordPress - Configuración

Creado: 2021-07-07 | Última revisión: 2023-10-31


En cPanel, Administrador de archivos

  1. En el archivo wp-config.php agregar las siguientes líneas
/** Forzar urls para evitar errores y mejorar carga **/
define( 'WP_HOME', 'https://[dominio]' );
define( 'WP_SITEURL', 'https://[dominio]' );

Recomendado cambiar las keys y salts utilizando la API de WordPress para generar nuevas y únicas, sobre todo si WordPress se ha descargado desde la página oficial.

  1. Si el servidor cuenta con LiteSpeed, en la carpeta public_html crear un archivo vacío .litespeed_flag.

WordPress

  1. Escritorio: desactivar todos los widgets, dejar solo "Estado de salud del sitio".
  2. Entradas->Todas las entradas: borrar la entrada por defecto ("Hola mundo").
  3. Entradas->Categoría: cambiar la categoría uncategorized a General, cambiar su slug también; crear la categoría Noticias, esta categoría será definida como "Categoría por defecto para las entradas" en Ajustes->Escritura.
  4. Páginas->Todas las páginas: borrar la página "Sample Page" y crear una página Inicio para definir en Ajustes->Lectura. No necesita tener contenido todavía.

Ajustes

  1. Ajustes->Generales: verificar Titulo del sitio y Descripción corta, definir la zona horaria en "América/Bogotá" y verificar formatos de día y fecha (los valores por defecto funcionan bien).

  2. Ajustes->Escritura: definir Noticias como "Categoría por defecto para las entradas".

  3. Ajustes->Lectura: para la página de inicio, seleccionar "Una página estática" y definir de Portada la página Inicio creada anteriormente. Para "Página de Entradas", no seleccionar ninguna, con Divi es mejor crear una página para Noticias y agregar el Módulo Blog para crear mejor diseño. Se pueden disuadir los motores de búsqueda mientras se está construyendo la página y una vez finalizada se desactiva la casilla "Visibilidad en los motores de búsqueda".

  4. Ajustes->Comentarios: lo ideal es cerrar los comentarios y pingback, SiteGround Security cierra automáticamente los pingbacks (ver más adelante); sin embargo, se pueden realizar los siguientes ajustes para limitar el impacto de los comentarios en el sitio web:

    • Desactivar "Intentar avisar a cualquier blog enlazado desde la entrada"
    • Desactivar "Permitir avisos de enlaces de otros blogs (pingbacks y trackbacks) en las nuevas entradas"
    • Desactivar "Permitir a la gente enviar comentarios en las nuevas entradas"
    • Desactivar "Alguien envía un comentario"
    • Activar "El comentario debe aprobarse manualmente."
    • Desactivar "El autor del comentario debe tener un comentario previamente aprobado"
    • Ajustar "Moderación de comentarios" a 0 para evitar comentarios con links/spam.
  5. Ajustes->Medios: ajustar todos los tamaños de las imágenes a 0 (Tamaño de la miniatura, Tamaño medio, Tamaño grande), tanto alto como ancho, así se evita generar automáticamente tamaños adicionales que no se necesitan. Fijar la subida de archivos a una sola carpeta, no organizar los archivos por año/mes.

  6. Ajustes->Enlaces permanentes: establecer los enlaces permanentes a "Nombre de la entrada". Esto para validar que se generen bien los links.

Temas

  1. Apariencia->Temas: borrar todos los temas menos el tema por defecto Twenty Twenty-Three; este tema se activa por si los otros fallan. Activar las actualizaciones automáticas para los temas instalados. Revisar que esté actualizado.

Actualizaciones

  1. Escritorio->Actualizaciones: verificar si hay actualizaciones, si bien se ha instalado la última versión de WordPress, puede haber una actualización de la traducción. No se recomienda activar actualizaciones automáticas.

Plugins

  1. Desinstalar los plugins por defecto Hello Dolly y Akismet que no hacen nada!

Básicos:

  • Contact form 7 (con Elementor Pro, no es necesario)
  • Contact Form 7 Database Addon (con Elementor Pro, no es necesario)
  • PDF embedder
  • Security Optimizer (SiteGround)
  • Simple Local Avatars
  • Speed Optimizer (SiteGround)
  • ThumbPress – Stop Generating Unnecessary Thumbnails

Opcional:

  1. Instalar y configurar Security Optimizer (SiteGround). La opciones que trae activas por defecto funcionan para cualquier sitio:

    • En Site Security, activar Disable RSS and ATOM Feeds. Delete the Default Readme.html ayuda a evitar detectar la versión de WordPress.
    • En Login Security, configurar Custom Login URL con una URL personalizada.
    • En Activity Log, en la pestaña Weekly Reports borrar el correo del administrador para no recibir correos con los resúmenes semanales.
  2. Instalar Simple Local Avatars. Una vez activo, se debe revisar en Ajustes->Comentarios las opciones "Solo avatares locales", para restringir los avatares de Gravatar, y "Permisos de subida local" para restringir cuáles usuarios que pueden cambiar de avatar.

  3. Instalar PDF Embedder. En Ajustes->PDF Embedder cambiar "Posición de la barra de herramientas" a "Ambos" y "Al pasar el cursor por la barra de herramientas" a "Barra de herramientas siempre visible", esto para mejorar usabilidad del plugin.

  4. Instalar el plugin Contact Form 7. Configurar en Contacto->Formularios de contacto, editar Formulario de contacto 1.

    • Pestaña Formulario:

      <label> Nombre [text* your-name autocomplete:name] </label>
      
      <label> Correo electrónico [email* your-email autocomplete:email] </label>
      
      <label> Asunto [text* your-subject] </label>
      
      <label> Tu mensaje [textarea* your-message] </label>
      
      [submit "Enviar"]
    • Pestaña Correo:

      • Para: secretaria@[dominio]
      • De: [_site_title] <secretaria@[dominio]>
      • Asunto: Mensaje desde la página [_site_title] «[your-subject]»
      • Cuerpo del mensaje: copiar el contenido del archivo wp-mail-template.html. Remplazar src="[REMPLAZAR CON URL DEL LOGO DE LA PÁGINA]" en la línea 169 con la url del logo de la página; se recomienda una imagen .png sin fondo, con transparencia.
      • Marcar "Usar contenido de tipo HTML".
  5. Installar el plugin Speed Optimizer (SiteGround). Si durante la fase de desarrollo, los cambios no se ven reflejados, este plugin se puede activar una vez terminada la página.

    • Caché, activar File-Based Caching, activar Automatic Purge y When clearing the cache - purge the WordPress API cache too. Si es necesario, se pueden excluir URLs de la caché en Exclude URLs from Caching.

    • Entorno, activar HTTPS Enforce, Fix Insecure Content y GZIP Compression. La opción WordPress Heartbeat Optimization funciona bien con sus valores por defecto. En Database Maintenance Options se recomienda activar todas las opciones.

    • Portada, en la pestaña CSS, activar Minify CSS Files. En la pestaña JavaScript, activar Minify JavaScript Files. En la pestaña General, activar Minify the HTML Output, Web Fonts Optimization, Remove Query Strings from Static Resources y Disable Emojis.
      💡 La opción DNS Pre-fetch for External Domains permite agregar URL de recursos externos: videos de YouTube, fuentes de Google Fonts, código de seguimiento de Google Analytics, etc, si se están empleando dichos recursos, vale la pena agregarlas. Lista de URLs:

      //fonts.googleapis.com
      //fonts.gstatic.com
      //ajax.googleapis.com
      //apis.google.com
      //google-analytics.com
      //www.google-analytics.com
      //ssl.google-analytics.com
      //connect.facebook.net
      //s.gravatar.com
      //s0.wp.com
      //stats.wp.com
      
    • Medios, activar la opción Lazy Load Media.

      ⚠ Muy importante: emplear la clase skip-lazy en las imágenes hero o de cabecera de las páginas para no penalizar la optimización.

      En Maximum Image Width ajustar a 1920px.

    • En Site Performance, en la pestaña Monthly Reports borrar el correo del administrador para evitar recibir los resúmenes mensuales.

Instalar tema y tema hijo

Instalar el tema y su tema hijo, es una buena práctica emplear los temas hijo así las modificaciones que se hagan sean mínimas, i.e. por marca, presentarle un tema con el nombre de la empresa. Recomendado emplear la plantilla CompucentroSAS/divi-child-theme: Un tema hijo para Divi (github.com) 🤗.


Menú

La estructura básica del menú es la siguiente:

  • Inicio
  • Noticias
  • Institución
    • Reseña histórica
    • Símbolos institucionales
    • Gobierno escolar
    • Egresados
  • Documentos
    • Manual de convivencia (PDF de ejemplo)
    • SIEE (PDF de ejemplo) *opcional
    • PEI (PDF de ejemplo)
  • A estudiar en casa
  • Financiero (Categorías de entradas 👇)
    • Contratación
    • Invitaciones
    • Plan de compras
    • Rendición de cuentas
  • Correo (link: https://mail.google.com/a/[dominio], Abrir el enlace en una pestaña nueva.)
  • Contacto

Apuntes

Cambiar directorio de contenido manualmente: anteriormente los plugins de seguridad ofrecían esta opción. Agregar las siguientes líneas en el archivo wp-config.php:

/** New location for content **/
define('WP_CONTENT_URL', 'https://[dominio]/[nueva-carpeta]');
define('WP_CONTENT_DIR', '/home/[usuario]/public_html/[nueva-carpeta]');

Si se rompe el escritorio suele ser por algún error en un script JS de plugins o temas, agregar la siguiente línea:

/* Evitar la concatenacion de scripts */
define('CONCATENATE_SCRIPTS', false);

Deshabilitar wp-cron.php y manejarlo con cronjob del servidor: agregar las siguientes líneas en el archivo wp-config.php, justo antes de la línea /* That's all, stop editing! Happy blogging. */ :

/* Desactivar Wp-Cron */
define( 'DISABLE_WP_CRON', true );

Programar la tarea en cPanel, Trabajos de cron, cada 5, 15 o 30 minutos, dependiendo del tráfico del sitio; para ejecutar cada 30 minutos, en el minuto 6 y 36, sería: 6,36 * * * *. El comando a ejecutar es:

wget -q -O - https://[dominio]/wp-cron.php?doing_wp_cron >/dev/null 2>&1

Configuración de otros plugins

ThumbPress – Stop Generating Unnecessary Thumbnails

Este plugin evita que se generen imágenes innecesarias y DIVI genera MUCHAS.

  • Deshabilitar todos los thumbnails dejando activo solo "Original image". Si es necesario en "Regenerate Thumbnails" se regeneran/eliminan los tamaños de imágenes.
  • Verificar en "Tools" que "Footer Credit" esté en "No".

LiteSpeed Cache

Algunos servidores con LiteSpeed están programados para instalar este plugin, se recomienda agregar un archivo en blanco, en la carpeta public_html, con nombre .litespeed_flag para evitar que se instale automática. Algunas funciones de este plugin se cubren, de mejor manera, con SiteGround Security y SiteGround Optimizer.

File Away

Sobre la configuracion: en la sección BASIC CONFIGURATION, incluir las extenciones .php, .js, .vbs, .bat, .sh, .py en Permanent Exclusions para evitar que se listen archivos potencialmente peligrosos. En CUSTUM STYLES agregar .ssfa-filename {font-size: 18px;} para mostrar el texto un poco más grande.

Shortcodes: como es un plugin que no tiene soporte desde hace 2 años, no hay un forma rápida y sencilla de generar los shortcodes en el constructor de bloques o en DIVI. Para generarlos con el botón que incluye el plugin se debe instalar el plugin Classic Editor.

Shortcode para listar una carpeta (mínimo):

[fileaway drawerid="1" recursive="on" directories="on"]

Shortcode: para listar y administrar una carpeta:

  • base: hace referencia la primera carpeta definida en la configuración del plugin.
  • drawerid: si se van a listar más de una carpeta en la página/entrada.
  • makedir: permite crear directorios.
  • manager: permiso para editar (borrar y renombrar).
[fileaway base="1" drawerid="1" makedir="true" manager="on" recursive="on" directories="on"]

Shortcode para subir archivos:

  • matchdrawer: se relaciona con el drawerid de fileaway para listar.
  • showto: mostrará esta opción solo a los tipos de usuarios anotados.
  • filetypes: solo permitirá subir las extensiones aquí agregadas.
[fileup base="1" matchdrawer="1" makedir="true" showto="administrator, editor" overwrite="true" filetypes="pdf, doc, docx, pps, ppt, pptx, xls, xlsx"]

Machete

De este dejo activo solo "Optimización de WordPress":

  • Limpieza de cabecera, todas menos dns-prefetch. Guardar y verificar antes de activar la siguiente sección.
  • Limpieza de funcionalidades, todas menos Miniaturas de PDF. Guardar y verificar antes de activar la siguiente sección.
  • Trucos de optimización, solo activar: quitar jQuery-migrate, Quitar el refill de CF7, Reducir la calidad JPEG y Quitar CSS del editor de bloques (⚠ si no se emplea un constructor como Divi o Elementor se debe dejar sin seleccionar).

PDF embedder

Código para insertar con link de descarga:

[pdf-embedder url="[URL-del-archivo]"]

<a
  href="[URL-del-archivo]"
  rel="attachment noopener noreferrer"
  target="_blank"
  title="Descargar / Ver en otra ventana"
  >📄 Descargar PDF / Ver en otra ventana
</a>

🖖 Alberto Cárdenas

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="x-apple-disable-message-reformatting">
<!--[if !mso]><!--><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--<![endif]-->
<title></title>
<style type="text/css">
a { color: #0000ee; text-decoration: underline; }
[owa] .u-row .u-col {
display: table-cell;
float: none !important;
vertical-align: top;
}
.ie-container .u-row,
[owa] .u-row {
width: 500px !important;
}
.ie-container .u-col-100,
[owa] .u-col-100 {
width: 500px !important;
}
@media only screen and (min-width: 520px) {
.u-row {
width: 500px !important;
}
.u-row .u-col {
vertical-align: top;
}
.u-row .u-col-100 {
width: 500px !important;
}
}
@media (max-width: 520px) {
.u-row-container {
max-width: 100% !important;
padding-left: 0px !important;
padding-right: 0px !important;
}
.u-row .u-col {
min-width: 320px !important;
max-width: 100% !important;
display: block !important;
}
.u-row {
width: calc(100% - 40px) !important;
}
.u-col {
width: 100% !important;
}
.u-col > div {
margin: 0 auto;
}
.no-stack .u-col {
min-width: 0 !important;
display: table-cell !important;
}
.no-stack .u-col-100 {
width: 100% !important;
}
}
body {
margin: 0;
padding: 0;
}
table,
tr,
td {
vertical-align: top;
border-collapse: collapse;
}
p {
margin: 0;
}
.ie-container table,
.mso-container table {
table-layout: fixed;
}
* {
line-height: inherit;
}
a[x-apple-data-detectors='true'] {
color: inherit !important;
text-decoration: none !important;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
@media (max-width: 480px) {
.hide-mobile {
display: none !important;
max-height: 0px;
overflow: hidden;
}
}
@media (min-width: 481px) {
.hide-desktop {
display: none !important;
max-height: none !important;
}
}
</style>
</head>
<body class="clean-body" style="margin: 0;padding: 0;-webkit-text-size-adjust: 100%;background-color: #e7e7e7">
<!--[if IE]><div class="ie-container"><![endif]-->
<!--[if mso]><div class="mso-container"><![endif]-->
<table class="nl-container" style="border-collapse: collapse;table-layout: fixed;border-spacing: 0;mso-table-lspace: 0pt;mso-table-rspace: 0pt;vertical-align: top;min-width: 320px;Margin: 0 auto;background-color: #e7e7e7;width:100%" cellpadding="0" cellspacing="0">
<tbody>
<tr style="vertical-align: top">
<td style="word-break: break-word;border-collapse: collapse !important;vertical-align: top">
<!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td align="center" style="background-color: #e7e7e7;"><![endif]-->
<div class="u-row-container" style="padding: 0px;">
<div style="Margin: 0 auto;min-width: 320px;max-width: 500px;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: transparent;" class="u-row">
<div style="border-collapse: collapse;display: table;width: 100%;background-color: transparent;">
<!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding: 0px;background-color: transparent;" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:500px;"><tr style="background-color: transparent;"><![endif]-->
<!--[if (mso)|(IE)]><td align="center" width="500" style="width: 500px;padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;" valign="top"><![endif]-->
<div class="u-col u-col-100" style="max-width: 320px;min-width: 500px;display: table-cell;vertical-align: top;">
<div style="width: 100% !important;">
<!--[if (!mso)&(!IE)]><!--><div style="padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;"><!--<![endif]-->
<table id="u_content_image_1" class="u_content_image" style="font-family:arial,helvetica,sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody>
<tr>
<td style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:arial,helvetica,sans-serif;" align="left">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding-right: 0px;padding-left: 0px;" align="center">
<img align="center" border="0" src="[REMPLAZAR CON URL DEL LOGO DE LA PÁGINA]" alt="[_site_title]" title="[_site_title]" style="outline: none;text-decoration: none;-ms-interpolation-mode: bicubic;clear: both;display: block !important;border: none;height: auto;float: none;width: 100%;max-width: 276px;" width="276" class="v-src-width v-src-max-width"/>
</td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
</div>
</div>
<!--[if (mso)|(IE)]></td><![endif]-->
<!--[if (mso)|(IE)]></tr></table></td></tr></table><![endif]-->
</div>
</div>
</div>
<div class="u-row-container" style="padding: 0px;background-color: transparent">
<div style="Margin: 0 auto;min-width: 320px;max-width: 500px;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;background-color: transparent;" class="u-row">
<div style="border-collapse: collapse;display: table;width: 100%;background-color: transparent;">
<!--[if (mso)|(IE)]><table width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding: 0px;background-color: transparent;" align="center"><table cellpadding="0" cellspacing="0" border="0" style="width:500px;"><tr style="background-color: transparent;"><![endif]-->
<!--[if (mso)|(IE)]><td align="center" width="500" style="width: 500px;padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;" valign="top"><![endif]-->
<div class="u-col u-col-100" style="max-width: 320px;min-width: 500px;display: table-cell;vertical-align: top;">
<div style="width: 100% !important;">
<!--[if (!mso)&(!IE)]><!--><div style="padding: 0px;border-top: 0px solid transparent;border-left: 0px solid transparent;border-right: 0px solid transparent;border-bottom: 0px solid transparent;"><!--<![endif]-->
<table id="u_content_text_1" class="u_content_text" style="font-family:arial,helvetica,sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
<tbody>
<tr>
<td style="overflow-wrap:break-word;word-break:break-word;padding:10px;font-family:arial,helvetica,sans-serif;" align="left">
<div class="v-text-align" style="color: #000000; line-height: 140%; text-align: left; word-wrap: break-word;">
<p style="font-size: 14px; line-height: 140%;"><strong>De:</strong> [your-name] &lt;[your-email]&gt;<br /><strong>Asunto: </strong>[your-subject]</p>
<p style="font-size: 14px; line-height: 140%;"><strong>Cuerpo del mensaje:</strong><br />[your-message]</p>
<p>&nbsp;</p>
<p style="font-size: 14px; line-height: 140%;">-- <br />Este mensaje se ha enviado desde un formulario de contacto en [_site_title] ([_site_url])</p>
<p style="font-size: 14px; line-height: 140%;"><span style="font-size: 14px; line-height: 19.6px;">&nbsp;</span></p>
</div>
</td>
</tr>
</tbody>
</table>
<!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
</div>
</div>
<!--[if (mso)|(IE)]></td><![endif]-->
<!--[if (mso)|(IE)]></tr></table></td></tr></table><![endif]-->
</div>
</div>
</div>
<!--[if (mso)|(IE)]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
<!--[if (mso)|(IE)]></div><![endif]-->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment