Neste tutorial, vamos falar sobre o header.php file, um arquivo essencial para qualquer tema WordPress. Mostrarei um exemplo de arquivo de cabeçalho e darei dicas sobre o que precisa e o que não precisa.
Introdução
É importante que você saiba exatamente o que header.php arquivo deve conter em um tema WordPress.
Mas, temos mais do que um logotipo e menu neste arquivo, temos também o head tag e muitas outras tags, como: link, script, meta e title.
No decorrer deste artigo, criaremos uma demonstração header.php arquivo, e tentaremos discutir cada elemento desse arquivo.
Lembre-se que o cabeçalho do seu site é o conteúdo que aparece em todas as páginas do seu site. Por exemplo, o logotipo e o menu são exibidos em todas as páginas do seu site e, portanto, devem ser incluídos no header.php Arquivo.
Se um elemento é mostrado apenas em uma página específica, você deve tentar evitar incluí-lo no header.php Arquivo.
O código de exemplo
Nesta seção, construiremos uma demonstração header.php Arquivo. Na próxima seção, examinaremos cada parte do código para entender o que ele faz.
Mas antes de implementarmos o cabeçalho, vamos colar o seguinte código na parte superior do seu wp-includes/functions.php Arquivo. Lembre-se de que você precisa modificar os caminhos para seus arquivos CSS e JavaScript conforme necessário.
remove_action('wp_head', 'wp_generator');
function enqueue_styles() {
/** REGISTER css/screen.css **/
wp_register_style( 'screen-style', get_template_directory_uri() . '/css_path/screen.css', array(), '1', 'all' );
wp_enqueue_style( 'screen-style' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_styles' );
function enqueue_scripts() {
/** REGISTER HTML5 Shim **/
wp_register_script( 'html5-shim', 'https://html5shim.googlecode.com/svn/trunk/html5.js', array( 'jquery' ), '1', false );
wp_enqueue_script( 'html5-shim' );
/** REGISTER HTML5 OtherScript.js **/
wp_register_script( 'custom-script', get_template_directory_uri() . '/js_path/customscript.js', array( 'jquery' ), '1', false );
wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_scripts' );
Em seguida, vamos dar uma olhada na amostra header.php Arquivo. Você deve criar este arquivo em wp-content/themes/theme-name/header.php. Claro, você precisa ajustar o nome do tema parte com o nome real do seu tema.
>
; charset=" />
<?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?>
" />
RSS2 Feed" href="https://code.tutsplus.com/tutorials/" />
>
Em geral, o cabeçalho, php arquivo deve incluir alguns elementos, como:
- tipo de documento
-
- metatags
- etiquetas de cabeça
- favicon, RSS e pingback
- título
- scripts e estilos adicionados com o
wp_enqueue_script e wp_enqueue_style funções
Na próxima seção, entenderemos o que implementamos até agora para construir nosso header.php Arquivo.
O arquivo functions.php em detalhes
Vamos começar com o funções.php arquivo, adicionamos estas linhas no arquivo:
remove_action('wp_head', 'wp_generator');
function enqueue_styles() {
/** REGISTER css/screen.css **/
wp_register_style( 'screen-style', get_template_directory_uri() . '/css_path/screen.css', array(), '1', 'all' );
wp_enqueue_style( 'screen-style' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_styles' );
function enqueue_scripts() {
/** REGISTER HTML5 Shim **/
wp_register_script( 'html5-shim', 'https://html5shim.googlecode.com/svn/trunk/html5.js', array( 'jquery' ), '1', false );
wp_enqueue_script( 'html5-shim' );
/** REGISTER HTML5 OtherScript.js **/
wp_register_script( 'custom-script', get_template_directory_uri() . '/js_path/customscript.js', array( 'jquery' ), '1', false );
wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_scripts' );
Remover Tag do Meta Gerador
A linha a seguir remove a meta tag do gerador, pois exibe o número da versão do WordPress. Agora, não é aconselhável expor publicamente o número da sua versão do WordPress, o que pode torná-lo vulnerável a ataques relacionados à versão. Assim, nós o removemos.
remove_action('wp_head', 'wp_generator');
Adicionando seu CSS
function enqueue_styles() {
/** REGISTER css/screen.css **/
wp_register_style( 'screen-style', get_template_directory_uri() . '/css_path/screen.css', array(), '1', 'all' );
wp_enqueue_style( 'screen-style' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_styles' );
Neste caso, criamos o enqueue_styles função para adicionar link etiquetas para o header.php Arquivo. A documentação oficial do WordPress diz que a melhor maneira de adicionar folhas de estilo (.css) e roteiros (.js) está com o wp_enqueue_script e wp_enqueue_style funções. Você pode aprender mais sobre isso em nosso artigo, Como incluir JavaScript e CSS em seus temas e plugins do WordPress.
-
Como incluir JavaScript e CSS em seus temas e plugins do WordPress
Primeiramente, criamos uma função chamada enqueue_styles e então chamamos o add_action função, que diz ao WordPress que ele deve chamar nossa função quando o wp_enqueue_scripts hook é acionado, o que acontece durante nossa chamada para wp_head() no header.php Arquivo!
Dentro da nossa função temos as seguintes linhas:
wp_register_style( 'screen-style', get_template_directory_uri() . '/css_path/screen.css', array(), '1', 'all' );
wp_enqueue_style( 'screen-style' );
Primeiro, registramos nosso CSS e depois o adicionamos à fila do WordPress.
Nós usamos o wp_register_style função para registrar nosso estilo customizado, e esta função possui os seguintes argumentos:
-
$handle: um nome que você pode escolher, algo como mystyle, mediaqueries etc.
-
$src: o caminho do arquivo
-
$deps: dependências, o nome dos arquivos de estilo que precisam ser carregados antes deste arquivo
-
$ver: a versão do ativo
-
$media: a mídia para a qual esta folha de estilo será carregada
E então, chamamos o wp_enqueue_style função e passamos o nome do nosso estilo no primeiro argumento da wp_enqueue_style função, então ele será adicionado à fila.
Para adicionar mais estilos, basta duplicar essas duas linhas e modificar o nome, diretório e os demais parâmetros.
Adicionando os scripts
A seguir, veremos a função que adiciona nossos scripts.
function enqueue_scripts() {
/** REGISTER HTML5 Shim **/
wp_register_script( 'html5-shim', 'https://html5shim.googlecode.com/svn/trunk/html5.js', array( 'jquery' ), '1', false );
wp_enqueue_script( 'html5-shim' );
/** REGISTER HTML5 OtherScript.js **/
wp_register_script( 'custom-script', get_template_directory_uri() . '/js_path/customscript.js', array( 'jquery' ), '1', false );
wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_scripts' );
Também neste caso, o processo é praticamente o mesmo, a única diferença é que usamos funções diferentes para adicionar scripts.
Para adicionar scripts, usamos o wp_register_script e wp_enqueue_script funções. o wp_register_script função requer os seguintes argumentos:
-
$handle: um nome que você pode escolher, algo como jquery, dojo, etc.
-
$src: o caminho do arquivo
-
$deps: dependências, o nome dos arquivos de script que precisam ser carregados antes deste arquivo
-
$ver: a versão do ativo
-
$in_footer: se deve adicionar/enfileirar o script antes
E então, chamamos o wp_enqueue_script função e passamos o nome do nosso script no primeiro argumento da wp_enqueue_script função, então ele será adicionado à fila.
Para adicionar mais scripts, basta duplicar essas duas linhas e modificar o nome, diretório e os demais parâmetros.
Compreensão o arquivo header.php
o doctype
Todas as páginas devem começar com o doctype declaração conforme mostrado no trecho a seguir.
o
>
Esta é a raiz de um html documento. Também é importante notar que usamos o language_attributes função para adicionar os atributos de idioma necessários para o html marcação.
o
As meta tags são muito importantes porque passam certas informações ao navegador para garantir a renderização correta do seu tema.
A linha acima garante que os navegadores não usem o modo quirks, e é muito útil porque esse modo de renderização pode quebrar o layout.
; charset=" />
A linha acima define o charset para o navegador, evitando caracteres desconhecidos!
No snippet acima, adicionamos algumas metatags básicas que podem ajudar a melhorar o SEO do seu site. Você pode adicionar palavras-chave que descrevam seu site e digitar seu nome ou nome comercial.
A tag acima remove e redefine qualquer zoom padrão de um dispositivo móvel como iPad e iPhone, se você estiver trabalhando em um layout responsivo.
o
O snippet acima adiciona um ícone de favicon à sua página, dando um toque mais profissional ao seu site.
RSS2 Feed" href="https://code.tutsplus.com/tutorials/" />
O snippet acima adiciona um link ao feed RSS do seu site.
" />
Por fim, você pode usar o snippet acima para adicionar um link da URL de pingback do seu site.
o </code> Marcação</h4>
<pre class="brush: php noskimlinks noskimwords"><title><?php wp_title('«', true, 'right'); ?> <?php bloginfo('name'); ?>
A tag de título é muito importante porque substitui o título padrão e é útil para melhorar sua classificação nos mecanismos de pesquisa.
o wp_head() Função
Esta é uma função muito importante – você deve chamar esta função! Por meio dessa função, o WordPress adiciona código de plugins, outras bibliotecas JavaScript e muito mais.
A seção de cabeçalho
Por fim, para o seu cabeçalho comum, que exibe o logotipo e o menu principal do seu site, você pode usar o div como mostrado no snippet a seguir.
Conclusão
Então é assim que você pode usar o header.php para preparar o cabeçalho comum em seu tema WordPress.
Este post foi atualizado com contribuições de Sajal Soni. Sajal pertence à Índia e adora passar o tempo criando sites baseados em estruturas de código aberto.
Deixe uma resposta