Cómo crear un tema para niños en WordPress

¿Qué puedo crear un tema para niños en WordPress? Está bastante satisfecho con su tema actual de WordPress, sin embargo, desea cambiar algunas cosas. (por ejemplo, agregue la funcionalidad personalizada) Pero, ¿qué sucede si está confundiendo algo? Si alguna vez se ha preguntado si hay una forma más segura de cambiar un tema, está en el lugar correcto. En esta guía para principiantes, responderemos esta pregunta y muchos más. Dado esto, este es un excelente punto de partida si desea obtener más información sobre los métodos de estilo personalizados de WordPress. Debe ser claro, pero para cualquier eventualidad, permitirnos recordarle que debe tener acceso a su servidor y al tablero de administración de WordPress para seguir este tutorial.
¿Cuál es el tema de un niño en WordPress? Un tema infantil es prácticamente un cambio en el tema existente (padre). Para reformularlo, puede usarlo para cambiar una parte o más secciones de su tema de WordPress, sin estropear sus archivos originales. Esto es posible sobrescribiendo los archivos de los temas principales. Después de que se crea el archivo con un tema infantil, recibe instantáneamente una prioridad mayor que el tema de los padres. Es importante darse cuenta de que no es un tema autoempleado y que no puede funcionar/existir solo (sin un tema original). Todos los cambios que realice dentro del niño no afectarán los archivos del tema principal. En cambio, la actualización de los archivos principales afectará al niño.
¿Por qué debería usar el tema de los niños de WordPress?
Puedes aprender mucho
Esto es bastante obvio, por supuesto, puede aprender mucho sobre el desarrollo de WordPress utilizando los temas de los niños. Pueden enseñarle cómo funcionan los temas detrás de escena, pueden obligarlo a aprender tanto CSS como PHP, etc. Es más seguro así
Ya hemos descrito los temas de los niños como una forma más segura de cambiar las cosas. Esto se debe a que tiene archivos totalmente diferentes y no anula nada en este proceso. Los archivos originales permanecen intactos, todo el trabajo se almacena en otros nuevos.
No puedes perder tus cambios
Si edita el tema directamente, cuando lo actualiza, esos cambios desaparecen (puede usar complementos para mantener modificado el código CSS, pero esto solo funciona con cambios menores). Con temas para niños, no tendrá este problema.
No es necesario comenzar desde cero
Ya teniendo la estructura y la base, su trabajo es mucho más simple que comenzar desde la parte inferior.
Puedes volver al instantáneo original
Si no está satisfecho con lo que ha hecho, puede deshabilitar fácilmente el tema del niño y activar el principal. Ahora que hemos escapado de todo esto en el camino, podemos comenzar a hacer uno. Crear un tema para niños en WordPress Lo primero que debe recordar es que los temas están compuestos de archivos PHP y CSS. Utilizamos el archivo PHP para agregar funcionalidad y CSS (hojas de estilo) para look. Debido a que no creamos un tema completamente nuevo, podemos comenzar este procedimiento con solo dos archivos. Un archivo style.css y un archivo funciones.php.
En primer lugar, debemos elegir un tema principal para usar como archivos de plantilla. Los temas predeterminados son bastante fáciles, por lo que son una buena opción. (Usaremos el tema de veinte diecisiete en este artículo, pero puede usar los archivos de veinte trece o cualquier otro) modo manual: cómo crear un tema para niños, el método en sí es bastante simple si sabe cómo usar códigos de copia y vinculación . De Internet. Si ya está familiarizado con el bacalao, cuanto más. Todo el proceso de creación se puede hacer localmente, en su computadora en cualquier caso, puede cargar los archivos en el servidor (en la carpeta con temas) y puede editarlos directamente. En comparación con la velocidad ofrecida por WordPress Hosting Services, lo local es mucho más rápido. Además, debido a que está fuera de línea, no puede afectar la experiencia del usuario o no puede destruir su sitio. Con este fin, para probar su sitio fuera de línea, puede usar uno de los hosts locales, como XAMPP. Un pequeño consejo si elige hacer esto, si el tema no se actualiza después de cambiarlo, consulte la configuración de las cookies. (o elimine todas las cookies y refrescan) Sin embargo, si aún desea hacer todo en línea:
Abra el cliente FTP.
Inicie sesión en su servidor.
Vaya a WP-Content> Temas.
Cree una nueva carpeta (el llamado “Director del tema”). Para mayor claridad, recomendamos que el nombre de la carpeta sea similar al nombre del tema para el niño. (Pero puedes llamarlos como quieras)
Tire de los archivos al administrador de archivos para cargarlos en el servidor. Asegúrese de copiar todos los archivos en las carpetas apropiadas con el tema del niño en consecuencia.
No active el tema hasta que esté seguro de haber hecho todo correctamente. Cree el archivo CSS como dije, los archivos de hoja de estilo de tema se utilizan para cambiar el aspecto de su sitio CSS personalizado puede cambiar ciertas partes del tema que desea para cambiarlo.
Para crear el archivo style.css del tema infantil, debe:
Abra el editor de texto deseado. (Preferiblemente, no uno para procesar palabras como Word, sino una más que “WordPad”)
Copie el “código” que proporcioné a continuación.
Guárdelo como estilo.css.
El código “:/* Nombre del tema: Veinte diecisiete Tema infantil: http://example.com/twenty- seventeen-child/ Descripción: Twenty Seventen Tema infantil Autor: Fix Runner Autor: https://fixrunner.com Template: Twentyseventeeneenenenenen Versión: 1.0.0 */ Veamos lo que acabamos de copiar. Este es el comentario a prueba de cabeza solicitado por WordPress al crear el CSS el tema del niño. Dígale a WordPress toda la información que necesita para identificar el archivo. Se coloque en la parte superior de El archivo style.css con el tema del niño.
Ahora explicemos cada uno de los elementos en el comentario del encabezado:
El nombre del tema (obligatorio): el nombre único que ha elegido para el tema de su hijo.
La URL del tema (opcional): URL que contiene un manual para su tema. No debe completar esto.
Descripción (opcional): esta información se mostrará en el menú Temas.
El autor de la URL (opcional) (opcional) del tema (Opcional) -quite explícita, escriba información sobre el autor del niño si desea publicar su tema.
Plantilla (obligatoria): esto es realmente importante. Específicamente, WordPress le dice qué tema será la base (padre) de nuestro hijo. Soblación (opcional): útil para controlar versiones.
También hay “etiquetas”, “dominio de texto” y “licencia”, que puede completar si tiene la intención de publicarlas.
Puede sorprenderte, pero acaba de crear el primer tema para el niño. Si lo copia en un servidor, puede activarlo en el menú Temas. Sin embargo, no se verá genial. Todavía no lo he configurado bien. Creación del archivo PHP El archivo de funciones está ahí para conectar correctamente la hoja de estilo del padre y la del niño. También puede agregar funcionalidad adicional o actualizarla al existente. Crear las funciones de archivo.php con temas infantiles es idéntico a lo que ya he hecho. Por supuesto, el código es diferente. Después de crear un archivo llamado Functions.php, debe copiar y pegar el siguiente código dentro:
personalizar.

