Wordpress logo

Todos os temas premium (pagos) do WordPress têm uma página de opções onde você pode alterar milhares de coisas no layout, desde cores de fundo até upload de imagens para logo e favicon.

Normalmente eles criam suas páginas utilizando suas próprias funções, scripts e HTML, porém, o WordPress nos proporciona milhares de opções para adicionar páginas de menu e funções de callback para configurar tudo da maneira que preferirmos.

Neste tutorial vamos configurar uma página de opções bem simples para você entender como isso funciona em temas WordPress. Após sua leitura, você será capaz de criar sua própria página de opções da maneira que preferir.

Observação: Apesar de estarmos criando a página de opções em um tema, isso funciona em plugins da mesma maneira.

Aulas anteriores

Este artigo faz parte de uma série de artigos sobre “Criar tema WordPress”, portanto, a leitura das aulas anteriores irá ajudar no seu entendimento do que você vai ler aqui.

  1. Estrutura de arquivos de um tema WordPress
  2. Arquivo functions.php de um tema WordPress
  3. PHP, HTML e CSS em temas WordPress
  4. Paginação em temas WordPress
  5. Formulário de pesquisa para temas WordPress
  6. Criando o template de comentários WordPress
  7. Menu em temas WordPress
  8. Page templates no WordPress (Modelos de página)
  9. Custom Post Types no WordPress
  10. Criando Meta Box em tema WordPress

Você poderá fazer o download de tudo o que foi descrito em todas as aulas (incluindo a que você lê agora) no final do artigo.

Alterando nosso functions.php

A primeira coisa que vamos fazer é alterar o nosso arquivo functions.php para adicionar o que vamos precisar.

Primeiramente, vamos garantir que quando um usuário ativar nosso tema, a página seja redirecionada para a página de opções que vamos criar.

// Assim que nosso tema for ativado, redireciona para a página de opções
if ( is_admin() && isset( $_GET['activated'] ) ) {
	header( 'Location: ' . admin_url() . 'themes.php?page=tutsup_opcoes_tema');
}

Agora vamos obter as opções da base de dados, não se preocupe se elas ainda não existem, isso não vai gerar erros:

// Opções do tema
$tutups_opcoes_tema = get_option( 'tutsup_opcoes_tema' );

Vamos criar uma função que verifica se uma chave existe em um array (isso é PHP puro) para verificar nossas opções:

// Função para verificar e retornar nossas opções
function tutsup_chk ( $array, $key ) {
	if ( isset( $array[$key] ) ) {
		return $array[$key];
	} else {
		return false;
	}
}

Agora vamos carregar um arquivo que ainda não existe, mas vamos criar posteriormente:

// Classe para carregar as opções
load_template( get_template_directory() . '/classes/class-tutsup-opcoes-tema.php' );

Se você entende de PHP, vai perceber que estamos incluindo um arquivo de classe que está dentro da pasta classes chamado class-tutsup-opcoes-tema.php.

Vamos criar este arquivo.

Criando a classe de opções

Antes que você continue, se você não entende de classes, tire um tempo para ler nossos tutoriais sobre PHP Orientado a objetos.

O primeiro passo será criar a pasta e o arquivo que precisamos, então crie uma pasta chamada “classes” e um arquivo PHP chamado class-tutsup-opcoes-tema.php.

Dentro desse arquivo, a primeira coisa que vamos fazer é verificar se a classe que vamos criar existe:

if ( ! class_exists('TutsupOpcoesTema') ) {

    // Nosso código virá aqui

}

Isso vai evitar erros caso alguém tenha tido a ideia de criar uma classe com o mesmo nome da nossa.

Agora vamos criar a classe:

class TutsupOpcoesTema
{
    // Nossos métodos e propriedades virão aqui
}

// Carrega a classe
$tutsup_opcoes_tema = new TutsupOpcoesTema();

Não adicionei nenhum método nem propriedade em nossa classe porque vou fazer isso por partes, ao final vou mostrar o arquivo completo.

Propriedade de opções

Nossa propriedade de opções irá receber as propriedades já configuradas em nosso tema, então vamos configurá-la sem nenhum valor por enquanto:

// As opções
protected $options;

 Método construtor

Em nosso construtor, vamos adicionar o seguinte:

/**
 * Construtor
 *
 * Carrega todas as funções.
 */
public function __construct () {

	// Variável de opções que está no functions.php
	global $tutups_opcoes_tema;
	
	// Configura as opções dentro da classe
	$this->options = $tutups_opcoes_tema;
		
	/* Essa classe só executa ações para a área administrativa */
	if ( is_admin() ) {
		
		// Carrega os scripts e styles necessários
		add_action( 
			'admin_enqueue_scripts', 
			array( $this, 'carrega_scripts' ) 
		);

		// Adiciona o menu de opções
		add_action('admin_menu', array( $this, 'adiciona_menu' ) );
		
		// Registra nossas opções
		add_action( 'admin_init', array( $this, 'registra_opcoes' ) );
	} // is_admin
	
} // __construct

