Share
En la última entrega de esta serie, creamos nuestro marco temático, lo que equivale a una plantilla bastante simple, donde agregamos algunas funciones que usamos comúnmente. Hay dos formas en que podemos usar nuestro marco ahora: como un tema secundario y como un auténtico texto que simplemente copiamos y editamos. Hoy vamos a utilizar nuestro marco como tema infantil..
He realizado un tutorial sobre la creación de un tema infantil simple, pero esta vez es un poco diferente porque no tenemos un tema completo para trabajar. Tenemos casi lo mínimo en cuanto a estilos y funcionalidad. Así que con eso en mente, avancemos.
Nota: Entonces, este tutorial no es demasiado largo, puedo suponer en algunos puntos que estás familiarizado con la creación de temas secundarios para WordPress.
Lo primero que debemos hacer es crear la carpeta en nuestro directorio / themes /. He llamado el mío wp-boilerplate-child (muy creativo, lo sé); puedes nombrar el tuyo cualquier cosa Como siempre, comenzaremos con nuestro archivo style.css y la definición del tema:
/ * Nombre del tema: URI del tema del niño del marco: http: //example.com/ Descripción: Tema del niño para el tema de su autor del marco: URI del autor del nombre: http: //your-site.com/ Plantilla: wp-boilerplate Versión: 1.0 * /
Recuerde que con los temas secundarios, necesitamos esa línea adicional para definir qué directorio alberga el tema principal. Una vez que se establece eso, WordPress sabe de dónde agarrar los archivos del tema principal. Lo siguiente que debemos hacer es importar el CSS desde nuestro marco:
Accentsconagua
@import url ("… /wp-boilerplate/style.css"); Este es un paso necesario si no desea comenzar desde cero, ya que sobreescribirá el CSS del tema principal. También tenga en cuenta que esto se cargará después de que se cargue todo el CSS de nuestro tema, incluido ie.css.
Ahora, si recuerdas, nuestro marco sin ninguna modificación se ve así:
Algo a tener en cuenta aquí es que dado que este es nuestro marco, estamos mucho más familiarizados con él que con otros marcos; Lo hemos construido para nuestros propios estilos de codificación personal. Si bien esto puede parecer similar al otro tutorial sobre temas secundarios que hice, una gran diferencia es que el tema principal es nuestro propio marco, creado según nuestras propias necesidades..
Vamos a agregarle algo de estilo, comenzando con algunos CSS básicos. Agregue estas líneas de código al CSS de su tema infantil:
cuerpo fondo: # 000000; a, a: visitó color: # a2a085; decoración de texto: ninguna; #container background: #FFFFFF;
Esto establece algunas bases para la transformación de nuestro tema, que tendrá lugar principalmente en el CSS. Hemos cambiado algunos valores predeterminados en los colores de cuerpo, enlace y contenedor. Ahora vamos a hacer nuestro encabezado un poco más atractivo.
encabezado font-size: 1.4em; fondo: # D1CFB5; header h1 padding: 10px; encabezado h1 a, encabezado a: visitado color: # 69652B; nav fondo: # ABA0B6; tamaño de letra: 1.5em; relleno: 3px; borde inferior: 1px sólido # 221F49; borde superior: 1px sólido # 221F49; nav a, nav a: visitó color: # 221F49; nav a: hover color: # 4C4B55;
Al igual que con nuestros estilos base, simplemente hemos sobrescrito el encabezado y los estilos de navegación desde el marco. También he seguido adelante y he agregado algunos otros estilos para nuestro tema infantil, que se incluyen en este tutorial si desea realizar una Mira. Lo que terminamos con esto fue:
Ahora veamos cómo crear una nueva plantilla de diseño, que usaremos estrictamente en nuestro tema secundario.
La mayor parte de nuestro tema ya está resuelto gracias a nuestro marco, pero eso no significa que no podamos agregarlo. En esta sección siguiente, crearemos una página de inicio personalizada con plantillas de página y una pequeña función mágica. Vamos a crear una nueva página llamada page-home.php y añade esto:
Lee el resto de esta página "'); ?>
Tenemos una página bastante estándar aquí con el nombre de la plantilla, el bucle y las mismas etiquetas de plantilla que usamos en la página de nuestro marco. Sin embargo, también agregué un área de widgets justo debajo del contenido para que podamos agregar lo que queramos a la página de inicio. Ahora tenemos que definir esa área del widget en nuestro tema a través de nuestro archivo de funciones.
Recuerde que el archivo de funciones de nuestro hijo se carga antes del archivo de funciones de los padres.
Crear un funciones.php archiva en nuestro tema hijo y agrega esto:
__ ('Widgets de la página de inicio', 'widgets de inicio'), 'id' => 'home-widget-area', 'description' => __ ('El área de widget de inicio', 'wpbp'), 'before_widget' = > '',' after_widget '=> "", 'before_title' => '',' after_title '=>'
',)); ?> ¡Con esto ahora podemos agregar widgets a nuestra página de inicio! He añadido un feed RSS. Antes de aplicar cualquier CSS se ve así:
Usted, por supuesto, puede diseñar esta fuente como desee..
Podríamos hacer mucho más aquí usando la extensa API de WordPress. Podemos usar funciones para cambiar la plantilla de comentarios, crear un archivo de barra lateral en blanco para, en esencia, eliminar la barra lateral o reemplazar completamente el pie de página. Las posibilidades son infinitas porque nuestro marco es muy ligero / simple..
Una de las cosas realmente buenas de usar nuestro propio marco de trabajo es que podemos mejorarlo constantemente. De hecho, uso esto más como plantilla que copio y modifico (tutorial próximamente), por lo que cambiarlo y usarlo como tema secundario me ha mostrado un par de mejoras que podría hacer en el marco..
get_sidebar ('barra lateral diferente')).funciones.php Archivo ya que los uso regularmente de todos modos. Una de las clases es un procesador de formularios, por lo que no necesitaré un complemento para hacer formularios de correo electrónico simples.Recuerde que tiene mucho espacio para la personalización personal a menos que planee lanzar su marco al público.
Aquí hicimos algunas personalizaciones básicas de nuestro marco a través de nuestro tema hijo. Esta técnica es especialmente útil si está manteniendo una estructura similar a su sitio y solo desea realizar personalizaciones a través de CSS (piense en CSS Zen Garden). También es útil agregar nuevas plantillas de página y funciones personalizadas sobre lo que ya está allí. Sin embargo, ya que estamos usando un framework / boiler básico, si estamos cambiando completamente la estructura del tema, también podríamos crear un tema desde cero si estamos usando un tema secundario, ya que probablemente reemplazaremos la mayoría de archivos de plantilla. La próxima vez voy a copiar y pegar nuestra placa y hacer modificaciones al tema en sí para sacar el máximo provecho del código que ya hemos presentado..
