OceanWP: ¡Las instrucciones de uso!

Category: Temas 50 0

OceanWP es sin duda el tema gratuito de WordPress más popular del momento. Sin embargo, no es el tema más utilizado, con sólo 200.000 instalaciones activas. Sin embargo, de las 861 notas que recibió – en el momento de escribir este artículo – 857 críticas le dieron una puntuación de 5/5. Es algo que nunca habías visto antes.

¿Pero por qué este tema está tan bien valorado? Ciertamente porque:

  • se pueden crear miles de diseños diferentes a partir de un solo tema,
  • es compatible con Elementor, una de las páginas más populares de los constructores,
  • no hay errores – al menos no hemos encontrado ninguno,
  • es gratis…. y sí, es un criterio de peso!

OceanWP es altamente personalizable, pero cuando se empieza con WordPress, este tipo de tema puede ser “confuso”. Ofrece tantas opciones que los nuevos usuarios tienen problemas para entenderlo! OceanWP es un poco lo contrario del tema de Hestia que le fue presentado anteriormente.

Este artículo ha sido escrito en este sentido, para ayudarle a configurar la mayoría de sus muchas opciones sin perderse demasiado…

El resumen del artículo:

  • 1 – Los requisitos previos…
  • 2 – Configure la apariencia general del sitio con OceanWP
    • 2.1 – Definir colores globales
    • 2.2 – Definir el diseño del sitio
    • 2.3 – Mostrar, ocultar o personalizar el título de la página
    • 2.4 – Definir fuentes en general
    • 2.5 – Establecer las otras configuraciones generales
  • 3 – Personalice el encabezado de su sitio con OceanWP
    • 3.1 – Elija el estilo de menú
    • 3.2 – Añadir una imagen en el fondo del menú / encabezado
    • 3.3 – Agregar un logo en el encabezado o cambiar el color y la fuente del título en el encabezado
    • 3.4 – Perfeccionar el estilo del menú: efectos, colores, submenú y tipografía…
    • 3.5 – Agregar iconos de redes sociales en el encabezado
    • 3.6 – Personalizar el menú en la versión móvil
    • 3.7 – Personalizar la “barra superior”
  • 4 – Personalizar la parte del blog con OceanWP
    • 4.1 – Personalizar las entradas de la página de blog y archivo
    • 4.2 – Personalizar la presentación de artículos únicos
    • 4.3 – Mostrar, eliminar o personalizar el rastro de migas de pan
  • 5 – Personalizar el pie de página con OceanWP
    • 5.1 – Widgets de notas al pie de página
    • 5.2 – Los créditos del pie de página
    • 5.3 – El menú de pie de página
  • 6 – Diferenciar entre personalizaciones por defecto y únicas con Ocean Extra
  • 7 – Extensiones para OceanWP
  • 8 – Optimizar OceanWP
  • 9 – Funcionalidades de importación/exportación
    • 9.1 – Importación de una demostración de OceanWP
    • 9.2 – Importar o exportar la configuración del tema
  • 10 – En conclusión

1 – Los requisitos previos

Antes de instalar cualquier tema, ya sea OceanWP o cualquier otro, es necesario que el sitio ya tenga algún contenido y configuración básica para facilitar la configuración del tema. De hecho, si su sitio está completamente vacío, tendrá problemas para comprobar la representación de las acciones de personalización.

Así que, normalmente, deberías haber hecho los primeros ajustes básicos de WordPress, como recordatorio, puedes encontrar un memo aquí.

Entonces, ya debería haber publicado algunas páginas que se utilizarán para construir la arquitectura de su sitio, así como el menú principal.

Aunque sus páginas aún no tengan contenido “real”, le permitirá navegar, pero sobre todo personalizar la cabecera del sitio con las opciones que ofrece el tema, y también publicar dos o tres artículos y crear algunas categorías, le ayudará a personalizar la parte del blog de su sitio.

