Módulo 4: Criando Shortcodes no WordPress

Shortcodes são uma das ferramentas mais úteis e poderosas do WordPress. Eles permitem inserir funcionalidades complexas de forma simples e prática, diretamente no editor de conteúdo. Neste artigo, vamos abordar:

• O que é um shortcode e como usá-lo;
• Como criar e registrar shortcodes;
• Exemplos práticos de utilização.

O que é um Shortcode?

Um shortcode é uma pequena tag, envolvida por colchetes, que pode ser adicionada ao conteúdo de um post, página ou widget do WordPress. Quando o WordPress renderiza o conteúdo, ele substitui o shortcode pela funcionalidade ou conteúdo correspondente.

Exemplo de uso:

Se você registrar um shortcode chamado [galeria_personalizada], poderá adicioná-lo a uma página ou post, e o WordPress substituirá isso pelo código ou funcionalidade correspondente, como uma galeria de imagens.

Criando e Registrando Shortcodes

Criar um shortcode no WordPress é simples. Para isso, utilizamos a função add_shortcode, que registra o shortcode e vincula uma função que será executada.

Estrutura Básica de um Shortcode

function meu_plugin_exemplo_shortcode() {
    return '<p>Este é o conteúdo do meu shortcode!</p>';
}
add_shortcode( 'meu_shortcode', 'meu_plugin_exemplo_shortcode' );

• meu_plugin_exemplo_shortcode: Função que define o que o shortcode faz.
• add_shortcode: Registra o shortcode, vinculando o nome (meu_shortcode) à função correspondente.
• Resultado: Ao adicionar [meu_shortcode] em um post ou página, o texto “Este é o conteúdo do meu shortcode!” será exibido.

Exemplos Práticos de Shortcodes

1. Exibir uma Galeria Personalizada

function meu_plugin_galeria_shortcode() {
    $html = '<div style="display: flex; gap: 10px;">';
    $html .= '<img src="https://via.placeholder.com/150" alt="Imagem 1">';
    $html .= '<img src="https://via.placeholder.com/150" alt="Imagem 2">';
    $html .= '<img src="https://via.placeholder.com/150" alt="Imagem 3">';
    $html .= '</div>';
    return $html;
}
add_shortcode( 'galeria_personalizada', 'meu_plugin_galeria_shortcode' );

• Uso: Adicione [galeria_personalizada] a qualquer post ou página para exibir uma galeria com imagens de exemplo.
• Estilo: As imagens estão organizadas em um layout flexível com espaço entre elas.

2. Criar um Formulário Simples

function meu_plugin_formulario_shortcode() {
    $html = '<form method="post" action="#">';
    $html .= '<label for="nome">Nome:</label>';
    $html .= '<input type="text" id="nome" name="nome" required>';
    $html .= '<button type="submit">Enviar</button>';
    $html .= '</form>';
    return $html;
}
add_shortcode( 'formulario_simples', 'meu_plugin_formulario_shortcode' );

• Funcionalidade: Você pode expandir isso para processar dados ou integrar com APIs.
• Uso: Adicione [formulario_simples] para exibir um formulário simples de coleta de nome.

Como Usar Shortcodes?

Depois de registrar um shortcode no plugin, basta adicioná-lo ao conteúdo do WordPress:

• Editor Clássico: Escreva o shortcode diretamente, como [meu_shortcode].
• Editor Gutenberg: Use o bloco “Shortcode” e insira o nome do shortcode.

Conclusão

Os shortcodes são uma forma poderosa de personalizar e expandir as funcionalidades do WordPress. Eles permitem que usuários sem conhecimento técnico utilizem funcionalidades avançadas com facilidade. No próximo módulo, exploraremos como criar Widgets personalizados para ainda mais controle sobre a interface do site.

Pratique criando seus próprios shortcodes e experimente combiná-los com CSS e JavaScript para resultados incríveis!

código completo:

<?php
/*
Plugin Name: Meu Primeiro Plugin
Description: Um simples plugin para aprender a criar plugins no WordPress.
Version: 1.0
Author: Seu Nome
*/

if ( !defined( 'ABSPATH' ) ) {
    exit; // Proteção contra acesso direto
}

// Função para exibir mensagem no rodapé
function meu_plugin_mensagem_rodape() {
    echo '<p style="text-align: center;">Obrigado por visitar nosso site! - Meu Primeiro Plugin</p>';
}

add_action( 'wp_footer', 'meu_plugin_mensagem_rodape' );

// Função para personalizar o título dos posts
function meu_plugin_personalizar_titulo( $titulo ) {
    // Adiciona o prefixo "[Especial]" ao título
    return '[Especial] ' . $titulo;
}
add_filter( 'the_title', 'meu_plugin_personalizar_titulo' );


// Função criando um shortcode
function meu_plugin_galeria_shortcode() {
    $html = '<div style="display: flex; gap: 10px;">';
    $html .= '<img src="https://aquinosresolvemos.com/wp-content/uploads/elementor/thumbs/NOVA-LOGO-RESOLVE-plwarhumrc67vvde2targiz5ew8d57mub701ju58xi.png" alt="Imagem 1">';
    $html .= '<img src="https://aquinosresolvemos.com/wp-content/uploads/elementor/thumbs/NOVA-LOGO-RESOLVE-plwarhumrc67vvde2targiz5ew8d57mub701ju58xi.png" alt="Imagem 2">';
    $html .= '<img src="https://aquinosresolvemos.com/wp-content/uploads/elementor/thumbs/NOVA-LOGO-RESOLVE-plwarhumrc67vvde2targiz5ew8d57mub701ju58xi.png" alt="Imagem 3">';
    $html .= '</div>';
    return $html;
}
add_shortcode( 'galeria_personalizada', 'meu_plugin_galeria_shortcode' );


function meu_plugin_formulario_shortcode() {
    $html = '<form method="post" action="#">';
    $html .= '<label for="nome">Nome:</label>';
    $html .= '<input type="text" id="nome" name="nome" required>';
    $html .= '<button type="submit">Enviar</button>';
    $html .= '</form>';
    return $html;
}
add_shortcode( 'formulario_simples', 'meu_plugin_formulario_shortcode' );
?>