Veja que nosso construtor configura nossas opções na propriedade que criamos anteriormente e adiciona um monte de ações, das quais ainda não criamos os métodos.

Vamos criar os métodos necessários abaixo.

Carrega scripts e styles na área administrativa

O WordPress tem milhares de coisas legais que vão nos ajudar a criar nossas opções, tais como “Media Uploader” (para upload de imagens) e “Color Picker” (Para escolher cores). Vamos adicionar os scripts e styles para todos eles.

/**
 * Carrega scripts e styles
 */
public function carrega_scripts() {

	// Caixa de upload de imagem
	wp_enqueue_script('media-upload');
	
	// Thickbox
	wp_enqueue_script('thickbox');
	wp_enqueue_style('thickbox');
	
	// Color picker (para cores)
	wp_enqueue_style( 'wp-color-picker' );
	
	// Nosso script
	wp_enqueue_script( 
		'admin_settings', 
		get_template_directory_uri() . '/js/admin-settings.js', 
		array('wp-color-picker'), 
		'1.0.0', 
		true 
	);
	
} // carrega_scripts

Em nossa última chamada, chamamos “Nosso script”, isso porque será necessário criar um script jQuery para utilizar tudo o que o WordPress oferece de bom.

Vamos aproveitar e criar este script.

Criando o script para nossa área administrativa

Crie uma pasta chamada “js” (se ela ainda não existir) e, dentro da mesma, um arquivo chamado admin-settings.js. Nele adicione o seguinte:

jQuery(function( $ ){
	$('.fundo').wpColorPicker();
});

Só isso, mais nada!

Criando o menu na área administrativa

Agora vamos criar a função que vai criar nosso menu:

/**
 * Função para adicionar o menu na área administrativa
 */
public function adiciona_menu() {

	// Creates a page for editing the theme options
	add_theme_page(
		'Opções do tema',            // Título da página
		'Opções do tema',            // Título do menu
		'edit_themes',               // Permissões
		'tutsup_opcoes_tema',        //	Slug do menu
		array( $this, 'admin_html' ) // Função de callback
	);
	
} // adiciona_menu

Agora você já deve estar vendo o menu dentro da opção de temas da sua área administrativa:

Opções do tema

Opções do tema

Veja que na função add_theme_page, existe uma opção de função de callback. Esse callback é o que vai exibir o HTML dentro da nossa página de opções.

Vamos criar esse método.

Callback para gerar o HTML

Veja como ficou nossa função de callback:

/**
 * Carrega a página HTML que será apresentada na área administrativa
 */
public function admin_html() {		
?>

<div class="wrap">

<form method="post" action="options.php">
	<?php
		settings_fields( 'tutsup_opcoes_tema' );
		do_settings_sections( 'tutsup_opcoes_tema' );
	?>

	<h3>Opções do tema</h3>
		
	Texto do rodapé:<br>
	<input class="regular-text" type="text" value="<?php 
	echo esc_attr( tutsup_chk( $this->options, 'rodape' ) );
	?>" name="tutsup_opcoes_tema[rodape]"><br><br>
		
	Cor de fundo:<br>
	<input class="fundo" type="text" value="<?php 
	echo esc_attr( tutsup_chk( $this->options, 'fundo' ) );
	?>" name="tutsup_opcoes_tema[fundo]"><br><br>

	<p>
		<?php submit_button(); ?>
	</p>
	
</form>
</div>

<?php

} // admin_html

Então temos dois inputs, um com uma opção de Texto do rodapé e outra com Cor de fundo. Porém, essa página ainda não faz nada, já que ainda não registramos nossa opção. Vamos fazer isso.

Registrando nossa opção

Para registrar nossa opção, vamos utilizar a função register_setting do WordPress, veja:

/**
 * Função para registrar nossas opções
 */
public function registra_opcoes() {

	register_setting( 
		'tutsup_opcoes_tema', 
		'tutsup_opcoes_tema', 
		array( $this, 'valida_campos' ) // Função de callback
	);
	
} // registra_opcoes

Veja, novamente, que temos mais um callback para criar, este irá validar nossos campos do formulário (caso necessário).

Vamos criar este último método.

Validando os campos

Vou validar apenas um campo para que você entenda como fazer, o restante é tudo igual:

// Callback para validar os campos enviados (se necessário)
public function valida_campos( $input ) {
	
	// Vamos validar apenas o fundo, só para você entender
	if( isset( $input['fundo'] ) ) {
		$input['fundo'] = sanitize_text_field( $input['fundo'] );
	}
	
	return $input;
	
} // valida_campos

