WordPress. Как отключить href, используя jQuery

Из этого туториала Вы узнаете, как отключить ссылки в шаблонах на основе Cherry framework 3.x и Cherry Framework 4.x, используя jQuery.

!Обратите внимание, все пользовательские коды javascript нужно добавить в файлы дочернего шаблона js.

1. Пользовательский файл js может быть расположен по следующему пути как в Cherry Framework 3.x, так и в Cherry Framework 4.x: wp-content/themes/themeXXXX/js;

2. Если Вы не можете найти файл, его нужно создать. Вот и инструкции, которые покажут, как добавить пользовательский файл js:

   • Для шаблонов на основе Cherry Framework 3.x: WordPress Cherry 3.x. Как добавить пользовательский файл JS;

   • Для шаблонов на основе Cherry Framework 4.x: CherryFramework 4. Как добавить пользовательский файл JS;

3. Мы рассмотрим 3 способа отключить ссылки;

   • Первый – использование функции preventDefault();

     $( document ).ready(function() {
     	$('a').click(function(e) { 
     	e.preventDefault(); 
     }); 

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

     'a[href="the_link_to_be_disabled_here"]'

     В the_link_to_be_disabled_here укажите ссылку, которую Вы хотите закрыть.

   • Следующий код, который можно использовать для отключения ссылки, такой:

     $( document ).ready(function() {
     	$('a').removeAttr("href");
     });

     Вышеприведённое правило удалит html атрибут href. Этот атрибут отвечает за цель ссылки. Когда этот элемент удалён, ссылка более не будет работать.

   • Последний способ удалить ссылку – отключить её используя click event:

     $( document ).ready(function() {
     	$('a').click (function () {
     		return false; 
     	});
     });
     		

4. Все эти коды нужно обернуть в функцию jQuery $( document ).ready(). Вам нужно использовать эту функцию, если Вы добавляете пользовательские коды jQuery в новый файл js, так как код будет выполняться, только если DOM (Document Object Model) вебсайта готов обрабатывать код JavaScript.

5. Если в вашем шаблоне уже есть файл JavaScript с кодами jQuery, нужно добавить лишь саму функцию перед закрывающими кнопками функции $( document ).ready();

6. Самым важным здесь является то, что нужно задать правильную ссылку и найти селектор этой ссылки. Мы советуем использовать инструмент исследования браузера, по этой ссылке Вы найдёте больше информации об инструментах исследования браузера. Неверный паттерн CSS селекторов может привести к неверной работе ссылок по всему сайту. Вы можете найти больше информации о селекторах здесь.

Вы можете также ознакомиться с детальным видео-туториалом ниже:

Также, ознакомьтесь с другими нашими шаблонами WordPress с функционалом Cherry Framework.