Habrá una nueva opción en la parte inferior izquierda de la pantalla llamada “Childify Me”, haga clic en ella.

Elija un nombre para su tema y haga clic en “Crear”.

Básicamente, eso es todo.
En el menú temático, ahora puede seleccionar este tema, ver su información y activarla si lo desea.
Recuerde, como dije, no se recomienda activar al niño mientras aún no está seguro de los cambios en el estilo que ha realizado.
Cambiar el tema de un niño en WordPress después de crear el tema infantil, viene la parte de “personalización de WordPress” (parte divertida). La codificación a veces puede parecer aterradora, pero no tengas miedo, no es tan difícil cuando haces un poco de esfuerzo en él. Además, no iremos demasiado al cambiar las funciones.php del tema, porque puede ser un poco más avanzado. CSS, por otro lado, tiene una forma mucho más simple de organizar códigos y puede comprender fácilmente los elementos básicos. Entonces, si no tiene conocimiento previo sobre este tema, síguelo. En primer lugar, veamos cómo podemos encontrar partes de la página que queremos cambiar. Encontrar el elemento correcto para editar para encontrar exactamente lo que está buscando, puede ser un poco difícil si no sabe lo que está haciendo. La cuestión es que el nombre de cada objeto en la página puede variar de un desarrollador de temas a otro. De hecho, esto es lo que dificulta predecir lo que debemos poner en el estilo de nuestro hijo. Para este fin, podemos usar una opción de “inspección” en el navegador Google Chrome. Puede encontrarlo en la parte inferior de un menú de caída después de hacer clic derecho en cualquier lugar de la página. La nueva sección se abrirá en el lado derecho de su página, donde verá el código HTML y CSS. Para seleccionar un elemento en particular en la página que está intentando cambiar, haga clic en el icono de flecha en la imagen a continuación.

