Close

Criando páginas de opções personalizadas WP

Criando páginas de opções personalizadas WP

  1. Crie uma página de administrador
  2. Adicionar campos

Antes de mais nada, verifique a captura de tela, é o que vamos criar neste tutorial:

WordPress settings page with input field

1. Crie uma página de administrador

O primeiro passo para nós é decidir onde exatamente no menu do administrador vamos criar uma página de opções.

WordPress admin menu

Existem basicamente duas funções para isso:

  • add_menu_page() – para criar uma nova página de menu de nível superior,
  • add_submenu_page() – para criar uma página de submenu.

Para simplificar o processo, em vez de add_submenu_page()você pode usar add_dashboard_page()add_posts_page()add_pages_page()add_comments_page()add_theme_page()add_plugins_page(),

 add_users_page()add_management_page()ou add_options_page()dependendo de onde você está indo para adicionar a sua página de submenu.

Ok, vamos mergulhar nos exemplos.

Crie uma página de menu personalizada de nível superior

Dê uma olhada neste código:

add_menu_page( 'My Page Title', // page <title>Title</title> 'My Page', // menu link text 'manage_options', // capability to access the page 'misha-slug', // page URL slug 'misha_page_content', // callback function /w content 'dashicons-star-half', // menu icon 5 // priority );   }   function misha_page_content(){   echo 'What is up?';   }

É super simples, mas se você o inserir no seu functions.phparquivo, uma nova página de administrador aparecerá.

Custom menu page in WordPress admin area

Se você não entende como adicionei um ícone lá, basta verificar o conjunto de ícones do Dashicons .

Crie uma página de opções personalizadas

Criar um novo item de menu com um ícone é legal, mas a verdade é que quando você cria uma página de configurações de plug-in, é sempre melhor adicioná-lo como uma página de submenu em Configurações.

É a melhor prática e, na maioria dos casos, recomendo que você faça dessa maneira.

add_action( ‘admin_menu’, ‘misha_options_page’ );

 
function misha_options_page() {
 
	add_options_page(
		'My Page Title', // page <title>Title</title>
		'My Page', // menu link text
		'manage_options', // capability to access the page
		'misha-slug', // page URL slug
		'misha_page_content', // callback function with content
		2 // priority
	);
 
}
 
function misha_page_content(){
 
	echo 'What is up?';
 
}

Muito parecido com o exemplo anterior, não é? Só não temos mais um parâmetro de ícone.

How to create an options page in WordPress

Agora você já sabe como adicionar qualquer HTML personalizado às suas páginas de opções, mas no próximo capítulo mostrarei como criar corretamente os campos de configurações.

2. Adicione campos com a API de configurações

Antes de tudo, vamos preencher nossa misha_page_content()função que criamos na etapa anterior.

function misha_page_content(){

 
	echo '<div class="wrap">
	<h1>My Page Settings</h1>
	<form method="post" action="options.php">';
 
		settings_fields( 'misha_settings' ); // settings group name
		do_settings_sections( 'misha-slug' ); // just a page slug
		submit_button();
 
	echo '</form></div>';
 
}

Não faremos mais alterações nessas funções. Tudo que você tem que saber é que nós usamos duas funções settings_fields()do_settings_sections()para imprimir todos os campos configurações e para preenchê-los com dados.

Se você fez tudo corretamente até esse momento, terá o seguinte:

WordPress options page without fields

2.1 Registre uma configuração e crie um campo

add_action( 'admin_init',  'misha_register_setting' );
 
function misha_register_setting(){
 
	register_setting(
		'misha_settings', // settings group name
		'homepage_text', // option name
		'sanitize_text_field' // sanitization function
	);
 
	add_settings_section(
		'some_settings_section_id', // section ID
		'', // title (if needed)
		'', // callback function (if needed)
		'misha-slug' // page slug
	);
 
	add_settings_field(
		'homepage_text',
		'Homepage text',
		'misha_text_field_html', // function which prints the field
		'misha-slug', // page slug
		'some_settings_section_id', // section ID
		array( 
			'label_for' => 'homepage_text',
			'class' => 'misha-class', // for <tr> element
		)
	);
 
}
 
function misha_text_field_html(){
 
	$text = get_option( 'homepage_text' );
 
	printf(
		'<input type="text" id="homepage_text" name="homepage_text" value="%s" />',
		esc_attr( $text )
	);
 
}

O que é esc_attr()função e por que está aqui? Há um tutorial separado no meu blog sobre saída de escape, onde eu disse que o banco de dados não é uma fonte confiável de dados e é por isso que devemos usar as funções de escape antes de enviar algo para o conteúdo da página.

E agora temos uma página de opções de trabalho:

WordPress settings page with input field

2.2 Sanitização

Vamos voltar por um momento para uma register_setting()função do trecho de código anterior.

register_setting(

	'misha_settings',
	'homepage_text',
	'sanitize_text_field' // sanitization function
);

O terceiro parâmetro é o nome da função que se destina a limpar (limpar) os dados do campo antes de salvar no banco de dados. Por exemplo, sanitize_text_field()é a função padrão do WordPress que remove todos os caracteres que não são permitidos em uso em um campo de texto de entrada. Se você deseja passar um número inteiro, use nomes de funções intval()ou absint()funções. Ou crie uma função de limpeza personalizada para sua finalidade.

Exemplo para números inteiros positivos:

register_setting( 'misha_settings', 'number_of_slides', 'absint' );