L'header.php - Che cosa deve andare in esso e cosa no

In questo tutorial, parliamo di header.php, un file essenziale per qualsiasi tema WordPress. Ti mostrerò un bell'esempio di file di intestazione e fornirò suggerimenti su cosa deve esserci e cosa no.

Step 1: Introduzione

La prima cosa che devi sapere sul header.php il file è la tua funzione.

Ma abbiamo più di un logo e un menu in questo file, abbiamo anche il capo tag e molti altri tag, come: collegamento, copione, meta e titolo.

Ho scritto un esempio header.php file, ho provato a creare un file il più completo possibile, ma sentiti libero di commentare questo tutorial dando consigli sul file.

Ricorda che l'intestazione è tutto il contenuto che viene mostrato su tutte le pagine del tuo sito. Ad esempio, il logo e il menu sono mostrati su tutte le pagine quindi ... entrambi verranno aggiunti al header.php

Se un elemento viene mostrato solo su una pagina specifica, è necessario ripensare se questo elemento deve essere veramente all'interno dell'intestazione.

Lavoriamo e spero che ti piaccia!

Passaggio 2: il codice finale

Qui puoi ottenere il codice finale da utilizzare nel tuo tema. Leggi gli altri passaggi per sapere esattamente cosa fa ogni linea.

Innanzitutto, incolla queste righe nella parte superiore del tuo functions.php file: (Ricorda che è necessario modificare i percorsi per i file CSS e JavaScript)

 define ("THEME_DIR", get_template_directory_uri ()); / * --- RIMUOVERE TAG META GENERATORE --- * / remove_action ('wp_head', 'wp_generator'); // ENQUEUE STYLES funzione enqueue_styles () / ** REGISTRAZIONE css / screen.css ** / wp_register_style ('screen-style', THEME_DIR. '/Css_path/screen.css', array (), '1', 'all '); wp_enqueue_style ('screen-style');  add_action ('wp_enqueue_scripts', 'enqueue_styles'); // ENQUEUE SCRIPTS function enqueue_scripts () / ** REGISTRAZIONE HTML5 Shim ** / wp_register_script ('html5-shim', 'http://html5shim.googlecode.com/svn/trunk/html5.js', array ('jquery '),' 1 ', falso); wp_enqueue_script ('html5-shim'); / ** REGISTRA HTML5 OtherScript.js ** / wp_register_script ('custom-script', THEME_DIR. '/Js_path/customscript.js', array ('jquery'), '1', false); wp_enqueue_script ('custom-script');  add_action ('wp_enqueue_scripts', 'enqueue_scripts');

Ora dentro il tuo header.php aggiungi queste righe: (Ricorda che è necessario modificare i percorsi per i file CSS e JavaScript)

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

Un'intestazione "deve" avere alcune cose, questo modello che ho creato procede come segue (nei prossimi passaggi ne parlerò):

doctype
Condizionatori a IE8, 7, 6
Meta tag per garantire che il tuo tema sia reso correttamente
Favicon, RSS e Pingback
Titolo
Seguendo le linee guida ufficiali di WordPress, aggiungendo script e stili con wp_enqueue_script e wp_enqueue_style funzioni
Ottimizzato con l'uso di costanti e rimuovendo il tag Meta Generator per facilitare la sicurezza
Codice pulito e commentato

I passaggi seguenti parleranno del codice utilizzato e imparerai perché utilizzarlo.

Passaggio 2: The functions.php File

Iniziamo a parlare del functions.php file, abbiamo aggiunto queste righe nel file:

 define ("THEME_DIR", get_template_directory_uri ()); / * --- RIMUOVERE TAG META GENERATORE --- * / remove_action ('wp_head', 'wp_generator'); // ENQUEUE STYLES funzione enqueue_styles () / ** REGISTER css / screen.cs ** / wp_register_style ('screen-style', THEME_DIR. '/Css_path/screen.css', array (), '1', 'all '); wp_enqueue_style ('screen-style');  add_action ('wp_enqueue_scripts', 'enqueue_styles'); // ENQUEUE SCRIPTS function enqueue_scripts () / ** REGISTRAZIONE HTML5 Shim ** / wp_register_script ('html5-shim', 'http://html5shim.googlecode.com/svn/trunk/html5.js', array ('jquery '),' 1 ', falso); wp_enqueue_script ('html5-shim'); / ** REGISTRA HTML5 OtherScript.js ** / wp_register_script ('custom-script', THEME_DIR. '/Js_path/customscript.js', array ('jquery'), '1', false); wp_enqueue_script ('custom-script');  add_action ('wp_enqueue_scripts', 'enqueue_scripts');

