El header.php - ¿Qué debe ir en él y qué no?

En este tutorial, hablemos de la header.php, Un archivo esencial para cualquier tema de WordPress. Le mostraré un buen ejemplo de archivo de encabezado y le daré consejos sobre qué debe incluir y qué no..

Paso 1: Introducción

Lo primero que necesitas saber sobre el header.php archivo es su función.

Pero, tenemos más de un logotipo y menú en este archivo, también tenemos la cabeza Etiqueta y muchas otras etiquetas, como: enlazar, guión, meta y título.

He escrito un ejemplo header.php archivo, he intentado crear un archivo lo más completo posible, pero siéntase libre de comentar en este tutorial dando consejos sobre el archivo.

Recuerde que su encabezado es todo el contenido que se muestra en todas las páginas de su sitio. Por ejemplo, el logotipo y el menú se muestran en todas las páginas, de modo que ... ambos se agregarán a la header.php

Si un elemento se muestra solo en una página específica, debe volver a pensar si este elemento realmente debe estar dentro de su encabezado.

Trabajemos y espero que os guste.!

Paso 2: El Código Final

Aquí puede obtener el código final para usar en su tema. Lee los otros pasos para saber exactamente qué hace cada línea..

Primero, pega estas líneas en la parte superior de tu funciones.php expediente: (Recuerda que necesitas modificar las rutas a tus archivos CSS y JavaScript)

 define ("THEME_DIR", get_template_directory_uri ()); / * --- ELIMINAR EL TAG META DEL GENERADOR --- * / remove_action ('wp_head', 'wp_generator'); // Función de ESTILOS DE RECUPERACIÓN enqueue_styles () / ** REGISTER css / screen.css ** / wp_register_style ('screen-style', THEME_DIR. '/Css_path/screen.css', array (), '1', 'all '); wp_enqueue_style ('estilo de pantalla');  add_action ('wp_enqueue_scripts', 'enqueue_styles'); // Función SCORE SCRIPTS enqueue_scripts () / ** REGISTER HTML5 Shim ** / wp_register_script ('html5-shim', 'http://html5shim.googlecode.com/svn/trunk/html5.js', array ('jquery '),' 1 ', falso); wp_enqueue_script ('html5-shim'); / ** REGISTRE HTML5 OtherScript.js ** / wp_register_script ('custom-script', THEME_DIR. '/Js_path/customscript.js', array ('jquery'), '1', false); wp_enqueue_script ('script personalizado');  add_action ('wp_enqueue_scripts', 'enqueue_scripts');

Ahora dentro de tu header.php añade estas lineas: (Recuerda que necesitas modificar las rutas a tus archivos CSS y JavaScript)

       >              <?php wp_title(); ?> - <?php bloginfo( 'name' ); ?>    >

Un encabezado "debe" tener algunas cosas, esta plantilla que he creado hace lo siguiente (en los siguientes pasos hablaré de cada uno):

Doctypes
Condicionales a IE8, 7, 6.
Meta etiquetas para asegurar que su tema se representa correctamente
Favicon, RSS y Pingback
Título
Siguiendo las pautas oficiales de WordPress, agregando scripts y estilos con wp_enqueue_script y wp_enqueue_style funciones
Optimizado con el uso de constantes y la eliminación de la etiqueta Meta Generator para ayudar con la seguridad
Código limpio y comentado.

Los pasos a continuación hablarán sobre el código utilizado y aprenderá por qué usarlo..

Paso 2: El funciones.php Expediente

Comencemos hablando de la funciones.php archivo, agregamos estas lineas en el archivo:

 define ("THEME_DIR", get_template_directory_uri ()); / * --- ELIMINAR EL TAG META DEL GENERADOR --- * / remove_action ('wp_head', 'wp_generator'); // Función de ESTILOS DE RECUPERACIÓN enqueue_styles () / ** REGISTER css / screen.cs ** / wp_register_style ('screen-style', THEME_DIR. '/Css_path/screen.css', array (), '1', 'all '); wp_enqueue_style ('estilo de pantalla');  add_action ('wp_enqueue_scripts', 'enqueue_styles'); // Función SCORE SCRIPTS enqueue_scripts () / ** REGISTER HTML5 Shim ** / wp_register_script ('html5-shim', 'http://html5shim.googlecode.com/svn/trunk/html5.js', array ('jquery '),' 1 ', falso); wp_enqueue_script ('html5-shim'); / ** REGISTRE HTML5 OtherScript.js ** / wp_register_script ('custom-script', THEME_DIR. '/Js_path/customscript.js', array ('jquery'), '1', false); wp_enqueue_script ('script personalizado');  add_action ('wp_enqueue_scripts', 'enqueue_scripts');

