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.

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.

8 bình luận cho “Tạo trang chuyển hướng cho external link

  1. Cảm ơn chia sẻ của bạn nhưng mình không nghĩ cách này thực sự tốt về phương diện SEO bởi vì external link được xem là 1 yếu tố để Google đánh giá 1 trang web còn cách này lại chuyển external link sang 1 trang khác rồi từ đó mới redirect ra ngoài sẽ làm mất đi tính liên kết này.

    1. Mình không biết họ dùng plugin nào. Tuy nhiên ý tưởng thì có thể làm được. Chỉ cần mã hóa cái link đi là được mà.

    1. Vẫn có thể làm được nha bạn. Hiện mình làm theo kiểu đơn giản là thêm thuộc tính data-new-tab vào thẻ a để kiểm tra. Hoặc bạn cũng có thể loại bỏ theo tên miền hoặc cái gì đó tùy thích.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *