Primeiro Plugin para WordPress

O famoso começando do zero.

Neste artigo vou apresentar um esboço para um plugin do WordPress.

Todos os códigos foram obtido do site do Handbook do WordPress e tiveram os comentários traduzidos e partes editadas para melhor se adequar a nossa solução.

Se você está com um tempinho assista o vídeo e já se inscreve no nosso canal e fica ligado que toda semana tem novidade.

Mas se veio aqui na urgência de obter o código segue, não esquece de depois mandar pelos comentários o link pra eu dar uma olhada em como ficou:

Este é o arquivo wa-link.php ele está dentro da pasta do plugin que tem o mesmo nome.

<?php
/**
 * Plugin Name: WhatsApp Link
 * Description: Cria um link flutuante que leva para uma conversa no WhatsApp.
 * Version: 1.0.0
 * Author: Sandro Graziosi
 * Author URI: https://wordpressinterior.com.br
*/

 
/**
 * Adiciona item no menu e uma página para usarmos para configurar as opções do plugin.
 */

if ( !function_exists( 'wal_options_page' ) ) {
    function wal_options_page() {
        add_menu_page(
            'Ajustes do WhatsApp Link',
            'WhatsApp Link',
            'manage_options',
            'wal',
            'wal_options_page_html',
            'dashicons-whatsapp'
        );
    }
    add_action( 'admin_menu', 'wal_options_page' );
}

/**
 * Fuçãao de callback para o item do menu
 */
if ( !function_exists( 'wal_options_page_html' ) ) {
    function wal_options_page_html() {

        if ( ! current_user_can( 'manage_options' ) ) {
            return;
        }
        
        if ( isset( $_GET['settings-updated'] ) ) {            
            add_settings_error( 'wal_messages', 'wal_message', __( 'Settings Saved', 'wal' ), 'updated' );            
            settings_errors( 'wal_messages' );
        }    
        
        ?>
        <div class="wrap">
            <h1><?php echo esc_html( get_admin_page_title() ); ?></h1>
            <form action="options.php" method="post">
                <?php
                // output security fields for the registered setting "wal"
                settings_fields( 'wal' );
                // output setting sections and their fields
                // (sections are registered for "wal", each field is registered to a specific section)
                do_settings_sections( 'wal' );
                // output save settings button
                submit_button( 'Salvar' );
                ?>
            </form>
        </div>
        <?php
    }
}

/**
 * Opções customizadas para configurações: Criar a 
 */
if ( !function_exists( 'wal_settings_init' ) ) {
    function wal_settings_init() {
        //Registre uma nova configuração para a página "wal".
        register_setting( 'wal', 'wal_options' );
    
        //Cadastre uma nova seção na página "wal".
        add_settings_section(
            'wal_section_developers',
            __( 'WhatsApp Link.', 'wal' ), 'wal_section_developers_callback', 'wal'
        );
    
        // Register a new field in the "wal_section_developers" section, inside the "wal" page.
        add_settings_field(
            'wal_field_tel', 
            __( 'Número do telefone', 'wal' ),
            'wal_field_tel_cb',
            'wal',
            'wal_section_developers',
            array(
                'label_for'         => 'wal_field_tel',
                'class'             => 'wal_row',
                'wal_custom_data' => 'custom',
            )
        );
    }
    
    /**
     * Registre nosso wal_settings_init no gancho de ação admin_init.
     */
    add_action( 'admin_init', 'wal_settings_init' );   
}


/**
 * Custom option and settings:
 *  - callback functions
 */
 
 
/**
 * Developers section callback function.
 *
 * @param array $args  The settings array, defining title, id, callback.
 */
function wal_section_developers_callback( $args ) {
    ?>
    <p id="<?php echo esc_attr( $args['id'] ); ?>"><?php esc_html_e( 'Ajustes e configurações.', 'wal' ); ?></p>
    <?php
}
 
/**
 * tel field callbakc function.
 *
 * WordPress has magic interaction with the following keys: label_for, class.
 * - the "label_for" key value is used for the "for" attribute of the <label>.
 * - the "class" key value is used for the "class" attribute of the <tr> containing the field.
 * Note: you can add custom key value pairs to be used inside your callbacks.
 *
 * @param array $args
 */
function wal_field_tel_cb( $args ) {
    // Get the value of the setting we've registered with register_setting()
    $options = get_option( 'wal_options' );
    ?>
    <input type="text" value="<?=$options[ $args['label_for'] ]?>" id="<?php echo esc_attr( $args['label_for'] ); ?>"
            data-custom="<?php echo esc_attr( $args['wal_custom_data'] ); ?>"
            name="wal_options[<?php echo esc_attr( $args['label_for'] ); ?>]" placeholder="552196312XXXX">    
    <p class="description">
        <?php esc_html_e( 'Número do telefone: 552196312XXXX', 'wal' ); ?>
    </p>    
<?php }

if ( !is_admin() ) {
    wp_enqueue_style( 'wa-link', plugins_url('/css/wa-link.css', __FILE__) );
    if ( !function_exists( 'wa_link_start' ) ) {        
        function wa_link_start() { ?>
            <div id="wa-link">            
                <?php 
                $options = get_option( 'wal_options' );
                //print_r($options); ?>
                <a href="https://wa.me/<?=$options[ 'wal_field_tel' ]?>?text=Olá, consegui seu contato pelo site, meu nome é " target="_blank">
                    <img src="<?=plugins_url('/img/wa-icon.png', __FILE__ )?>" alt="Icone do WhatsApp">
                </a>
            </div>
        <?php }
        add_action('init', 'wa_link_start');
    }
}

O próximo passo será criarmos uma maneira de quando desinstalarmos o plugin faça a limpeza das opções salvas na tabela de opções. Acompanhe o canal e o blog para ver essa solução.

Deixe um comentário