Ahora que tiene algún material, puede definir y personalizar fácilmente el diseño de su sitio.

Todo lo que tiene que hacer es ir a la pestaña Apariencia > Temas > Añadir para buscar, instalar y activar el tema OceanWP.

Una vez instalado el tema, notará que ha aparecido un mensaje “este tema recomienda los siguientes plugins [….]” No es raro ver aparecer este tipo de mensaje y siempre es importante prestarle atención, a riesgo de perderse características importantes.

Tendrá que hacer clic en “iniciar la instalación de las extensiones” para aprovechar al máximo las ventajas de OceanWP. Este tema recomienda las extensiones Elementor, Ocean Extra y WPForm. Instálelos y actívelos.

Como resultado de estas acciones, verá que ha aparecido una nueva pestaña en la barra lateral izquierda. Este es el Tema del Panel, una especie de tablero para la gestión del OceanWP.

No nos quedaremos aquí porque de hecho, estos son varios atajos que conducen a las características inicialmente presentes en el personalizador de WordPress, bajo la pestaña Apariencia; Personalizar.

Aquí están las muchas opciones de OceanWP disponibles en el personalizador:

No hay menos de 14 pestañas:

La primera pestaña es una especie de “ad” para cambiar a la versión pro…

Las siguientes 4 pestañas son pestañas básicas ofrecidas por WordPress:

  • la pestaña Site Identity (Identidad del sitio) para gestionar el nombre y el lema del sitio (presente inicialmente en Configuración > General)
  • la pestaña Menú para administrar las áreas del menú (es un acceso directo a Apariencia > Menú)
  • la pestaña Widgets para gestionar las áreas de widgets (que también se gestionan desde la pestaña Apariencia)
  • la pestaña Configuración de la página de inicio, que no es otra cosa que el acceso directo a una opción de la pestaña Configuración > Reproducción.

Las otras 9 pestañas son proporcionadas por OceanWP para establecer todos los ajustes por defecto del tema. Y aquí es donde usted personalizará casi todo su sitio.

Para hacerlo bien, se recomienda revisar todas estas pestañas y sus innumerables subpestañas. Uno tras otro…. Nada mejor que tomar un tema en sus manos y domarlo. Sin embargo, trataremos de facilitarle este aprendizaje.

Hemos clasificado las preguntas más frecuentes por temas. Esperamos que encuentre las respuestas a sus preguntas en el resto de este artículo…

Volver al resumen]

2 – Establecer la apariencia general del sitio

Antes de comenzar a establecer OceanWP en detalle, nos centraremos en los estilos generales que se definirán…

2.1 Definir colores globales

Usted ciertamente tiene una carta gráfica a seguir, o colores relacionados con su identidad visual. Sería bueno, al principio, si su sitio está de acuerdo con ello…

Primero, vaya a la pestaña Apariencia > Personalizar > Opciones generales > Estilo general para definir el color dominante de su sitio. Esto se usará “al tacto” aquí y allá. Por lo tanto, será el color predominante por defecto. Luego puede actuar sobre algunos elementos para cambiarlo.

También es aquí donde usted elegirá:

  • el color general de sus enlaces,
  • el color de sus enlaces al pasar el ratón por encima,
  • el color de fondo
  • etc.

2.2 Definir el diseño del sitio

Definiremos un layout por defecto. Este será su diseño preferido, el que se aplicará a todo su sitio. El propósito de esta configuración es ahorrar tiempo, por lo que es aconsejable seleccionar el diseño más utilizado.

En la pestaña Apariencia > Personalizar > Opciones generales > Configuración general, puede definir

=El estilo general del diseño:

  • grande: pantalla completa,
  • boxed: el cuerpo del sitio será más estrecho
  • o separado: cada sección estará separada por un margen, es muy bueno si quieres añadir un color o una imagen de fondo (en este caso, la imagen de fondo se añadirá desde la pestaña Apariencia > Personalizar > Opciones generales > Estilo general).

