4 trucos para personalizar el tema OceanWP de WordPress

4 trucos para personalizar el tema oceanwp en wordpress

Sin duda alguna, OceanWP es uno de los mejores temas de wordpress en la actualidad: es ligero, rápido y compatible con gran cantidad de plugin como Elementor. Lo mejor es que tiene una versión gratuita con muchos agregados que lo hacen fácilmente personalizable.

La mayoría de estos agregados son de pago en otros temas como Astra o Generatepress. En OceanWP los puedes descargar desde el repositorio de WordPress; te recomiendo especialmente Ocean Extra.

También tiene una versión de pago que añade todavía más cosas.

Ya anteriormente te había dejado mi listado de los mejores temas de wordpress donde OceanWP quedó con el Top 🥇; ahora te mostraré 4 trucos para personalizarlo y lo exprimas al máximo.

Nota
Algunos de estos trucos los tienes disponibles, en la documentación del tema. Te sugiero leerlo para aprender más opciones de personalización.

Recomiendo crear un child theme del tema OceanWP como muestro en este tutorial. También puedes descargarlo directamente desde aquí. En él haremos todos los cambios sin afectar a nuestro tema base.

1.  Agregar fuentes personalizadas a Oceanwp

OceanWP cuenta de manera nativa con el repositorio de fuentes Google Fonts. Si te diriges desde el panel de administración de WordPress a Apariencia > Personalizar > Tipografía, podrás acceder a más de 800 fuentes 😮 totalmente gratuitas para personalizar tu web.

Con tal variedad es difícil que no encuentres una adecuada

Pero si quieres agregar una de tu gusto, lo mejor es cargarlas desde tu servidor, como te muestro a continuación.

Primero debemos obtener la fuente que queremos agregar al WordPress. Vienen por lo general en formato  TrueType (.ttf) o OpenType (.otf).

Existen muchos sitios para descargar fuentes, desde los repositorios gratuitos como Dafonts, hasta los que venden fuentes como Lynotipe.

Importante
Que una fuente la descargues gratuitamente, no significa que puedas usarla libremente en tu web; la mayoría permiten su uso personal, pero si haces dinero con tu web, ésto se considera un uso comercial y debes pagar por ellas.

Fíjate en la licencia que tiene, así como la documentación respectiva para obtener más información. Las licencias GPL por regla general permiten su uso comercialmente sin pagar regalías.

En cuanto tengas en tu computadora la tipografía deseada, hay que convertirla en los formatos compatibles con los navegadores existentes como Chrome o Firefox. Estos son: TTF, EOT, WOFF, WOFF2 y SVG.

Existen diferentes formas de hacerlo. Para este truco vamos a usar el servicio online Transfonter. Te muestro a continuación como convertirlas con esta web:

  • Debemos subirla a la web con el botón Add Fonts,
  • Luego marcar las casillas TTF, EOT, WOFF, WOFF2 y SVG,
  • Por último hacer clic al botón Convert.

convertir fuentes con transfonter

Después de unos momentos te mostrará un vínculo donde pone Download, con el podremos bajar el archivo ZIP que contendrá todas las tipografías necesarias.

Subiendo las fuentes al servidor

Descomprime el archivo ZIP. Ahora hay que subir su contenido al servidor donde se encuentra tu WordPress; los archivos demo.html y stylesheet.css no son necesarios, así que puedes borrarlos.

Para hacerlo, ve al directorio del child theme de OceanWP. Está ubicado en wordpress en: wp-content/themes/nombre-tema-hijo-oceanwp

Crea dentro del child theme de OceanWP una carpeta que llamaremos fonts. En ella sube las tipografías.

fuentes tipográficas para la web

Dato
Si no sabes cómo subir las fuentes al directorio, ni crear la carpeta, sírvete del Administrador de Archivos en caso de tener cPanel. También puedes hacerlo por FTP, esta guía te ayudará.

Agregando código al functions