Classe completa

Se você se perdeu em algum ponto do tutorial, veja como ficou nossa classe completa:

<?php
/**
 * Classe TutsupOpcoesTema - Carrega as opções do tema
 *
 * Este é um template básico para suas criações mais avançadas.
 */
 
// Verifica se a classe já existe
if ( ! class_exists('TutsupOpcoesTema') ) {

	// Cria a classe
	class TutsupOpcoesTema
	{
		// As opções
		protected $options;

		/**
		 * Construtor
		 *
		 * Carrega todas as funções.
		 */
		public function __construct () {
		
			// Variável de opções que está no functions.php
			global $tutups_opcoes_tema;
			
			// Configura as opções dentro da classe
			$this->options = $tutups_opcoes_tema;
				
			/* Essa classe só executa ações para a área administrativa */
			if ( is_admin() ) {
				
				// Carrega os scripts e styles necessários
				add_action( 
					'admin_enqueue_scripts', 
					array( $this, 'carrega_scripts' ) 
				);

				// Adiciona o menu de opções
				add_action('admin_menu', array( $this, 'adiciona_menu' ) );
				
				// Registra nossas opções
				add_action( 'admin_init', array( $this, 'registra_opcoes' ) );
			} // is_admin
			
		} // __construct
		
		/**
		 * Função para adicionar o menu na área administrativa
		 */
		public function adiciona_menu() {
		
			// Creates a page for editing the theme options
			add_theme_page(
				'Opções do tema',            // Título da página
				'Opções do tema',            // Título do menu
				'edit_themes',               // Permissões
				'tutsup_opcoes_tema',        //	Slug do menu
				array( $this, 'admin_html' ) // Função de callback
			);
			
		} // adiciona_menu
		
		/**
		 * Função para registrar nossas opções
		 */
		public function registra_opcoes() {
		
			register_setting( 
				'tutsup_opcoes_tema', 
				'tutsup_opcoes_tema', 
				array( $this, 'valida_campos' ) // Função de callback
			);
			
		} // registra_opcoes
		
		// Callback para validar os campos enviados (se necessário)
		public function valida_campos( $input ) {
			
			// Vamos validar apenas o fundo, só para você entender
			if( isset( $input['fundo'] ) ) {
				$input['fundo'] = sanitize_text_field( $input['fundo'] );
			}
			
			return $input;
			
		} // valida_campos
		
		/**
		 * Carrega a página HTML que será apresentada na área administrativa
		 */
		public function admin_html() {		
?>

<div class="wrap">

	<form method="post" action="options.php">
		<?php
			settings_fields( 'tutsup_opcoes_tema' );
			do_settings_sections( 'tutsup_opcoes_tema' );
		?>
		
		<h3>Opções do tema</h3>
			
		Texto do rodapé:<br>
		<input class="regular-text" type="text" value="<?php 
		echo esc_attr( tutsup_chk( $this->options, 'rodape' ) );
		?>" name="tutsup_opcoes_tema[rodape]"><br><br>
			
		Cor de fundo:<br>
		<input class="fundo" type="text" value="<?php 
		echo esc_attr( tutsup_chk( $this->options, 'fundo' ) );
		?>" name="tutsup_opcoes_tema[fundo]"><br><br>
		
		<p>
			<?php submit_button(); ?>
		</p>
	</form>
</div>

<?php

		} // admin_html
		
		/**
		 * Carrega scripts e styles
		 */
		public function carrega_scripts() {
		
			// Caixa de upload de imagem
			wp_enqueue_script('media-upload');
			
			// Thickbox
			wp_enqueue_script('thickbox');
			wp_enqueue_style('thickbox');
			
			// Color picker (para cores)
			wp_enqueue_style( 'wp-color-picker' );
			
			// Nosso script
			wp_enqueue_script( 
				'admin_settings', 
				get_template_directory_uri() . '/js/admin-settings.js', 
				array('wp-color-picker'), 
				'1.0.0', 
				true 
			);
			
		} // carrega_scripts
	
	} // Class TutsupOpcoesTema

	// Carrega a classe
	$tutsup_opcoes_tema = new TutsupOpcoesTema();
}

Se você quiser remover o HTML do meio da classe, basta criar um arquivo separado e fazer a inclusão com a função require do PHP.

Veja como ficou:

Página de opções em temas WordPress

Página de opções em temas WordPress

Obtendo as opções dentro do tema

Para acessar as opções e realizar as ações dentro do seu tema WordPress, basta fazer com que a variável $tutups_opcoes_tema seja global dentro do seu template file.

Por exemplo, vou exibir o texto no rodapé (footer.php), abra este arquivo e adicione o trecho de código abaixo na primeira linha:

