Como criar um plugin WordPress personalizado

Procurando maneiras de criar um plugin WordPress personalizado? Neste tutorial, mostraremos como criar um plugin WP do zero que permitirá remover alguns elementos das páginas do produto WooCommerce.

Antes de passarmos pelo processo, vamos ver por que você pode precisar criar um plugin WordPress personalizado primeiro.

Por que criar um plugin personalizado no WordPress?

Todos nós sabemos que existe um grande número de plugins gratuitos e pagos disponíveis no WordPress. Todos eles são desenvolvidos com vários recursos para aumentar a funcionalidade do seu site. No entanto, alguns dos recursos do plug-in podem ser desnecessários para seu site e podem atuar como um peso adicional para sua estrutura.

Às vezes, tudo o que você precisa é de uma ferramenta com um recurso muito específico. Mas alguns plugins estão tão sobrecarregados com recursos adicionais que você não conseguirá usá-los em todo o seu potencial. Nesses casos, você pode simplesmente criar um plugin WordPress personalizado.

Por exemplo, digamos que você queira remover elementos da página do seu produto ou de qualquer outra página do WooCommerce usando um plug-in dedicado. A maioria dos plugins fornecerá alguns recursos adicionais além de remover os elementos. Isso aumentará o tamanho do plug-in, bem como o armazenamento do site, o que também pode prejudicar o desempenho do seu site.

Claro, você também pode usar script CSS ou ganchos WooCommerce para remover os elementos também. Mas eles podem trazer alguns problemas para o seu site se você atualizar seu tema WordPress sem execuções adequadas. Mas se você criar um plug-in personalizado, é menos provável que as modificações prejudiquem seu site em qualquer circunstância.

Como criar um plugin WordPress personalizado?

Todo o processo para criar um plugin WordPress personalizado é bem mais fácil do que você pensa. Mas vamos começar com algumas coisas que devemos ter em mente antes de criarmos um plugin personalizado.

1. Preparando-se para começar

Há uma série de requisitos que devem ser atendidos por você para criar um plugin WordPress personalizado. Eles estão:

• Instalação do WordPress em um servidor localhost

Embora você possa desenvolver um plug-in em um servidor ativo, é uma prática muito ruim fazê-lo enquanto o site estiver online. Se você fizer alterações desnecessárias no site, ele poderá passar por alguns problemas graves. Portanto, para evitá-los, você precisará configurar um ambiente de teste de host local para criar um plugin WordPress personalizado, caso ainda não tenha um.

• Usar um editor de código

O WordPress vem com um editor de plugins embutido para adicionar e modificar códigos para seus plugins. Você também pode trabalhar com ele para criar um WordPress personalizado. Mas sugerimos usar um editor de código (IDE) como Sublime Text, Visual Studio Code ou qualquer editor semelhante.

Eles têm várias ferramentas e recursos necessários para criar um plug-in personalizado. Portanto, é muito mais confortável trabalhar com um IDE, pois será muito melhor do que usar o editor de código WP.

• Alguns conhecimentos básicos de desenvolvimento WP.

Para criar um plugin WordPress personalizado, usaremos ganchos WP, funções PHP e definiremos nossas próprias funções. Portanto, recomendamos que você continue com este tutorial apenas se tiver conhecimento básico de desenvolvimento do WordPress. Caso contrário, pode ser muito difícil para você desenvolver um plugin personalizado por conta própria.

Estes são alguns dos requisitos e recursos básicos que você precisa para criar um plugin personalizado. Certifique-se de que todos esses requisitos sejam atendidos antes de prosseguirmos com o tutorial.

2. Crie o arquivo principal para o plugin WordPress personalizado

O primeiro passo para criar um plugin WordPress personalizado é criar um arquivo principal do plugin. Na verdade, apenas um único arquivo principal é necessário para criar um plugin. Deve ter um bloco comentado com o nome do plugin.

Este é o único valor exigido pelo WP para que ele reconheça que este é um plugin. No entanto, para seguir as boas práticas e evitar problemas, precisamos inserir algumas outras informações aqui.

Então vamos começar a trabalhar nele e criar este arquivo.

Abra sua pasta pública localhost e vá para a instalação do WP em que você vai trabalhar. Em seguida, navegue até a pasta “ wp-content/plugins ” e você verá todos os plugins instalados lá