Ahora debemos editar el archivo functions.php. En la administración de WordPress: Apariencia > Editor, selecciona el tema hijo con el menú descolgable a la izquierda, luego presiona Elegir.

Haz clic  al archivo funtions.php y agrega este código al final:

Guarda los cambios con el botón Actualizar Archivo.

agregar código al functions.php

Donde pone nombre-fuente sustitúyelo por el que tiene la fuente personalizada. El nombre es el que tiene los archivos de las fuentes antes de la extensión. Por ejemplo: nombre-fuente.eot

Si tienes más de una tipografía, agrégala dentro de return array  separada por una (1) coma. Por ejemplo: return array( 'nombre-fuente', 'nombre-fuente2' );

Agregando la fuente personalizada con CSS

El último paso será ir nuevamente (si saliste de ahí) a: Apariencia > Editor. Pero esta vez selecciona el archivo style.css del child theme.

Copia al final del archivo esto:

Sustituye nombre-fuente por el de la tipografía personalizada, en todas las líneas que sea necesario, cuidando de respetar las comillas.

No olvides guardar los cambios con el botón Actualizar Archivo.

Con esto ya tendremos listo la parte difícil 😎. Ahora podrás asignarla a tu web desde Apariencia > Personalizar > Tipografia, en el espacio Fuentes personalizadas.

seleccionar fuente personalizada en oceanwp

2. Header personalizado en OceanWP

Si quieres tener una cabecera (header) personalizada, más allá de solo cambiar los colores y las fuentes, con oceanWP es bastante sencillo.

Para ello necesitarás crear el header que quieras desde la biblioteca del tema.

Dirígete como administrador de WordPress a Theme Panel > Mi biblioteca. Desde ahí con el botón superior Añadir Nuevo, podrás crear la página que contendrá tu cabecera.

Puedes hacerlo manualmente mediante shortcodes, html o CSS, si tienes los conocimientos necesarios.

Recomiendo usar un Page Builder (constructor visual de páginas web) como Elementor; con él podrás crear magnificas cabeceras de manera sencilla, práctica y gratuita, sin tener conocimientos de maquetación web. Lo puedes descargar desde aquí.

Existen cantidades de plugins que complementan a elementor y agregan funcionalidades para que podamos crear cabeceras (y páginas web) espectaculares 😉

Creando cabeceras con elementor

Una vez tengas instalado elementor, te recomiendo agregar también el plugin Fullwidth Templates for Any Theme & Page Builder, que te permitirá tener páginas de WordPress sin las cabeceras y footer predeterminados de oceanWP.

Esto se logra añadiendo plantillas (templates) que prescinden de ellos.

Es importante, ya que queremos que nuestro header use todo el ancho de la pantalla, así como que también omita todos los elementos visuales innecesarios. En otras palabras tener un lienzo en blanco, para trabajar con elementor.

Una vez hayas hecho clic al botón Añadir Nuevo en la Biblioteca de OceanWP, asígnale un nombre a la página, selecciona FW Fullwidth No Header Footer de la opción Plantillas y presiona al botón Editar con Elementor.

crear cabeceras con elementor

No te voy a explicar el funcionamiento del plugin, ya que no es materia de esta guía. Pero de manera general, los widgets ubicados a la izquierda los arrastras dentro de las secciones o columnas a la derecha y así maquetar tu header. Este post te puede ayudar.

Existen multitud de agregados para elementor. En especial, para crear cabeceras, el plugin NavMenu Addon For Elementor, contiene los widgets necesarios para esta tarea. Viene con: logo del sitio, menús, caja de búsqueda, entre otros.

Asignando el header a OceamWP

Cuando tengas creado tu header y guardado los cambios, sal de elementor, esto te llevará a la página, haz clic al botón Publicar.

publicar pagina de header de elementor

Ahora ve en WordPress a Apariencia > Personalizar. En Encabezado > General, en la pestaña Estilo, selecciona del menú descolgable Encabezado personalizado.

