Ismael Benito

Soy doctorando en ingeniería y profe associado en @UniBarcelona. Como buen catalán hago cosas, concretamente en @recercaprecaria, @EUiAUniversitat y @cjbcn.

@ismansiete

1.926

Tweets

867

Siguiendo

497

Seguidores

el Hombre Orquesta

Blog Personal y nada musical de Isman Siete (Ismael Benito)

Construyendo el Blog (I): Empezando un tema desde cero

Código

2 Agosto, 2015

Después del parón toca empezar en serio la cosa… empecemos con algo freak. Toca entrada de echar una tarde de código, como apunte en la anterior entrada. Intentaré que cada tipo de entrada se mantenga al menos una vez a la semana. Por lo tanto, los fines de semana estarán enfocados a sacar cosas de código adelante.

Previos

WordPress: lo he escogido como gestor de contenido, ya que tengo mucha experiencia como usuario medio-alto. WordPress está basado principalmente en PHP usando MySQL como base de datos. Tiene una estructura interna compleja, que está plenamente documentada en el Códex de WordPress.

Bootstrap: usaré el popular marco de desarrollo para CSS, que ya tiene un poco de JavaScript, del que sinceramente voy cojo. Esta librería lanzada por Twitter hace pocos años permite entre otras cosas una adaptación sencilla a formato móbil si hacemos un uso adecuado.

PrettifyUn poco de CSS y JavaScript de la mano de Google para poder destacar código dentro de las entradas.

Githubtengo un repositorio creado en mi cuenta de Github para el proyecto, así que actualizaré todo aquí: elhombreorquesta.net.

Con esto ya podemos empezar a desarollar el tema, vamos a los puntos básicos de un tema de WordPress, un archivo de estilo style.css y un archivo ejecutable para generar la página index.php.

style.css

La hoja de estilos básica contiene la información que WordPress mostrará al usuario en el menú de configuración de temas, sigue la siguiente estructura:

/*
Theme Name: elhombreorquesta.net
Theme URI: www.elhombreorquesta.net
Description: Tema para la web El Hombre Orquesta
Author: Isman Siete (Ismael Benito)
Author URI: www.elhombreorquesta.net
Template: elhombreorquesta.net
Version: 1.0.0
*/

A continuación se añade el código que deseemos para dar estilo a nuestra página. Teniendo en cuenta que tenemos como base Bootstrap y Prettify la mayoría de código aquí escrito vendrá dirigido a modificar o extender estos marcos.

index.php

 

El archivo ejecutable en php propiciará el código HTML necesario para que se visualice el bloc correctamente. Teniendo en cuenta que ejecutamos este archivo dentro de WordPress tenemos a nuestra disposición todo el potencial de funciones que vienen definidas. Un index.php muy simple sería el siguiente:

<html>
  <head>
   <link href="<?php echo get_template_directory_uri(); ?>/style.css" rel="stylesheet">
  </head>
  <body>
   <h1><?php bloginfo( 'name' ); ?></h1>
  </body>
</html>

Donde se han usado las funciones definidas por WP para buscar la ruta del servidor hasta la hoja de estilos y también para obtener el nombre del Blog configurado en el panel de control.

 

Una de las funciones más interesantes que proporciona WordPress es “el Bucle” (the Loop), que nos permite iterar las entradas del blog y además, contiene interesantes filtros y funciones ejecutables dentro del mismo. Aquí el ejemplo que corre en la distribución actual del bloc:

<?php /* Start the Loop */ ?>
	<?php  while ( have_posts() ) : the_post();
		$Path = get_permalink();
		$Title = get_the_title();
		echo "<a href = '$Path'><h3> $Title </h3></a>";
		$Date = get_the_date();
		echo "<h5> $Date </h5>";
		the_content();
		
		if (is_single()): 
					
			echo "<div class='col-lg-5'>";
			previous_post_link();
			echo "</div>";
			echo "<div class='col-lg-2'></div>";
			echo "<div class='col-lg-5'>";
			next_post_link();
			echo "</div>";
				
		endif;
					
	endwhile;
	?>

Las funciones que se implementan son muy variadas permiten trabajar tanto si nos encontramos delante de la portada como de una entrada sola. Tiene mucho potencial. Como ya he apuntado tenéis la versión completa aquí.

Creo que es suficiente para una primera versión del tema. La semana que integraré categorías si todo va bien para ordenar la orquesta.

  

Ismael Benito Altamirano.
Basado en Wordpress y Bootstrap.