Quando você cria um site usando WordPress o tema será o guia para a definição do seu visual. A instalação de plugins do repositório do WordPress também permite customizar o visual do site.

Porém, mesmo depois de instalar o seu tema e configurar seus plugins o site não fica exatamente como você deseja. Nesta postagem, vamos mostrar como fazer ajustes finos no layout do seu site sem alterar arquivos do tema ou de plugins.

Exemplo prático

Nosso exemplo consiste em alterar a cor e o tamanho da fonte do preço de um produto da nossa loja.

Para fazer essa alteração com o nosso próprio plugin, precisamos adicionar um arquivo de estilos e adicionar as seguintes classes para ele:

.woocommerce.woocommerce-page .product .summary.entry-summary .price {
    font-size: 50px;
    color: lightblue;
}

E este será o resultado obtido:

Esqueleto do seu plugin

Para que o WordPress reconheça seus arquivos como um plugin você deve seguir os seguintes passos:

  • Crie um diretório na pasta de plugins: /wp-content/plugins/<seu-plugin>
  • Crie um arquivo PHP na raiz do seu plugin: /wp-content/plugins/<seu-plugin>/<seu_plugin.php>

Por questões de segurança, adicione um controle para executar o script do plugin somente com a execução do WordPress:

<?php

defined( 'ABSPATH' ) or die();

... O resto do seu código ...

Adicione um cabeçalho no seu arquivo PHP:

<?php

/**
 * Plugin Name: <Nome do Plugin>
 * Description: <Descrição do plugin>
 * Author:      <Autor>
 * Author URI:  <Endereço do autor>
 * Plugin URI:  <Endereço do plugin>
 * Text Domain: <Text Domain>
 * License:     GPLv2 or later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 * Version:     <Versão>
 **/

defined( 'ABSPATH' ) or die();

... Resto do seu script ...

Verifique se o WordPress Reconhece o Plugin

Acessando o painel do site, vá até a página de plugins e verifique que o seu plugin aparece na lista. Ele deve aparecer como desabilitado.

Carregando uma folha de estilos

Agora vamos adicionar uma folha de estilos no nosso plugin. Para isso, crie um arquivo chamado style.css na raiz do seu plugin.

Após, adicione o seguinte código no arquivo PHP do seu plugin:

function seu_prefixo_enqueue_scripts() {

    $pluginPath = plugin_dir_url( __FILE__ );
    wp_enqueue_style( 'style', $pluginPath . 'style.css', array(), '1.0' );
}
add_action( 'wp_enqueue_scripts', 'seu_prefixo_enqueue_scripts' );

Agora, a sua folha de estilos será carregada em todas as páginas do site. Usando opções mais avançadas, você pode configurar o seu plugin para carregar a folha de estilos em determinadas páginas ou condições.

Comentários

Vamos trabalhar juntos




    Agência Doggus