WordPress: стварыце мадальнае паведамленне для дынамічнага запаўнення з карыстальніцкага тыпу паведамлення з дапамогай Ajax
Адзін з галоўных праектаў, над якімі я працаваў у мінулым годзе, - гэта стварэнне бібліятэка абрэвіятур выкарыстанне карыстальніцкага тыпу паведамлення (CPT) На Martech Zone. Я вызначыў на сайце больш за 1,000 абрэвіятур, звязаных з маркетынгам, продажамі і тэхналогіямі! Ён быў даволі папулярным і спрыяе значнаму ўзаемадзеянню з чытачамі і рэфераламі ў пошукавых сістэмах.
Нягледзячы на тое, што я задаволены заручынамі, адна праблема мяне турбавала. Калі чытачы націскалі на абрэвіятуру, яны пераходзілі на старонку абрэвіятуры, каб паказаць азначэнне… далей ад артыкула, які яны чыталі. Гэта не аптымальны карыстацкі досвед (UX). Сёння я змяніў сваю даччыную тэму з добрай наладай. Цяпер, калі вы націскаеце на абрэвіятуру, вызначэнне з'яўляецца ў прыгожым мадальным акне, якое лёгка закрыць.
Мадальны з карыстальніцкім тыпам паведамлення
Вось як выглядаюць вынікі… вы можаце паспрабаваць самі, націснуўшы на UX абрэвіятура.
Унікальным у гэтым рашэнні з'яўляецца тое, што я магу апублікаваць свой артыкул, як звычайна, без дадання якога-небудзь спецыяльнага кода ў артыкуле або на старонцы для адлюстравання мадальнага. Выкарыстоўваючы jQuery, я фіксую, калі карыстальнік націскае на якарны тэкст, правяраю структуру пастаяннай спасылкі, і, калі гэта абрэвіятура, я выкарыстоўваю Ajax запытваць WordPress і запоўніце мадальны выніковым зместам.
Як заўсёды, я прывяду тут код, каб вы маглі зразумець, як рэалізаваць падобнае рашэнне на сваім сайце WordPress!
Крок 1: дадайце CSS для Modal у вашу дзіцячую тэму
Верагодна, вы захочаце змяніць свой 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">×</span>
<div class="entry-content entry clearfix"></div>
</div>
</div>Крок 3: Дадайце функцыю Ajax і карыстальніцкі запыт тыпу публікацыі да вашай даччынай тэмы
Ніжэй ёсць дзве функцыі. modal_script дадае слухача для тых, хто націскае на спасылку. Ёсць правіла рэгулярных выразаў, дзе я магу шукаць /акронім/ у URL а затым вярнуць смоўж пасля спасылкі... што, здараецца, з'яўляецца абрэвіятурай. Гэта адпраўляецца назад у WordPress, а карыстальніцкі тып паведамлення запытваецца і вяртае змесціва JSON, дзе ён аналізуецца і адлюстроўваецца ў мадальным HTML.
function modal_script() {
?>
<script type="text/javascript">
jQuery(document).ready(function(jQuery) {
jQuery(document).on('mouseenter', 'a', function(e) {
var href = jQuery(this).attr('href');
if (href.includes('/acronym/')) {
jQuery(this).addClass('acronym');
}
});
jQuery(document).on('click', 'a', function(e) {
var href = jQuery(this).attr('href');
if (href.includes('/acronym/')) {
e.preventDefault();
var acronym;
try {
var match = href.match(/acronym\/(.+)\/$/);
if (match) {
acronym = match[1];
} else {
console.error("No valid acronym found in href.");
return;
}
} catch (error) {
console.error("Error extracting acronym from href: ", error);
return;
}
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 .entry-content').html('<h1>' + response.title + '</h1>' + '<h2>' + response.definition + '</h2>' + 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;
$post_title = $post[0]->post_title;
$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(
'title' => $post_title,
'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');Даволі эфектыўнае рашэнне! Адзіны недахоп да гэтага рашэння заключаецца ў тым, што яно прывядзе да скарачэння маіх праглядаў старонак за сеанс. Аднак, паколькі гэта паляпшае вопыт майго чытача, перавагі значна пераважваюць гэта!