Ahora que tiene esta opción activa, encontremos el nombre del objeto de título de nuestro sitio. Haga clic con el botón izquierdo del mouse.

Esto resaltará el elemento deseado en la sección del código HTML, donde podemos ver que está definido por la etiqueta .

Podemos cambiar su apariencia solo cambiando el estilo de la etiqueta en su conjunto. Sin embargo, debido a que la etiqueta se usa para la mayoría de los enlaces, generalmente no queremos hacerlo. Así que seamos más específicos. Puede ver claramente que la etiqueta está dentro de una etiqueta
etiquetada como “tetas de sitio”. Es exactamente lo que estamos buscando. Otra cosa antes de continuar, a veces, como es el caso aquí, el tema puede tener eventos especiales. “HA-Header-Image” es uno de estos eventos y significa que podemos apuntar a este elemento en una situación específica cuando el sitio tiene una imagen de encabezado.

Edición del archivo de temas style.css Ahora que sabemos cuál es el nombre del objeto que queremos cambiar, podemos comenzar a hacer exactamente. Para enseñarle todo sobre el tema CSS para WordPress Child, este artículo tendría más de cien páginas, pero solo puede viajar con las cosas básicas. Para escribir cualquier código CSS, debe:

Diga el nombre del artículo que desea afectar (y sea tan específico como mencioné). Si encontró el nombre en el atributo “clase”, ponga un punto antes del nombre. Para “ID”, use el símbolo hashtag. (Por lo que puede ser “.Site-Title” o “#Site-Tits)


Pon la línea de código entre los aparatos ortopédicos “{}”

Termine cada fila con “;”

En vista de esto, cambiaremos el color del texto en el título.Usemos un color que saldrá instantáneamente.(Verde claro para la situación “son-haemader” y rojo para sin) Si desea seguir, copie el siguiente código después del comentario del encabezado: body.has-tader-image .site-tits de {color: #00f36;} .Site-tits de {color: rojo;} El resultado debe verse así cuando hay una imagen de encabezado: Y así, cuando no existe:

Obviamente, el verdadero poder de los temas de los niños, lo que vi en el ejemplo anterior es solo un cambio pequeño y rápido. Solo imagine lo que puede hacer si aprende sobre CSS o copia códigos interesantes en Internet. Pruebe este código “pequeño”, por ejemplo:/* Nombre del tema: Veinte diecisiete Tema infantil: http://example.com/twenty- Seventeen- Child/ Descripción: Veinte diecisiete Tema Infantil Autor: Fix Runner Autor: https: // plantilla de fixrunner.com: veintiséventa versión: 1.0.0 */h1 {font-size: 2em; margen: 0.67em 0; } #secundario.widget-li {relleno: 0.5em 1em; } #reciente-posts-2.widget.widget_recent_entries {background-color: #ffeea61; } #Archives-2.Widget.Widget_archive {Background-Color: #FFeEA61; } #meta-2.widget.widget_meta {background-color: #ffeea61; } .Navigation-top {background-color: #fea; } Body.Has-Header-Image. Site-Title, Body.Has-Header-Image. Site-Title A {Color: }. Relleno: 1.5em; Text-align: izquierda; } H2.Widget-Title {Padding: 1em; } .wrap {margen-izquierda: car; Margen-derecha: auto; Máxido de ancho: 90%; } ul, ol {margen: 0 0 1em; Relleno: 0em 2em; } Ul {type-style-type: circle; } código {font-weight: bold; Color:#0f1017; } .comment-body {margen: 5em; } .ByPostauthor> .comment-Body> .comment-Method> .comment-Author .aavar {border: 0px sólido #333; Relleno: 2px;

} Y así, es un tema muy nuevo. El estilo de los padres se cambia a una apariencia más estrecha y amarillenta. Hay más cambios aquí y allá, pero eso no es importante. Incluso si parece haber más trabajo aquí, en realidad usa el mismo método que expliqué antes. Una pequeña guía de Php WordPress para que, como dije, usando el tema infantil para WordPress, puede actualizar las funciones del padre del padre sin la oportunidad de arruinar nada. Esto se puede hacer con algunos archivos PHP separados o utilizando ganchos temáticos. En primer lugar, hablemos de PHP en general. Para explicar PHP, usaremos un ejemplo simple. En esto, crearemos una ranura de widget llamado “Ejemplo de widget de pie de página” en el sótano. (Bonus Footer Widget es la etiqueta que estará en los menús de personalización, pero la verdadera identificación es “Ejemplo de widget de pie de página”) Para hacer esto primero debe: Abrir las funciones.php del tema de su hijo.

Copie el siguiente código después de ” ‘widget de pie de bonus’, ‘id’ => ‘pie-widget-exame’, ‘before_widget’ =>
‘,’ After_widget ‘=>’
‘));
Guarde el archivo y cierre.
Siempre que desee informar a WordPress Backynd que hay un nuevo elemento para el que debe preocuparse, debe grabar ese artículo.Register_sideBar () es un orden que hace exactamente.Además, como en el caso de CSS, debemos cerrar nuestras órdenes con “;”.En segundo lugar, debemos mostrar ese elemento en el sótano.Si abres el footer.php del tema de tus padres, verás una línea similar a esta: <?Así que hagámoslo y edítelo: siga ese camino en la tarea de los padres.
Copie e inserte el archivo en la carpeta con el tema del niño.(con la misma estructura de subcarpeta)
Ábrelo e inserte lo siguiente después de "<? Php": if (is_active_sidebar ('pie-widget-exame')): dynamic_sidebar ('pie-widget-exame'); Terminara si; Entonces, todo el archivo debería verse así ahora: “> Guardar y cerrar.

