Haz un tema con huesos: terminando

Estamos usando un tema de inicio para construir un nuevo sitio.

Vamos a seguir directamente el tutorial anterior de esta serie. Así que saltemos a eso:

Paso 13: Configuración de fuentes de texto para el encabezado y el cuerpo

Usaremos dos fuentes de la biblioteca de fuentes de Google: Arvo y PT Sans. Pon este código en el archivo functions.php. Este código extraerá el código CSS que contiene las propiedades del font-face.

function wptuts_googlefonts_styles() {
	// Enqueue the font stylesheets like this:
	wp_enqueue_style( 'googlefonts-arvo', 'http://fonts.googleapis.com/css?family=Arvo' );
	wp_enqueue_style( 'googlefonts-pt-sans', 'http://fonts.googleapis.com/css?family=PT+Sans' );
}  
add_action( 'wp_enqueue_scripts', 'wptuts_googlefonts_styles' );

Establezcamos Arvo para los encabezados (base.less) y PT Sans para el cuerpo del texto. Podemos configurar la fuente con font-family. También definimos serif y sans-serif, lo que significa que obtendremos una fuente predeterminada si no se puede cargar la fuente personalizada.

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
	font-family: 'Arvo', serif;
	...
}

...

body {
	font-family: 'PT Sans', sans-serif;
	...
}

Paso 14: H1, footer, header

El tamaño de la fuente será 4em. Tenemos que modificar footer.php para agregar contenido y el archivo base.less para estilos. Establece el fondo (con background), el borde inferior (con border-bottom) y el relleno (10px superior, 0px para la izquierda y derecha, y 15px para la parte inferior). Para el encabezado, un gradiente de ruido redimensionado 10 veces será bueno, guardado como un archivo (kotkoda_header_bg.gif) y tiene que estar en la carpeta bones/library/images. El código CSS entra en el archivo base.less. Los gráficos se repetirán horizontalmente (repeat-x) y comenzarán en la parte superior izquierda (0 0).

h1, .h1 {
	font-size: 4em; /*2.5em*/
	line-height: 1.333em;
}

<p class="attribution">&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?>.
This page is protected by the <em>XXYY government and army</em>.
Read everything carefully.
You can reach us by mail at <strong>kukori @ kotkoda.com</strong>.
</p>

.footer {
	clear: both;
	background: #f6f6f6;
	border-bottom: 5px solid #FFD400;
	padding: 10px 0 15px;
}

.header {
	background: url(../images/kotkoda_header_bg.gif) 0 0 repeat-x;
}

Así es como se ve después de modificar el pie de página.

Así es como se ve después de agregar los gráficos.

Paso 15: Favicon y título de la página

Podemos establecer un nuevo favicon de 16x16 en el archivo header.php. En la parte href establecemos la ruta del icono, get_template_directory_uri nos dará la URL del directorio principal de la plantilla. Para el título de la página, reemplaza el código original con este y configura la descripción en la interfaz de administración. Este código PHP se hará eco del campo de descripción del blog.

<link rel="shortcut icon" href="<?php echo get_template_directory_uri(); ?>/library/images/kotkoda_favicon.ico">
...
<title><?php echo get_bloginfo( 'description', 'display' ); ?></title>

Se verá así después de agregar el icono.

Paso 16: Menú de página

La navegación principal de las páginas también tendrá un estilo minimalista. Con display configurada en inline, el aspecto será horizontal y el borde izquierdo será blanco (border-left).

.menu {
	border-left: 1px solid @white;
	padding-left: 1em;
}

.menu ul {
	padding: 1em 0 1em;
	height: 1.5em;
}

.menu ul li {
	display: inline;
	margin-right: 1em;
}

La nueva apariencia del menú principal.

Paso 17: Estilos de comentarios

Los comentarios tendrán un aspecto más simple. Los estilos llamados odd y even deben estar vacíos (o comentados) y el elemento li obtiene un border-left. El enlace de texto de la fecha correcta también será blanco, coloreémoslo a @white. El botón de respuesta también tendrá un nuevo estilo. Tenemos que configurar el color, el color de fondo y las opacidades (se borran).

.commentlist {

	li {
		position: relative;
		clear: both;
		overflow: hidden;
		list-style-type: none;
		margin-bottom: 1.5em;
		padding: 0.7335em 10px;
		border-left: 1px solid @white;
		
		...
		
		/* general comment classes */
		.alt {}
		.odd {
			/*background: #eee;*/
		}
		.even {
			/*background: #fefefe;*/
		}

...
	/* vcard */
	.vcard {
		margin-left: 50px;

		cite.fn {
			font-weight: 700;
			font-style: normal;

			a.url {}

		}

		time {
			float: right;

			a {
				color: @white;
			...

...
	/* comment reply link */
	.comment-reply-link {
		text-decoration: none;
		float: right;
		background: @white;
		padding: 3px 5px;
		color: #999;
		margin-bottom: 10px;
		font-weight: 700;
		font-size: 0.9em;

		&:hover,
		&:focus {
			color: @kotkoda-grey;
		}

El nuevo look.

Paso 18: Cuadro de comentarios y botón

No necesitamos el borde (border: 0) y el fondo debe ser @white (base.less). Hay muchos estilos elegantes que no necesitamos (transition, rounded, gradient), por lo que tenemos que cambiar los bordes y fondos, y eliminar la redondez y la transición. Esto entra en nuestro archivo mixins.less.

textarea {
	padding: 3px 6px;
	background: @white; /*#efefef;*/
	border: 0; /*2px solid #cecece;*/
}

.button, .button:visited {
	/*border: 1px solid darken(@kotkoda-grey, 13%);
	border-top-color: darken(@kotkoda-grey, 7%);
	border-left-color: darken(@kotkoda-grey, 7%);*/
	border: 0;
	padding: 4px 12px;
	color: #999;
	display: inline-block;
	font-size: 13px;
	font-weight: bold;
	text-decoration: none;
	/*text-shadow: 0 1px rgba(0,0,0, .75);*/
	cursor: pointer;
	margin-bottom: 20px;
	line-height: 21px;
	/*.transition();*/
	/*.rounded(4px);*/
	/*.css-gradient(#999,darken(#999, 5%));*/

	&:hover, &:focus {
		color: @kotkoda-grey;
	  	/*border: 1px solid darken(@kotkoda-grey, 13%);
	  	border-top-color: darken(@kotkoda-grey, 20%);
	 	border-left-color: darken(@kotkoda-grey, 20%);*/
		border: 0;
		/*.css-gradient(darken(#444, 5%),darken(#444, 10%));*/
	}
	
	&:active {
		/*.css-gradient(darken(@kotkoda-grey, 5%),@kotkoda-grey);*/
		color: @kotkoda-grey;
	}	
}

El cuidado del peinado.

Paso 19: Cuadro de información

Cambiemos el fondo del cuadro de información a amarillo claro, que es @alert-yellow (en mixins.less). No necesitamos un borde, así que ajústalo a cero.

.info { 
	/*border-color: darken(@alert-blue, 5%); */
	border: 0;
	background: @alert-yellow;
}

Paso 20: Captura de pantalla del administrador del tema

El último paso es eliminar la captura de pantalla predeterminada y reemplazarla con la de Kotkoda que hicimos.

Finalizado

Así es como se ve el tema terminado en 600 píxeles de ancho. En los próximos tutoriales, limpiaremos el tema de las partes innecesarias y luego lo prepararemos para enviarlo a ThemeForest.