Vamos simplesmente adicionar nosso novo arquivo de plugin personalizado aqui.

Crie uma nova pasta na pasta wp-content/plugins da sua instalação do WP. Para facilitar o entendimento, nomeamos o plugin QuadLayers_custom_products neste tutorial.

Dentro desta pasta, todos os seus arquivos de plugin estarão localizados. Então, vamos criar nosso arquivo principal diretamente na pasta que acabamos de criar. Deve estar em um formato de arquivo .php

Este arquivo principal, que chamamos de QuadLayers_cp.php , onde tudo começa. É a porta de entrada do plugin. Você pode usar o editor de código para criar o arquivo, mas apenas certifique-se de que ele tenha a extensão PHP e que esteja formatado corretamente como um arquivo PHP.

Copie e cole este código no arquivo:

 <?php

/**
 * @link https://quadlayers.com/
 * @desde 0.0.1
 * @package QuadLayers Produtos Personalizados
 * Nome do Plugin: Produtos Personalizados QuadLayers  
 * URI do plug-in: https://quadlayers.com/
 * Descrição: Personalize a página única do produto removendo elementos
 * Versão: 0.0.1
 * Autor: QuadLayers
 * Domínio de texto: qlcp
 */
 
if(!defined('ABSPATH')){die('-1');}

função iniciar(){ 		
        if(is_admin()==true){
        requer plugin_dir_path( __FILE__ ).'includes/Backend/QuadLayers-backend-init.php';
        }
        require plugin_dir_path( __FILE__ ).'includes/Frontend/QuadLayers-frontend-init.php';
 }  
função runit(){
    add_action('init','start');
}
executá-lo();

Como você pode ver, estamos simplesmente chamando mais dois arquivos daqui: QuadLayers-frontend-init.php e QuadLayers-backend-init.php . Obviamente, um funcionará no frontend e o outro no backend, respectivamente. Você pode deduzi-lo claramente com seus nomes de arquivo.

Fora deles, podemos garantir que o arquivo backend funcionará apenas no backend porque estamos usando uma condicional com a função is_admin() . Isso significa que ele será acionado apenas quando o administrador estiver no painel de administração do WP.

No momento, você terá alguns erros em seu site porque os arquivos front-end e back-end ainda não existem. Então vamos em frente e criá-los.

Crie uma nova pasta dentro do diretório do plugin chamada includes . Em seguida, adicione mais duas pastas dentro dele: backend e frontend .

Para se livrar dos erros de caminho errado, crie dois arquivos vazios, cada um dentro de cada uma dessas pastas: QuadLayers-backend-init.php dentro da pasta backend e QuadLayers-frontend-init.php na pasta frontend.

Então, esta seria a nossa estrutura final do arquivo do plugin:

 QuadLayers_custom_products
    __QuadLayers_cp.php
    __inclui
       __Processo interno
          __QuadLayers-backend-init.php
       __Frente
          __QuadLayers-frontend-init.php

3. Opções de back-end

Depois de adicionar o arquivo principal, podemos começar a adicionar as opções de back-end do plugin. Aqui, vamos criar uma guia de menu de plugins no painel de administração do WP. Isso permitirá que os usuários escolham algumas opções para ocultar ou exibir os elementos no front-end.

Usaremos a API de configurações fornecida pelo WP para esta demonstração. Não se preocupe se você ainda não entendeu isso porque não é tão difícil de aprender e há muita documentação sobre isso.

Se você quiser saber mais sobre isso, aqui está um guia completo para WP Settings API

Por enquanto, basta copiar e colar o seguinte código no arquivo QuadLayers-backend-init.php

 <?php 
add_action('admin_init', 'QuadLayers_display_options'); 
add_action('admin_menu', 'QuadLAyers_cp_AdminMenu'); 
function QuadLAyers_cp_AdminMenu(){ 
    add_menu_page( __('QuadLayers Custom Products', 'qlcp'), __('QuadLayers Custom Products', 'qlcp'), 'manage_options', 'qlcp', 'QuadLayersOptionsPage' ); 
} 
function QuadLayersOptionsPage() { 
    ?> <form action="options.php" method="post"> <?php 
    settings_fields('plugin_QL_Page'); 
    do_settings_sections('plugin_QL_Page'); 
    botão de envio(); 
    </form><?php
}