La línea “if (is_active_sidebar (‘pie-widget-exame”)): “Requiere que se asegure de que el ejemplo de widget-widget esté activo. Si es entonces Dynamic_sideBar (‘Footer-widget-exame’); La línea lo mostrará. Por lo tanto, “endif” cierra esa “pregunta”. Listo, ahora tienes una ranura de widget. Ahora puede ir al menú “Personalización” y elegirlo.

Crear un tema para niños de WordPress: ganchos de tema Un gancho es prácticamente una función conectada que se adhiere a la función del tema original. Ya sea que agregue una nueva función de un tema es lo que desea o para cambiar uno que ya exista, estas funciones de WordPress pueden ayudarlo a este respecto. En lugar de crear algunos archivos PHP diferentes, puede finalizar el código en una función y puede ponerlo en Functions.php. De esta manera, puede tener menos archivos inútiles en la carpeta de temas infantiles. Esto es lo que llamamos un gancho de acción. Aquí hay un pequeño ejemplo: función action_hook_example () {echo “como se ve en fixrunner.com”; } add_action (‘wp_footer’, ‘action_hook_example’); Si desea seguir, copie esto en funciones.php. Entonces, ¿cuál es el resultado de este código? Esta función imprimirá el texto que se lee “como se ve en Fixunner.com” en el sótano. Ahora explicemos cómo puede usar este método para sus propósitos. Para hacer un gancho de acción, primero debe: crear una función usando el comando “function ()” (el nuestro se llama “Action_hook_example”).
Programe que haga lo que necesite en consecuencia. Nuestra función utiliza un comando “echo”, que imprime (devuelve) el texto.
Conéctelo a otra función (en nuestro ejemplo, esto es “WP_Footer”) con add_action o comandos similares.
Finalmente, guarde el archivo y pruebe.
También puede cambiar una función existente usando un gancho de filtro. Este es definitivamente un gran dispositivo en el flujo de trabajo de cualquier desarrollador de WordPress. Puede hacer esto usando el comando “add_filter ()”. De esta manera, obtienes una función de WordPress personalizada de una antigua. Consejo de bonificación del día: si desea que sus sitios de WordPress usen una plantilla de página personalizada o desea crear su aspecto rápidamente, use un generador de página de WordPress como Visual Composer. Un constructor de sitios web puede acelerar sorprendentemente su trabajo. Conclusión En esta guía de paso por paso, expliqué qué es un tema infantil de WordPress, cómo crearlo y cuándo debe usarlo primero. Con la ayuda del tema de los niños, personalizar los temas de WordPress es mucho más simple y seguro. Además, como dije, si usa un alojamiento de WordPress más barato para sus sitios de WordPress, intente hacer todo de antemano. Por otro lado, los hosts web (o proveedores de alojamiento de VPS) como WP Engine son una excelente opción si elige hacer todo en línea. Ahora que sabes todo esto, ¡vuelve loco con tus diseños! Finalmente, para ver más tutoriales de WordPress o publicaciones de WordPress, consulte el resto de nuestro blog. Más recursos: cómo incorporar medios con WordPress
Temas de WordPress más rápidos de 2020
Cómo editar el texto en sus publicaciones o páginas de WordPress