Este post hablará de algunas de las partes de las que se compone el header.php. Se centra en el DOCTYPE, los elementos meta y title. El header.php es el primer archivo que llama WordPress cuando renderiza cualquier tipo de página.
DOCTYPE
Indica al navegador que código se va a encontrar. Es probable que encontréis este si está XHTML:
|
1 2 |
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
Que vendrá seguido de un <html> para indicar los atributos del lenguaje:
|
1 |
<html xmlns=http://www.w3.org/1999/xhtml <?php language_attributes(); ?>> |
La función language_attributes() devolverá la dirección del texto y el lenguaje de la página. Sin embargo el doctype puede ser en HTML5 lo cual se reduce bastante
|
1 |
<!DOCTYPE html> |
Elementos META
Después del <html> está el elemento <head> que proporciona información al navegador que necesita para mostrar la página. Dentro del <head> hay elementos meta que son como la información sobre información. Por ejemplo, hemos indicado antes que la página sería en HTML, eso es información. Con los meta informamos más sobre HTML:
|
1 2 3 |
<meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?> "/> <meta charset="<?php bloginfo('charset'); ?>"> |
La función bloginfo() devuelve información de la web. En este caso devuelve el tipo de contenido que sería text/html y el conjunto de caracteres que usará la página como por ejemplo UTF-8.
Existen otros meta como description y keywords que permiten dar una descripción del sitio. Por ejemplo, description tendría «portfolio de bodas» y keywords contendría palabras clave del sitio como fotos, bodas, matrimonio etc. Hay que tener en cuenta que keywords ya no tiene una relevancia tan importante en el SEO.
El title
Se declara dentro del <head> muestra su contenido en la pestaña del navegador. Es usado como vínculo de título por los motores de búsqueda.
Lo ideal es que title muestre el título de todas y cada una de las páginas y posts de la web y además tenga el mejor formato para el SEO. Para ello se escribe el siguiente código
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<title> <?php if (function_exists('is_tag') && is_tag()) { //Si has seleccionado una etiqueta single_tag_title('Archivo del tag '); echo ' - '; } elseif (is_archive()) { //En caso de buscar en un archivo wp_title(''); echo ' Archivo - '; } elseif (is_search()){ //Si ha realizado una búsqueda echo 'Búsqueda para '.wp_specialchars($s).' - '; } elseif (!(is_404()) && (is_single()) || (is_page())) { //Si es una página o un post wp_title(''); echo ' - '; } elseif (is_404()){ //Si no ha sido encontrada la página echo 'Página no encontrada - '; } //A continuación se añade el nombre de la web if (is_home()) { bloginfo('name'); echo ' - '; bloginfo('description'); } else { bloginfo('name'); } if ($paged > 1) { echo '- page '. $paged; } ?> </title> |
Y hasta aquí el tutorial de hoy. El próximo post hablaré de los componentes restantes. Pasad buen finde 🙂