Insertar botón personalizado en entrada con shortcode

/**
* Nombre: Botón Personalizado - Shortcode Simplificado
* Descripción: Añade un shortcode [custom_button] para insertar botones personalizados en entradas y páginas de WordPress
* Alcance: Frontend
*/
// Registramos el shortcode para botones personalizados
function custom_button_shortcode($atts) {
// Valores predeterminados
$atts = shortcode_atts(
array(
'texto' => 'Descargar',
'url' => '#',
'target' => '_self', // '_self' o '_blank'
'color' => '#ca0771',
'hover' => '#791571',
'texto_color' => '#ffffff',
'borde' => '5px',
'padding' => '10px 20px',
'redondeo' => '5px',
'ancho' => 'auto',
'clase' => '',
),
$atts,
'custom_button'
);
// Crear un ID único para este botón
$button_id = 'custom-btn-' . mt_rand(1000, 9999);
// Generar el estilo en línea para este botón específico
$custom_css = "
<style>
#{$button_id} {
display: inline-block;
background-color: {$atts['color']};
color: {$atts['texto_color']};
padding: {$atts['padding']};
text-decoration: none;
font-weight: bold;
border-radius: {$atts['redondeo']};
border: {$atts['borde']} solid {$atts['color']};
transition: all 0.3s ease;
cursor: pointer;
text-align: center;
width: {$atts['ancho']};
font-family: 'Arial', sans-serif;
font-size: 16px;
line-height: 1.5;
margin: 10px 0;
}
#{$button_id}:hover {
background-color: {$atts['hover']};
border-color: {$atts['hover']};
}
</style>
";
// Generar el HTML del botón
$button_html = sprintf(
'<a href="%s" target="%s" id="%s" class="custom-button %s">%s</a>',
esc_url($atts['url']),
esc_attr($atts['target']),
esc_attr($button_id),
esc_attr($atts['clase']),
esc_html($atts['texto'])
);
// Devolver el CSS y el HTML combinados
return $custom_css . $button_html;
}
add_shortcode('custom_button', 'custom_button_shortcode');
// Mostrar guía debajo del editor
function custom_button_meta_box() {
add_meta_box(
'custom_button_guide',
'Guía de Botón Personalizado',
'custom_button_meta_box_content',
['post', 'page'],
'normal',
'high'
);
}
add_action('add_meta_boxes', 'custom_button_meta_box');
// Contenido de la caja de guía
function custom_button_meta_box_content() {
?>
<div style="background-color: #f8f9fa; padding: 15px; border-left: 4px solid #ca0771;">
<h4 style="margin-top: 0; color: #ca0771;">Cómo usar el shortcode de Botón Personalizado</h4>
<p><strong>Ejemplo básico:</strong><br>
<code>[custom_button texto="Descargar" url="https://ejemplo.com"]</code></p>
<p><strong>Ejemplo completo:</strong><br>
<code>[custom_button texto="Descargar ahora" url="https://ejemplo.com" target="_blank" color="#ca0771" hover="#791571" texto_color="#ffffff"]</code></p>
<p><strong>Parámetros disponibles:</strong></p>
<ul style="list-style-type: disc; padding-left: 20px;">
<li><code>texto</code>: Texto del botón (predeterminado: "Descargar")</li>
<li><code>url</code>: Enlace del botón (predeterminado: "#")</li>
<li><code>target</code>: "_self" (misma ventana) o "_blank" (nueva ventana)</li>
<li><code>color</code>: Color del botón (predeterminado: "#ca0771")</li>
<li><code>hover</code>: Color al pasar el cursor (predeterminado: "#791571")</li>
<li><code>texto_color</code>: Color del texto (predeterminado: "#ffffff")</li>
<li><code>borde</code>: Grosor del borde (predeterminado: "5px")</li>
<li><code>redondeo</code>: Radio de las esquinas (predeterminado: "5px")</li>
<li><code>padding</code>: Espaciado interno (predeterminado: "10px 20px")</li>
<li><code>ancho</code>: Ancho del botón (predeterminado: "auto")</li>
</ul>
<p><strong>Vista previa:</strong></p>
<div style="background-color: #ca0771; color: #ffffff; display: inline-block; padding: 10px 20px; border-radius: 5px; border: 5px solid #ca0771; font-weight: bold;">Descargar</div>
</div>
<?php
}