SÓ HOJE 10% DE DESCONTO

USE O CUPOM: SEXTA.FULL

00
Horas
00
Minutos
00
Segundos

Bem vindo ao
Blog da FULL.

Aprenda, crie e cresça seu negócio na internet.

Encontre conteúdos, dicas, tutoriais e novidades sobre as principais ferramentas Wordpress

Como criar uma página simples de opções de tema WordPress

Você está em:

Como criar uma página simples de opções de tema WordPress
Como criar uma página simples de opções de tema WordPress

Embora sejamos um grande fã do personalizador do WordPress para adicionar opções de tema, algumas pessoas preferem um painel de administração simples para seu tema ou desejam incorporar um painel de administração básico além do Personalizador. Neste post, mostrarei como você pode criar facilmente seu próprio painel de administração usando a API de configurações nativas do WordPress por meio de uma classe simples que pode ser facilmente estendida para adicionar mais opções. Isso não é tanto um tutorial, mas mais um código inicial que você pode usar para criar seu painel de administração, então você deve conhecer o código antes de começar

Criando o Painel de Opções do Tema

Abaixo está uma classe que você pode usar para criar seu painel de administração. A classe adicionará um novo painel de opções de tema com 3 configurações diferentes para um exemplo (checkbox, input e select). Simplesmente insira o seguinte código diretamente em seu arquivo functions.php na parte inferior ou crie um novo arquivo e então use a função require_once para chamá-lo em seu arquivo functions.php (preferível).

Captura de tela da página de administração do tema

Antes de mostrar o código, eu queria compartilhar com você uma captura de tela de como é o painel de administração que você criará.

painel de opções de tema de wordpress simples

O código da tela do administrador

Aqui está o código que você precisa para criar o painel de administração e incluir a função auxiliar para obter os valores de qualquer configuração:

<?php

/**

 * Create A Simple Theme Options Panel

 *

 */

// Exit if accessed directly

if ( ! defined( ‘ABSPATH’ ) ) {

exit;

}

// Start Class

