M
mrv89
Beta
Usuário com poucas negociações! Use sempre o saldo do ForoBeta!
Escrevo este tutorial porque, há algum tempo, comecei a desenvolver temas para WordPress com licenças comerciais e, de imediato, surgiu a necessidade de incorporar um painel de opções de personalização para cada tema. Ao buscar informações sobre painéis de usuário (opções) para WordPress, encontrei poucos tutoriais bons, e a maioria incluía muito, mas muito código mesmo. Este tutorial baseia-se em incorporar um painel de opções para temas WordPress utilizando um framework chamado NHP Theme Options Panel, que é o framework que utilizo atualmente e com o qual obtive resultados muito bons.
Para que serve um painel de opções?
Ver o anexo 11925
Um painel de opções oferece aos usuários distintos níveis de personalização que, de outra forma, só seriam possíveis modificando o código-fonte do tema. O painel permite alterar logos, cores, fundos, títulos, fontes e uma infinidade de opções.
O NHP Theme Options Framework está disponível para download no GitHub e pode ser utilizado tanto para projetos comerciais quanto pessoais.
Instalação do Framework
Passo 1: Baixar do GitHub.
Passo 2: Extrair os arquivos; neles você encontrará um documento chamado “nhp-options.php” e uma pasta com o nome “opt”.
Passo 3: Copie os arquivos para o diretório raiz do seu tema, ex: (wp-content/themes/seu-tema)
Ver o anexo 11928
Passo 4: Vá ao arquivo “functions.php” do seu tema e escreva a seguinte linha de código:
Passo 5: Pronto!, agora o painel está instalado e pronto para trabalhar.
Ver o anexo 11926
Agora vem a parte boa..
Passo 7: Abrir o arquivo que incluímos no diretório do tema (nhp-options.php); na linha 103 aproximadamente, encontraremos este código:
Importante: Aqui devemos substituir onde diz ‘twenty_eleven’ pelo nome do nosso tema, ou qualquer nome que desejarem.
Passo 8: Personalizar, personalizar!
Agora vem o importante: não adianta nada ter um painel repleto de opções que nunca vamos utilizar, por isso é preciso decidir o que vamos precisar e o que não.
A partir da linha 153 aprox., encontraremos as opções do framework; tudo o que adicionarmos ou removermos aqui será refletido no painel de opções.
Ver o anexo 11927
Na imagem anterior podemos ver como funciona o painel; as opções estão armazenadas em arrays, então, por exemplo, na segunda seção pode-se ver o seguinte (Versão simplificada):
Agora, a título de exemplo, vou adicionar uma seção que utilizarei em um dos meus temas:
No código acima, criamos uma seção chamada "Opciones Generales"; dentro dessa seção vão dois campos, um do tipo SELECT e outro do tipo TEXT. O primeiro servirá como estrutura de controle para decidir se utilizaremos ou não uma imagem como logo. Caso contrário, mostraremos o título do Blog (definido nas opções gerais do WordPress).
Então, ao salvar o arquivo e atualizar, minha nova seção deveria ficar assim:
E agora, como diabos utilizo isso no meu tema?, simples:
No passo 7 definimos um nome para as opções, agora devemos inserir este código no lugar que você desejar do tema (header.php de preferência, mas teste em outras seções caso não funcione):
Isso armazena todas as nossas opções do tema em $options, e poderemos acessar a elas definindo seu índice ou ID que utilizamos para cada campo. Quando criamos o select para decidir se utilizamos ou não uma imagem como logo, foi atribuído o id de 'slc_logo'.
E agora utilizamos a seção que criamos:
No meu caso e para as minhas necessidades, o código ficou assim:
No código acima, tenho uma div que define o header do tema, depois vem o h1 onde estará o título do blog ou o logo; para determinar isso, utilizamos as opções do tema. Utilizando um if bastante simples, verificamos qual valor está atribuído ao select que criamos no painel. Caso o select tenha atribuído o valor "2" (que significa "sim"), vamos mostrar uma imagem como logo; a url da imagem será a que o usuário inseriu no segundo dos nossos campos, o text. Chamamos o valor através do seu ID 'logo_url'. Se o select tiver um valor diferente de 2, dentro do h1 irá o título do blog, isso através da função do WordPress bloginfo('name').
Como veem, é questão de experimentar; o framework vem com todas as opções possíveis, campos para gerar degradês, cores, datas, selecionar posts, texto, etc., etc., etc. É só baixar e testar.
Não custa dizer que este é o primeiro tutorial que faço na minha vida, não tenho experiência ensinando e, se ficou muito confuso, podem me consultar; não tenho problemas em responder qualquer tipo de dúvida a respeito.
Bom, espero que isso sirva para alguém, abraços.
Para que serve um painel de opções?
Ver o anexo 11925
Um painel de opções oferece aos usuários distintos níveis de personalização que, de outra forma, só seriam possíveis modificando o código-fonte do tema. O painel permite alterar logos, cores, fundos, títulos, fontes e uma infinidade de opções.
O NHP Theme Options Framework está disponível para download no GitHub e pode ser utilizado tanto para projetos comerciais quanto pessoais.
Instalação do Framework
Passo 1: Baixar do GitHub.
Passo 2: Extrair os arquivos; neles você encontrará um documento chamado “nhp-options.php” e uma pasta com o nome “opt”.
Passo 3: Copie os arquivos para o diretório raiz do seu tema, ex: (wp-content/themes/seu-tema)
Ver o anexo 11928
Passo 4: Vá ao arquivo “functions.php” do seu tema e escreva a seguinte linha de código:
PHP:
// NHP Theme Options Panel
if (is_admin()) {
require('nhp-options.php' );
}Passo 5: Pronto!, agora o painel está instalado e pronto para trabalhar.
Ver o anexo 11926
Agora vem a parte boa..
Passo 7: Abrir o arquivo que incluímos no diretório do tema (nhp-options.php); na linha 103 aproximadamente, encontraremos este código:
PHP:
//Choose a custom option name for your theme options, the default is the theme name in lowercase with spaces replaced by underscores
$args['opt_name'] = 'twenty_eleven';Importante: Aqui devemos substituir onde diz ‘twenty_eleven’ pelo nome do nosso tema, ou qualquer nome que desejarem.
Passo 8: Personalizar, personalizar!
Agora vem o importante: não adianta nada ter um painel repleto de opções que nunca vamos utilizar, por isso é preciso decidir o que vamos precisar e o que não.
A partir da linha 153 aprox., encontraremos as opções do framework; tudo o que adicionarmos ou removermos aqui será refletido no painel de opções.
Ver o anexo 11927
Na imagem anterior podemos ver como funciona o painel; as opções estão armazenadas em arrays, então, por exemplo, na segunda seção pode-se ver o seguinte (Versão simplificada):
PHP:
$sections[] = array(
'icon' => NHP_OPTIONS_URL.'img/glyphicons/glyphicons_107_text_resize.png', // EL ÍCONO QUE LLEVARÁ LA SECCIÓN
'title' => __('Text Fields', 'nhp-opts'), //EN NOMBRE QUE LLEVARÁ LA SECCIÓN
'desc' => __('<p class="description">This is the Description. Again HTML is allowed2</p>', 'nhp-opts'), //LA DESCRIPCIÓN
'fields' => array( //AQUÍ COMIENZAN LOS CAMPOS DE LA SECCIÓN
array(
'id' => '1', //EL ID DEL CAMPO (Puede ser en texto por ejemplo: txt_titulo_principal)
'type' => 'text', // TIPO DE CAMPO (En este caso es un text)
'title' => __('Text Option', 'nhp-opts'), //EL TITULO
'sub_desc' => __('La descripción del campo', 'nhp-opts'),
'desc' => __('Otra descripción para información adicional', 'nhp-opts'),
'std' => '', //EL VALOR POR DEFECTO (Si el usuario lo deja vacio, o el valor con el que vendrá el theme)
),
// más campos de aquí hacia abajo...Agora, a título de exemplo, vou adicionar uma seção que utilizarei em um dos meus temas:
PHP:
$sections[] = array(
'icon' => NHP_OPTIONS_URL.'img/glyphicons/glyphicons_023_cogwheels.png',
'title' => __('Opciones Generales', 'nhp-opts'),
'desc' => __('', 'nhp-opts'),
'fields' => array(
array(
//Select para decidir si se usara una imagen como logo o no.
'id' => 'slc_logo', //El id del campo
'type' => 'select', //Campo del tipo Select
'title' => __('Utilizar un logo para el theme?', 'nhp-opts'), //Titulo
'sub_desc' => __('Selecciona entre si o no', 'nhp-opts'), //Descripción (Opcional)
'desc' => __('', 'nhp-opts'), //Otra descripción (Opcional)
'options' => array('1' => 'No','2' => 'Si'),//Valores del Select (No es = 1 y Si es = 2) IMPORTANTE!
'std' => '1' //El valor por defecto es 1 (Es decir No)
),
array(
//Text para la url de la imagen
'id' => 'logo_url', //El ID será logo_url
'type' => 'text', //Campo tipo texto
'title' => __('Logo URL', 'nhp-opts'), //Titulo
'sub_desc' => __('Ingresa la URL de tu logo', 'nhp-opts'), //Descripción (Opcional)
'desc' => __('Deja este campo vacío si no quieres usar una imagen como logo', 'nhp-opts'), //Otra descripción (Opcional)
'std' => '' //Valor por defecto vacío
)
)
);No código acima, criamos uma seção chamada "Opciones Generales"; dentro dessa seção vão dois campos, um do tipo SELECT e outro do tipo TEXT. O primeiro servirá como estrutura de controle para decidir se utilizaremos ou não uma imagem como logo. Caso contrário, mostraremos o título do Blog (definido nas opções gerais do WordPress).
Então, ao salvar o arquivo e atualizar, minha nova seção deveria ficar assim:
E agora, como diabos utilizo isso no meu tema?, simples:
No passo 7 definimos um nome para as opções, agora devemos inserir este código no lugar que você desejar do tema (header.php de preferência, mas teste em outras seções caso não funcione):
PHP:
<?php $options = get_option('el_nombre_que_elegiste'); ?>Isso armazena todas as nossas opções do tema em $options, e poderemos acessar a elas definindo seu índice ou ID que utilizamos para cada campo. Quando criamos o select para decidir se utilizamos ou não uma imagem como logo, foi atribuído o id de 'slc_logo'.
E agora utilizamos a seção que criamos:
No meu caso e para as minhas necessidades, o código ficou assim:
PHP:
<div id="header">
<h1>
<?php if($options['slc_logo'] == 2): ?>
<a href="<?php echo get_option('home'); ?>/"><img class="logot" src="<?php $options['logo_url'] ?>" /></a>
<?php else: ?>
<a href="<?php echo get_option('home'); ?>"><?php bloginfo('name'); ?></a>
</h1>
</div>No código acima, tenho uma div que define o header do tema, depois vem o h1 onde estará o título do blog ou o logo; para determinar isso, utilizamos as opções do tema. Utilizando um if bastante simples, verificamos qual valor está atribuído ao select que criamos no painel. Caso o select tenha atribuído o valor "2" (que significa "sim"), vamos mostrar uma imagem como logo; a url da imagem será a que o usuário inseriu no segundo dos nossos campos, o text. Chamamos o valor através do seu ID 'logo_url'. Se o select tiver um valor diferente de 2, dentro do h1 irá o título do blog, isso através da função do WordPress bloginfo('name').
Como veem, é questão de experimentar; o framework vem com todas as opções possíveis, campos para gerar degradês, cores, datas, selecionar posts, texto, etc., etc., etc. É só baixar e testar.
Não custa dizer que este é o primeiro tutorial que faço na minha vida, não tenho experiência ensinando e, se ficou muito confuso, podem me consultar; não tenho problemas em responder qualquer tipo de dúvida a respeito.
Bom, espero que isso sirva para alguém, abraços.