Disposición con disposición separada, así que barra lateral/barra lateral

=el estilo de diseño de sus páginas:

  • barra lateral a la derecha
  • barra lateral izquierda
  • barra lateral a la derecha e izquierda
  • sin barra lateral

Estamos hablando del esquema de sus páginas, no afectará a su blog (archivo, categoría, artículo) que mantendrá su barra lateral.

Disposición sin barra lateral/barra lateral

Por defecto OceanWP añade la barra lateral a las páginas de su sitio, pocos usuarios quieren mantenerla…

=las otras opciones de la ficha Parametrizaciones generales:

Siempre en la pestaña Apariencia > Personalizar > Opciones generales > Configuración general, puedes configurar el diseño de las páginas de resultados de búsqueda pero también activar el opengraph de Facebook.

Sin embargo, me viene a la mente una pregunta: ¿no duplica esta opción la que ofrece Yoast SEO?

2.3 – Mostrar, ocultar o personalizar el título de la página

De forma predeterminada, cuando habilite OceanWP, verá un banner debajo del encabezado que muestra el título de sus páginas. Usted tendrá la opción de mantener este banner o desactivarlo en todas sus páginas.

Para ello, vaya a la pestaña Apariencia > Personalizar > Opciones generales > Título de la página.

Aquí, una opción es confusa: “visibilidad”. Tenderíamos a pensar que es esta opción la que te permite actuar sobre el banner con el título… Pero, no… Tendrás que ir a la opción “estilo” y seleccionar el estado “oculto” en el menú desplegable si quieres deshabilitar por completo este banner que muestra el título de tus páginas.

Sin embargo, si selecciona “imagen de fondo” puede añadir una imagen de fondo de sus títulos…. Es una cuestión de gustos 😉

Por favor, tenga en cuenta:

  • Para cambiar el color de sus títulos, siempre está en la pestaña Apariencia > Personalizar > Opciones generales > Título de la página.
  • Para cambiar la fuente de los títulos, vaya a la pestaña Apariencia > Personalizar > Tipografía > Titulación 1 (h1)

2.4 – Definir fuentes en general

Aunque podrá actuar sobre todo tipo de fuentes, recuerde definir la fuente general de su sitio. Es decir, la fuente del cuerpo de la página, para ello, vaya a la pestaña Apariencia > Personalizar > Tipografía > Cuerpo de la página.

Otra opción también está presente en Apariencia > Personalizar > Tipografía > General. En Francia, el subconjunto “latín” será suficiente.

Docenas de fuentes están disponibles en OceanWP

2.5 – Configure las otras opciones generales:

Dado que OceanWP es altamente personalizable, encontrará una opción para cada uno de los elementos de diseño. Aquí están los más buscados:

  • dónde modificar el botón de copia de seguridad: pestaña Apariencia> Personalizar> Opciones generales> Desplazarse hacia arriba
  • dónde definir el estilo de los botones por defecto: ficha Apariencia > Personalizar > Opciones generales > Tema del botón
  • dónde personalizar la página de error 404: pestaña Apariencia > Personalizar > Opciones generales > página de error 404
  • dónde definir la paginación: ficha Apariencia > Personalizar > Opciones generales > Paginación

Volver al resumen]

3 – ¿Cómo personalizar el encabezado de un sitio con OceanWP?

El encabezado – también llamado encabezado – es una parte del sitio que tiene su importancia en términos de diseño. Nos gusta poder personalizarlo a nuestro gusto: cómo organizar el menú, si añadimos una barra superior, qué fuentes y colores usar, dónde poner el logo, etc….

La mayoría de las opciones de personalización del encabezado se encuentran en la pestaña Apariencia > Personalizar > Encabezado

3.1 – Elija el estilo de menú

