Tuesday, March 5, 2024

Cách tạo nút Coppy link và Share link trong WordPress (phần 1)

Cách tạo nút Coppy link và Share link trong WordPress

Trong trang web của bạn , muốn mọi người share link nhanh đặc biệt là chỉ cần ấn nút coppy link và share link trong wordpress chưa bao giờ đơn giản như thế

Sau đây mời các bạn tham khảo bài viết này nhé!

Mình sẽ hướng dẫn bạn tạo nút coppy link và share link trong WordPress.

Tạo nút coppy và share link trong wordpress

Tạo nút coppy link và share link trong wordpress
Tạo nút coppy link và share link trong wordpress

Các bạn hãy nhìn vào hình để dễ hình dung , Chỉ cần ấn vào –> Sẽ có lệnh coppy lưu sẵn vào bộ nhớ tạm –> trả về thông báo “Đã coppy link”

Code Tạo nút Coppy và Share link trong wordpress

Chỉ cần coppy đoạn code sau vào Function.php của theme đang dùng nhé:

/*Buttom Share link in Blog – ggasd.pro */
add_shortcode( ‘share-link’, ‘show_share’ );
function show_share() { ?>
<div class=”share-link” >
<style>
.tooltip {
  position: relative;
  display: inline-block;
}
.tooltip .tooltiptext {
    visibility: hidden;
    width: 500px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: -250%;
    margin-left: -75px;
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 80%;
}
.tooltip .tooltiptext::after {
  content: “”;
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}
.share-link input {
    visibility: hidden;
}
.luot-xem, .binhluan {
    display: flex !important;
}
.luot-xem i, .binhluan i {
    margin-right: 8px;
}
.tooltip button {
    margin-bottom: 0;
    margin-top: -60px;
    margin-right: 30px;
}
</style>
<input type=”text” value=”
<?php echo get_permalink( $post->ID ); ?>” id=”myInput”>
<div class=”tooltip”>
<button onclick=”myFunction()” onmouseout=”outFunc()”>
  <span class=”tooltiptext” id=”myTooltip”>
<?php echo get_permalink( $post->ID ); ?></span>
  <i class=”fas fa-link”></i>
  </button>
</div>
<script>
function myFunction() {
  var copyText = document.getElementById(“myInput”);
  copyText.select();
  copyText.setSelectionRange(0, 99999);
  navigator.clipboard.writeText(copyText.value);
  
  var tooltip = document.getElementById(“myTooltip”);
  tooltip.innerHTML = “Đã coppy : “ + copyText.value;
}
function outFunc() {
  var tooltip = document.getElementById(“myTooltip”);
  tooltip.innerHTML = “Copy link share”;
}
</script>
</div>
<?php
}

Giải thích Đoạn code trên:

  • Tạo 1 short có tên là [share-link] để chèn vào vị trí các bạn muốn.
  • Đoạn code <?php echo get_permalink( $post->ID ); ?> – Sẽ get URL bài đăng hiện đang đứng
  • Java bên dưới bắt sự kiện click vào buttom và chép url trên vào bộ nhớ tạm

OK sau khi xong đoạn code trên việc còn lại là chèn code vào vị trí nữa là xong.

Tạo nút coppy link và share link trong wordpress
Tạo nút coppy link và share link trong wordpress

Chèn code Tạo nút coppy và share link vào vị trí hiện thị

Ví dụ trên mình chèn ở file entry-title.php của theme Flatsome

Nếu bạn cùng dùng theme Flatsome bạn có thể vào theo đường dẫn : template-parts/posts/partials/entry-title.php

Tìm vị trí muốn hiện thị và chèn code sau vào:

<br /><br /><br />
<?php echo do_shortcode(‘[share-link]’); ?>

Việc còn lại là css , trong đoạn code trên Function mình có css tuy nhiên nếu chưa đẹp bạn có thể css lại cho phù hợp với theme đang dùng nhé.

Chúc bạn thành công ! An Nhiên 

5/5 - (1 vote)
46,788FansLike

Bài Viết Mới