function QuadLayers_display_options(){
        
    register_setting('plugin_QL_Page', 'qlcp_options', 'callbackValidation');

    add_settings_section(
        'QuadLayers_pluginPage_section',
        __('Opções de back-end QuadLayers', 'qlcp'),
        'QuadLayersSettingsSectionCallback',
        'plugin_QL_Page'
    );
    add_settings_field(
        'QuadLayers_checkbox_field_1',
        esc_attr__('Título', 'qlcp'),
       'QuadLayersCheckboxRender_1',
        'plugin_QL_Page',
        'QuadLayers_pluginPage_section'
    );
    add_settings_field(
        'QuadLayers_checkbox_field_2',
        esc_attr__('Quantidade', 'qlcp'),
       'QuadLayersCheckboxRender_2',
        'plugin_QL_Page',
        'QuadLayers_pluginPage_section'
    );
    add_settings_field(
        'QuadLayers_checkbox_field_3',
        esc_attr__('SKU', 'qlcp'),
       'QuadLayersCheckboxRender_3',
        'plugin_QL_Page',
        'QuadLayers_pluginPage_section'
    );
    add_settings_field(
        'QuadLayers_checkbox_field_4',
        esc_attr__('Meta', 'qlcp'),
       'QuadLayersCheckboxRender_4',
        'plugin_QL_Page',
        'QuadLayers_pluginPage_section'
    );
    add_settings_field(
        'QuadLayers_checkbox_field_5',
        esc_attr__('Aba Descrição', 'qlcp'),
       'QuadLayersCheckboxRender_5',
        'plugin_QL_Page',
        'QuadLayers_pluginPage_section'
    );
    add_settings_field(
        'QuadLayers_checkbox_field_6',
        esc_attr__('Preço', 'qlcp'),
       'QuadLayersCheckboxRender_6',
        'plugin_QL_Page',
        'QuadLayers_pluginPage_section'
    );
}

function QuadLayersSettingsSectionCallback(){
    echo wp_kses_post('Uma página de configurações para o plugin personalizado QuadLAyers');
}

function QuadLayersCheckboxRender_1(){
    $options = get_option('qlcp_options'); 
    ?>
    <input name="qlcp_options[QuadLayers_checkbox_field_1]" type="checkbox" /> 
    marcado <?php } ?>valor = "1">    
}

function QuadLayersCheckboxRender_2(){
    $options = get_option('qlcp_options'); 
    ?>
    <input name="qlcp_options[QuadLayers_checkbox_field_2]" type="checkbox" /> 
    marcado <?php } ?>valor = "1">    
}

function QuadLayersCheckboxRender_3(){
    $options = get_option('qlcp_options'); 
    ?>
    <input name="qlcp_options[QuadLayers_checkbox_field_3]" type="checkbox" /> 
    marcado <?php } ?>valor = "1">    
}

function QuadLayersCheckboxRender_4(){
    $options = get_option('qlcp_options'); 
    ?>
    <input name="qlcp_options[QuadLayers_checkbox_field_4]" type="checkbox" /> 
    marcado <?php } ?>valor = "1">    
}

function QuadLayersCheckboxRender_5(){
    $options = get_option('qlcp_options'); 
    ?>
    <input name="qlcp_options[QuadLayers_checkbox_field_5]" type="checkbox" /> 
    marcado <?php } ?>valor = "1">    
}

function QuadLayersCheckboxRender_6(){
    $options = get_option('qlcp_options'); 
    ?>
    <input name="qlcp_options[QuadLayers_checkbox_field_6]" type="checkbox" /> 
    marcado <?php } ?>valor = "1">    
}

Agora, recarregue a tela do back-end ou ative seu plugin e você verá uma nova guia na barra lateral do menu do painel.

A API de configurações do WP armazenará um array com todas essas opções na tabela de banco de dados wp_options . Você pode verificá-lo abrindo o PHPMyAdmin em seu localhost e pesquisando-o na tabela.

Como esses são dados recém-criados, eles devem ser encontrados no final da tabela

Obviamente, o array qlcp_options está vazio no banco de dados na captura de tela acima. Isso ocorre porque todas as caixas de seleção estão desmarcadas neste momento. Você pode tentar verificar alguns deles e voltar ao PHPMyAdmin para ver como a API de configurações do WP armazena os dados.

Agora que podemos armazenar o array de opções no banco de dados, precisamos pegar essas opções e usá-las no frontend. Essas opções permitirão que os usuários ocultem ou exibam vários elementos do seu site.

