Como Implementar Botões de Edição Rápida no Front-End do WordPress

Adicionar botões de edição no WordPress melhora a eficiência no front-end pode facilitar a gestão de conteúdo, especialmente para administradores e editores que precisam acessar o painel do WordPress com agilidade. Este tutorial detalha como implementar essa funcionalidade utilizando uma combinação de PHP, HTML e CSS, com suporte para os ícones Dashicons nativos do WordPress.

Visão Geral da Função

A funcionalidade é encapsulada na função chr_edit_post() e possui os seguintes recursos principais:

1. Verificação de Login: Os botões aparecem apenas para usuários autenticados.
2. Links Inteligentes:
   • Acessar o painel administrativo.
   • Editar o post atual ou um arquivo de listagem (archive).
   • Abrir a página de configurações personalizadas.
3. Design Responsivo: Estilização simples para manter os botões acessíveis e intuitivos.

1. Adicionando o Suporte aos Ícones Dashicons

Os ícones usados nos botões são Dashicons, a biblioteca de ícones nativa do WordPress. Para que eles sejam exibidos corretamente no front-end, é necessário registrá-los:

// Adiciona o Dashicons no Front-End
add_action('wp_enqueue_scripts', 'load_dashicons_front_end');
function load_dashicons_front_end() {
    wp_enqueue_style('dashicons');
}

Essa função utiliza o hook wp_enqueue_scripts para carregar o arquivo CSS necessário.

2. A Função chr_edit_post

A função abaixo adiciona um botão fixo na lateral do site, visível apenas para usuários logados. Ele fornece links para ações administrativas como acessar o painel, editar posts ou gerenciar configurações.

function chr_edit_post() {
    global $post;

    if (is_user_logged_in()) : 
        $edit_link = '';

        // Verifica se é um arquivo de listagem (archive)
        if (is_post_type_archive()) {
            $post_type = get_query_var('post_type');
            $edit_link = esc_url(admin_url('edit.php?post_type=' . $post_type));
        } else {
            // Link padrão para editar o post atual
            $edit_link = esc_url(get_edit_post_link($post->ID));
        }
        ?>
        <div id="chr-edit-post">
            <dl>
                <dd><?php echo '<a href="' . esc_url(get_admin_url()) . '" title="Acessar Backend" target="_blank"><span class="dashicons dashicons-wordpress"></span></a>'; ?></dd>
                <dd><?php echo '<a href="' . $edit_link . '" title="Editar" target="_blank"><span class="dashicons dashicons-edit-large"></span></a>'; ?></dd>
                <dd><?php echo '<a href="' . esc_url(get_admin_url()) . 'themes.php?page=conteudo-geral" title="Configurações" target="_blank"><span class="dashicons dashicons-admin-tools"></span></a>'; ?></dd>
            </dl>
            <style type="text/css">
                #chr-edit-post {
                    position: fixed;
                    z-index: 1001;
                    left: 0;
                    top: 50%;
                    transform: translate(0, -50%);
                }
                #chr-edit-post dl {
                    flex-direction: column;
                    display: flex;
                    margin: 0;
                    padding: 0;
                }
                #chr-edit-post dl dd {
                    margin: .1rem 0;
                }
                #chr-edit-post dl dd a {
                    display: inline-block;
                    text-decoration: none;
                    color: #ffffff;
                    background-color: #01234c;
                    padding: 1rem 1rem .5rem 1rem;
                    transition: all .2s ease-in-out;
                }
                #chr-edit-post dl dd a:hover {
                    color: #FFF;
                    background-color: #000;
                }
            </style>
        </div>
        <?php
    endif;
}

3. Explicando a Lógica

– Verificação do Usuário Logado

A função inicia verificando se o usuário está logado com is_user_logged_in(). Essa verificação garante que apenas usuários autenticados vejam os botões.

– Geração dos Links

• Painel Administrativo:

esc_url(get_admin_url())

• Gera o link para a página principal do admin.
• Editar Post ou Arquivo de Listagem: O link é ajustado com base no contexto:
  • Para arquivos de listagem, é usado admin_url('edit.php?post_type=' . $post_type).
  • Para posts individuais, é utilizado get_edit_post_link($post->ID).
• Configurações: O link para configurações aponta para uma página específica:

esc_url(get_admin_url()) . 'themes.php?page=conteudo-geral'

– Estilização

O estilo mantém o botão fixo na lateral esquerda do site, com transições suaves para interações no hover.

4. Personalização da Página de Configurações

Se a página de configurações mencionada no link (themes.php?page=conteudo-geral) não existe, você pode criá-la manualmente ou utilizar o ACF para gerar uma página de opções.

Exemplo com ACF:

if (function_exists('acf_add_options_page')) {
    acf_add_options_page([
        'page_title' => 'Configurações Gerais',
        'menu_title' => 'Configurações',
        'menu_slug'  => 'conteudo-geral',
        'capability' => 'edit_posts',
        'redirect'   => false
    ]);
}

Essa página pode ser usada para gerenciar opções gerais do site, tornando a funcionalidade ainda mais flexível.

---

Conclusão

Esses botões facilitam a gestão de conteúdo no WordPress adicionando uma funcionalidade prática para administradores e editores, permitindo acesso rápido a ações administrativas no WordPress. A integração dos Dashicons no front-end, combinada com a possibilidade de personalizar a página de configurações via ACF, torna essa implementação poderosa e flexível.

Adapte o código às suas necessidades específicas e implemente em seu tema para facilitar a gestão do site. Caso deseje expandir a funcionalidade, como adicionar links adicionais ou permissões específicas, a estrutura já está preparada para isso.