Es en la pestaña General (Apariencia > Personalizar > Encabezado > General) donde encontrará la opción de estilo de su encabezado. Esta es sin duda la opción más importante. Puede seleccionar uno de los 8 estilos proporcionados por OceanWP, a saber:

  • minimal: este es el menú por defecto de OceanWP
  • transparente: el menú no tiene color de fondo
  • menú superior: el menú principal está situado en una barra superior
  • pantalla completa: la navegación está oculta, al hacer clic en el “sandwich”, el menú cubre toda la pantalla
  • centrado: el logo, o el título de su sitio si no usa un logo, será centrado
  • medio: el logotipo pasa sobre los elementos de navegación
  • vertical: el menú está colocado a la izquierda por defecto pero las opciones le permitirán colocarlo a la derecha
  • custom: esta es una cabecera personalizada que puede importar desde su biblioteca

Tenga en cuenta que, dependiendo de su elección, aparecerán nuevas opciones justo debajo. No dude en desplazarse para llegar a la totalidad de las opciones de cada estilo de menú.

Puede encontrar opciones comunes para cada menú, como colores de fondo, colores de enlace, márgenes, etc. Pero también opciones específicas para cada tipo de opción, como por ejemplo añadir contenido adicional a través de los atajos proporcionados por OceanWP (ver lista) que existen para el estilo minimal & transparent por ejemplo.

3.2 – Añadir una imagen en el fondo del menú / encabezado

OceanWP le permite agregar un medio en el encabezado. Todo lo que tiene que hacer es ir a la pestaña Apariencia > Personalizar > Encabezado > Medios de Encabezado. Cualquiera que sea su soporte, las dimensiones recomendadas son 2000*1200 px:

  • Podrás insertar un vídeo. Si lo desea, prefiera la opción de añadir un enlace a YouTube.
  • Alternativamente, puede insertar una imagen.

Las opciones muy interesantes le permiten añadir un filtro de color opaco sobre el soporte y la posición del soporte. Gracias a un menú desplegable, puede elegir la posición. Generalmente, es la posición centrada la que se busca, pero puede ser un deseo de su parte elegir otra posición.

Nota importante: cuando añada sus medios, notará que el menú es demasiado estrecho para distinguir su imagen o vídeo. Si este es su caso, entonces tendrá que jugar con los márgenes internos del menú. Para ello, deberá cambiar la pestaña y volver a la anterior: Apariencia & General. Aquí es donde encontrará la opción de añadir relleno en la parte inferior y superior (margen interno) para ampliar la caja que muestra el material.

3.3 – Agregar un logo en el encabezado o cambiar el color y la fuente del título en el encabezado

OceanWP llama a " la ubicación para agregar el logotipo de su empresa. Si no importa un logotipo, el nombre de su sitio, normalmente el mismo que el de su marca o empresa, se mostrará en esta ubicación.

Es por lo tanto en Appearance & Logo donde encontrará estas características.

Si decide conservar el título en lugar de importar un logotipo, es aquí donde puede cambiar el color del título y el color del mismo. Por otro lado, si quieres cambiar la fuente de este título, tendrás que ir a Apariencia &tipografía >Logo

3.4 – Perfeccionar el estilo del menú: efectos, colores, submenú y tipografía…

Por último, una vez que haya identificado el tipo de encabezado que mejor se adapta a su proyecto, puede refinar el estilo de su menú principal.

Está en Appearance > Customize > Header > Menú que se puede jugar con efectos muy bonitos: añada una animaci&gt> Menú que se puede jugar con efectos muy bonitos: agregue una animaci&e;n y un color al colocar el puntero cuando se pasa el puntero de la mano de la mano de un amigo.

Un poco más abajo en las opciones, accederá a muchos ajustes para decidir los colores de los enlaces activos, los enlaces flotantes, los colores de fondo e incluso para los subelementos si su menú está compuesto de ellos.

Incluso con todas estas opciones, no encontrará dónde administrar las fuentes… No, tendrá que ir a la pestaña Apariencia (Appearance tab) > Tipografía > Menú principal y [….]Menú principal: lista desplegable

3.5 – Agregar iconos de redes sociales en el encabezado

Una opción te permite añadir iconos de muchas redes sociales. Necesitará ir a Appearance & gt; Customize Header &. Todo lo que tienes que hacer es añadir los enlaces a tus redes sociales para que aparezcan en el menú. Puedes elegir entre 4 estilos diferentes.

Advertencia: si utiliza el estilo Mínimo o el estilo Transparente para su tipo de encabezado, no busque más, los iconos de las redes sociales no aparecerán en su menú…

3.6 – Personalizar el menú en la versión móvil

Aún en las personalizaciones de cabecera, la última pestaña le permitirá definir el estilo de su menú en móvil (Apariencia > Personalizar &del menú móvil).

En esta pestaña, la primera opción le permitirá definir el “breakpoint”, es decir, el tamaño de la pantalla desde la que debe mostrarse el menú de su sitio en forma de “hamburguesa”.

Es al desplazar el ratón hacia abajo que usted verá un montón de otras opciones como el color del enlace, el color del flotador, el estilo del icono, etc….

3.7 – Personalizar la “barra superior”

La barra superior es un área que se colocará en la parte superior de la pantalla, encima del menú principal y el logotipo. OceanWP ha proporcionado una nueva área de menú aquí, pero no sólo…

Primero, puede crear un nuevo menú en la pestaña Apariencia > Menú > Crear. Usted añadirá los elementos que desee, como por ejemplo la página de contacto.

A continuación, deberá asegurarse de que esta barra superior está visible, para ello, vaya a Apariencia > Personalizar > Barra superior > General y marque “activar la barra superior” (o desmarcarla si no desea que aparezca). Aprovechará la oportunidad para definir el estilo de la barra y los diferentes colores.

En la pestaña Apariencia > Personalizar > Barra superior > Contenido, puede añadir texto que no sea un elemento del menú. Un simple texto para añadir un número de teléfono, una dirección de correo electrónico o incluso un texto promocional, por ejemplo.

Finalmente, en la pestaña Apariencia > Personalizar > Top Bar > Redes Sociales puedes insertar iconos de redes sociales. Necesitará añadir enlaces a sus redes para visualizarlos.

Tenga cuidado de que estos iconos no sean redundantes con los insertados en el menú principal, seguramente tendrá que hacer una elección.

En cuanto a la fuente de los textos ubicados en esta barra superior, deberá ir a Apariencia > Personalizar > Tipografía > Barra superior para modificarla.

Volver al resumen]

4 – Personalizar la parte del blog con OceanWP

Si está considerando mantener una parte de “blog” dentro de su sitio WordPress, o incluso si simplemente desea iniciar un blog en sí mismo, estará encantado de poder personalizar esta parte del sitio. Cuando vaya a la pestaña Apariencia > Personalizar > Blog, sólo verá dos subpestañas:

4.1 – Entradas de blog

Aquí es donde definirás el diseño de tu página de blog y los archivos de tu blog (como la página de categorías, por ejemplo).

Como regla general, no solemos tener la posibilidad de elegir el diseño de esta página, que son páginas dinámicas en las que se colocará cada nuevo artículo publicado.

En esta pestaña “entradas de blog”, puede elegir:

  • diseño: posición de la barra lateral o anchura total (sin barra lateral)
  • el tipo de etiquetado HTML de los títulos: H2 por defecto
  • el estilo del blog: imagen grande, cuadrícula o miniatura

Además, tendrá el lujo de poder elegir la posición de cada elemento que puede arrastrar y soltar y activar/desactivar.

Lo mismo se puede hacer con las “Metas”, esta información que está presente en cada artículo del blog (autor, fecha de publicación, categoría y número de comentarios).

4.2 – Artículo único

Aquí definirá el diseño de la página de sus artículos (la que utiliza el archivo OceanWP singular.php).

