Poga, lai atvērtu modālo logu bez WordPress spraudņiem

Šodienas kods ļaus mums pievienot pogu ar īsceļu jebkurā amatā vai lapā WordPress. Noklikšķinot uz tās, tiks atvērts modālais logs, kurā mēs varam pievienot vēlamo saturu.

To var izmantot, lai parādītu abonēšanas veidlapu, kontaktu veidlapu, vienreizēju paziņojumu, attēlu, informācijas lodziņu vai, kā manā gadījumā, kļūdas paziņojuma veidlapu.

Jūs varat pārbaudīt darba īsceļu apakšā jebkurā amatā.

[error_report_form]

Lai gan šajā emuārā tas darbojas pareizi jau vairākas nedēļas, atcerieties, ka šī ir 1.0 versija un ka vienmēr ir iespējami uzlabojumi un atkļūdošanas darbi. Jūs varat atvienot CSS, lai atvieglotu izmaiņas, un pat, ja uzdrošināsieties, pārvērst to par spraudni, lai pievienotu vairāk iestatījumu un konfigurāciju ātrai un ērtai piekļuvei.

Zem koda atradīsiet tā iespēju aprakstu un norādījumus, kā to izmēģināt.

Kods

/*
 * Versión: 1.1
 * Última actualización: 17-03-2025 02:30:00 (Añadido icono SVG)
 */

