Cách Tạo Trang Chuyển Hướng WordPress Tự Động Và Không Tự Động

Trang Chuyển Hướng WordPress là một chức năng mở rộng thêm cho website của bạn, nó phù hợp với các website có link ra bên ngoài, có thể giảm được tỉ lệ thoát trang và có thể đặt quảng cáo. Nào, hãy cùng mình tiến hành tạo trang chuyển wordpress tự động và không tự động nhé.

Cách Tạo Trang Chuyển Hướng WordPress Tự Động

Bước 1: Bạn vào thư mục theme (không phải Child-theme), tạo 1 file có tên là chuyen-huong.php với nội dung như sau:

<?php
/*
Template Name: Chuyển Hướng Tự Động WordPress
*/
$redirect_to = !empty($_GET['url'])
? trim(strip_tags(stripslashes($_GET['url'])))
: '';

$wait_time = 15000; // Thời gian tự động chuyển hướng (15000 mi li giây = 30s).
$wait_seconds = $wait_time / 1000;

add_action('wp_head', 'redirect_to_no_index', 99);
function redirect_to_no_index(){
    ?>
    <!-- Tắt index trang này -->
    <meta name="robots" content="noindex, follow">
    <meta charset="UTF-8">
    <?php
    }

add_action('wp_head', 'redirect_to_external_link');

function redirect_to_external_link(){
    global $redirect_to, $wait_seconds, $wait_time;
    if (empty($redirect_to) || empty($wait_time)) {
    return;
    }
    ?>

<script>var redirect = window.setTimeout(function(){window.location.href='<?php esc_html_e($redirect_to); ?>'},<?php echo $wait_time; ?>);</script>
<noscript><meta http-equiv="refresh" content="<?php echo $wait_seconds; ?>;url=<?php esc_attr_e($redirect_to); ?>">></noscript>

    <?php }
get_header(); ?>

<div class="lm-chuyen-huong">
<div class="lm-progress-bar">
  <div class="box">
    <p class="loading-text">Đang Get Link FREE, vui lòng đợi...</p>
    <p class="done-text">Done! 🎉</p>
    <div class="box-front"></div>
    <div class="box-bottom"></div>
  </div>
</div>

<button class="btn-hover color-6"><a href="https://linhminaz.com/chuyen-huong-nhanh-nhanh/url=OPJFIOEFEHf6f5yyr6y7u5Gt44t4Gt4t4G4t34ttGGGRtf3rA1gw12212d3frLfefpNdaBnK2frtgretgghthff2f4FLThVtIVCIx2RLGpgk03k031wCFLThVtIVCIx2RLGpNBnK1wCFLThVtIVCIx2RLGpNBnK2frtgretggeegf245htheKk031k031wCFLThVtIVCIx2RLGpNBnKNBnKclMg:1621236123907pgriglfjpn544krfknfhowf894fkerhfgrgorotmxmiYIPxNo6HyAOu3qzgAQ&oqdasfgrgr" target="_blank" class="lm-pr">Chuyển Hướng Ngay</a></button>
<button class="btn-hover color-9"><a href="https://www.youtube.com/watch?v=gUiG7VZ0PVQ" target="_blank" class="lm-pr"> Hướng dẫn Get Link FREE</a></button>

</div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/gUiG7VZ0PVQ?autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 <div><span class="lm_gg">Giảm ngay <b class="lm-200">200k</b> cho Theme Halim v5+ Nulled, nhập mã</span>
    <button class="btn-hover color-2">200HLLM</button>
    </div>

    <div>
      <span class="lm_gg">Giảm ngay <b class="lm-200">60k</b> cho Code Stream GDrive V3.0, nhập mã</span>
    <button class="btn-hover color-8">06STLM</button><span class="lm_gg"><a href="https://linhminaz.com/code-stream-video-google-drive/" target="_blank">Xem Code Tại đây</a></span>
  </div>

<script type="text/javascript">
  const bar = document.getElementsByClassName("lm-progress-bar")[0];
let percentage = 0;
bar.style = `--progress: ${percentage}`;
const intervall = setInterval(() => {
  bar.style = `--progress: ${percentage}`;
  percentage += 0.01;
  if (percentage > 1) {
    clearInterval(intervall);
    bar.classList.add("done");
    bar.style = `--progress: 1`;
  }
}, 140); //Thời gian Loading của class loading-text
</script>

