Criando Opção de Cabeçalho Personalizado para temas.

Custon Header

As novas versões do WordPress e WordPress MU têm vindo com uma funcionalidade que poucos sabem que existe, que nos serve para criar uma opção extra para nossos temas.

Com ela você pode, trocar a imagem do banner, trocar a cor do título e descrição do site ou até mesmo remover os textos e ficar só com a imagem de banner.
Estas opções são extremamente úteis para quando temos uma logomarca e queremos colocá-la em nosso site.

Dentro da pasta do seu WordPress em wp-admin tem um arquivo chamado custom-header.php e é ele que define as funcionalidades extras que vamos implementar, mas para usarmos essas funcionalidades de forma adequada precisamos definir algumas coisas para que seja adequada ao nosso tema.

Estrutura do header.

Primeiramente veja como está o meu arquivo header.php que é onde meu banner está sendo carregado, a parte onde tem o banner, título do site e descrição foram feitas da seguinte forma.

<div id=”banner”>
<h1><a href=”<?php bloginfo(‘url’); ?>”><?php bloginfo(‘name’); ?></a></h1>
<h3><?php bloginfo(‘description’); ?></h3>
</div><!–banner–>

Código CSS.

As demais áreas do meu header.php não importam, desde que nenhum outro código esteja influenciando neste parte do site isso é tudo que importa.
Para personalizar esta área usei o seguinte código em css.

#banner h1{
padding-top: 30px;
padding-left: 50px;
}

#banner h1 a{
font-family: “Trajan Pro”,”Lucida Sans Unicode”,Arial,Helvetica,Sans,FreeSans,Jamrul,Garuda,Kalimati;
font-size: 50px;
color: #C40000;
font-weight:bold;
}

#banner h1 a:hover{color: #FF9900;}

#banner h3{
font-family: “Palatino Linotype”, “Times New Roman”, Georgia, Tahoma, “Century Schoolbook L”, Arial, Helvetica;
padding-left: 90px;
color: #C40000;
}

Código do function.

Agora que já vimos como a minha área de banner foi criada, poderemos reparar como o restante do código precisa ser alterado, então segue o código que precisa ser adicionado em seu arquivo function.php.

Vou colocar o código em partes e com comentários para poder explicar, então vá lendo com calma para entender, pois você terá que mudar algumas partes para que funcione em seu tema.
Se quiser copiar o código inteiro você pode, pois as explicações serão colocadas em comentário entre o código e não irá influenciar no seu arquivo function, mas fiquem atentos as partes que precisam ser alteradas para que tudo funcione bem.

Como já mencionei, adicione o código a seguir em seu arquivo function.php, se ele não existir crie um e coloque na pasta do seu tema.

<?php
/*
Definindo o tamanho da sua imagem do banner, isso será usado quando
você upar uma imagem maior ou menor que o tamanho correto, e com
esta opção você fará um corte em sua imagem para que ela se adapte
corretamente ao seu espaço para o banner.
*/
$content_width = 998;

// Definindo Valores padões.
// Cor padrão do texto.
define(‘HEADER_TEXTCOLOR’, ‘C40000′);
// Nome e caminho da imagem padrão do banner.
define(‘HEADER_IMAGE’, ‘%s/images/banner.jpg’);
// Largura da Imagem do banner que será a largura padrão.
define(‘HEADER_IMAGE_WIDTH’, 998);
// Altura do banner que será a altura padrão.
define(‘HEADER_IMAGE_HEIGHT’, 153);

//Esta função define o estilo para o tema.
//Você precisa alterar esses seletores para corresponder ao seu tema.
//Onde está #banner h1 ou #banner h3 coloque o que usou para definir seu banner no seu css.

//Você pode definir um novo nome para sua função diferente deste.
function myst_header_style() {
?>
<style>
#banner{
background: url(<?php header_image() ?>) no-repeat;
width: 998px;
height: 153px;
margin: 0 0;
padding: 0 0;
}

<?php if ( ‘blank’ == get_header_textcolor() ) { ?>
#banner h1, #banner h3 {
display: none;
}