// Shortcode para mostrar el botón y el formulario modal actualizado en jrmora.com
function error_report_form_shortcode() {
    // Generar números aleatorios para la operación matemática
    $num1 = rand(1, 9);
    $num2 = rand(1, 9);
    $sum = $num1 + $num2;

    // Iniciar sesión si no está iniciada
    if (!session_id()) {
        session_start();
    }

    // Guardar la suma en una variable de sesión para validar después
    $_SESSION['captcha_sum'] = $sum;

    // HTML del botón y el modal
    ob_start();
    ?>
    <button id="openErrorModal" style="padding: 10px 20px; background-color: #ffcc00; color: black; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; display: flex; align-items: center; gap: 8px;">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 5.177l8.631 15.823h-17.262l8.631-15.823zm0-4.177l-12 22h24l-12-22zm-1 9h2v6h-2v-6zm1 9.75c-.689 0-1.25-.56-1.25-1.25s.561-1.25 1.25-1.25 1.25.56 1.25 1.25-.561 1.25-1.25 1.25z"/></svg>
        Comunicar error
    </button>

    <div id="errorModalOverlay" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 999;">
        <div id="errorModal" style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: white; padding: 20px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); z-index: 1000; border-radius: 7px; width: 90%; max-width: 500px;">
            <span id="closeModalBtn" style="position: absolute; top: 10px; right: 10px; cursor: pointer; font-size: 20px; background-color: black; color: white; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; line-height: 30px;">&times;</span>
            <h3 style="font-size: 18px;">Comunicar error (Para errores ortográficos o de malfuncionamiento del sitio)</h3>
            <form id="errorForm" method="post">
                <input type="hidden" name="action" value="submit_error_report">
                <label for="name" style="font-size: 14px;">Nombre:</label>
                <input type="text" id="name" name="name" required style="background-color: #f5f5f5; padding: 8px; border: 1px solid #ddd; border-radius: 4px; width: 100%; margin-bottom: 12px;">
                <div id="nameError" style="color: red; display: none; font-size: 12px; margin-bottom: 12px;">No se permiten enlaces o dominios en el campo "Nombre".</div>
                <label for="message" style="font-size: 14px;">Descripción del error:</label>
                <textarea id="message" name="message" required style="background-color: #f5f5f5; padding: 8px; border: 1px solid #ddd; border-radius: 4px; width: 100%; margin-bottom: 12px;"></textarea>
                <div id="messageError" style="color: red; display: none; font-size: 12px; margin-bottom: 12px;">No se permiten enlaces o dominios en el campo "Mensaje".</div>
                <label for="captcha" style="font-size: 14px;">¿Eres humano? ¿Cuánto es <?php echo $num1; ?> + <?php echo $num2; ?>?</label>
                <input type="text" id="captcha" name="captcha" required style="background-color: #f5f5f5; padding: 8px; border: 1px solid #ddd; border-radius: 4px; width: 100%; margin-bottom: 12px;">
                <div id="captchaError" style="color: red; display: none; font-size: 12px; margin-bottom: 12px;">El resultado de la suma es incorrecto.</div>
                <!-- Opcional: Añadir reCaptcha si se proporcionan las claves -->
                <?php if (defined('RECAPTCHA_SITE_KEY') && defined('RECAPTCHA_SECRET_KEY')) : ?>
                    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
                    <div class="g-recaptcha" data-sitekey="<?php echo RECAPTCHA_SITE_KEY; ?>" style="margin-bottom: 12px;"></div>
                <?php endif; ?>
                <div style="text-align: center;">
                    <input type="submit" value="Enviar" style="background-color: #bc080e; color: white; border: none; padding: 10px 20px; border-radius: 4px; cursor: pointer; font-weight: bold; display: inline-block;">
                </div>
            </form>
            <div id="successMessage" style="color: green; display: none; margin-top: 10px; font-size: 14px; text-align: center;">Gracias por comunicar el error.</div>
        </div>
    </div>

    <style>
        /* Estilos para dispositivos móviles */
        @media (max-width: 768px) {
            #errorModal {
                width: 90% !important; /* Ajusta el ancho del modal al 90% de la pantalla */
                max-width: 90% !important; /* Asegura que no exceda el 90% del ancho */
                padding: 15px !important; /* Reduce el padding para más espacio */
            }

            #errorForm input, #errorForm textarea {
                font-size: 16px !important; /* Aumenta el tamaño de la fuente para mejor legibilidad */
            }

            #errorForm label {
                font-size: 16px !important; /* Aumenta el tamaño de la fuente de las etiquetas */
            }
        }
    </style>

    <script>
        // Abrir modal
        document.getElementById('openErrorModal').addEventListener('click', function() {
            document.getElementById('errorModalOverlay').style.display = 'block';
        });

        // Cerrar modal al hacer clic en el aspa
        document.getElementById('closeModalBtn').addEventListener('click', function() {
            document.getElementById('errorModalOverlay').style.display = 'none';
        });

        // Cerrar modal al hacer clic fuera de él
        document.getElementById('errorModalOverlay').addEventListener('click', function(event) {
            if (event.target === document.getElementById('errorModalOverlay')) {
                document.getElementById('errorModalOverlay').style.display = 'none';
            }
        });

        // Función para validar si hay enlaces o dominios en el texto
        function containsUrlOrDomain(text) {
            // Expresión regular para detectar enlaces o dominios
            const urlPattern = /(http|https|www|\[url|\[link)|(\b\w+\.(com|org|net|io|co|edu|gov|mil|biz|info|xyz|me|tv|us|uk|ca|au|de|fr|es|it|nl|ru|jp|cn|in|br|mx|ar|cl|pe|ve|co\.uk|co\.jp|co\.in|ac\.uk|gov\.uk|edu\.au|com\.au|org\.uk|net\.au)\b)/i;
            return urlPattern.test(text);
        }

        // Manejar el envío del formulario con AJAX
        document.getElementById('errorForm').addEventListener('submit', function(e) {
            e.preventDefault(); // Evitar envío tradicional del formulario

            // Ocultar mensajes de error previos
            document.getElementById('nameError').style.display = 'none';
            document.getElementById('messageError').style.display = 'none';
            document.getElementById('captchaError').style.display = 'none';

            // Validar campos
            var name = document.getElementById('name').value;
            var message = document.getElementById('message').value;
            var captcha = document.getElementById('captcha').value;
            var hasError = false;

            // Validar enlaces o dominios en el nombre
            if (containsUrlOrDomain(name)) {
                document.getElementById('nameError').style.display = 'block';
                hasError = true;
            }

            // Validar enlaces o dominios en el mensaje
            if (containsUrlOrDomain(message)) {
                document.getElementById('messageError').style.display = 'block';
                hasError = true;
            }

            // Validar el captcha
            if (captcha !== '<?php echo $sum; ?>') {
                document.getElementById('captchaError').style.display = 'block';
                hasError = true;
            }

            // Si hay errores, detener el envío
            if (hasError) {
                return;
            }

            // Enviar el formulario si no hay errores
            var formData = new FormData(this);
            fetch('<?php echo admin_url('admin-ajax.php'); ?>', {
                method: 'POST',
                body: formData
            })
            .then(response => response.text())
            .then(data => {
                // Mostrar mensaje de éxito
                document.getElementById('successMessage').style.display = 'block';

                // Ocultar el formulario
                document.getElementById('errorForm').style.display = 'none';

                // Esperar 3 segundos y cerrar el modal
                setTimeout(function() {
                    document.getElementById('errorModalOverlay').style.display = 'none';
                    document.getElementById('successMessage').style.display = 'none';
                    document.getElementById('errorForm').style.display = 'block'; // Restaurar el formulario
                }, 3000);
            })
            .catch(error => console.error('Error:', error));
        });
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('error_report_form', 'error_report_form_shortcode');

// Manejar el envío del formulario
function handle_error_report_form() {
    if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['action']) && $_POST['action'] === 'submit_error_report') {
        // Iniciar sesión si no está iniciada
        if (!session_id()) {
            session_start();
        }

        // Validar el captcha
        if (!isset($_SESSION['captcha_sum']) || !isset($_POST['captcha']) || $_POST['captcha'] != $_SESSION['captcha_sum']) {
            wp_die('Captcha incorrecto. Por favor, intenta de nuevo.');
        }

        // Validar que no haya enlaces o dominios en los campos
        $name = isset($_POST['name']) ? sanitize_text_field($_POST['name']) : '';
        $message = isset($_POST['message']) ? sanitize_text_field($_POST['message']) : '';
        if (preg_match('/(http|https|www|\[url|\[link)|(\b\w+\.(com|org|net|io|co|edu|gov|mil|biz|info|xyz|me|tv|us|uk|ca|au|de|fr|es|it|nl|ru|jp|cn|in|br|mx|ar|cl|pe|ve|co\.uk|co\.jp|co\.in|ac\.uk|gov\.uk|edu\.au|com\.au|org\.uk|net\.au)\b)/i', $name . $message)) {
            wp_die('No se permiten enlaces o dominios en los campos.');
        }

        // Validar reCaptcha (opcional)
        if (defined('RECAPTCHA_SITE_KEY') && defined('RECAPTCHA_SECRET_KEY')) {
            if (!isset($_POST['g-recaptcha-response'])) {
                wp_die('Por favor, completa el reCaptcha.');
            }

            $recaptcha_response = $_POST['g-recaptcha-response'];
            $recaptcha_secret = RECAPTCHA_SECRET_KEY;
            $recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify';
            $recaptcha_data = [
                'secret' => $recaptcha_secret,
                'response' => $recaptcha_response,
                'remoteip' => $_SERVER['REMOTE_ADDR']
            ];

            $recaptcha_options = [
                'http' => [
                    'header' => "Content-type: application/x-www-form-urlencoded\r\n",
                    'method' => 'POST',
                    'content' => http_build_query($recaptcha_data)
                ]
            ];

            $recaptcha_context = stream_context_create($recaptcha_options);
            $recaptcha_result = file_get_contents($recaptcha_url, false, $recaptcha_context);
            $recaptcha_json = json_decode($recaptcha_result);

            if (!$recaptcha_json->success) {
                wp_die('Por favor, completa el reCaptcha correctamente.');
            }
        }

        // Obtener la URL de origen
        $url = isset($_SERVER['HTTP_REFERER']) ? $_SERVER['HTTP_REFERER'] : 'URL desconocida';

        // Enviar correo electrónico
        $to = get_option('admin_email'); // Correo del administrador
        $subject = 'Comunicación de Error desde ' . $url;
        $body = "Nombre: $name\n\nMensaje: $message\n\nURL: $url";
        $headers = array('Content-Type: text/plain; charset=UTF-8');

        if (wp_mail($to, $subject, $body, $headers)) {
            echo 'success';
        } else {
            echo 'Hubo un error al enviar el mensaje.';
        }

        exit;
    }
}
add_action('wp_ajax_submit_error_report', 'handle_error_report_form');
add_action('wp_ajax_nopriv_submit_error_report', 'handle_error_report_form');