<?php global $tutups_opcoes_tema; ?>

Agora escolha um local e adicione o seguinte:

<?php 
if ( tutsup_chk( $tutups_opcoes_tema, 'rodape' ) ) {
	echo tutsup_chk( $tutups_opcoes_tema, 'rodape');
} else {
	echo 'Copyright &copy; Tutsup 2014';
}
?>

Veja como ficou meu arquivo footer.php completo:

<?php global $tutups_opcoes_tema; ?>

<footer class="conteudo rodape padding-total">
	<div class="linha clearfix">
		<div class="colunas largura-total">
			<div class="conteudo-coluna margem-total">
				<?php 
				if ( tutsup_chk( $tutups_opcoes_tema, 'rodape' ) ) {
					echo tutsup_chk( $tutups_opcoes_tema, 'rodape');
				} else {
					echo 'Copyright &copy; Tutsup 2014';
				}
				?>
			</div>
		</div>
	</div>
</footer>

<!-- 
O restante do rodapé que virá dentro do body. 
Criado automaticamente pelo WordPress. 
-->
<?php wp_footer(); ?>

</div><!-- .pagina -->

<!-- Fecha o body -->
</body>

<!-- Fecha o HTML -->
</html>

 Modificando a cor de fundo do tema

Agora, abra seu arquivo header.php, faça nossa variável se tornar global, e adicione o trecho de código abaixo de wp_head().

<?php 
if ( tutsup_chk( $tutups_opcoes_tema, 'fundo' ) ) {
	echo '<style>';
	echo 'body{ background-color: ' . tutsup_chk( $tutups_opcoes_tema, 'fundo' ) . ';';
	echo '</style>';
}
?>

No trecho de código acima, estamos simplesmente verificando se a opção “fundo” existe e se tem algum valor; se sim, modificamos a cor de fundo do body utilizando seu valor.

Você poderia fazer isso utilizando um filtro em wp_head(), mas eu não quis complicar mais (já está bem avançado).

Veja como ficou meu header.php completo:

<?php global $tutups_opcoes_tema; ?>

<!DOCTYPE html>
<html class="no-js" <?php language_attributes(); ?>>

<head>
	<!-- O charset padrão -->
	<meta charset="<?php bloginfo('charset'); ?>">
	
	<!-- Necessário para layout responsivo -->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	
	<!-- O título do blog -->
	<title><?php wp_title(''); ?></title>

	<!-- 
	O restante do cabeçalho que virá dentro da head. 
	Criado automaticamente pelo WordPress. 
	-->
	<?php wp_head(); ?>
	
	<?php 
	if ( tutsup_chk( $tutups_opcoes_tema, 'fundo' ) ) {
		echo '<style>';
		echo 'body{ background-color: ' . tutsup_chk( $tutups_opcoes_tema, 'fundo' ) . ';';
		echo '</style>';
	}
	?>
</head>

<!-- Início do body -->
<body <?php body_class(); ?>>

<div id="pagina" class="pagina"> <!-- .pagina -->

<header class="conteudo cabecalho padding-total">
	<div class="linha clearfix">
		<div class="colunas principal">
			<div class="conteudo-coluna margem-total">
				<h1> 
					<a href="<?php bloginfo('url'); ?>">
						<?php bloginfo('name'); ?> 
					</a>
				</h1>
			</div>
		</div>
		
		<div class="colunas lateral">
			<div class="conteudo-coluna margem-total">
				<div class="search-form">
					<?php get_search_form(); ?>
				</div>
			</div>
		</div>
	</div>
</header>

<?php
$header_menu_args = array(
	'theme_location'  => 'header',
	'menu'            => '',
	'container'       => 'nav',
	'container_class' => 'main-menu clearfix',
	'container_id'    => '',
	'menu_class'      => '',
	'menu_id'         => '',
	'echo'            => true,
	'fallback_cb'     => 'wp_page_menu',
	'before'          => '',
	'after'           => '',
	'link_before'     => '',
	'link_after'      => '',
	'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
	'depth'           => 0,
	'walker'          => ''
);

wp_nav_menu( $header_menu_args );
?>

Pronto, agora você tem uma página de opções simples e funcional.

Download

Caso queira baixar os arquivo criados nessa aula e aulas anteriores para testes, utilize o link abaixo:

Você vai precisar descompactar o arquivo dentro de wp-content/themes e ativar o tema para visualizar tudo.

Concluindo

Criar uma página de opções no WordPress não é tão simples quanto fazer outras coisa, é necessário que você entenda como funcionam as coisas antes de se aventurar. Tentei deixar tudo muito básico e direto nesse tutorial, porém, caso tenha dúvidas, basta perguntar nos comentários.