Один из крупнейших проектов, над которыми я работал в прошлом году, — это создание библиотеки акронимов с использованием пользовательского типа сообщений (CPT) в зоне Martech. Я определил на сайте более 1000 аббревиатур в области маркетинга, продаж и технологий! Он был довольно популярен и привлек много читателей и рефералов из поисковых систем.

Хотя я доволен помолвкой, была одна вещь, которая меня беспокоила. Когда читатели нажимали на аббревиатуру, они попадали на страницу аббревиатуры, чтобы найти определение… вдали от статьи, которую они читали. Это не оптимальный пользовательский опыт (UX). Сегодня я изменил свою дочернюю тему, добавив приятную настройку. Теперь, когда вы нажимаете на аббревиатуру, определение появляется в красивом модальном окне, которое легко закрыть.

Модальное окно с произвольным типом сообщения

Вот как выглядят результаты… вы можете попробовать сами, нажав на аббревиатуру UX.

Уникальность этого решения заключается в том, что я могу публиковать свою статью как обычно, не добавляя в статью или страницу специального кода для отображения модального окна. Используя jQuery, я определяю, когда пользователь нажимает на текст привязки, проверяю структуру постоянной ссылки и, если это аббревиатура, использую Ajax для запроса WordPress и заполнения модального окна полученным контентом.

Как всегда, я приведу здесь код, чтобы вы могли понять, как реализовать подобное решение на вашем сайте WordPress!

Шаг 1. Добавьте CSS в модальное окно вашей дочерней темы.

Возможно, вы захотите изменить свой CSS по сравнению с моим: я хотел включить темную или светлую обложку и настроить ширину для разных размеров экрана.

.modal { 
  display:none;
  position:fixed;
  z-index:1000;
  left:0;
  top:0;
  width:100%;
  height:100%;
  overflow:auto;
  background-color:rgb(0,0,0);
  background-color:rgba(0,0,0,0.4); 
}
.modal-content {
  background-color: #fff;
  margin: 5% auto;
  padding: 20px;
  padding-right: 40px; /* Add space for the close button */
  border: 1px solid #888;
  border-radius: 20px;
  width: 50%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative; /* Make position relative for absolute positioning of children */
}
.dark-skin .modal-content {
  background-color: #111;
  border: 1px solid #000;
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
  .modal-content {
    width: 70%;
  }
}
@media screen and (max-width: 767px) {
  .modal-content {
    width: 90%;
  }
}
.modal-close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 28px;
  font-weight: bold;
}
.modal-close-btn:hover,
.modal-close-btn:focus {
  cursor: pointer;
  text-decoration: none;
}

Шаг 2. Добавьте модальное окно в нижний колонтитул HTML.

Прямо над моим </body> отметить мой footer.php странице я добавил свой пустой Modal. Сюда включена моя кнопка закрытия, которая представляет собой простой HTML-объект X.

<div id="customModal" class="modal">
  <div class="modal-content">
    <span class="modal-close-btn">&times;</span>
    <h2></h2>
    <div class="entry-content entry clearfix"></div>
  </div>
</div>

Шаг 3. Добавьте функцию Ajax и запрос пользовательского типа сообщения в дочернюю тему.

Ниже приведены две функции. modal_script добавляет прослушиватель каждому, кто нажимает на ссылку. Существует правило регулярных выражений, согласно которому я могу выполнить поиск по URL-адресу /acronym/, а затем вернуть фрагмент после ссылки… который является аббревиатурой. Это отправляется обратно в WordPress, запрашивается пользовательский тип сообщения и возвращается содержимое в формате JSON, где оно анализируется и отображается в модальном HTML.

function modal_script() {
    ?>
<script type="text/javascript">
    jQuery(document).ready(function(jQuery) {
        // Attach click event listener to all anchor tags
        jQuery(document).on('click', 'a', function(e) {
            var href = jQuery(this).attr('href'); // Use the href directly

            // Check if the href attribute contains '/acronym/'
            if (href.includes('/acronym/')) {
                e.preventDefault(); // Prevent default action only for links with '/acronym/'

                // Extract the acronym from the href attribute
                var acronym;
                try {
                    var match = href.match(/acronym\/(.+)\/$/);
                    if (match) {
                        acronym = match[1];
                    } else {
                        console.error("No valid acronym found in href.");
                        return; // Exit if no acronym is found
                    }
                } catch (error) {
                    console.error("Error extracting acronym from href: ", error);
                    return; // Exit the function if an error occurs
                }

                jQuery.ajax({
                    url: '<?php echo admin_url('admin-ajax.php'); ?>',
                    method: 'POST',
                    dataType: 'json',
                    data: {
                        action: 'fetch_acronym_definition',
                        acronym: acronym,
                        nonce: '<?php echo wp_create_nonce('ajax_nonce'); ?>'
                    },
                    success: function(response) {
                        jQuery('#customModal .modal-content h2').text(acronym.toUpperCase());
                        jQuery('#customModal .modal-content .entry-content').html('<h3>' + response.definition + '</h3>' + response.content);
                        jQuery('#customModal').show();
                    }
                });
            }
        });

        jQuery('.modal-close-btn').on('click', function() {
            jQuery('#customModal').hide();
        });

        jQuery(window).on('click', function(e) {
            if (jQuery(e.target).is('.modal')) {
                jQuery('#customModal').hide();
            }
        });
    });
</script>
    <?php
}
add_action('wp_footer', 'modal_script');

function fetch_acronym_definition() {
    // Check nonce for security
    check_ajax_referer('ajax_nonce', 'nonce');

    $acronym_slug = sanitize_text_field($_POST['acronym']);
    $args = array(
        'name'        => $acronym_slug,
        'post_type'   => 'acronym',
        'post_status' => 'publish',
        'numberposts' => 1
    );
    $post = get_posts($args);
    if (!empty($post)) {
        $post_id = $post[0]->ID;
        $acronym_definition = get_post_meta($post_id, 'acronym_definition', true);
        $content = apply_filters('the_content', $post[0]->post_content); // Get the content and apply content filters
        
        // Prepare and send JSON response
        wp_send_json(array(
            'definition' => $acronym_definition,
            'content' => $content
        ));
    } else {
        echo 'Definition not found.';
    }
    wp_die(); // This is required to terminate immediately and return a proper response
}
add_action('wp_ajax_fetch_acronym_definition', 'fetch_acronym_definition');
add_action('wp_ajax_nopriv_fetch_acronym_definition', 'fetch_acronym_definition');

Довольно эффективное решение! Единственный отсутствие Этот обходной путь заключается в том, что он уменьшит количество просмотров страниц за сеанс. Однако, поскольку это улучшает мой читательский опыт, польза намного перевешивает это!

ЧИТАТЬ  Самые дорогие дома/дома в мире (с фотографиями): 10 лучших

Source