4. Opções de front-end

Para adicionar as opções de frontend, basta copiar e colar o seguinte código no arquivo QuadLayers-frontend-init.php .

Isso pegará os dados do banco de dados, que foram armazenados pelo arquivo de back-end em uma matriz.

Depois disso, ele ocultará os elementos específicos da página do produto, com base em quais opções são verdadeiras na matriz de opções.

 <?php

$options = get_option('qlcp_options');

if(!is_string($options)):
    // Título
    if(isset($options['QuadLayers_checkbox_field_1'])){       
    remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_title', 5 );
    }

    // Quantidade
    if(isset($options['QuadLayers_checkbox_field_2'])){        
        add_filter('woocommerce_is_sold_individually',
            função ( $retorno, $produto) {
                retorne verdadeiro;
            }, 10, 2 
        );
    }

    // SKU
    if(isset($options['QuadLayers_checkbox_field_3'])){        
        add_filter('wc_product_sku_enabled', 
            função ($habilitado) {          
                return $habilitado;
            } 
    );
    }
    
    // Meta
    if(isset($options['QuadLayers_checkbox_field_4'])){
        remove_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_meta', 40 );
    }
    
    // Aba Descrição
    if(isset($options['QuadLayers_checkbox_field_5'])){
        add_filter('woocommerce_product_tabs', 
        função ( $tabs ) {
            unset( $tabs['description'] );
            retornar $guias;
            }, 11 
        );         
    }

    // Preço
    if(isset($options['QuadLayers_checkbox_field_6'])){
        add_filter('woocommerce_get_price_html', 
        função ($preço){         
            Retorna ;
            }
        );        
    }
fim se;

Estamos colocando todo o código dentro de uma if(is_string($options)) . Assim, podemos verificar se não há caixas de seleção marcadas, caso em que o valor do banco de dados será uma string. Então, não precisamos executar esse código.

Além disso, observe que estamos usando funções anônimas. Funciona exatamente da mesma forma que com funções nomeadas. Mas acabamos de criar um código mais breve para este guia amigável para iniciantes.

Assim, se houver alguns valores armazenados no banco de dados, cada uma das funções deste código removerá um elemento específico dependendo do índice específico do array do banco de dados que estiver presente.

É importante para você, como iniciante, entender como interagimos com o banco de dados. Nossos dois arquivos interagem com ele, mas esses arquivos não estão conectados de forma alguma entre eles. Você pode até remover um arquivo e o outro ainda funcionará porque o banco de dados ainda terá os valores necessários.

E isso é tudo. Neste ponto, você deve ser capaz de criar um plugin WordPress personalizado para selecionar quais elementos ocultar ou exibir na página do produto.

Processo interno

A parte dianteira

Conclusão

Este é o nosso guia sobre como criar um plugin WordPress personalizado. Os plugins personalizados são muito úteis se você deseja ter recursos muito específicos para o seu site e não deseja sobrecarregar seu site com recursos esmagadores de plugins WP dedicados.

Para resumir, estas são as principais etapas para criar um plugin personalizado:

1. Crie o arquivo de plug-in principal
2. Adicionar opções de back-end
3. Adicionar opções de front-end

O arquivo principal do plug-in deve conter os arquivos de back-end e front-end para o plug-in personalizado. Em seguida, você pode adicionar ainda mais as opções de back-end do plug-in, seguidas de suas opções de front-end. Criamos um plugin personalizado para ocultar elementos da página do produto. Mas você pode modificar ainda mais esses arquivos para criar o plug-in com os recursos específicos que você precisa.

No entanto, se você ainda quiser usar um plug-in dedicado, também poderá fazê-lo. Mas no caso de um plugin pago, você terá que instalar o plugin manualmente. Você pode até usar plugins como WooCommerce Direct Checkout e WooCommerce Checkout Manager para ocultar elementos em outras páginas, como a página de checkout.

Enquanto isso, aqui estão mais alguns de nossos posts que podem lhe interessar:

• Melhores plugins de checkout WooCommerce
• Como criar um link de checkout direto do WooCommerce
• Melhores plugins para autocompletar pedidos WooCommerce

Esperamos que você possa desenvolver um plugin personalizado no WooCommerce sem problemas agora. Por favor, compartilhe-nos sua experiência nos comentários.