EL
SALTO WEB

Consideraciones:

Usa jQuery o DOMContentLoaded para asegurar la ejecución del script.

Para evitar conflictos, encapsula tu JavaScript en funciones anónimas:

  $(document).ready(function() {
    // Tu código aquí
  });
})(jQuery);

b) PHP y Shortcodes

Para lógica dinámica (ej: traer datos de la base de WordPress):

1. Crea un shortcode en functions.php:

  $args = shortcode_atts([
    'posts_per_page' => 3
  ], $atts);

  $query = new WP_Query($args);
  ob_start();
  if ($query->have_posts()) {
    echo '<ul class="custom-posts">';
    while ($query->have_posts()) {
      $query->the_post();
      echo '<li><a href="'.get_permalink().'">'.get_the_title().'</a></li>';
    }
    echo '</ul>';
  }
  wp_reset_postdata();
  return ob_get_clean();
});

2. Usa el shortcode en el Widget HTML:

3. Técnicas Avanzadas

a) Inyección de Scripts/Styles en el Head/Footer

Para cargar recursos globales (ej: librerías externas):

if (!document.getElementById('gsap-cdn')) {
  var script = document.createElement('script');
  script.src = 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js';
  script.id = 'gsap-cdn';
  document.head.appendChild(script);
}
</script>

b) Interactividad con APIs Externas

Ejemplo: Clima en Tiempo Real

  <input type="text" id="city-input" placeholder="Ingresa una ciudad">
  <button onclick="fetchWeather()">Obtener Clima</button>
  <div id="weather-result"></div>
</div>
<script>
function fetchWeather() {
  const city = document.getElementById('city-input').value;
  fetch(`https://api.weatherapi.com/v1/current.json?key=TU_API_KEY&q=${city}`)
    .then(response => response.json())
    .then(data => {
      document.getElementById('weather-result').innerHTML = `
        Temperatura: ${data.current.temp_c}°C
      `;
    });
}
</script>

c) Uso de Data Attributes para Contenido Dinámico

Combina el Widget HTML con los Dynamic Tags de Elementor usando data attributes:

Luego, en tu JavaScript:

document.querySelector('.dynamic-title').textContent = elementorFrontend.config.post.title;

4. Mejores Prácticas

Seguridad:

Sanitiza y valida siempre las entradas de usuario en PHP con sanitize_text_field(), wp_kses().

Usa nonces de WordPress para acciones AJAX.

Optimización:

Minimiza el uso de CSS/JS inline. Enlaza archivos externos via wp_enqueue_script/style.

Usa debounce o throttle en eventos scroll/resize para mejorar rendimiento.

Mantenibilidad:

Documenta tu código dentro del Widget HTML con comentarios.

Usa prefijos únicos para clases/IDs (ej: prefix-custom-box).

5. Depuración y Troubleshooting

Problemas Comunes:

JS no ejecuta: Verifica conflictos con otras librerías usando noConflict().

CSS no aplica: Inspecciona especificidad de selectores con DevTools.

Shortcode no renderiza: Verifica que el shortcode esté registrado correctamente.

Herramientas:

Consola del Navegador (F12).

Query Monitor para análisis de hooks y consultas.

Logs de errores de WordPress (habilita WP_DEBUG).

6. Caso de Estudio: Formulario de Contacto Personalizado

Objetivo: Crear un formulario con validación AJAX sin plugins.

Estructura HTML (Widget HTML):

  <input type="email" name="email" required>
  <textarea name="message"></textarea>
  <button type="submit">Enviar</button>
  <div class="response-message"></div>
</form>

PHP (functions.php):

add_action('wp_ajax_nopriv_custom_contact', 'handle_contact_form');

function handle_contact_form() {
  $email = sanitize_email($_POST['email']);
  $message = sanitize_textarea_field($_POST['message']);
  // Lógica de envío aquí
  wp_send_json_success(['message' => '¡Éxito!']);
}

JavaScript (Widget HTML):

  e.preventDefault();
  jQuery.ajax({
    url: '<?php echo admin_url('admin-ajax.php'); ?>',
    type: 'POST',
    data: {
      action: 'custom_contact',
      email: jQuery('input[name="email"]').val(),
      message: jQuery('textarea').val()
    },
    success: function(response) {
      jQuery('.response-message').text(response.data.message);
    }
  });
});

Conclusión

Dominar la combinación del Widget HTML de Elementor con código personalizado te permite romper las limitaciones de los plugins preconstruidos, ofreciendo soluciones únicas y optimizadas. Siempre prioriza la seguridad, el rendimiento y la mantenibilidad en tus implementaciones.