if ( ! class_exists( ‘WPEX_Theme_Options’ ) ) {

class WPEX_Theme_Options {

/**

* Start things up

*

* @since 1.0.0

*/

public function __construct() {

// We only need to register the admin panel on the back-end

if ( is_admin() ) {

add_action( ‘admin_menu’, array( ‘WPEX_Theme_Options’, ‘add_admin_menu’ ) );

add_action( ‘admin_init’, array( ‘WPEX_Theme_Options’, ‘register_settings’ ) );

}

}

/**

* Returns all theme options

*

* @since 1.0.0

*/

public static function get_theme_options() {

return get_option( ‘theme_options’ );

}

/**

* Returns single theme option

*

* @since 1.0.0

*/

public static function get_theme_option( $id ) {

$options = self::get_theme_options();

if ( isset( $options[$id] ) ) {

return $options[$id];

}

}

/**

* Add sub menu page

*

* @since 1.0.0

*/

public static function add_admin_menu() {

add_menu_page(

esc_html__( ‘Theme Settings’, ‘text-domain’ ),

esc_html__( ‘Theme Settings’, ‘text-domain’ ),

‘manage_options’,

‘theme-settings’,

array( ‘WPEX_Theme_Options’, ‘create_admin_page’ )

);

}

/**

* Register a setting and its sanitization callback.

*

* We are only registering 1 setting so we can store all options in a single option as

* an array. You could, however, register a new setting for each option

*

* @since 1.0.0

*/

public static function register_settings() {

register_setting( ‘theme_options’, ‘theme_options’, array( ‘WPEX_Theme_Options’, ‘sanitize’ ) );

}

/**

* Sanitization callback

*

* @since 1.0.0

*/

public static function sanitize( $options ) {

// If we have options lets sanitize them

if ( $options ) {

// Checkbox

if ( ! empty( $options[‘checkbox_example’] ) ) {

$options[‘checkbox_example’] = ‘on’;

} else {

unset( $options[‘checkbox_example’] ); // Remove from options if not checked

}

// Input

if ( ! empty( $options[‘input_example’] ) ) {

$options[‘input_example’] = sanitize_text_field( $options[‘input_example’] );

} else {

unset( $options[‘input_example’] ); // Remove from options if empty

}

// Select

if ( ! empty( $options[‘select_example’] ) ) {

$options[‘select_example’] = sanitize_text_field( $options[‘select_example’] );

}

}

// Return sanitized options

return $options;

}

/**

* Settings page output

*

* @since 1.0.0

*/

public static function create_admin_page() { ?>

<div class=”wrap”>

<h1><?php esc_html_e( ‘Theme Options’, ‘text-domain’ ); ?></h1>

<form method=”post” action=”options.php”>

<?php settings_fields( ‘theme_options’ ); ?>

<table class=”form-table wpex-custom-admin-login-table”>

<?php // Checkbox example ?>

<tr valign=”top”>

<th scope=”row”><?php esc_html_e( ‘Checkbox Example’, ‘text-domain’ ); ?></th>

<td>

<?php $value = self::get_theme_option( ‘checkbox_example’ ); ?>

<input type=”checkbox” name=”theme_options[checkbox_example]” <?php checked( $value, ‘on’ ); ?>> <?php esc_html_e( ‘Checkbox example description.’, ‘text-domain’ ); ?>

</td>

</tr>

<?php // Text input example ?>

<tr valign=”top”>

<th scope=”row”><?php esc_html_e( ‘Input Example’, ‘text-domain’ ); ?></th>

<td>

<?php $value = self::get_theme_option( ‘input_example’ ); ?>

<input type=”text” name=”theme_options[input_example]” value=”<?php echo esc_attr( $value ); ?>”>

</td>

</tr>

<?php // Select example ?>

<tr valign=”top” class=”wpex-custom-admin-screen-background-section”>

<th scope=”row”><?php esc_html_e( ‘Select Example’, ‘text-domain’ ); ?></th>

<td>

<?php $value = self::get_theme_option( ‘select_example’ ); ?>

<select name=”theme_options[select_example]”>

<?php

$options = array(

‘1’ => esc_html__( ‘Option 1’, ‘text-domain’ ),

‘2’ => esc_html__( ‘Option 2’, ‘text-domain’ ),

‘3’ => esc_html__( ‘Option 3’, ‘text-domain’ ),

);

foreach ( $options as $id => $label ) { ?>

<option value=”<?php echo esc_attr( $id ); ?>” <?php selected( $value, $id, true ); ?>>

<?php echo strip_tags( $label ); ?>

</option>

<?php } ?>

</select>

</td>

</tr>

</table>

<?php submit_button(); ?>

</form>

</div><!– .wrap –>

<?php }

}

}

new WPEX_Theme_Options();

// Helper function to use in your theme to return a theme option value

function myprefix_get_theme_option( $id = ” ) {

return WPEX_Theme_Options::get_theme_option( $id );

}

Usando as opções do seu tema

Usar suas opções é muito fácil, especialmente com a função auxiliar incluída no código acima. Aqui está um exemplo de como você usaria a função auxiliar para obter e exibir o valor do campo suspenso que tem um ID de “select_example”.

$value = myprefix_get_theme_option( ‘select_example’ );

echo $value;

Mais informações sobre como criar telas de administração

Eu vi TONELADAS de páginas de administração todas criadas de maneiras muito distintas, mas eu pessoalmente gosto do método que mostrei acima. É muito simples e direto ao ponto. Não há necessidade de ficar tão louco com suas opções de tema! Se você precisar de mais informações para criar telas de administração, confira o Codex de telas de administração .

Aprenda com a FULL.

Junte-se a mais de 50 mil pessoas que recebem em primeira mão as principais ferramentas e tecnologia para desenvolvimento web

O meu carrinho
🎁 Faltam 300,00 para liberar o Cupom Secreto
O seu carrinho está vazio.

Parece que ainda não tomou uma decisão.