Tạo trang chuyển hướng cho external link

Chào bạn. Như mình đã từng hứa là viết bài hướng dẫn tạo trang điều hướng giống như hocwp.net. Bài viết này mình sẽ hướng dẫn cho các bạn cách làm điều hướng cho các link ngoại external link.

Nếu bạn nào chưa biết external link là gì thì mình xin giải thích luôn. External link có nghĩa là những link bạn đặt trên tên miền của bạn, trỏ ra bên ngoài chứ không phải link thuộc về tên miền của bạn.

Tạo trang chuyển hướng cho external link

Để có thể phát hiện ra đâu là external link trên trang của bạn thì mình dùng Javascript. Bạn tạo một tập tin javascript bỏ vào thư mục js của giao diện. Nội dung tập tin này sẽ như sau:

function hocwpIsExternalLink(url) {
    if (url.indexOf("mailto") !== -1) {
        return false;
    }
    var tempLink = document.createElement("a");
    tempLink.href = url;
    return tempLink.hostname !== window.location.hostname;
}

(function () {
    var container, links, i, len;

    container = document.getElementsByTagName("body")[0];
    links = container.getElementsByTagName("a");

    for (i = 0, len = links.length; i < len; i++) {
        if (hocwpIsExternalLink(links[i].href)) {
            var newTab = parseInt(links[i].getAttribute("data-new-tab"));
            if (!isNaN(newTab) && 1 === newTab) {
                continue;
            }
            links[i].setAttribute("rel", "nofollow");
            links[i].setAttribute("target", "_self");
            links[i].href = hocwpTheme.homeUrl + '?goto=' + links[i].href;
        }
    }
})();

Trong đoạn code bên trên, mình dùng hàm hocwpIsExternalLink để kiểm tra url có phải là external link hay không. Trừ các link là địa chỉ email. Đoạn code chính mình sẽ lấy toàn bộ các link hiện có trên trang. Chạy vòng lặp for để duyệt qua tất cả các link. Nếu link nào có giá trị attribute data-new-tab là 1 thì chúng ta bỏ qua. Sở dĩ mình làm như vậy là vì có đôi lúc bạn muốn link đó chạy bình thường theo cách mà bạn mong muốn. Những link này sẽ không tự động chạy vào trang điều hướng.

function hocwp_theme_external_link_script() {
	wp_enqueue_script( 'hocwp-theme-external-link', HOCWP_THEME_CORE_URL . '/js/external-link' . HOCWP_THEME_JS_SUFFIX, array( 'hocwp-theme' ), false, true );
}

add_action( 'wp_enqueue_scripts', 'hocwp_theme_external_link_script' );

Tiếp theo bạn dùng hàm wp_enqueue_script để load tập tin js này vào giao diện. Bạn nên xem qua hướng dẫn cách load javascript và css vào giao diện WordPress mình đã đăng trước đó.

Kiểm tra biến goto trên WordPress

Ở ví dụ này mình hướng dẫn bạn theo kiểu truyền tham số vào url với biến goto=url. Nếu bạn muốn làm nâng cao hơn theo dạng http://tenmiencuaban.com/goto/url/ thì hãy để lại bình luận, mình sẽ hướng dẫn thêm cho bạn.

function hocwp_theme_external_link_template_include( $template ) {
	$goto = isset( $_GET['goto'] ) ? $_GET['goto'] : '';
	if ( ! empty( $goto ) ) {
		if ( HT()->is_positive_number( $goto ) ) {
			$obj = get_post( $goto );
			if ( $obj instanceof WP_Post ) {
				wp_redirect( get_permalink( $obj ) );
				exit;
			}
		} else {
			$template = HOCWP_THEME_CORE_PATH . '/ext/external-link/confirm-goout.php';
		}
	}

	return $template;
}

add_filter( 'template_include', 'hocwp_theme_external_link_template_include' );

Bạn sẽ dùng filter template_include để điều hướng đến template của goout của bạn. Bạn sẽ kiểm tra tham số goto trên url. Nếu có giá trị thì bạn sẽ chuyển hướng template sang trang goout của bạn. Ở đây mình tạo một tập tin confirm-goout.php để hiển thị nội dung chuyển hướng.

<?php get_header(); ?>
    <div class="confirm-goout" style="margin:20px 0;">
        <div class="container">
            <div style="text-align: center;">
				<?php
				$goto   = isset( $_GET['goto'] ) ? $_GET['goto'] : '';
				$domain = HT()->get_domain_name( home_url() );
				$msg    = __( 'This url is not belong to %s, please choose these options below to continue.', 'hocwp-theme' );
				do_action( 'hocwp_theme_goout_before' )
				?>
                <p><?php printf( $msg, $domain ); ?></p>
				<?php do_action( 'hocwp_theme_goout' ) ?>
                <p>
                    <button class="btn btn-success"
                            data-url="<?php echo esc_url( $goto ); ?>"
                            onclick="return goTo(this);"><?php _e( 'Continue to this url', 'hocwp-theme' ); ?></button>
                    <button class="btn btn-danger" onclick="goBack()"><?php _e( 'Go back', 'hocwp-theme' ); ?></button>
                </p>
				<?php do_action( 'hocwp_theme_goout_after' ) ?>
                <script>
                    function goTo(data) {
                        if ("" !== data.getAttribute("data-url")) {
                            window.location.href = data.getAttribute("data-url");
                        }
                    }

                    function goBack() {
                        window.history.back();
                    }
                </script>
            </div>
        </div>
    </div>
<?php get_footer(); ?>

Tất cả các code ở đây mình chỉ hướng dẫn mang tính chất demo. Bạn dựa theo ý tưởng này và sửa theo sở thích của mình nhé.

Kết luận

Như vậy qua bài viết này bạn đã biết cách làm trang chuyển hướng cho các link external link. Bạn có thể thêm vào các thuộc tính attribute cho link để kiểm tra và tách các link này ra để không vô trang chuyển hướng.

Lợi ích của trang chuyển hướng là bạn có thể chèn quảng cáo vào trang này, giảm tỷ lệ thoát trang và không có quá nhiều external link trên trang của bạn. Nếu bạn nào đã xem bài viết mà chưa làm được, hoặc vướng mắc chỗ nào thì hãy để lại bình luận nhé. Mình sẽ giúp bạn trong khả năng có thể. Chúc bạn thành công.