La primera línea simplemente crea una constante llamada TEMA_DIR que almacena el directorio de plantillas, creamos esta constante para optimizar el tema, si nos fijamos en nuestro header.php archivo, necesitamos el directorio varias veces y lo usamos en funciones.php Archivo también para imprimir la ruta del tema. Si llamamos al get_template_directory_uri () Todo el tiempo, solo creamos peticiones. Creando una constante y usándola, guardamos el procesamiento del servidor, porque llamamos a la función una vez.

 / * --- ELIMINAR EL TAG META DEL GENERADOR --- * / remove_action ('wp_head', 'wp_generator');

Esta línea elimina la etiqueta Meta Generator, porque esta etiqueta muestra a cualquier persona la versión de WordPress instalada. Este tipo de información puede permitir a un invasor conocer los errores de su versión y explotarlos.

Añadiendo tu CSS

 // Función de ESTILOS DE RECUPERACIÓN enqueue_styles () / ** REGISTER css / screen.cs ** / wp_register_style ('screen-style', THEME_DIR. '/Css_path/screen.css', array (), '1', 'all '); wp_enqueue_style ('estilo de pantalla');  add_action ('wp_enqueue_scripts', 'enqueue_styles');

Aquí, creamos una función para agregar el enlazar etiquetas para header.php. Las pautas oficiales de WordPress dicen que la mejor manera de agregar estilos (.css) y scripts (.js) es con wp_enqueue_script y wp_enqueue_style funciones Puede aprender más sobre esto en nuestro artículo, Cómo incluir JavaScript y CSS en sus temas y complementos de WordPress.

Primero, creamos una función llamada estilos encolados y luego llamamos al add_action función, esta línea le dice a WordPress que debe llamar a nuestra función cuando se activa el evento 'wp_enqueue_scripts', lo que sucede durante nuestra llamada a wp_head () en header.php!

Dentro de nuestra función tenemos las siguientes líneas:

 / ** REGISTRE css / screen.cs ** / wp_register_style ('screen-style', THEME_DIR. '/Css_path/screen.css', array (), '1', 'all'); wp_enqueue_style ('estilo de pantalla');

Primero, registramos nuestra hoja de estilo y luego la agregamos a la cola de WordPress.

Usamos la funcion wp_register_style Para registrar un estilo, esta función solicita lo siguiente:

# 1 Param: Un nombre que puedes elegir, algo así como mi estilo, preguntas de los medios...
# 2 Param: La ruta del archivo, tenga en cuenta que usamos el TEMA_DIR constante aquí.
# 3 Param: Aquí escribe las dependencias, el nombre de los archivos de estilo que deben cargarse antes de este archivo.
# 4 Param: La versión.
# 5 Param: El atributo de medios para la etiqueta de enlace.

Y luego, llamamos a la wp_enqueue_style Funciona y pasamos como parámetro el nombre de nuestro estilo que será agregado..

Para agregar más estilos a su archivo, simplemente duplique estas dos líneas y modifique el nombre, el directorio y los otros parámetros.

Añadiendo los scripts

Ahora veremos la función que agrega nuestros scripts..

 // Función SCORE SCRIPTS enqueue_scripts () / ** REGISTER HTML5 Shim ** / wp_register_script ('html5-shim', 'http://html5shim.googlecode.com/svn/trunk/html5.js', array ('jquery '),' 1 ', falso); wp_enqueue_script ('html5-shim'); / ** REGISTRE HTML5 OtherScript.js ** / wp_register_script ('custom-script', THEME_DIR. '/Js_path/customscript.js', array ('jquery'), '1', false); wp_enqueue_script ('script personalizado');  add_action ('wp_enqueue_scripts', 'enqueue_scripts');

Aquí el proceso es el mismo, la diferencia aquí es que usamos otras funciones para agregar scripts.

