Guía completa de estilos personalizados para temas hijo de WoodMart

WoodMart es un potente WooCommerce Temas que vienen con una gran cantidad de opciones de diseño, pero todavía depende del tema hijo hacer ajustes prácticos para que el sitio sea más relevante para el estilo de su marca. En este post, hablaremos sobre cómo utilizar el tema hijo de WoodMart.subtemaEl sitio web tiene un sabor "personalizado".

¿Qué son los subtemas?

Los subtemas son WordPress WoodMart es un mecanismo para añadir estilos y características personalizadas sin mover el código del tema original. Lo bueno es que, cuando el tema principal se actualiza, no afectará el código que escribió. WoodMart oficial ha proporcionado una plantilla de tema hijo, puede utilizar directamente para ahorrar un montón de problemas.

Paso 1: Instalar y activar el tema hijo

• Los archivos de subtemas se encuentran en los paquetes oficiales de WoodMart o de temas, y también pueden descargarse aquí. woodmart-niño.zip papeles.
• Vaya a WordPress Backend > Apariencia > Temas > Instalar tema > Cargar woodmart-niño.zip.

• Haga clic en "Activar" cuando la instalación haya finalizado.

Ahora que el sitio se ejecuta en el tema hijo, la transformación puede comenzar.

Paso 2: Añadir estilos personalizados

Si desea cambiar los tipos de letra, colores, espaciado y otros estilos, puede editar el directorio de subtemas de style.css Documentación.

Como ejemplo, digamos que cambia el título del producto a rojo y negrita:

.product-grid-item .title {
  color: #d60000;
  color: #d60000; font-weight: bold;
}

Guarde y actualice la página para ver los resultados.

Si está más familiarizado con SCSS, también puede utilizar el mecanismo de compilación SCSS proporcionado por WoodMart para gestionar la estructura de estilos de forma un poco más clara.

Paso 3: Modificar la estructura del tema (opcional)

Si necesita cambiar el diseño, por ejemplo, añadiendo una página de producto a la secciónEtiquetas personalizadaspuede crear un nuevo archivo de plantilla con la misma ruta que el tema principal en el directorio del tema hijo. Ejemplo:

woodmart-child/woocommerce/single-product/tabs/tabs.php

Haga una copia de los archivos correspondientes del tema principal y modifíquelos.WordPress cargará primero esta versión del tema hijo.

Paso 4: Añadir funciones personalizadas

Además del estilo, el funciones.php Añada una nueva función o modifique una función existente.

Por ejemplo, añada un pie de autor al final de cada artículo:

add_filter('el_contenido', function($content) {
  if (is_single()) {
    $contenido . = '<p style="font-style: italic;">Autor: Editor del sitio</p>';
  }
  return $content.
}).

El tema hijo es una "consola" que puede ampliarse a voluntad sin preocuparse por las actualizaciones.

Paso 5: Depuración y limpieza de la caché

Después de depurar un estilo o una función, no olvide borrar la caché, especialmente si ha utilizado la función Cohete WPSitios con plugins como LiteSpeed Cache. De lo contrario, es posible que no vea el efecto de actualización.

También es recomendable que abras las herramientas de desarrollo de tu navegador (pulsa F12) para ver si el CSS se está cargando correctamente y si hay algún conflicto.

resúmenes

WoodMart El mecanismo del tema hijo es muy fácil de usar, así que tanto si se trata de un pequeño cambio como de una gran transformación, si eres lo suficientemente práctico, puedes hacer que la plantilla sea completamente tuya. Si está interesado en CSS Si tienes conocimientos básicos de PHP, el proceso es como el de los "Legos", y ya no te resultará difícil montar tu propio estilo de sitio web.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres