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

Cập nhật lần cuối vào

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.

Theo dõi
Thông báo của
guest

33 Comments
Cũ nhất
Mới nhất Được bỏ phiếu nhiều nhất
Phản hồi nội tuyến
Xem tất cả bình luận
Hoang
6 năm trước

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.

Thành
Thành
5 năm trước

Hi, cảm ơn bài hướng dẫn của bạn, mình cũng đang cần cái này, bạn có thể hướng dẫn cài đặt link goout theo dạng http://tenmiencuaban.com/goto/url/ được không!? Thanks!

Thành
Thành
5 năm trước

Cảm ơn bạn!

Din
Din
5 năm trước

Chào bạn,

Bạn ơi cho hỏi, bạn biết site họ dùng link kiểu này là dùng plugin nào không?

https://jpopsingles.eu/go/aHR0cDovL2Fkc2xpbmsucHcvc3QvP2FwaT1mMDliYmE5NjAzZjkyNTdlMWM1NzI1MDA1NGNmODg3OTRlOThkNWVlJnVybD1odHRwczovL2Fub25maWxlLmNvbS83M05iTWVlOWI2

Họ dùng cho mỗi link download file.

Cảm ơn bạn nhiều.

huấn
3 năm trước

bạn có thể cho mình xin code mã hoá link đó được không ạ. Cảm ơn bạn trước

Trúc Hùng
Trúc Hùng
5 năm trước

Chào bạn, có cách nào cho một số trang web vào danh sách loại trừ chuyển hướng không nhỉ.

Trần Phương
5 năm trước

Chào bạn. Cho mình hỏi là khi thêm trang chuyển hướng cho external link như thế này, thì link này có còn được xem như là một backlink hay không?
Ví dụ như là trang A để link của trang B, nhưng sử dụng trang chuyển hướng, thì B có còn nhận được backlink của A hay không? Cảm ơn hocwp.net

Nguyễn Huy Hiệu
5 năm trước

Một bài viết rất hữu ích.

NC
NC
5 năm trước

Bạn có thể hướng dẫn mình làm trang chuyển link giống win10.vn ko?

Nam Hải
4 năm trước

hay quá, mình đã học hỏi thêm về chuyển hướng cho external link nữa, cảm ơn bạn đã chia sẻ

Kiem Tien
Kiem Tien
3 năm trước

Bạn có thể làm hướng dẫn dạng domain/goto/url được không

Doligo
3 năm trước

Kiểu như này hả bác 😀
https://www.doligo.net/go?url=https://hocwp.net/

Doligo
3 năm trước

Cũng tuỳ vào hình thức url bạn mong muốn thôi ấy mà

Tuấn
3 năm trước

Mình muốn tạo trang chuyển hướng dạng tên miền.com/go/url thì dùng code như nào bạn dậy mình với.

Tuấn
3 năm trước

Mình muốn tạo trang chuyển hướng dạng tên miền.com/go/url thì dùng code như nào bạn dậy mình với.

bổ sung: khi họ bấm vào link ngoài trong blog thì nó sang 1 tab mới rồi đếm ngược 20s, sau đó nó có nút xác nhận vào liên kết này.

Tuấn
3 năm trước

cái đó mình dùng tạm đó mà, trang khác của họ nhìn ngon hơn.

Lập
Lập
3 năm trước
Trả lời  Tuấn

Bạn hướng dẫn mình làm với

Lập
Lập
3 năm trước

Có thể hướng dẫn mình tạo 1 trang download trung gian như https://icongnghe.com/download-goldwave/ không. Cám ơn bạn

Lập
Lập
3 năm trước
Trả lời  Lập

Có ai có thể hướng dẫn mình được vấn đề này với

thanhhien
thanhhien
3 năm trước
Trả lời  Lập

ib zalo mình nhe: 0903510668

gialam
2 năm trước

cảm ơn bạn, nhưng mình chưa hiểu cách làm này lam. bạn có thể chỉ mình chi tiết hơn được không.

Đại Việt
2 năm trước

ôi hay quá. mình vẫn còn sử dụng được cho web mình http://www.huutrinhit.com

Chin
Chin
1 năm trước

Pro có thể viết đoạn mã tác tham số goto bằng javascript không. Em có một trang blog ko chạy bằng WP.