La prima riga crea solo una costante chiamata THEME_DIR che memorizza la directory dei modelli, creiamo questa costante per ottimizzare il tema, se guardi nel nostro header.php file, abbiamo bisogno della directory alcune volte e la usiamo in functions.php file anche per stampare il percorso del tema. Se chiamiamo il get_template_directory_uri () tutto il tempo, creiamo solo richieste. Creando una costante e usandola salviamo l'elaborazione del server, perché chiamiamo una volta la funzione.

 / * --- RIMUOVERE TAG META GENERATORE --- * / remove_action ('wp_head', 'wp_generator');

Questa riga rimuove il tag Meta Generator, perché questo tag mostra a chiunque la versione di WordPress installata. Questo tipo di informazioni può consentire a un invasore di conoscere i bug della tua versione e sfruttarli.

Aggiungere il tuo CSS

 // ENQUEUE STYLES funzione enqueue_styles () / ** REGISTER css / screen.cs ** / wp_register_style ('screen-style', THEME_DIR. '/Css_path/screen.css', array (), '1', 'all '); wp_enqueue_style ('screen-style');  add_action ('wp_enqueue_scripts', 'enqueue_styles');

Qui, abbiamo creato una funzione per aggiungere il collegamento tag a header.php. Le linee guida ufficiali di WordPress dicono che il modo migliore per aggiungere stili (.css) e script (.js) è con wp_enqueue_script e wp_enqueue_style funzioni. Puoi saperne di più su questo nel nostro articolo, Come includere JavaScript e CSS nei tuoi temi e plugin di WordPress.

Innanzitutto, creiamo una funzione chiamata enqueue_styles e poi chiamiamo il add_action funzione, questa linea dice a WordPress che deve chiamare la nostra funzione quando viene attivato l'evento "wp_enqueue_scripts", che avviene durante la nostra chiamata a wp_head () nel header.php!

All'interno della nostra funzione abbiamo le seguenti linee:

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

Per prima cosa, registriamo il nostro foglio di stile e quindi lo aggiungiamo alla coda di WordPress.

Usiamo la funzione wp_register_style per registrare uno stile, questa funzione richiede quanto segue:

# 1 Param: Un nome che puoi scegliere, qualcosa di simile il mio stile, mediaqueries...
# 2 Param: Il percorso del file, nota che usiamo il THEME_DIR costante qui.
# 3 Param: Qui si digitano le dipendenze, il nome dei file di stile che devono essere caricati prima di questo file.
# 4 Param: La versione.
# 5 Param: L'attributo multimediale per il tag link.

E poi, chiamiamo il wp_enqueue_style funzione e passiamo come parametro il nome del nostro stile che verrà aggiunto.

Per aggiungere altri stili al tuo file, basta duplicare queste due righe e modificare il nome, la directory e gli altri parametri.

Aggiungere gli script

Ora vedremo la funzione che aggiunge i nostri script.

 // ENQUEUE SCRIPTS function enqueue_scripts () / ** REGISTRAZIONE HTML5 Shim ** / wp_register_script ('html5-shim', 'http://html5shim.googlecode.com/svn/trunk/html5.js', array ('jquery '),' 1 ', falso); wp_enqueue_script ('html5-shim'); / ** REGISTRA HTML5 OtherScript.js ** / wp_register_script ('custom-script', THEME_DIR. '/Js_path/customscript.js', array ('jquery'), '1', false); wp_enqueue_script ('custom-script');  add_action ('wp_enqueue_scripts', 'enqueue_scripts');

Qui il processo è lo stesso, la differenza è che usiamo altre funzioni per aggiungere script.

Per aggiungere script usiamo il wp_register_script e wp_enqueue_script funzioni. Il wp_register_script la funzione richiede quanto segue:

# 1 Param: Un nome che puoi scegliere, qualcosa come jquery, dojo, ecc.
# 2 Param: La directory dei file, nota che usiamo il THEME_DIR costante qui.
# 3 Param: Qui si digitano le dipendenze, il nome dei file di script che devono essere caricati prima di questo file.
# 4 Param: La versione.
# 5 Param: Qui dici se questo script verrà aggiunto nel wp_head () (di solito in header.php) o il wp_footer () (di solito in footer.php) chiamate di funzione. Se passi falso, verrà caricato wp_head (). Se si passa true, verrà caricato wp_footer ()

E poi, chiamiamo il wp_enqueue_script funzione e passiamo come parametro il nome del nostro script che verrà aggiunto.

Per aggiungere altri script al tuo file, basta duplicare queste due righe e modificare i nomi, la directory e gli altri parametri.

Passaggio 3: The header.php

Innanzitutto, elencherò qui i collegamenti alle librerie che è possibile utilizzare su questo modello, utilizzo già jQuery e lo Shim HTML5 in questo modello, ma è possibile aggiungerne altri.

jQuery - libreria per aggiungere effetti piacevoli al tuo tema, penso che probabilmente conosci già questa libreria, e in realtà è già inclusa in WordPress per impostazione predefinita
Modernizr: questa libreria ti consente di conoscere esattamente le funzionalità supportate dal browser dell'utente
HTML5 Shim: questa libreria consente ai browser che non dispongono del supporto nativo per il markup HTML5 di avviarlo
Respond.js: consente ai browser che non hanno il supporto nativo Query multimediali CSS3 per iniziare a supportarlo

Puoi scaricare queste librerie e aggiornare i percorsi nel tuo header.php file.

Doctype

In questo modello utilizziamo semplicemente il doctype HTML5 predefinito:

Etichetta

In questa parte, ho usato alcuni condizionali di IE per aggiungere una classe in base alla versione di IE o non aggiungere nulla se il browser non è IE 8 o inferiore (Firefox, IE9, Chrome e altri).

Questo è veramente utile perché puoi creare una regola all'interno del tuo file CSS per influenzare un oggetto se il browser è IE 7 facendo quanto segue:

 / * ESEGUE SU TUTTI I BROWSERS * / #mymenu width: 400px;  / * RUNS ONLY ON IE7 * / .ie7 #mymenu width: 200px;

Ma puoi anche creare un file CSS separato e collegarlo all'interno dell'area condizionale, ne parleremo nei passaggi seguenti. La scelta è tua.

tag

I meta tag sono molto importanti perché trasmettono determinate informazioni al browser per garantire il corretto rendering del tema.

Questa linea garantisce che i browser non utilizzino Quirks Mode, molto utile perché questa modalità di rendering può rompere il layout.

Questa linea dice al charset al browser, evitando caratteri sconosciuti!

Solo meta tag di base che possono aiutare il SEO del tuo tema. Puoi aggiungere parole chiave che descrivono il tuo sito web e digitare il tuo nome o il nome dell'attività.

Questo tag rimuove / reimposta qualsiasi zoom predefinito di un dispositivo mobile come iPad e iPhone, molto utile se stai lavorando su un layout reattivo.

tag

Questo aggiunge un favicon alla tua pagina, dando un tocco più professionale al tuo sito web.

Un collegamento al feed RSS del tuo sito web.

Un link per l'URL Pingback del tuo sito.

</code> Etichetta</h3> <pre> <title><?php wp_title(); ?> - <?php bloginfo( 'name' ); ?> Il tag title è molto importante perché sostituisce il titolo predefinito ed è utile per migliorare il tuo posizionamento nei motori di ricerca.
 wp_head ()
  
 Questa è una funzione molto importante, tu DOVERE chiama questa funzione! Attraverso questa funzione, WordPress aggiunge codice da plugin, altre librerie JavaScript e molto altro.
 
 Conclusione
 Ed è fatto! Spero davvero che ti sia piaciuto questo articolo e per favore, sentiti libero di commentare il modello e dare il tuo snippet di codice per migliorarlo!



		
			
	   
	




Codice