// Definir claves de reCaptcha (opcional)
// define('RECAPTCHA_SITE_KEY', 'TU_SITE_KEY');
// define('RECAPTCHA_SECRET_KEY', 'TU_SECRET_KEY');

Veidlapas funkcionalitāte

• Īsais kods:

[error_report_form]

• Tiek parādīta poga, kas atver modālo veidlapu, lai ziņotu par kļūdām.
• Veidlapā ir iekļauti vārda, ziņojuma un vienkārša matemātiska kapteiņa lauki.
• Pārbaudiet, vai laukos nav ievadītas saites vai domēni.
• Nosūtiet e-pasta vēstuli emuāra administratoram, norādot sīkāku informāciju par kļūdu.

• Veidlapu lauki:
  • Nosaukums: teksta lauks lietotāja vārda ievadīšanai.
  • Ziņojums: teksta lauks kļūdas aprakstam.
  • Captcha: vienkāršs matemātisks jautājums (divu nejaušu skaitļu summa).

• Apstiprinājumi:
  • Lauciņos "Nosaukums" un "Ziņa" nav atļautas saites vai domēni. Var uzlabot, pievienojot trūkstošos domēna paplašinājumus.
  • Kaptcha ir jāatrisina pareizi.
  • Ja tiek izmantota reCaptcha (nav obligāti), tā tiek validēta pirms veidlapas nosūtīšanas.

