Hướng dẫn dùng Child Theme tạo trang chờ chuyển hướng liên kết ngoài cho WordPress
Khi một độc giả nhấp vào liên kết dẫn sang website khác, trang chờ chuyển hướng (redirect page) là một trang trung gian được hiển thị trước khi họ rời website. Trang này giúp thông báo rõ rằng người dùng sắp truy cập một website bên ngoài, cho họ thời gian cân nhắc và cung cấp nút tiếp tục do chính họ chủ động bấm.
Trong bài này, chúng ta sẽ tạo trang chờ cho liên kết ngoài trên website WordPress dùng Child Theme. Giải pháp có các nguyên tắc sau:
- Liên kết nội bộ của
Yourdomain.comvẫn mở ở tab hiện tại, trừ khi người viết đã chọn “Mở trong tab mới”. - Liên kết ngoài mở trang chờ trong tab mới; bài viết ban đầu vẫn được giữ nguyên.
- Trang chờ đếm ngược 15 giây khi tab đang được xem. Nếu người dùng chuyển sang tab khác, bộ đếm tạm dừng.
- Khi hết thời gian, nút “Tiếp tục chuyển hướng” mới xuất hiện. Người dùng bấm nút để đi tới trang đích trong chính tab trang chờ.
- URL đích không hiển thị trong giao diện trang chờ.
Lưu ý: đây là trang chức năng, không phải bài viết SEO. Ta sẽ đặt
noindex, nofollowcho nó. Bài hướng dẫn này được đăng thành một bài viết hoặc trang riêng.
Chuẩn bị tạo trang chờ chuyển hướng
Trước khi sửa mã, hãy sao lưu file sau:
/wp-content/themes/your-theme-child/functions.phpSau đó, bảo đảm Child Theme đang được kích hoạt trong Giao diện → Giao diện. Không thêm mã vào theme cha vì các cập nhật theme có thể ghi đè thay đổi.
Trong WordPress, vào Trang → Thêm trang mới, tạo một trang có slug chính xác là:
redirect-pageNội dung của trang này có thể để trống: phần mã ở bước 4 sẽ tạo giao diện trang chờ. Đừng đăng bài hướng dẫn này vào chính trang redirect-page, vì nội dung biên tập của trang đó sẽ được thay bằng giao diện chức năng.
Bước 1: Kiểm tra một URL có phải liên kết ngoài hay không
Thêm hàm dưới đây vào cuối functions.php của child theme. Hàm chỉ chấp nhận URL http hoặc https, đồng thời xem Yourdomain.com và www.Yourdomain.com là liên kết nội bộ.
function saibabc_is_external_url( $url ) {
$parts = wp_parse_url( $url );
if ( empty( $parts['scheme'] ) || empty( $parts['host'] ) || ! in_array( strtolower( $parts['scheme'] ), array( 'http', 'https' ), true ) ) {
return false;
}
$site_host = wp_parse_url( home_url(), PHP_URL_HOST );
$normalise_host = static function( $host ) {
return preg_replace( '/^www\./i', '', strtolower( $host ) );
};
return $normalise_host( $parts['host'] ) !== $normalise_host( $site_host );
}Nhờ bước này, các loại liên kết như mailto:, tel:, liên kết neo trong cùng trang, hoặc URL không hợp lệ sẽ không bị đưa qua trang chờ.
Bước 2: Đưa liên kết ngoài qua trang chờ trong tab mới
Đoạn mã bên dưới theo dõi thao tác nhấp thông thường vào mọi thẻ liên kết trên website. Nếu là liên kết ngoài, mã sẽ mở /redirect-page/ trong tab mới. Nếu là liên kết nội bộ và không có thuộc tính target, mã đặt target="_self" để liên kết luôn dùng tab hiện tại.
function saibabc_external_link_wait_script() {
if ( is_admin() || is_page( 'redirect-page' ) ) {
return;
}
$redirect_page = home_url( '/redirect-page/' );
?>
<script>
(function () {
'use strict';
var redirectPage = <?php echo wp_json_encode( $redirect_page ); ?>;
var siteHost = <?php echo wp_json_encode( wp_parse_url( home_url(), PHP_URL_HOST ) ); ?>.replace(/^www\./i, '').toLowerCase();
document.addEventListener('click', function (event) {
if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
return;
}
var link = event.target.closest ? event.target.closest('a[href]') : null;
if (!link || link.hasAttribute('download') || link.dataset.skipRedirect !== undefined) {
return;
}
var url;
try {
url = new URL(link.href, window.location.href);
} catch (error) {
return;
}
var destinationHost = url.hostname.replace(/^www\./i, '').toLowerCase();
if (!/^https?:$/.test(url.protocol)) {
return;
}
if (destinationHost === siteHost) {
// Giữ lựa chọn target="_blank" của người viết bài nếu đã có.
if (!link.hasAttribute('target')) {
link.setAttribute('target', '_self');
}
return;
}
event.preventDefault();
window.open(redirectPage + '?url=' + encodeURIComponent(url.href), '_blank', 'noopener');
}, true);
}());
</script>
<?php
}
add_action( 'wp_footer', 'saibabc_external_link_wait_script', 99 );Nếu có một liên kết ngoài không muốn áp dụng trang chờ, thêm thuộc tính sau vào thẻ liên kết đó:
<a href="https://example.com" data-skip-redirect>Liên kết không qua trang chờ</a>Bước 3: Tạo giao diện trang chờ và xác thực URL
Trang chờ chỉ nhận URL đích hợp lệ. Mã sau tạo giao diện độc lập, thêm noindex, nofollow, không hiển thị URL đích trên trang và có liên kết quay về trang chủ khi URL không hợp lệ. (Lưu ý: tìm đổi your-theme-child thành tên thư mục child theme của bạn).
function saibabc_render_external_redirect_page() {
if ( ! is_page( 'redirect-page' ) ) {
return;
}
$destination = isset( $_GET['url'] ) ? trim( wp_unslash( $_GET['url'] ) ) : '';
$is_valid = strlen( $destination ) <= 2048 && saibabc_is_external_url( $destination );
status_header( 200 );
nocache_headers();
?>
<!doctype html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="robots" content="noindex, nofollow">
<title><?php esc_html_e( 'Đang chuyển hướng...', 'your-theme-child' ); ?></title>
<style>
body{margin:0;min-height:100vh;display:grid;place-items:center;background:#f5f6f8;color:#1f2937;font:16px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif}
.saibabc-redirect{width:min(560px,calc(100% - 40px));padding:36px;background:#fff;border-radius:14px;box-shadow:0 12px 35px rgba(0,0,0,.1);text-align:center}
.saibabc-redirect h1{margin-top:0}.saibabc-count{font-size:2.25rem;font-weight:700;color:#2563eb}
.saibabc-redirect a{color:#2563eb}.saibabc-continue{display:inline-block;padding:11px 22px;border-radius:7px;background:#2563eb!important;color:#fff!important;font-weight:700;text-decoration:none}
.saibabc-continue:hover{background:#1d4ed8!important}.saibabc-continue[hidden]{display:none}
</style>
</head>
<body>
<main class="saibabc-redirect">
<?php if ( $is_valid ) : ?>
<h1><?php esc_html_e( 'Bạn sắp rời SaibABC.Com', 'your-theme-child' ); ?></h1>
<p><?php esc_html_e( 'Trang đích sẽ mở sau', 'your-theme-child' ); ?> <span class="saibabc-count" id="saibabc-count">15</span> <?php esc_html_e( 'giây.', 'your-theme-child' ); ?></p>
<p><a class="saibabc-continue" id="saibabc-continue" href="<?php echo esc_url( $destination ); ?>" hidden><?php esc_html_e( 'Tiếp tục chuyển hướng', 'your-theme-child' ); ?></a></p>
<p><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php esc_html_e( 'Quay lại trang chủ', 'your-theme-child' ); ?></a></p>
<?php else : ?>
<h1><?php esc_html_e( 'Liên kết không hợp lệ', 'your-theme-child' ); ?></h1>
<p><?php esc_html_e( 'Không thể xác định trang đích bên ngoài.', 'your-theme-child' ); ?></p>
<p><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php esc_html_e( 'Quay lại trang chủ', 'your-theme-child' ); ?></a></p>
<?php endif; ?>
</main>
</body>
</html>
<?php
exit;
}
add_action( 'template_redirect', 'saibabc_render_external_redirect_page', 1 );Bước 4: Đếm ngược chỉ khi người dùng đang xem tab
Chèn đoạn JavaScript sau ngay sau nút “Tiếp tục chuyển hướng” trong nhánh URL hợp lệ của bước 3. Page Visibility API phát hiện khi tab bị ẩn; lúc đó bộ đếm dừng và chỉ tiếp tục khi người dùng quay trở lại tab.
<script>
(function () {
var seconds = 15,
count = document.getElementById('saibabc-count'),
continueLink = document.getElementById('saibabc-continue'),
timer = null;
function stopCountdown() {
if (timer !== null) {
window.clearInterval(timer);
timer = null;
}
}
function countdownTick() {
seconds -= 1;
count.textContent = seconds;
if (seconds <= 0) {
stopCountdown();
continueLink.hidden = false;
}
}
function startCountdown() {
if (timer === null && seconds > 0 && !document.hidden) {
timer = window.setInterval(countdownTick, 1000);
}
}
document.addEventListener('visibilitychange', function () {
if (document.hidden) {
stopCountdown();
} else {
startCountdown();
}
});
startCountdown();
}());
</script>Hết 15 giây, trang không tự chuyển hướng. Nút tiếp tục mới xuất hiện và đưa người dùng tới URL đích trong cùng tab của trang chờ. Muốn đổi thời gian, thay cả hai giá trị 15: số trong thẻ span và biến seconds.
Lưu ý SEO, bảo mật và quảng cáo
Trang chờ không có nội dung biên tập hữu ích cho công cụ tìm kiếm, vì vậy noindex, nofollow là lựa chọn phù hợp. Bài hướng dẫn này mới là trang nên được tối ưu SEO, có tiêu đề, mô tả và liên kết nội bộ.
URL đích không xuất hiện trong giao diện. Tuy nhiên, vì URL hiện được truyền bằng tham số ?url=..., người dùng vẫn có thể nhìn thấy nó trên thanh địa chỉ hoặc trong công cụ phát triển của trình duyệt. Không thể che hoàn toàn đích đến khỏi chính người dùng đang được chuyển tới website đó; nếu cần tránh xuất hiện trên thanh địa chỉ, cần xây dựng cơ chế token lưu tại máy chủ.
Không nên đặt AdSense hoặc Auto Ads trên /redirect-page/. Đây là trang điều hướng có đếm ngược, không phải trang nội dung. Quảng cáo nên xuất hiện trên bài viết hoặc các trang nội dung thực sự của website.
Kiểm tra sau khi cài đặt
- Xóa cache của plugin cache, CDN và trình duyệt.
- Nhấp liên kết nội bộ không chọn tab mới: liên kết phải mở ngay ở tab hiện tại.
- Nhấp liên kết nội bộ đã chọn “Mở trong tab mới”: liên kết phải mở ở tab mới.
- Nhấp liên kết ngoài: phải mở trang chờ ở tab mới.
- Chuyển sang tab khác khi đang đếm: quay lại để xác nhận số giây không giảm trong thời gian tab bị ẩn.
- Hết thời gian: nút “Tiếp tục chuyển hướng” xuất hiện; nhấp nút để đến website đích.