En esta pestaña única, encontrará muchas opciones que le permitirán crear un diseño ultra personalizado:

  • la disposición: barra lateral a la derecha, a la izquierda, a ambos lados o sin barra lateral….
  • etiquetado de título
  • la elección del título a mostrar: “blog” o “título del artículo”
  • la opción de mostrar la imagen del artículo en el fondo de la cabecera
  • la posición del título y el rastro de miga de pan: derecha, centro o izquierda
  • la posición: aquí estamos hablando de la posición de la imagen de fondo del título
  • la posición de los elementos a visualizar: haga clic en el icono del ojo para habilitarlos/deshabilitarlos
  • la meta-caja (información del artículo)
  • artículos relacionados: establecer reglas para el uso de los artículos en la sección “también te gustaría
  • etc…

4.3 – Eliminar o personalizar el camino de la miga de pan

No es en las opciones del blog donde podrás actuar en el camino de la miga de pan, no, lo encontrarás en Apariencia > Personalizar > Opciones Generales > Título de la Página.

A medida que se desplaza con el ratón, verá una casilla de verificación o desmarque para habilitar o deshabilitar la ruta de la miga de pan.

También podrá elegir su posición, el color de los enlaces y el color cuando el ratón pase el ratón por encima.

Volver al resumen]

5 – Personalizar el pie de página con OceanWP

El pie de página es el pie de página de su sitio WordPress. Aparece en todas las páginas y artículos de su sitio. Este es el lugar ideal para añadir créditos/copyright y widgets para ayudar a la gente a contactarte o encontrarte.

El pie de página temático del OceanWP se divide en dos partes:

  • el pie de página de la parte Widget: para mostrar los widgets famosos
  • la parte inferior del pie de página: para mostrar los créditos pero también el menú del pie de página.

5.1 – Widgets de notas al pie de página

Si no está considerando añadir widgets al pie de página de su sitio, sería una buena idea desactivar esta ubicación. Para ello, vaya a Apariencia > Personalizar > Widgets de pie de página y desactive la opción “Habilitar widgets de pie de página”.

Si, por otro lado, desea mostrar widgets en la parte inferior de la página, mantenga la marca de verificación en esta casilla y configure las pocas opciones disponibles para usted:

  • visibilidad: en todos los dispositivos o sólo en las versiones de PC
  • hacer que el área del widget sea fija
  • añadir un efecto de paralaje
  • definir el número de columnas: 1, 2, 3 ó 4
  • añadir margen interno (relleno)
  • definir el fondo, el texto y los colores de los enlaces

Para modificar el tipo de letra (typo) de los títulos de sus widgets, podrá realizar esta acción en la pestaña Apariencia> Personalizar> Tipografía> Tipografía> Tipografía> Título del widget en la parte inferior de la página.

Para definir los widgets que se mostrarán en la parte inferior de la página, puede ir a la pestaña Apariencia; Widgets. Arrastre los widgets a las ubicaciones apropiadas. Lea este artículo sobre los widgets para obtener más información.

5.2 – Créditos de pie de página

Por defecto, los créditos que aparecen en el pie de página del OceanWP son “Copyright 2018 – OceanWP Theme by Nick”.

Obviamente, usted querrá cambiar este texto.

Para ello, un campo dedicado le dará la bienvenida a sus cambios en la pestaña Apariencia > Personalizar > Parte inferior del pie de página. Usted podrá ingresar no sólo sus propios derechos de autor, sino también un código abreviado proporcionado por OceanWP que se enumera aquí.

Por ejemplo, introduciendo[oceanwp_date] el año se mostrará en tiempo real: 2018, 2019, 2020… y no tendrá que cambiar su crédito cada año nuevo.

Para modificar la fuente (tipo de letra) de los créditos del pie de página, estará en la pestaña Apariencia &gt; Personalizar &gt; Tipografía &gt; Pie de página Copyright</st

Related Articles