Lưu trữ tác giả: admin
Code function, Kiến thức Wordpress, Thủ thuật
Hướng dẫn code function trang Chuyển đổi các liên kết chia sẻ Google Drive thành liên kết tải trực tiếp
24
Th12
Th12
Thêm mã PHP vào file functions.php Chúng ta sẽ tạo một shortcode để chèn đoạn mã vào bất kỳ trang nào.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 |
// Thêm Shortcode cho Google Drive Direct Download Link Generator function gdrive_direct_download_shortcode() { ob_start(); // Bắt đầu buffer output để chèn mã HTML/JS ?> <div class="gdrive-link-generator"> <h1>Google Drive Direct Download Link Generator</h1> <textarea id="shareLinks" rows="6" cols="60" placeholder="Nhập nhiều link Google Drive share, mỗi link 1 dòng"></textarea> <button onclick="generateDownloadLinks()">Generate Direct Download Links</button> <div class="result" id="result"></div> <button id="copyAllBtn" onclick="copyAllLinks()" style="display: none;">Copy All Links</button> </div> <style> .gdrive-link-generator { font-family: Arial, sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #f4f4f9; padding: 20px; border: 1px solid #ccc; border-radius: 10px; max-width: 800px; margin: auto; } textarea, button { padding: 10px; margin: 5px; font-size: 16px; } .result { margin-top: 20px; padding: 10px; border: 1px solid #ccc; background-color: #e4e4e4; width: 100%; max-width: 600px; } .result-item { display: flex; align-items: center; margin-bottom: 10px; } .copy-btn { margin-left: 10px; padding: 5px 10px; font-size: 14px; cursor: pointer; } </style> <script> let allLinks = []; function generateDownloadLinks() { const shareLinks = document.getElementById("shareLinks").value; const resultDiv = document.getElementById("result"); const copyAllBtn = document.getElementById("copyAllBtn"); if (!shareLinks.trim()) { resultDiv.innerHTML = "Vui lòng nhập một hoặc nhiều liên kết Google Drive!"; copyAllBtn.style.display = "none"; return; } const linksArray = shareLinks.split('\n').map(link => link.trim()).filter(link => link !== ""); resultDiv.innerHTML = ""; // Xóa kết quả trước đó allLinks = []; // Xóa danh sách liên kết trước đó linksArray.forEach((link, index) => { const fileId = extractFileId(link); const resultItem = document.createElement("div"); resultItem.classList.add("result-item"); if (fileId) { const directDownloadLink = `https://drive.google.com/uc?export=download&id=${fileId}`; resultItem.innerHTML = ` <strong>Link ${index + 1}:</strong> <a href="${directDownloadLink}" target="_blank">${directDownloadLink}</a> <button class="copy-btn" onclick="copyToClipboard('${directDownloadLink}')">Copy</button> `; allLinks.push(directDownloadLink); } else { resultItem.innerHTML = `<strong>Link ${index + 1}:</strong> Liên kết Google Drive không hợp lệ!`; } resultDiv.appendChild(resultItem); }); if (allLinks.length > 0) { copyAllBtn.style.display = "block"; } else { copyAllBtn.style.display = "none"; } } function extractFileId(url) { const regex = /[-\w]{25,}/; const match = url.match(regex); return match ? match[0] : null; } function copyToClipboard(text) { const tempInput = document.createElement("input"); document.body.appendChild(tempInput); tempInput.value = text; tempInput.select(); document.execCommand("copy"); document.body.removeChild(tempInput); alert("Đã sao chép vào clipboard: " + text); } function copyAllLinks() { const allLinksText = allLinks.join('\n'); const tempInput = document.createElement("textarea"); document.body.appendChild(tempInput); tempInput.value = allLinksText; tempInput.select(); document.execCommand("copy"); document.body.removeChild(tempInput); alert("Tất cả liên kết đã được sao chép vào clipboard!"); } </script> <?php return ob_get_clean(); // Trả về HTML/JS dưới dạng chuỗi } add_shortcode('gdrive_link_generator', 'gdrive_direct_download_shortcode'); //---------- |
Chèn shortcode [=.=gdrive_link_generator] vào nơi muốn hiển thị công cụ
Code function, Kiến thức Wordpress, Thủ thuật
Hướng dẫn code function trang Xóa các ký tự đặc biệt trong một đoạn văn bản
24
Th12
Th12
Để xóa các ký tự đặc biệt trong một đoạn văn bản code nhưng vẫn giữ lại định dạng HTML như xuống hàng, in đậm, màu sắc,… bạn có thể sử dụng một shortcode trong WordPress. Thêm đoạn code sau vào file functions.php của theme Flatsome (hoặc child theme để tránh mất khi cập nhật):…
Code function, Kiến thức Wordpress, Theme, Woo
Hướng dẫn Thêm các liên kết DEMO hoặc chức năng bổ sung trên sản phẩm WooCommerce
24
Th12
Th12
Đoạn code được sử dụng để thêm các liên kết hoặc chức năng bổ sung vào một số vị trí trên giao diện WooCommerce (một plugin phổ biến của WordPress). Cụ thể, chức năng sẽ hiển thị các liên kết “Xem demo” (nếu có) và “Xem chi tiết” cho sản phẩm.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
//function xem demo, xem chi tiet add_action( 'woocommerce_after_add_to_cart_button', 'webdy_woo_product_detail', 21 ); //add_action( 'woocommerce_before_single_product_summary', 'webdy_woo_product_detail', 21); add_action( 'flatsome_product_box_actions', 'webdy_woo_product_detail', 15 ); function webdy_woo_product_detail() { global $product; // Kiểm tra xem sản phẩm có tồn tại hay không if ( !$product ) { return; // Nếu không có sản phẩm, không làm gì cả } echo '<div class="webdy_product_detail">'; // Liên kết xem demo (nếu có trường 'demo' trong ACF) $link_demo = get_field('demo'); if ($link_demo) { echo '<a class="webdy_demo_link" href="' . esc_url($link_demo) . '" rel="nofollow" target="_blank"><i class="fa fa-eye" aria-hidden="true"></i> Xem demo</a>'; } // Lấy ID sản phẩm và tạo liên kết "Xem chi tiết" $product_id = $product->get_id(); echo '<a class="webdy_detail_link" href="' . get_permalink($product_id) . '"><i class="fa fa-arrows" aria-hidden="true"></i> Xem chi tiết</a>'; echo '</div>'; } //-------- |
CSS tí cho…
Code function, Kiến thức Wordpress
Hướng dẫn code function Thêm một thông báo vào footer của theme Flatsome trên WordPress
24
Th12
Th12
Để thêm một thông báo vào footer của theme trên WordPress, bạn có thể sử dụng hook wp_footer hoặc chỉnh sửa file footer template qua child theme. Sau đây là cách thực hiện qua một function trong file functions.php: Mở file functions.php trong child theme của bạn (nếu chưa có child theme, bạn nên tạo…
Code function, Kiến thức Wordpress, Thủ thuật
Hướng dẫn code function Thêm cột “Ảnh đại diện” vào bảng hiển thị các bài viết trong admin panel
24
Th12
Th12
Sao chép đoạn mã sau vào tệp functions.php của theme bạn đang sử dụng. Đoạn mã sẽ thêm một cột “Ảnh đại diện” vào bảng quản trị các bài viết.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
//thêm cột "Ảnh đại diện" vào bảng hiển thị các bài viết trong admin panel function webdy_add_thumbnail_column_to_posts($columns) { // Tạo một mảng mới để đưa cột "Ảnh đại diện" lên đầu $new_columns = []; $new_columns['thumbnail'] = __('Ảnh đại diện', 'webdy'); // Cột Ảnh đại diện foreach ($columns as $key => $value) { $new_columns[$key] = $value; // Giữ nguyên các cột khác } return $new_columns; } function webdy_display_thumbnail_column_for_posts($column_name, $post_id) { if ($column_name === 'thumbnail') { // Lấy ảnh đại diện của bài viết $thumbnail = get_the_post_thumbnail($post_id, array(50, 50)); if ($thumbnail) { echo $thumbnail; } else { echo __('Không có ảnh', 'webdy'); } } } // Hook cho bảng Bài viết add_filter('manage_posts_columns', 'webdy_add_thumbnail_column_to_posts'); //add_action('manage_posts_custom_column', 'webdy_display_thumbnail_column_for_posts', 10, 2); //----------- |
Code function, Kiến thức Wordpress, Thủ thuật
Hướng dẫn code function Thêm bài viết liên quan tự động dưới mỗi bài viết (post)
24
Th12
Th12
Dán code sau vào function.php
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
function webdy_related_post($content) { if(is_singular('post')) { global $post; ob_start(); $categories = get_the_category($post->ID); if ($categories) { $category_ids = array_map(function($category) { return $category->term_id; }, $categories); $args = array( 'category__in' => $category_ids, 'post__not_in' => array($post->ID), 'posts_per_page' => 6, 'ignore_sticky_posts' => 1, ); $my_query = new WP_Query($args); if($my_query->have_posts()) { echo '<div class="relatedcat">'; echo '<h2>Bài viết liên quan</h2>'; // Thêm tiêu đề "Bài viết liên quan" echo '<div class="row related-post">'; while ($my_query->have_posts()) { $my_query->the_post(); $thumbnail = get_the_post_thumbnail_url() ?: 'path/to/default-image.jpg'; // Thay bằng ảnh mặc định nếu không có echo '<div class="col large-4">'; echo '<a href="' . get_the_permalink() . '" title="' . get_the_title() . '">'; echo '<div class="feature"><div class="image" style="background-image:url(' . esc_url($thumbnail) . ');"></div></div>'; echo '</a>'; echo '<div class="related-title post-title"><a href="' . get_the_permalink() . '" title="' . get_the_title() . '">' . get_the_title() . '</a></div>'; echo '<div class="cat-label">' . implode(', ', wp_list_pluck(get_the_category(), 'name')) . '</div>'; echo '</div>'; } echo '</div></div>'; } else { echo '<p>No related posts found.</p>'; } wp_reset_postdata(); } $related_post = ob_get_clean(); return $content . $related_post; } return $content; } add_shortcode('webdy_related_post', 'webdy_related_post'); |
Để hiển thị bài viết liên quan dưới mỗi bài viết, bạn cần chèn đoạn shortcode webdy_related_post vào tệp single.php trong theme WordPress của bạn
|
1 2 3 4 5 |
<?php if (function_exists('do_shortcode')) { echo do_shortcode('[webdy_related_post]'); } ?> |
CSS tí
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
/*CSS bai viet lien quan*/ /* Container chính */ .relatedcat { margin-top: 40px; padding: 20px; background-color: #f9f9f9; border: 1px solid #e0e0e0; border-radius: 8px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); } /* Tiêu đề phần bài viết liên quan */ .relatedcat h2 { font-size: 24px; font-weight: bold; color: #333; margin-bottom: 20px; text-align: center; text-transform: uppercase; } /* Layout dạng lưới */ .related-post { display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; } /* Mỗi bài viết */ .related-post .col { flex: 0 1 calc(33.333% - 20px); /* 3 bài viết trên mỗi hàng */ max-width: calc(33.333% - 20px); background: #fff; border-radius: 8px; overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .related-post .col:hover { transform: translateY(-5px); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); } /* Hình ảnh bài viết */ .related-post .feature .image { width: 100%; height: 180px; background-size: cover; background-position: center; } /* Tiêu đề bài viết */ .related-title { padding: 15px; text-align: center; } .related-title a { font-size: 16px; font-weight: bold; color: #333; text-decoration: none; transition: color 0.3s ease; } .related-title a:hover { color: #0073aa; /* Màu xanh khi hover */ } /* Danh mục bài viết */ .cat-label { font-size: 14px; text-align: center; color: #666; margin-bottom: 10px; font-style: italic; } /*--------*/ |
Code function, CSS, JS, Tối ưu website
Dư nhiều dòng trắng có ảnh hưởng đến tốc độ web hay hiệu suất trình duyệt?
24
Th12
Th12
Trong CSS hoặc JavaScript (function), việc để dư nhiều dòng trắng không trực tiếp ảnh hưởng đến tốc độ web hay hiệu suất trình duyệt. Tuy nhiên, có một số điểm cần lưu ý: 1. CSS (Style Sheets): Dòng trắng trong CSS: Trình duyệt sẽ bỏ qua tất cả các ký tự không cần thiết…
24
Th12
Th12
Mở file functions.php trong child theme của bạn (nếu chưa có child theme, bạn nên tạo child theme để tránh mất thay đổi khi update theme). Thêm đoạn code sau:
