Share
La última vez que te dejé, observamos algunos principios de diseño, exploramos otros marcos y llegamos a la conclusión inevitable de que construiríamos los nuestros. En este tutorial, vamos a cubrir los pasos que tomé para crear lo que llamé mi WordPress Boilerplate, observando de cerca el CSS, functions.php y seleccionar páginas de plantillas..
Lo importante a tener en cuenta a lo largo de todo el desarrollo es que queremos mantener esto lo suficientemente generalizado para poder adoptarlo o desarrollarlo en futuros temas; También me propuse mi objetivo personal hacer que esto fuera lo suficientemente bueno como para estar de acuerdo con su tema básico. Recordemos que de aquí en adelante..
Lo primero que tenemos que hacer es organizar el CSS. Hay 2 componentes principales para el CSS en mi WordPress Boilerplate: style.css, que se requiere, y la carpeta / css /, que incluye todo el CSS para el marco. En style.css encontrarás dos secciones: la definición del tema y las llamadas a mi CSS real. El archivo style.css completo se ve así:
Accentsconagua
/ * Nombre del tema: WordPress 3.0 Tema de placa de caldera URI: http://casabona.org/ Descripción: Un tema de placa de caldera para WP 3.0. ¡Ahora con más HTML5! Versión: 1.5 Autor: Joe Casabona Autor URI: http://www.casabona.org * / @import url ("css / reset.css"); @import url ("css / master.css"); @import url ("css / ie.css"); Después de la definición del tema, ves tres @importar líneas. Aquí es donde va todo el trabajo pesado para el CSS. reset.css es obviamente el reset de CSS. En realidad, recientemente cambié esto para usar normalize.css por varias razones. La primera razón es que, en lugar de restablecer todo a un estilo predeterminado sin formato, crea los estilos que se esperan de un navegador predeterminado. Por ejemplo, en un reinicio estándar, Ya no está en negrita. En normalize.css, es. La segunda razón es que tiene estilos predeterminados para elementos HTML5, que son necesarios para los navegadores más antiguos que no admiten los nuevos.
Nota: Yo uso HTML5 en este tema. Funciona en Firefox, Chrome, Safari e IE7-9.
Después de llamar a reset.css, llamo a mi hoja de estilo principal, master.css (denominación de convenciones gracias a Dan Cederholm de SimpleBits). ¡Este es el quid del asunto! Todos mis estilos predeterminados posteriores al restablecimiento estarán aquí. No pegaré todo el CSS aquí, pero he incluido los archivos para que los veas. Al crear el CSS, tuve en cuenta los estilos que generalmente permanecen igual para mí de un sitio a otro; cosas como el ancho del contenedor general, mis estilos de navegación, cómo organizo mi barra lateral, etc. También generalmente uso el relleno / márgenes en múltiplos de 15 para mi párrafo y elementos de la lista, así que también tengo algunas definiciones básicas.
También incluyo estilos predeterminados para algunas clases comunes de WordPress, incluidas las generadas por el editor de WordPress. Son: .navegación, .post, .postmetadata, ol.commentlist, ol.commentlist li, ol.commentlist li .vcard, ol.commentlist li .vcard img, form # commentform, form # commentform p label, form # commentform input, form # commentform textarea, form # commentform textarea, form # commentform input [type = "submit"], img.centered, .alignright, .alignleft, .aligncenter, div.aligncenter, .wp-caption, .wp-caption img, .wp leyenda p.wp-leyenda-texto.
Lo último que incluyo en master.css es una clase que hará que los divs se "compensen". Es decir, eliminará la necesidad de un .clearfix div (de nuevo, gracias a Dan Cederholm por esto).
/ * auto-clear floats * / .group: after content: "."; bloqueo de pantalla; altura: 0; Limpia los dos; visibilidad: oculta;
Después de llamar a master.css, invoco la pieza final de nuestro rompecabezas, es decir ,.css. Aquí es donde irán todos y cada uno de los arreglos de IE. En este momento, es solo una solución para .group y una solución PNG. Tenga en cuenta que el orden de importación es muy importante aquí, ya que algunas cosas pueden anularse, y cambiar el orden puede alterar los estilos que hemos definido.
Tan importante como las cosas de CSS es el archivo functions.php. Aquí es donde agregaremos las funciones generales que planeamos usar en todo el tema, así como las definiciones de las barras laterales, los menús y más. Empiezo esto con dos líneas:
define ('TEMPPATH', get_bloginfo ('stylesheet_directory')); define ('IMAGES', TEMPPATH. "/ images"); Estas son dos constantes que uso con bastante frecuencia en todo el tema. El primero es el camino de la plantilla; Esto es bueno para hacer referencia a archivos específicos del tema. Utilicé 'stylesheet_directory' en lugar de 'template_directory' porque si usamos esto como un tema principal (próximamente habrá un tutorial), 'template_directory' tomará la ruta incorrecta (es decir, en lugar de la ruta del niño). La segunda línea realmente usa TEMPPATH para crear una ruta al directorio / images /, que también usaremos con mucha frecuencia, ya sea en este tema o en temas secundarios.
Después de estas dos líneas, agrego soporte para menús dinámicos y 2 barras laterales widgetizadas; una es la barra lateral principal y la otra es una segunda barra lateral "por si acaso". Generalmente lo usaré en el pie de página de mi tema. Finalmente, creé otras dos funciones que encontré que estaba usando regularmente:
función print_post_nav () ?>No se han encontrado publicaciones. Intenta una búsqueda diferente?
El primero imprime la navegación de la publicación y debe utilizarse fuera del bucle. Eso significa que podemos usarlo en cualquier página que enumere las publicaciones (índice, búsqueda y cualquier plantilla de tipo de publicación personalizada). La segunda función crea el área "Publicaciones no encontradas", que estaba usando en casi todas las páginas de plantillas.
Por supuesto, no hay límite para la cantidad de funciones que cree aquí. Estos eran solo los que usaba frecuentemente.
Páginas de plantillas
Lo siguiente son las páginas de plantillas. Veremos 4 páginas específicas: header.php, footer.php, single.php y page.php. Los otros son básicamente derivados de la página o plantillas individuales..
Encabezado y pie de página
A continuación se encuentra nuestro archivo header.php completo:
<?php bloginfo('name'); ?> | <?php wp_title(); ?> ">
Usted puede ver que aparte de nuestro habitual Declaraciones, no hay demasiado. Incluyo
para asegurarnos de que nuestro tema esté preparado para HTML5, y luego en el cuerpo, cree un encabezado básico con el nombre y la navegación del sitio, llame a la barra lateral e inicie el área de "contenido", todo ello envuelto en el #container div predefinido. Puede ver que la forma en que lo hago es coherente con la forma en que se define mi CSS (por ejemplo, la barra lateral, que flota a la derecha, está arriba del área de contenido principal).Nota: No estoy hablando de la plantilla sidebar.php porque es lo mismo que cualquier barra lateral estándar: verifique si hay un área de widgets definida; Si no, imprime algunos widgets por defecto..
Lo mismo ocurre con nuestro pie de página:
Imprimo dos saltos de línea, principalmente para hacer que el código se vea bonito, finalice la división de contenido y luego comience en el pie de página. Incluyo la barra lateral secundaria en el pie de página, ya que esto es algo que hago a menudo, luego tengo algo de información general sobre derechos de autor y redondeamos el tema cerrando las etiquetas abiertas. Nuevamente, trato de no hacer demasiado con el pie de página, ya que este es un marco, pero proporciono algunas opciones para agregar información al pie de página si es necesario..
Única página
Estos archivos también son bastante básicos. Traté de eliminar la mayoría de las cosas que no son necesarias y dejar la información que esperaría ver en cada una. single.php debe parecer familiar:
>Lee el resto de esta entrada "'); ?>Publicado en a | Categoría | Comentar Comentarios están actualmente cerrados | Comentar Ambos comentarios y pings están actualmente cerrados. |
Tenemos el encabezado y el pie de página, y nuestro bucle. Mantuve las clases que son comunes entre la mayoría de los temas de WordPress para que las personas que usan esto puedan definir esas clases en el CSS sin tener que cambiar la plantilla single.php. También incluyo los metadatos de publicación estándar y un área de comentarios. Note que no uso la función de navegación posterior que escribo en functions.php. Eso es porque está dentro del Loop, y esa función se comportaría de manera impredecible.
La plantilla page.php es un poco más corta:
Lee el resto de esta página "'); ?> 'Páginas: ',' después de '=>'
',' next_or_number '=>' number ')); ?>De nuevo, incluyo solo lo que se necesita. No hay clases extra o información. Las páginas de los sitios web se centran en el contenido, por lo que traté de optimizar esta plantilla lo más posible..
Otras plantillas
Obviamente no puedo cubrir cada página de plantilla aquí; Te sugiero que compruebes la fuente incluida. Para cada plantilla, intenté cortar lo que no estaba usando y, en algunos casos, dejé las plantillas (como la información predeterminada de WordPress). Ya que todos codificamos de manera diferente, la forma en que agrego las cosas puede que no le convenga mejor, pero traté de hacer esto lo más general posible..
Aquí es cómo se ve el tema fuera de la caja:
El tema de WordPress Boilerplate
Conclusión
Aquí hay una descripción general con algunos ejemplos de cómo crear un marco de tema. Mirando mi código de muestra, puedes ver que no intenté hacer demasiado con un solo archivo de plantilla. Si voy a agregar algo a este tema, estará en el archivo functions.php porque los archivos de plantilla deberían dejarse básicos, especialmente si solo vamos a sobrescribirlos al crear un tema secundario. Hablando de eso, eso es lo que haremos la próxima vez, así que estad atentos.!