<?php } else { ?>
#banner h1 a, #banner h3 {
color:#<?php header_textcolor() ?>;
}

#banner h3 {
margin-right: 30px;
}

<?php } ?>
</style>
<?php
}

//Painel de administração.
//O seletores #headimg h1 e #headimg #desc são utilizados para criar
//o painel de administração, então não mude estes seletores, as únicas coisas que você
//pode mudar é a formatação que você pode deixar mais parecida com o seu banner original.
//Eu usei a mesma formatação do meu banner para que quando o usuário veja o painel de
//cabeçalho personalizado, veja da mesma forma que está vendo no site, se pretende mudar isso
//tome cuidado de não alterar os códigos php, eles são muito importantes para o bom funcionamento.

//Você pode definir um novo nome para sua função diferente deste.
function myst_admin_header_style() {
?>
<style>
#headimg{
background: url(<?php header_image() ?>) no-repeat;
height: <?php echo HEADER_IMAGE_HEIGHT; ?>px;
width:<?php echo HEADER_IMAGE_WIDTH; ?>px;
padding:0 0 0 18px;
}

#headimg h1{
padding-top: 50px;
padding-left: 40px;
}

#headimg h1 a{
color:#<?php echo HEADER_TEXTCOLOR ?>;
font-family: “Trajan Pro”,”Lucida Sans Unicode”,Arial,Helvetica,Sans,FreeSans,Jamrul,Garuda,Kalimati;
font-size: 50px;
font-weight:bold;
text-decoration:none;
}

#headimg #desc{
color:#<?php echo HEADER_TEXTCOLOR ?>;
font-family: “Palatino Linotype”, “Times New Roman”, Georgia, Tahoma, “Century Schoolbook L”, Arial, Helvetica;
padding-left: 80px;
font-size: 18px;
}

<!–Defina aqui os mesmos seletores css usados em seu style.css–>
<!–como pode ver usei novamente aqui o #banner–>
<?php if ( ‘blank’ == get_header_textcolor() ) { ?>
#banner h1, #banner h3 {
display: none;
}

#banner h1 a, #banner h3 {
color:#<?php echo HEADER_TEXTCOLOR ?>;
}

<?php } ?>
</style>
<?php
}

//Se definiu novos nomes para as suas funções redefina aqui eles novamente.
//Como você pode reparar os nomes que usei para as minhas funções são repetidos aqui.
add_custom_image_header(‘myst_header_style’, ‘myst_admin_header_style’);
?>

Salve seu arquivo function.php e entre em seu painel de administração, agora você verá na área aparência um novo campo chamado cabeçalho personalizado e poderá testar a nova funcionalidade do seu tema.

Possíveis erros.

1ª Caso dê algum erro repare se usou os seletores css corretamente, não esqueça que os seletores #headimg h1, #headimg h1 a ou #headimg #desc não pode ser alterados e os #banner, #banner h1, #banner h1 a e #bannr h3 devem ser alterados de acordo com o seu tema.
2ª Se mudou o nome das funções, repare se os repetiu na parte add_custom_image_header corretamente.
3ª Vale reparar também se os códigos php estão todos corretos e com seus devidos espaços.
4ª Não deixe espaços no final do seu arquivo function, isso pode causar erros, sempre depois de ?> aperte delete para eliminar possíveis erros deste tipo.

Esses são os erros mais comuns que podem ocorrer.

Vale ressaltar que, dependendo do estilo visual e se forem usar esta funcionalidade em um tema que será distribuído a terceiros, é importante disponibilizar o banner em arquivo psd (photoshop), ou outro formato que a pessoa possa usar para alterar a imagem a seu gosto, ou as pessoas não terrão como usufruir desta funcionalidade de forma adequada, criando um banner que não se adeque ao restante do visual do site.

Espero que tenham gostado da dica e que venham a usar para criar temas cada vez mais funcionais.

Créditos deste artigo:
Algumas das informações foram obtidas do site www.resources4bloggers.com