Definitivamente debería saber cómo personalizar el diseño de su sitio web con subtemas.
La creación de subtemas se considera la mejor manera de personalizar el diseño de su sitio. Esta es la forma más segura porque si encuentra un problema grave al personalizar el diseño de su sitio, puede volver a enviar el tema principal y recuperar su sitio original.
El tema secundario también lo ayuda a trabajar sin conexión y realiza las modificaciones y experimentos necesarios. Pero primero, necesita saber cómo crear un tema hijo.
¿Cómo personalizo el diseño de mi sitio con subtemas?
El tema secundario conserva el diseño y la funcionalidad del tema principal. Si no crea un tema secundario y realiza cambios directamente en el tema principal, si comete algún error, los cambios serán irreversibles. Además, si actualiza el tema principal mientras se comparte, todos los cambios se eliminarán por completo.
Crear un tema hijo
El primer paso es crear un tema secundario a partir de cualquier tema principal. Cree una carpeta en su disco duro con un nombre significativo para el tema secundario. Dentro de la carpeta, cree un archivo llamado style.css. Abra el archivo con cualquier editor de texto y pegue lo siguiente.
/*
Theme Name: My Child Theme
Theme URI: http://mysite.com/
Description: This is a custom child theme I have created.
Author: My Name
Author URI: http://mysite.com/
Template: parenttheme
Version: 0.1
*/
@import url("../parenttheme/style.css");
Debe cambiar las líneas anteriores y reemplazarlas con la información adecuada. El nombre del tema debe ser el nombre de la carpeta que acaba de crear donde se encuentra el archivo. Debe proporcionar una URL auténtica para su sitio existente y, de manera similar, el nombre y la URL del autor.
El nombre de la plantilla debe ser el nombre del tema principal. De manera similar, el nombre del tema principal debe especificarse en la última línea. Asegúrese de cuidar el caso, de lo contrario, es posible que no funcione. Guarda el archivo y cierra.
Carpeta en movimiento
Es hora de mover el archivo de su disco duro a la carpeta de instalación de WordPress del servidor web. Para esto, necesita usar un FTP como Filezilla y conectarse al servidor e ingresar a la carpeta WP-content y en ella encontrará la carpeta Themes, haga doble clic en ella. Cargue el tema de la subcarpeta. Asegúrese de que la dirección final sea wp-content/themes/childfolder/style.css.
Activación de un tema hijo
Para activar un tema secundario, debe ir al panel de administración e ir a la opción de menú en el lado izquierdo Apariencia. En la lista desplegable, haga clic en Temas. Verás que tu tema hijo ya está instalado.
Es hora de activar haciendo clic en el botón. Tenga en cuenta que, en este punto, el tema secundario será exactamente el mismo que el tema principal, ya que hasta ahora no se han realizado cambios.
Proceso de personalización
La mayoría de los temas contienen varios archivos CSS, pero el principal permanece en la carpeta principal y es el mejor archivo para personalizar el diseño de su sitio con subtemas. Si desea realizar algún cambio funcional, debe personalizar su archivo functions.php.
Es importante comprender que los diferentes temas principales tienen diferentes nombres de clase e identificadores en el archivo de estilo CSS y, para cambiarlos, debe conocer los nombres para anularlos y personalizar el diseño de su sitio con temas secundarios.
¿Cómo obtengo el código del tema principal para reemplazarlos?
Si está utilizando Google Chrome, debe tener en cuenta que viene con un inspector de código que muestra el código de cualquier sección del sitio web. Por lo tanto, debe visitar la página de inicio de su red desde su navegador de Internet y presionar F12. Aparecerá un cuadro en la parte inferior y mostrará los códigos.
Ahora coloque el puntero del mouse sobre los ‘Elementos’ cuyo estilo desea cambiar.
Cambios concretos
Por ejemplo, desea cambiar el menú de navegación. Por lo tanto, coloque el cursor sobre las líneas de código en la pestaña Elementos en el Inspector y descubra qué código representa el estilo de navegación.
Cuando lo encuentre, debe tomar nota de la identificación. En la mayoría de los casos, el ID y la clase serán los mismos, en este caso es «barra de navegación». Todo lo que necesita hacer es volver al archivo style.css del tema secundario y agregar el siguiente fragmento de código.
.navbar {
background-color: #e8e5ce;
}
Tenga en cuenta que dado que el identificador era ‘navbar’, usamos el mismo identificador en style.css. En otro tema principal, podría ser otra cosa en lugar de la «barra de navegación», por lo que debe realizar cambios. Guarde el archivo y visite su sitio nuevamente para verlo.
Del mismo modo, puede realizar cambios en el color de fondo del pie de página o en el color de fondo del widget escribiendo el siguiente fragmento de código.
.site-footer {background-color: #d8cdc1;}
.widget {background-color: #e8e5ce;}
Cambios universales
Hay varios elementos que son universales para un sitio web. Por ejemplo, el color del texto de anclaje es el mismo en todo el sitio. Tiene un cierto color y estilo para que se noten.
Cambia de color cuando pasas el puntero del ratón sobre él o haces clic en él. Hacer un cambio universal es fácil, ya que son los mismos para todos los temas principales, ya que son sintaxis CSS general. Para cambiar el color del texto del ancla, debe usar lo siguiente.
a: enlace: se utiliza para mostrar enlaces.
a: hover – se usa para cambiar el color después de colocar el puntero del mouse sobre el enlace.
a: visitado: se utiliza para cambiar el color de los enlaces ya visitados.
Por lo tanto, el código en el archivo style.css del tema secundario debería tener este aspecto en caso de que desee cambiar sus colores.
a:link {
color:#ff0000;
text-decoration:none;
}
a:hover {
color:#ff0000;
text-decoration:underline;
}
Espero que el proceso sea claro y para personalizar el diseño de su sitio con subtemas, debe comenzar a aprender sobre CSS y los diversos atributos. Gracias.
