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 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 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 />
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
