Personalización en WordPress

PERSONALIZACIÓN EN WORDPRESS

Accedemos a una ventana donde vamos a poder modificar colores y otros aspectos del tema elegido.

En la parte inferior de la pantalla tenemos

Aquí seleccionamos el formato de visión, si es para pantalla de ordenador, de tablet o de teléfono móvil, para saber cómo se irá quedando. Curso de WordPress.
En la parte superior derecha tenemos

Seleccionando Colores se abrirá una cortinilla a la derecha para que elijamos una paleta de colores.

Una vez hecho clic en una de las paletas, podremos elegir colores que contiene:

O bien elegir una imagen como fondo del blog.
Si pulsamos en Elegir imagen nos llevará a una pantalla donde tendremos que subir el archivo de imagen de alguno que tengamos en el disco duro.

Hacemos clic ahora en Cabecera para incluir, si queremos, una imagen que aparecerá al principio del blog.

Pulsamos en Seleccionar archivos y se nos abrirá una ventana que nos permite localizar en el disco duro el archivo de imagen que deseamos.

Seleccionamos el archivo. Esperamos a que suba a Biblioteca Multimedia y pulsamos en

Una vez hecho vemos como queda:

La imagen que hemos subido era pequeña, por lo que queda un poco difuminada
Para que se quede la imagen seleccionamos

 

 

Vea nuestro Máster en Experto Web.

 

1. Personalización básica con el personalizador

El personalizador de WordPress es una herramienta intuitiva para realizar cambios visuales en tu sitio.

Acceso al personalizador

• Ve a Apariencia > Personalizar en el panel de administración.
• Desde aquí, puedes realizar cambios y ver una vista previa en tiempo real.

Opciones comunes en el personalizador

1. Identidad del sitio:
   • Agrega o cambia el logotipo.
   • Configura el título y la descripción del sitio.
   • Sube un favicon (icono del sitio).
2. Colores y tipografía:
   • Ajusta los colores principales del tema, como fondo, texto, y enlaces.
   • Cambia las fuentes y tamaños, si tu tema lo permite.
3. Diseño (Layouts):
   • Modifica la disposición de columnas, anchos o estilos de página.
4. Menús y widgets:
   • Configura los menús de navegación.
   • Personaliza widgets en áreas como la barra lateral o el pie de página.
5. Portada:
   • Decide si mostrar las entradas recientes del blog o una página estática como página de inicio.

---

2. Personalización avanzada con constructores de páginas

Los constructores de páginas te permiten diseñar sitios web con un sistema de arrastrar y soltar. Son ideales para personalización sin necesidad de código.

Constructores populares

• Elementor: Uno de los más versátiles, con opciones avanzadas incluso en su versión gratuita.
• WPBakery: Muy usado en temas premium.
• Beaver Builder: Ideal para principiantes.
• Divi Builder: Parte del ecosistema de Elegant Themes, ofrece diseños muy flexibles.

Qué puedes personalizar

• Secciones específicas: Encabezados, pies de página, páginas de aterrizaje, etc.
• Contenido dinámico: Tablas de precios, sliders, carruseles de imágenes.
• Responsividad: Ajusta cómo se verá tu sitio en dispositivos móviles.

---

3. Personalización de temas

a. Personalización desde el tema

• Algunos temas incluyen sus propios paneles de opciones, accesibles desde Apariencia > Opciones del tema.
• Temas como Astra, OceanWP o GeneratePress ofrecen configuraciones avanzadas.

b. Uso de un tema hijo

• Los temas hijos permiten modificar estilos o funcionalidades sin perder los cambios al actualizar el tema padre.
• Pasos para crear un tema hijo:
  1. Crea una carpeta con el nombre de tu tema hijo.
  2. Añade un archivo style.css y un archivo functions.php.
  3. Declara en style.css que este tema depende del tema padre.

---

4. CSS personalizado

Añadir CSS adicional

• Desde el personalizador: Ve a Apariencia > Personalizar > CSS adicional.
• Aquí puedes escribir reglas CSS para ajustar elementos específicos.

Ejemplos comunes de CSS personalizado

1. Cambiar el color de los enlaces:
   css

   Copiar código

   a {
color: #ff5733;
}

2. Ajustar el tamaño del logotipo:
   css

   Copiar código

   .site-logo img {
max-width: 200px;
}


---

5. Personalización de funcionalidad

a. Plugins específicos

• Header and Footer Scripts: Agrega scripts personalizados como códigos de seguimiento de Google Analytics.
• Custom Post Type UI: Crea tipos de contenido personalizados, como portafolios o testimonios.

b. Modificar funciones del tema

• Usa el archivo functions.php para añadir funcionalidades específicas. Ejemplo: Agregar soporte para miniaturas de publicaciones:
  php

  Copiar código

  add_theme_support('post-thumbnails');


---

6. Widgets personalizados

• Añade widgets dinámicos como:
  • Redes sociales.
  • Formularios de contacto.
  • Listados de categorías o publicaciones.

Dónde configurar widgets

• Ve a Apariencia > Widgets.
• Asigna widgets a áreas específicas (barra lateral, pie de página, etc.).

---

7. Personalización de idiomas

• Usa plugins como Loco Translate o Polylang para traducir o crear versiones multilingües de tu sitio.

---

8. Personalización de páginas específicas

a. Páginas de blog

• Ajusta cómo se presentan las entradas del blog:
  • Ve a Apariencia > Personalizar > Configuración de blog.
  • Cambia el diseño de las entradas o activa extractos.

b. Página de inicio

• Configura una página estática o muestra tus últimas entradas.
• Personaliza el diseño con constructores de página o CSS.