Para agregar scripts usamos el wp_register_script y wp_enqueue_script funciones los wp_register_script La función requiere lo siguiente:

# 1 Param: Un nombre que puedes elegir, algo como jquery, dojo, etc..
# 2 Param: El directorio de archivos, tenga en cuenta que utilizamos el TEMA_DIR constante aquí.
# 3 Param: Aquí escribe las dependencias, el nombre de los archivos de script que deben cargarse antes de este archivo.
# 4 Param: La versión.
# 5 Param: Aquí usted dice si este script será agregado en el wp_head () (usualmente en header.php) o la wp_footer () (usualmente en footer.php) llamadas a funciones. Si pasa falso, será cargado en wp_head (). Si pasa verdad, se cargará en wp_footer ()

Y luego, llamamos a la wp_enqueue_script Funciona y pasamos como parámetro el nombre de nuestro script que será agregado..

Para agregar más scripts a su archivo, simplemente duplique estas dos líneas y modifique los nombres, el directorio y los otros parámetros.

Paso 3: El header.php

Primero, enumeraré aquí los enlaces a las bibliotecas que puede usar en esta plantilla. Ya uso jQuery y HTML5 Shim en esta plantilla, pero puede agregar otros..

jQuery - biblioteca para agregar efectos agradables a tu tema, creo que probablemente ya conozcas esta biblioteca, y en realidad ya está incluida en WordPress por defecto
Modernizr: esta biblioteca le permite conocer exactamente las funciones que admite el navegador del usuario
HTML5 Shim: esta biblioteca permite que los navegadores que no tienen soporte nativo para el marcado HTML5 comiencen a admitirlo
Respond.js: permite a los navegadores que no tienen soporte nativo para Consultas de medios CSS3 para empezar a apoyarlo

Puede descargar estas bibliotecas y actualizar las rutas en su header.php expediente.

Doctype

En esta plantilla solo usamos el tipo de documento HTML5 predeterminado:

Etiqueta

En esta parte, utilicé algunos condicionales de IE para agregar una clase según la versión de IE o no agregar nada si el navegador no es IE 8 o inferior (Firefox, IE9, Chrome y otros).

Esto es realmente útil porque puede crear una regla dentro de su archivo CSS para afectar un objeto si el navegador es IE 7 haciendo lo siguiente:

 / * FUNCIONA EN TODOS LOS NAVEGADORES * / #mymenu width: 400px;  / * FUNCIONA SOLO EN IE7 * / .ie7 #mymenu width: 200px;

Pero también puede crear un archivo CSS separado y vincularlo dentro del área condicional, lo trataremos en los pasos a continuación. La decisión es tuya.

Etiquetas

Las etiquetas meta son muy importantes porque pasan cierta información al navegador para garantizar la correcta representación de su tema.

Esta línea asegura que los navegadores no usarán En modo capricho, Muy útil porque este modo de render puede romper el diseño..

Esta línea le dice al juego de caracteres Al navegador, evitando caracteres desconocidos.!

Solo meta etiquetas básicas que pueden ayudar al SEO de tu tema Puede agregar palabras clave que describan su sitio web y escriba su nombre o el nombre de su empresa.

Esta etiqueta elimina / restablece cualquier zoom predeterminado de un dispositivo móvil como iPad y iPhone, Muy útil si está trabajando en un diseño sensible..

Etiquetas

Esto añade un favicon A tu página, dándole un toque más profesional a tu sitio web..

Un enlace al RSS de su sitio web..

Un enlace para la URL de Pingback de su sitio..

</code> Etiqueta</h3> <pre> <title><?php wp_title(); ?> - <?php bloginfo( 'name' ); ?> La etiqueta del título es muy importante porque reemplaza el título predeterminado y es útil para mejorar su rango en los motores de búsqueda.
 wp_head ()
  
 Esta es una función muy importante, ustedes DEBE ¡Llama a esta función! A través de esta función, WordPress agrega código de complementos, otras bibliotecas de JavaScript y mucho más..
 
 Conclusión
 ¡Y ya está hecho! Realmente espero que hayan disfrutado este artículo y por favor., Siéntase libre de comentar sobre la plantilla y de darle un fragmento de código para mejorarla.!



		
			
	   
	




Código