• Veidlapas iesniegšana:
  • Izmantojiet AJAX, lai nosūtītu datus, nepārlādējot lapu.
  • Tiek parādīts zaļš veiksmes ziņojums, ja iesniegšana ir veiksmīga.
  • Sarkanā krāsā tiek parādīti kļūdas ziņojumi zem katra lauka, kurā neizdodas.
  • Automātiski aizver modālo logu pēc 3 sekunžu veiksmīgas nosūtīšanas.
  • Modālo logu var aizvērt, noklikšķinot uz krustiņa tā augšējā labajā stūrī vai noklikšķinot jebkurā vietā ārpus tā.

• Surogātpasta profilakse:
  • Matemātiskā Captcha.
  • Pēc izvēles var integrēt Google reCaptcha.

Veidlapu stili

• Poga "Ziņot par kļūdu":
  • Fona krāsa: #ffcc00 (dzeltena).
  • Teksts: melns un trekns.
  • Noapaļoti stūri: 6px.
  • Brīdinājuma simbols: ⚠
  • Pievienots SVG simbols ar SVG ikonu(šis)

• Modāls (uznirstošais logs):
  • Tumšs daļēji caurspīdīgs fons.
  • Balts konteiners ar noapaļotiem stūriem: 7px.
  • Maigas ēnas ap modālu.

