¿Está buscando crear un tema hijo en WordPress? Una vez que aprenda los conceptos básicos de WordPress , probablemente desee aprender a personalizar su sitio de WordPress. Creemos que los temas secundarios son un excelente punto de partida para cualquiera que busque personalizar temas de WordPress. En este artículo, le mostraremos cómo crear un tema hijo en WordPress.
¿Por qué necesita crear un tema hijo?
Los temas hijos se consideran la mejor manera de personalizar sus temas de WordPress. Un tema hijo hereda todas las características y la apariencia de su tema padre. Puede personalizarlo sin afectar el tema principal. Esto le permite actualizar fácilmente el tema principal sin preocuparse por perder sus cambios.
Puede obtener más información sobre los temas secundarios en nuestro artículo ¿Qué es un tema secundario de WordPress? Pros, contras y más .
Requisitos
Se requiere un conocimiento básico de CSS / HTML para que pueda realizar sus propios cambios. Ciertamente, algún conocimiento de PHP ayudaría. Si eres bueno copiando y pegando fragmentos de código de otras fuentes, eso también funcionaría.
Le recomendamos que practique en su entorno de desarrollo local . Puede mover un sitio de WordPress en vivo al servidor local para realizar pruebas o utilizar contenido ficticio para el desarrollo de temas .
Empezando
Cualquier buen tema de WordPress se puede utilizar como tema principal. Sin embargo, hay muchos tipos diferentes de temas y es posible que algunos no sean los más fáciles de trabajar. Por el bien de este tutorial, usaremos Twenty Thirteen , que es uno de los temas predeterminados de WordPress.
Creando su primer tema hijo
Primero debe abrir /wp-content/themes/en su carpeta de instalación de WordPress y crear una nueva carpeta para su hijo. Puede nombrar esta carpeta como desee. Para este tutorial lo nombraremos wpbdemo.
Abra un editor de texto como el Bloc de notas y pegue este código:
/* Theme Name: TWP Child Theme Theme URI: https://www.trucoswp.com/ Description: A Twenty Thirteen child theme Author: TrucosWP Author URI: https://www.trucoswp.com Template: twentythirteen Version: 1.0.0*/@import url("../twentythirteen/style.css");Ahora guarde este archivo como style.cssen la carpeta del tema secundario que acaba de crear.
La mayoría de las cosas en este archivo se explican por sí mismas. A lo que realmente quieres prestar atención es a la template: twentythirteen .
Esto le dice a WordPress que nuestro tema es un tema hijo y que el nombre del directorio de nuestro tema principal es veintitrés. El nombre de la carpeta principal distingue entre mayúsculas y minúsculas. Si proporcionamos a WordPress Plantilla: TwentyThirteen, entonces no funcionará.
La última línea de este código importa la hoja de estilo de nuestro tema principal al tema secundario.
Este es el requisito mínimo para crear un tema hijo. Ahora puede ir a Apariencia »Temas donde verá WPB Child Theme. Debe hacer clic en el botón Activar para comenzar a usar el tema hijo en su sitio.
Dado que aún no ha cambiado nada en su tema secundario, su sitio utilizará todas las funciones y apariencia de su tema principal.
Personalización del tema de su hijo
Cada tema de WordPress tiene un archivo style.css en su directorio principal. En su mayoría, esta es la hoja de estilo principal de su tema donde va todo el CSS. Sin embargo, es posible que algunos temas solo contengan la información del encabezado del tema. Estos temas suelen tener archivos CSS ubicados en un directorio separado.
Para esta sección, necesitará un poco de conocimiento sobre CSS .
Google Chrome y Firefox vienen con herramientas de inspección integradas. Estas herramientas le permiten ver el HTML y CSS detrás de cualquier elemento de una página web.
Si desea ver el CSS utilizado para el menú de navegación, simplemente lleve el mouse al menú de navegación y haga clic con el botón derecho para seleccionar Inspeccionar elemento.
Esto dividirá la pantalla de su navegador en dos partes. En la parte inferior de la pantalla, verá el HTML y CSS de la página.
A medida que mueve el mouse en diferentes líneas HTML, el inspector de Chrome las resaltará en la ventana superior. Como puede ver, tenemos el menú de navegación seleccionado en la captura de pantalla anterior.
También le mostrará las reglas CSS relacionadas con el elemento resaltado en la ventana de la derecha.
Puede intentar editar el CSS allí mismo para ver cómo quedaría. Intentemos cambiar el color de fondo de .navbara #e8e5ce.
Verá que el color de fondo de la barra de navegación cambiará. Si le gusta esto, puede copiar esta regla CSS y pegarla en el archivo style.css de su tema secundario.
.navbar {background-color: #e8e5ce;}Guarde los cambios que realizó en el archivo style.css y luego obtenga una vista previa de su sitio.
Repita el proceso para cualquier cosa que desee cambiar en la hoja de estilo de su tema. Aquí está la hoja de estilo completa que hemos creado para el tema hijo. Siéntete libre de experimentar y modificarlo.
/*Theme Name: TWP Child ThemeTheme URI: https://www.trucoswp.com/Description: A Twenty Thirteen child theme Author: TrucosWPAuthor URI: https://www.trucoswp.comTemplate: twentythirteenVersion: 1.0.0*/@import url("../twentythirteen/style.css");.site-title {padding: 30px 0 30px;}.site-header .home-link {min-height: 0px;}.navbar {background-color: #e8e5ce;}.widget { background-color: #e8e5ce;}.site-footer {background-color: #d8cdc1;} .site-footer .sidebar-container { background-color:#533F2A}Cada tema de WordPress tiene un diseño diferente. Veamos el diseño del tema Twenty Thirteen. Tiene encabezado, menús de navegación, bucle de contenido, área de widget de pie de página, área de widget secundario y pie de página.
Cada una de estas secciones es manejada por diferentes archivos en la carpeta veintitrés. Estos archivos se denominan plantillas.
La mayoría de las veces, estas plantillas llevan el nombre del área para la que se utilizan. Por ejemplo, la sección de pie de página generalmente se maneja mediante el archivo footer.php, las áreas de encabezado y navegación se manejan mediante el archivo header.php. Algunas áreas, como el área de contenido, son manejadas por varios archivos llamados plantillas de contenido.
Lo primero que debe hacer es seleccionar el archivo de tema que desea modificar y luego copiarlo en su tema hijo.
Por ejemplo, desea eliminar el enlace ‘impulsado por WordPress’ del área del pie de página y agregar un aviso de derechos de autor allí. Simplemente copie el archivo footer.php en su tema hijo y luego ábralo en un editor de texto sin formato como el bloc de notas. Descubra las líneas que desea eliminar y reemplácelas por las suyas. Me gusta esto:
<?php/*** The template for displaying the footer** Contains footer content and the closing of the #main and #page div elements.** @package WordPress* @subpackage Twenty_Thirteen* @since Twenty Thirteen 1.0*/?></div><!-- #main --><footer id="colophon" class="site-footer" role="contentinfo"><?php get_sidebar( 'main' ); ?><div class="site-info"><p>© Copyright <?php echo date("Y"); ?> <?php bloginfo('name'); ?> All rights reserved.</p></div><!-- .site-info --></footer><!-- #colophon --></div><!-- #page --><?php wp_footer(); ?></body></html>En este código, hemos reemplazado Twenty Thirteen créditos con un aviso de derechos de autor.
La resolución de problemas es mucho más fácil al crear temas secundarios. Por ejemplo, si eliminó accidentalmente algo que su tema principal requería, simplemente puede eliminar el archivo de su tema secundario y comenzar de nuevo.
Agregar nueva funcionalidad al tema secundario
Encontrará muchos tutoriales de WordPress que le pedirán que copie y pegue un fragmento de código en el archivo functions.php de su tema .
Agregar fragmentos de código en el archivo functions.php de un tema principal significa que sus cambios se sobrescribirán siempre que haya una nueva actualización para el tema principal. Es por eso que siempre se recomienda usar un tema hijo y agregar todos los fragmentos de código personalizados en el archivo functions.php del tema hijo.
Creemos un nuevo archivo en la carpeta de su tema hijo y asígnele el nombre functions.php. En este ejemplo, vamos a agregar un pequeño fragmento de código que cambiará la imagen de encabezado predeterminada en nuestra propia imagen personalizada.
Ya hemos creado una imagen de encabezado y una miniatura editando la imagen de encabezado predeterminada de Twenty Thirteen. A continuación, lo subimos a nuestro tema hijo dentro de la carpeta / images / headers /.
Después de eso, debemos decirle a WordPress que use esta imagen como la imagen de encabezado predeterminada para nuestro tema. Podemos hacerlo agregando este fragmento de código en el archivo functions.php de nuestro tema hijo:
<?phpfunction wpbdemo_custom_header_setup() { add_theme_support( 'custom-header', array( 'default-image' => '%s/images/headers/circle-wpb.png' ) );register_default_headers( array('caramel' => array('url' => '%2$s/images/headers/circle-wpb.png','thumbnail_url' => '%2$s/images/headers/circle-wpb-thumbnail.png','description' => __( 'Caramel', 'Caramel header', 'twentythirteen' )),) );} add_action( 'after_setup_theme', 'wpbdemo_custom_header_setup' );?>Puede agregar cualquier fragmento de código personalizado que necesite en el archivo functions.php de su tema hijo. Consulte estos más de 25 trucos extremadamente útiles para el archivo de funciones de WordPress .
Solución de problemas
Como principiantes, se espera que cometa errores al trabajar en el tema de su primer hijo. Simplemente no te rindas demasiado rápido. Consulte nuestra lista de errores de WordPress más comunes para encontrar una solución.
El error más común que vería es probablemente el error de sintaxis que generalmente ocurre cuando se le escapa algo en el código. Aquí hay una guía rápida que explica cómo encontrar y corregir el error de sintaxis en WordPress .
Resultado final
Otros temas infantiles basados en Twenty Thirteen
Aquí hay algunos otros temas secundarios de WordPress basados en Twenty Thirteen. Échales un vistazo y observa cómo estos desarrolladores de temas personalizaron Twenty Thirteen.
Holi
Cherry blossom
2013 blue
Flat portfolio
Esperamos que este artículo le haya ayudado a aprender a crear un tema hijo de WordPress.
¿Te ha resultado útil??
0 / 0