Temas (VI) crear un tema, cabecera y pie dinámicos

Posted by On noviembre 15, 2015 2 Comments

Seguimos la creación de nuestro tema básico para poder adaptarlo a nuestros proyectos, y en esta entrada vamos a comenzar a hacer la cabecera y pie dinámicos, de forma que ya comiencen a tomar información directamente de nuestro WordPress… comencemos que aunque sencillo hay mucho que explicar

La cabecera dinámica

En la cabecera vamos a utilizar algunas funciones que nos permiten conectar algunos de los datos que ya trae configurados WordPress o que podemos modificar desde el panel de control.

Para ello vamos a utilizar las siguientes funciones:

  • language_attributes() Toma el valor de configuración de nuestra instalación de WordPress y lo introduce en el html
  • wp_title() Recoge el título de nuestro sitio mostrandolo en la pestaña además de añadir separadores y marcar donde queremos que aparezcan.
  • bloginfo() Con esta función podemos ir recuperando información útil de nuestro blog, como el nombre, la descripción, el conjunto de caracteres…

Para entenderlo mejor vamos a ver como quedaría nuestro archivo cabecera.php y explicaremos los cambios posteriormente:

<!DOCTYPE html>
<html <?php language_attributes();?>>
<head>
	<meta charset="<?php bloginfo('charset')?>">
	<title><?php wp_title(' | ', true, 'right');?><?php bloginfo('name')?></title>
	<?php wp_head();?>
</head>
<body>
<header>
	<img src="http://www.creabytes.com/media/servicios-logo.png" atl="logo">
        <h3><?php bloginfo('name');?></h3>
        <h4><?php bloginfo('description');?></h4>
</header>
<nav>
	aquí viene el navegador
</nav>
<main>
<section id="cuerpo">
  • Línea 2: Aquí es donde introducimos la función language_attributes() de ese modo la plantilla se autoconfigura dependiendo del idioma en el que esté configurada
  • Línea 4: Aquí es donde le decimos el conjunto de caracteres que debe usar, aunque generalmente es utf-8 de esta forma es el propio gestor quien le dice a la plantilla que juego utilizar por medio de la función bloginfo(‘charset’)
  • Línea 5: aquí hemos realizado dos acciones:
    • En la primera hemos usado wp_title(‘ | ‘, true, ‘right’) donde ponemos como separador una línea vertical, luego le decimos true para que se imprima y le decimos a que lugar debe de ponerse.
    • Volvemos a utilizar la función bloginfo(‘name’), para tomar el nombre del sitio.
  • Línea 11: Vamos a mostrar el nombre del blog dentro de nuestra etiqueta header de html5, para ello usamos la función bloginfo(‘name’)
  • Línea 12: Aquí vamos a tomar la descripción corta del sitio y la vamos a mostrar en en la cabecera por medio de la función bloginfo(‘description’)

Podemos observar que la función bloginfo() sirve para recoger datos de nuestro sitio según el argumento que le introduzcamos, por ello podemos ver en el codex de wordpress mucha más información sobre esta función.

El footer dinámico

Ahora vamos a introducir un poco de dinamismo en el footer.php, para ello lo modificamos dejándolo de la siguiente forma:

	</main>
        <footer>
		&copy; <?= date('Y');?> <?php bloginfo('name');?>
	</footer>
	<?php wp_footer(); ?>
</body>
</html>

Aquí solo hemos modificado la línea 3 donde hemos puesto la codificación del copyright, seguido del año y finalmente la introducción del nombre del sitio, ya que en principio no requerimos de nada más.

Con esto ya hemos hecho una cabecera y pie dinámicos para nuestros sitio wordpress y hemos tomado por primera vez valores del mismo para mostrarlos por pantalla, poco a poco nuestro sitio ya irá tomando forma y mostrando muchos datos adicionales.