Источники: https://alaev.info/blog/post/4042 https://drmax.su/prg-pattern-links.html
Вариант №1 — HTML5
Код ссылки на странице:
<a href="#" class="link" data-link="http://goo.gl">внешняя ссылка</a>
Скрипт, который будет обрабатывать ссылку и открывать ее:
<script>$('a.link').click(function(){window.open($(this).data("link"));return false;});</script>
В этом варианте вам не надо будет производить никаких дополнительных доработок стилей в css, наша ссылка будет выглядеть как и все остальные «нормальные» ссылки.
Вариант №2 — альтернативный вариант без использования HTML5
Код ссылки на странице:
<a href="#" class="link" rel="http://goo.gl">внешняя ссылка</a>
Скрипт, который будет обрабатывать ссылку и открывать ее:
<script>$('a.link').click(function(){window.open($(this).attr("rel"));return false;});</script>
Вариант №3 — вариант без использования структуры <a href=»»></a>
Код ссылки на странице:
<span class="hidden-link" data-link="http://goo.gl">внешняя ссылка</span>
Скрипт, который будет обрабатывать ссылку и открывать ее:
<script>$('.hidden-link').click(function(){window.open($(this).data('link'));return false;});</script>
CSS:
span.hidden-link {
color: #00ff00; /*-цвет ссылки-*/
text-decoration: underline; /*-подчеркивание-*/
cursor: pointer; /*-указатель в виде пальца-*/
}
Вариант №4 — еще один вариант скрытия ссылки
Код ссылки на странице:
<span class="hidden-link" data-link="http://goo.gl">внешняя ссылка</span>
Скрипт, который будет обрабатывать ссылку и открывать ее:
<script>$('.hidden-link').replaceWith(function(){return'<a href="'+$(this).data('link')+'">'+$(this).text()+'</a>';})</script>
Отличие этого способа от третьего в том, что js-скрипт меняет на странице html-код «якобы» ссылки на нормальную ссылку после полной загрузки документа. Поэтому никаких правок в css вносить не придется, а ссылка будет открываться как и обычная. Способ так же прошел проверку экспериментом — ссылка не индексируется и не видится поисковыми роботами и, соответственно, не учитывается.
Вариант №5 — универсальный вариант скрытия любого контента, например, картинок
Код элемента, в данном случае ссылки, на странице, будет такой:
<span class="hidden-link" data-link="http://goo.gl">внешняя ссылка</span>
* — Чтобы закрыть картинку, в коде, указанном выше, необходимо заменить «внешняя ссылка» на код <img src="...">.
Скрипт, который будет обрабатывать ссылку или любой другой элемент:
<script>$('.hidden-link').replaceWith(function(){return'<a href="'+$(this).data('link')+'">'+$(this).html()+'</a>';})</script>
Вариант №6 — Post-Redirect-Get способ
Post-Redirect-Get способ, когда мы подсовываем посетителю вместо ссылки кнопку от формы (приведя её с помощью CSS к виду обычной ссылки) и отправляем POST запрос на сервер, получаем оттуда страницу для редиректа и выполняем GET запрос для обновления информации.
Вместо ссылки мы создаем форму, которая передает на сервер данные с помощью метода POST. В качестве данных будет передаваться необходимый URL.
Как только форма отправит ссылку на сервер, мы сможем прочитать её и переадресовать на новый URL.
С помощью редиректа мы уведомим браузер, что он должен получить данные новой страницы через GET и отобразить страницу.
Таким образом мы заменяем классическую ссылку на кнопку, находящуюся в форме.
Пример реализации на примере wordpress. Код в functions.php:
$use_prg = new prg_pattern();
class prg_pattern {
public function __construct() {
add_action( 'template_redirect', array( $this, 'prg_get_and_redirect' ) );
add_shortcode( 'prgpattern', array( $this, 'prg_pattern_form' ) );
}
public function prg_pattern_form( $atts ){
$atts = shortcode_atts(
array(
'slug' => 'noFoo',
'title' => 'noBob',
'extern' => 'false'
), $atts, 'prgpattern' );
if ( $atts['extern'] == 'true' ) {
$redirect_slug = esc_url( $atts['slug'] );
} else {
$redirect_slug = esc_url( home_url() . '/' . strtolower( $atts['slug'] ) );
}
ob_start();
?>
<form method="POST">
<button class="noLink" type="submit" name="prgpattern" value="<?php echo $redirect_slug; ?>"><?php echo $atts['title']; ?></button>
</form>
<?php
return ob_get_clean();
}
public function prg_get_and_redirect(){
if ( isset( $_POST['prgpattern'] ) ) {
$slug = esc_url( $_POST['prgpattern'] );
wp_redirect( $slug );
exit();
}
}
}
Далее, используем в тексте редактируемой страницы шорткоды:
[prgpattern slug="https://vk.com/" title="вк" extern="true"]
[prgpattern slug="linl.html" title="тайтл ссылки" extern="false"]
