Como criar uma página de largura total no WordPress

Às vezes queremos usar toda a largura do tema, aproveitando o espaço ocupado pela barra lateral para acomodar algo mais largo num tema para WordPress, porém nem todos eles permitem que isso seja feito de forma nativa. Mesmo assim o processo é bastante simples e fácil.

O tutorial abaixo requer um pouco de conhecimento em HTML e CSS para a correta alteração de alguns elementos visando alcançar o objetivo final. Primeiro você precisa criar um template, um modelo. Para isso, faça uma cópia do arquivo page.php na pasta do tema ativo que geralmente fica em wp-content/themes/nomedotema/ e renomeie para fullwidth.php.

Agora edite este arquivo e adicione o seguinte código na primeira linha, antes de tudo:

/*
Template Name: Full Width
*/
?>

Salve e você acaba de criar um template. O próximo passo é se livrar da barra lateral e para isso, basta remover o seguinte código do arquivo fullwidth.php:

Feito isso, agora você precisará duplicar alguns estilos CSS do seu tema para que eles usem a total largura do tema e que tudo funcione corretamente. Digamos que o nome da DIV que abriga o conteúdo principal chama-se #content. Você precisará duplicar este e todos os estilos filhos (por exemplo: #content h2) e renomear a cópia para algo como #contentwide ou #content-w. Fica a seu critério o nome final.

Digamos que a DIV #content tem originalmente 700px de largura e que seu tema tenha um total de 960px de width. Logo, a sua barra lateral deve possuir cerca de 250px salvo o espaço entre uma DIV e outra para se separar do conteúdo principal. Troque esses 700px por 960px e no arquivo fullwidth.php altere o nome da DIV id=”content” para id=”content-w” por exemplo.

Agora para poder usar a página em toda sua largura, envie os arquivos editados para o seu servidor na pasta do tema, substituindo os existentes, e vá no painel de administração do WordPress. Nas páginas publicadas, você pode editar uma existente ou criar uma nova. O que importa é selecionar na área a direita do campo de texto, em Atributos da Página, o template Full Width no menu dropdown abaixo da seleção de página mãe.

Agora publique ou salve a página e corra para o abraço!

(via)