• Aizvēršanas rokturis (poga modālā loga aizvēršanai, tās klase ir id="closeModalBtn"):
  • Fons: melns (#000000).
  • Asmeņu krāsa: balta (#ffffffff).
  • Izmērs: 30px plats un 30px augsts.
  • Forma: Forma: ideāls aplis (robežas rādiuss: 50%).
  • Atrašanās vieta: augšējā labajā pusē, ar 10px rezervi no robežas.
  • Krustiņa centrēšana: Izmantojiet display: flex, align-items: centre un justify-content: centre, lai centrētu krustiņu (×) apļa iekšpusē.
  • Asmens izmērs: 20px.

• Veidlapu lauki:
  • Gaiši pelēks fons: #f5f5f5.
  • Robeža: 1px solid #ddd.
  • Noapaļoti stūri: 4px.
  • Teksts: Izmērs samazināts par 2px (14px etiķetēm, 12px kļūdas ziņojumiem).

• Poga "Sūtīt":
  • Uz formu vērsts.
  • Fona krāsa: #bc080e (tumši sarkana).
  • Teksts: balts un trekns.
  • Noapaļoti stūri: 4px.

• Kļūdu ziņojumi:
  • Krāsa: Sarkana (#ff0000).
  • Fonta izmērs: 12px.

• Veiksmīgs ziņojums:
  • Krāsa: zaļa (#00ff00).
  • Fonta izmērs: 14px.
  • Centrā zem veidlapas.

Kā modificēt stilus

• Mainīt krāsas:
  • Koda kodā meklējiet fona krāsas, krāsas un robežas krāsas īpašības.
  • Mainiet heksadecimālās vērtības (#ffcc00, #bc080e, #f5f5f5 utt.) uz vēlamajām krāsām.

• Mainiet fontu izmērus:
  • Koda kodā meklējiet fonta lieluma īpašības.
  • Pielāgojiet pikseļu vērtības (14px, 12px utt.) pēc vajadzības.

• Modificējiet malas un noapaļotos stūrus:
  • Meklējiet robežu rādiusa un robežu īpašības
  • Mainiet pikseļu vērtības (6px, 7px, 4px utt.), lai pielāgotu stūru noapaļošanu.

• Mainiet atstarpes:
  • Atrodiet padding un margin īpašības
  • Pielāgojiet pikseļu vērtības (10px, 20px, 12px utt.), lai mainītu iekšējo un ārējo atstarpi.

• Mainiet lauku platumu:
  • Meklēt platuma īpašības teksta un teksta laukos.
  • Mainiet vērtību (100%, 50% utt.), lai pielāgotu lauku platumu.

Papildu iespējas

• reCaptcha:
  • Lai iespējotu reCaptcha, atkomplektējiet rindas koda beigās un definējiet atslēgas:
    definēt('RECAPTCHA_SITE_KEY', 'TU_SITE_KEY');
    define('RECAPTCHA_SECRET_KEY', 'TU_SECRET_KEY');
  • Iegūstiet atslēgas no: https://www.google.com/recaptcha/admin/

• E-pasta personalizēšana:
  • Administratoram nosūtītajā vēstulē ir:
  • Veidlapai pievienotā lietotāja vārds.
  • Kļūdas ziņojums, kas ir pievienots šajā laukā.
  • Tās lapas URL, no kuras tika nosūtīta veidlapa(tiek pieņemts, ka kļūda tika atrasta lapā, kurā tika noklikšķināts uz pogas).
  • Veidlapā netiek vākti, sūtīti vai glabāti nekādi privāti dati, tādējādi tiek ievērota privātuma aizsardzība.
  • Lai mainītu ienākošā e-pasta saturu, rediģējiet mainīgo $body funkcijā handle_error_report_form.

Lietošanas instrukcija

• Kopējiet un ielīmējiet šo kodu tēmas functions.php failā.
• Izmantojiet šo saīsnes kodu jebkurā lapā vai ierakstā.
• Pielāgojiet stilus pēc vajadzības.
• Ja vēlaties izmantot reCaptcha, ievērojiet norādījumus sadaļā "Papildu opcijas".