escoger encabezado personalizado en oceanwp

Se mostrará debajo un menú, desde donde podremos escoger la plantilla que creamos con elementor. Luego salva los cambio con el botón Publicar.

publicar header en oceanwp

Con esto ya tendremos nuestro header personalizado en oceanWP ☺

Tip
Si quieres un pie de pagina (footer) personalizado en oceanWP, el plugin Create Header / Footer with Elementor, es la respuesta.

3. Header transparente

Otro truco interesante y que nos viene de maravilla al diseñar nuestras páginas web (sobre todo las landing page), es poder colocar el header transparente.

Es muy útil si tenemos una imagen de fondo o degradado que queremos se superponga al header. Con ella tendremos nuestros menús de WordPress, pero armonizados con el diseño general.

ejemplo de header transparente

Para lograrlo, edita la página en WordPress que quieras ponerle la cabecera transparente. Luego en la parte de abajo, en OceanWP ajustes, selecciona la pestaña Cabecera. Del menú descolgable Header Style, escoge Transparent. Actualiza el cambio en la página.

como poner el header transparente en oceanwp

¡Listo!, ya tienes tu header transparente, es un truco bien sencillo 🤩

Tip
Si quieres cambiar el color de los vínculos del menú para que resalten del fondo: en OceanWP ajustes, en la pestaña Menú, puedes ponerlo a tu gusto. El que define el color de los vínculos es Link Color.

4. Mega Menú en OceanWP

Un Mega menú permite expandir las posibilidades de los submenús en WordPress, mostrándolos de manera más atractiva y ordenada.

menú tradicional vs megamenú

Como administrador de WordPress vamos a: Apariencia > Menus.

Seleccionamos el menú al que deseemos agregar el Mega menú. Crea la estructura de vínculos principales, secundarios, terciarios, etc. El nivel secundario definirá las columnas que contenga el Mega menú, hasta un máximo de 6. Por ejemplo: si tenemos 3 submenús secundarios, necesitaremos 3 columnas.

definiendo la estructura de menús para magamenú

Descuelga el menú principal y marca: Activar megamenu. También deberemos colocar en el campo Megamenú: Columnas (1 a 6), la cantidad de columnas que tendrá; esto irá en consonancia (como mencione antes) con los submenús secundarios que tengamos en la estructura antes creada.

Tomando como ejemplo la imagen anterior: como tenemos dos submenús secundarios, le asignaremos 2 columnas.

También marcaremos la opción: Megamenú: ¿Ancho automático?, para que se ajuste al tamaño que ocupan las palabras, de lo contrario tomarán todo el ancho de la pantalla.

Asígnale la ubicación en WordPress en Ajustes del menú (en OceanWP la ubicación en el header es Principal). Salva lo cambios con el botón Guardar menú.

configurando el tema para wordpress oceanwp con un mega menú

Con esto ya tendremos nuestro Mega menú en funcionamiento.

Hasta aquí esta lista de trucos para el tema OceanWP. Si tienes algún otro, déjalo en los comentarios, así nos ayudamos entre todos. Saludos.

4 trucos para personalizar el tema OceanWP de WordPress
5 (100%) 1 voto

Diógenes Mata

Fundador de VivaBlogger y cofundador de EVirtualplus. Soy un tecnomaniaco desde que estaba en pañales. Mi familia es el fundamento de mi vida. Sígueme en mis redes sociales.

TAMBIÉN TE PODRÍA INTERESAR

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

El responsable de este sitio web es Diógenes Mata. La finalidad de los datos es gestionar los comentarios en este blog. El destinatario (donde se almacenan los datos) es el hosting de este blog: Banahosting, ubicado en EEUU. La legitimidad es el consentimiento que otorgas en el formulario. Tienes derecho a acceder, rectificar, limitar y suprimir tus datos según la política de privacidad.