</div>

<script>
    document.getElementById('timer').innerHTML = <?php echo $wait_seconds;?>;
    var timer = <?php echo $wait_seconds;?>;
    var interval = setInterval(function() {
    var seconds = timer;
    if (seconds > 0) {
    --seconds;
    document.getElementById('timer').innerHTML = seconds + "";
    timer = seconds;
    }
    else {

    }

    }, 1000);
</script>

<style type="text/css">
    .lm_gg{font-size:3vh;}
    .lm-200{font-size: 4vh;}
    .lm_gg,.lm-200,.lm-pr{color: #ffff}
    .lm-show{color: #ffff;}
    .lm-hide {display: none;}
    .btn-hover.color-3 {
        background-image: linear-gradient(to right, #667eea, #764ba2, #6B8DD6, #8E37D7);
        box-shadow: 0 4px 15px 0 rgba(116, 79, 168, 0.75);
    }

  .lm-progress-bar {
        --progressbar-color: rgba(233, 233, 233, 0.3);
        --progress-color: #ffda00;
        --progress: 20%;
        --box-side-height: 30px;
        position: relative;
        width: 300px;
        height: 50px;
        margin: 20px auto;
        perspective: 200px;
        background-color: #00800000;
    }
    .lm-progress-bar .box {
        position: relative;
        width: 300px;
        height: 50px;
        background: var(--progressbar-color);
        transform-style: preserve-3d;
        transform: rotateX(0);
        transition: transform 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        transform: rotateX(45deg);
    }
    .lm-progress-bar.done .box {
        transform: rotateX(0);
    }
        .lm-progress-bar .box-front {
        position: absolute;
        background: var(--progressbar-color);
        width: 100%;
        height: var(--box-side-height);
        left: 0;
        bottom: 0;
        transform-origin: center bottom;
        transform: rotateX(90deg);
        transition: transform 1s;
    }
    .lm-progress-bar .box p {
        position: absolute;
        top: 0;
        left: 0;
        color: rgba(0, 0, 0, 0.801);
        text-align: center;
        width: 100%;
        height: 100%;
        line-height: 350%;
        z-index: 99;
        font-weight: bold;
        transition: opacity 1s, visibility 1s;
    }
    .lm-progress-bar.done .box p.loading-text {
        opacity: 0;
        visibility: hidden;
    }
    .lm-progress-bar:not(.done) .box p.done-text {
        opacity: 0;
        visibility: hidden;
    }
    .lm-progress-bar .box-bottom {
        position: absolute;
        background: var(--progressbar-color);
        opacity: 0.4;
        width: 100%;
        height: var(--box-side-height);
        left: 0;
        bottom: 0;
        transform-origin: center bottom;
        transform: translateZ(-30px);
        transition: transform 1s;
    }
    .lm-progress-bar .box::after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background: var(--progress-color);
        transform-origin: top left;
        transform: scaleX(var(--progress));
        transition: transform 0.1s;
        box-shadow: 0px 0px 20px #ffda00;
    }
    .lm-progress-bar .box-front::after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background: var(--progress-color);
        transform-origin: top left;
        transform: scaleX(var(--progress));
        transition: transform 0.1s;
        box-shadow: 0px 0px 20px #ffda00;
    }

    .btn-hover {
        width: 200px;
        font-size: 16px;
        font-weight: 600;
        color: #fff;
        cursor: pointer;
        margin: 20px;
        height: 55px;
        text-align:center;
        border: none;
        background-size: 300% 100%;

        border-radius: 50px;
        moz-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        -webkit-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
    }

    .btn-hover:hover {
        background-position: 100% 0;
        moz-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        -webkit-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
    }

    .btn-hover:focus {
        outline: none;
    }

    .btn-hover.color-2 {
        background-image: linear-gradient(to right, #f5ce62, #e43603, #fa7199, #e85a19);
        box-shadow: 0 4px 15px 0 rgba(229, 66, 10, 0.75);
    }
    .btn-hover.color-8 {
        background-image: linear-gradient(to right, #29323c, #485563, #2b5876, #4e4376);
        box-shadow: 0 4px 15px 0 rgba(45, 54, 65, 0.75);
    }
    .btn-hover.color-9 {
        background-image: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);
        box-shadow: 0 4px 15px 0 rgba(65, 132, 234, 0.75);
    }

    .lm-chuyen-huong{margin-top:50px;margin-bottom:50px;margin-left:auto;margin-right:auto;text-ailgn:center;text-align: center;
      background: url(https://linhminaz.com/wp-content/uploads/2021/08/linhminaz.com-Cinematic-Background-Textures_07-scaled.jpg);    
      padding: 5% 0%;}
    #chuyenngay{margin: 7px;background: #00cc00; border: 1px solid #00cc00; color: #fff; cursor: pointer; font-size: 13px ; font-weight: bold ; padding: 7px 15px;text-decoration: none;text-transform: uppercase;text-shadow: none;}
    #dongchuyen{background: #ff4444; border: 1px solid #ff4444; color: #fff; cursor: pointer; font-size: 13px ; font-weight: bold ; margin-bottom: 10px;padding: 7px 15px;text-decoration: none;text-transform: uppercase;text-shadow: none;}
    #chuyenngay:hover, #dongchuyen:hover{background: #555; border: 1px solid #555}
    .thoigian-chuyen{color:#ff3333;font-size:50px;margin-top: 30px;}
</style>

<?php get_footer(); ?>

Ở đây chúng ta có các thông số để bạn có thể chỉnh sửa:

• Dòng 8: 15000 là 15 giây, sau 15 giây nó sẽ tự chuyển đến trang đích, bạn có thể thay đổi tùy ý.
• Dòng 71: 140 là 14 giây, đây là thời gian Loading của class loading-text, bạn có thể thay đổi tùy ý.
• Dòng 241 là hình ảnh nền, bạn cũng có thể thay đổi hình nền tùy ý.

Cách Tạo Trang Chuyển Hướng WordPress Không Tự Động

Bước 1: Bạn vào thư mục theme (không phải Child-theme), tạo 1 file có tên là chuyen-huong.php với nội dung như sau:

<?php
/*
Template Name: Chuyển Hướng Không Tự Động WordPress
*/
$redirect_to = !empty($_GET['url'])
? trim(strip_tags(stripslashes($_GET['url'])))
: '';

add_action('wp_head', 'redirect_to_no_index', 99);
function redirect_to_no_index(){
    ?>
    <!-- Tắt index trang này -->
    <meta name="robots" content="noindex, follow">
    <meta charset="UTF-8">
    <?php
    }

add_action('wp_head', 'redirect_to_external_link');

function redirect_to_external_link(){
    global $redirect_to;
    if (empty($redirect_to)) {
    return;
    }
    ?>
    
    <?php }
get_header(); ?>

<div class="lm-chuyen-huong">
<div class="lm-progress-bar">
  <div class="box">
    <p class="loading-text">Đang Get Link FREE, vui lòng đợi...</p>
    <p class="done-text">Done! 🎉</p>
    <div class="box-front"></div>
    <div class="box-bottom"></div>
  </div>
</div>
<div>
  <p class="lm-show">Link Free sẽ xuất hiện bên dưới🔰</p>
<div class="lm-hide" id="lm-footer">
  <button onclick="window.location.href='<?php esc_html_e($redirect_to); ?>';return false;" class="btn-hover color-3">Get Link FREE</button>
</div>
   
    <script>
        setTimeout(function(){
            document.getElementById('lm-footer').classList.remove('lm-hide');
        }, 15000); //Thời gian hiển thị nút Get Link FREE
           
    </script>

	<button class="btn-hover color-6"><a href="https://linhminaz.com/chuyen-huong-nhanh-nhanh/url=OPJFIOEFEHf6f5yyr6y7u5Gt44t4Gt4t4G4t34ttGGGRtf3rA1gw12212d3frLfefpNdaBnK2frtgretgghthff2f4FLThVtIVCIx2RLGpgk03k031wCFLThVtIVCIx2RLGpNBnK1wCFLThVtIVCIx2RLGpNBnK2frtgretggeegf245htheKk031k031wCFLThVtIVCIx2RLGpNBnKNBnKclMg:1621236123907pgriglfjpn544krfknfhowf894fkerhfgrgorotmxmiYIPxNo6HyAOu3qzgAQ&oqdasfgrgr" target="_blank" class="lm-pr">Chuyển Hướng Ngay</a></button>
	<button class="btn-hover color-9"><a href="https://www.youtube.com/watch?v=gUiG7VZ0PVQ" target="_blank" class="lm-pr"> Hướng dẫn Get Link FREE</a></button>

</div>
<iframe width="560" height="315" src="https://www.youtube.com/embed/gUiG7VZ0PVQ?autoplay=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 <div><span class="lm_gg">Giảm ngay <b class="lm-200">200k</b> cho Theme Halim v5+ Nulled, nhập mã</span>
    <button class="btn-hover color-2">200HLLM</button>
    </div>

    <div>
      <span class="lm_gg">Giảm ngay <b class="lm-200">60k</b> cho Code Stream GDrive V3.0, nhập mã</span>
    <button class="btn-hover color-8">06STLM</button><span class="lm_gg"><a href="https://linhminaz.com/code-stream-video-google-drive/" target="_blank">Xem Code Tại đây</a></span>
  </div>

<script type="text/javascript">
	const bar = document.getElementsByClassName("lm-progress-bar")[0];
let percentage = 0;
bar.style = `--progress: ${percentage}`;
const intervall = setInterval(() => {
  bar.style = `--progress: ${percentage}`;
  percentage += 0.01;
  if (percentage > 1) {
    clearInterval(intervall);
    bar.classList.add("done");
    bar.style = `--progress: 1`;
  }
}, 140); //Thời gian Loading của class loading-text
</script>

</div>

<script>
    document.getElementById('timer').innerHTML = <?php echo $wait_seconds;?>;
    var timer = <?php echo $wait_seconds;?>;
    var interval = setInterval(function() {
    var seconds = timer;
    if (seconds > 0) {
    --seconds;
    document.getElementById('timer').innerHTML = seconds + "";
    timer = seconds;
    }
    else {

    }

    }, 1000);
</script>

<style type="text/css">
    .lm_gg{font-size:3vh;}
    .lm-200{font-size: 4vh;}
    .lm_gg,.lm-200,.lm-pr{color: #ffff}
    .lm-show{color: #ffff;}
    .lm-hide {display: none;}
    .btn-hover.color-3 {
        background-image: linear-gradient(to right, #667eea, #764ba2, #6B8DD6, #8E37D7);
        box-shadow: 0 4px 15px 0 rgba(116, 79, 168, 0.75);
    }

	.lm-progress-bar {
        --progressbar-color: rgba(233, 233, 233, 0.3);
        --progress-color: #ffda00;
        --progress: 20%;
        --box-side-height: 30px;
        position: relative;
        width: 300px;
        height: 50px;
        margin: 20px auto;
        perspective: 200px;
        background-color: #00800000;
    }
    .lm-progress-bar .box {
        position: relative;
        width: 300px;
        height: 50px;
        background: var(--progressbar-color);
        transform-style: preserve-3d;
        transform: rotateX(0);
        transition: transform 1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        transform: rotateX(45deg);
    }
    .lm-progress-bar.done .box {
        transform: rotateX(0);
    }
        .lm-progress-bar .box-front {
        position: absolute;
        background: var(--progressbar-color);
        width: 100%;
        height: var(--box-side-height);
        left: 0;
        bottom: 0;
        transform-origin: center bottom;
        transform: rotateX(90deg);
        transition: transform 1s;
    }
    .lm-progress-bar .box p {
        position: absolute;
        top: 0;
        left: 0;
        color: rgba(0, 0, 0, 0.801);
        text-align: center;
        width: 100%;
        height: 100%;
        line-height: 350%;
        z-index: 99;
        font-weight: bold;
        transition: opacity 1s, visibility 1s;
    }
    .lm-progress-bar.done .box p.loading-text {
        opacity: 0;
        visibility: hidden;
    }
    .lm-progress-bar:not(.done) .box p.done-text {
        opacity: 0;
        visibility: hidden;
    }
    .lm-progress-bar .box-bottom {
        position: absolute;
        background: var(--progressbar-color);
        opacity: 0.4;
        width: 100%;
        height: var(--box-side-height);
        left: 0;
        bottom: 0;
        transform-origin: center bottom;
        transform: translateZ(-30px);
        transition: transform 1s;
    }
    .lm-progress-bar .box::after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background: var(--progress-color);
        transform-origin: top left;
        transform: scaleX(var(--progress));
        transition: transform 0.1s;
        box-shadow: 0px 0px 20px #ffda00;
    }
    .lm-progress-bar .box-front::after {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background: var(--progress-color);
        transform-origin: top left;
        transform: scaleX(var(--progress));
        transition: transform 0.1s;
        box-shadow: 0px 0px 20px #ffda00;
    }

    .btn-hover {
        width: 200px;
        font-size: 16px;
        font-weight: 600;
        color: #fff;
        cursor: pointer;
        margin: 20px;
        height: 55px;
        text-align:center;
        border: none;
        background-size: 300% 100%;

        border-radius: 50px;
        moz-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        -webkit-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
    }

    .btn-hover:hover {
        background-position: 100% 0;
        moz-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        -webkit-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
    }

    .btn-hover:focus {
        outline: none;
    }

    .btn-hover.color-2 {
        background-image: linear-gradient(to right, #f5ce62, #e43603, #fa7199, #e85a19);
        box-shadow: 0 4px 15px 0 rgba(229, 66, 10, 0.75);
    }
    .btn-hover.color-6 {
        background-image: linear-gradient(to right, #009245, #FCEE21, #00A8C5, #D9E021);
        box-shadow: 0 4px 15px 0 rgba(83, 176, 57, 0.75);
    }
    .btn-hover.color-8 {
        background-image: linear-gradient(to right, #29323c, #485563, #2b5876, #4e4376);
        box-shadow: 0 4px 15px 0 rgba(45, 54, 65, 0.75);
    }
    .btn-hover.color-9 {
        background-image: linear-gradient(to right, #25aae1, #4481eb, #04befe, #3f86ed);
        box-shadow: 0 4px 15px 0 rgba(65, 132, 234, 0.75);
    }

    .lm-chuyen-huong{margin-top:50px;margin-bottom:50px;margin-left:auto;margin-right:auto;text-ailgn:center;text-align: center;
        background: url(https://linhminaz.com/wp-content/uploads/2021/08/linhminaz.com-Cinematic-Background-Textures_07-scaled.jpg);    
        padding: 5% 0%;}
    #chuyenngay{margin: 7px;background: #00cc00; border: 1px solid #00cc00; color: #fff; cursor: pointer; font-size: 13px ; font-weight: bold ; padding: 7px 15px;text-decoration: none;text-transform: uppercase;text-shadow: none;}
    #dongchuyen{background: #ff4444; border: 1px solid #ff4444; color: #fff; cursor: pointer; font-size: 13px ; font-weight: bold ; margin-bottom: 10px;padding: 7px 15px;text-decoration: none;text-transform: uppercase;text-shadow: none;}
    #chuyenngay:hover, #dongchuyen:hover{background: #555; border: 1px solid #555}
    .thoigian-chuyen{color:#ff3333;font-size:50px;margin-top: 30px;}
</style>

<?php get_footer(); ?>

Ở đây chúng ta có 2 thông số để các bạn có thể chỉnh sửa:

• Dòng 48: 15000 là 15 giây, sau khi đợi 15 giây thì nó sẽ hiển thị nút Get Link FREE

• Dòng 78: 140 là 14 giây chạy xong phần tử class loading-text

• Dòng 252 là hình ảnh nền, bạn cũng có thể thay đổi hình nền tùy ý.

Bước 2: Các bạn 1 trang Có tên tùy ý, có thể là Chuyển Hướng, Redirect Link… Và chọn mẫu trang là Chuyển hướng tự động WP

Bước 3: Các bạn tải và kích hoạt Plugin Better WordPress External Links tại đây: https://wordpress.org/plugins/bwp-external-links/

Bước 4: Bạn cấu hình Plugin theo như hình bên dưới:

Phần Custom URL prefix thì bạn nhớ thay bằng link trang của bạn và thêm đuôi /?url= vào nhé.

Lời kết

Trên đây là mình đã hướng dẫn Cách Tạo Trang Chuyển Hướng WordPress Tự Động Và Không Tự Động, nếu có ý kiến đóng góp thì bạn hãy để lại bình luận bên dưới nhé.

Chúc các bạn tạo trang chuyển hướng wordpress thành công.