Tag / Word Cloud từ mọi phân loại

Tìm hiểu cách tạo thẻ từ / đám mây từ có thể nhấp dựa trên bất kỳ phân loại nào. Mặc dù bạn có thể sử dụng bất kỳ phương pháp phân loại nào, nhưng nó hoạt động tốt nhất với một phương pháp phân loại có nhiều thuật ngữ. Chúng tôi sẽ sử dụng thư viện JavaScript wordcloud2.js để thực hiện các công việc khó khăn cho chúng tôi. Chúng tôi chỉ cần trích xuất các thẻ / điều khoản từ WordPress và gói nó trong một mã ngắn có thể tùy chỉnh.

Những gì chúng ta sẽ tạo ra

Đây là một đám mây từ dựa trên các điều khoản phân loại post_tag cho trang web này.

Trước khi bắt đầu hướng dẫn này, tôi đã xem xét một số thư viện đám mây từ JavaScript. Một số đã cũ, một số hơi hư và một số khác thì thật tuyệt vời. Tôi đã chọn sử dụng wordcloud2.js vì nó đã hoạt động gần đây trên GitHub, nó có tài liệu tốt và nó không có bất kỳ phụ thuộc bên ngoài nào. Vì vậy, sẽ ít xảy ra sai sót hơn với các bản cập nhật trong tương lai và ít làm chậm trang web của bạn hơn.

Bạn nên xem các ví dụ của wordcloud2.js và tải xuống mã nguồn mới nhất trước khi bắt đầu.

Bắt đầu

Đảm bảo trang web của bạn đang sử dụng chủ đề con tùy chỉnh để bạn có thể giữ cho tệp functions.php của chủ đề gọn gàng.

Chúng tôi sẽ tạo một thư mục trong chủ đề con tùy chỉnh của mình để chứa các tệp nội dung và chúng tôi sẽ tạo một tệp PHP chính để kết hợp tất cả lại với nhau.

Tạo một thư mục trong thư mục chính của chủ đề con tùy chỉnh của bạn được gọi là wpt-word-cloud và đặt tệp nguồn wordcloud2.js vào đó. Tạo hai tệp văn bản trống trong cùng một thư mục có tên là word-cloud-frontend.cssword-cloud-frontend.js . Bây giờ bạn sẽ có một thư mục với ba tệp trong đó - hai trong số đó đang trống.

Quay lại thư mục chính của chủ đề con tùy chỉnh của bạn, tạo một tệp văn bản mới có tên wpt-word-cloud.php , dán mã “giàn giáo” sau vào đó và lưu tệp.

// Block direct access.
if (!defined('WPINC')) {
exit('Do NOT access this file directly.');
}
function do_shortcode_wpt_word_cloud($atts) {
$html = '';
if (is_admin()) {
// Don't do anything.
} elseif (wp_doing_ajax()) {
// Don't do anything.
} else {
$html .= '<p>WP Tutorials Word Cloud.</p>';
}
return $html;
}
add_shortcode('wpt_word_cloud', 'do_shortcode_wpt_word_cloud');
Mở tệp functions.php của chủ đề con tùy chỉnh của bạn và thêm phần sau vào đó:
/**
 * WP Tutorials Word Cloud (WPTWC)
 */
require_once 'wpt-word-cloud.php';

Trong trang web của bạn, hãy chỉnh sửa nội dung mà bạn muốn hiển thị đám mây từ của mình, thêm mã ngắn, lưu nội dung và sau đó xem nó. Bạn sẽ thấy dòng chữ “ WP Tutorials Word Cloud ” xuất hiện trên giao diện người dùng của trang web của bạn.

Đó là tất cả những gì chúng ta cần làm để khởi động mọi thứ. Chúng tôi có một tệp PHP chính, nơi chúng tôi có thể đặt hầu hết mã của mình ( wpt-word-cloud.php ), chúng tôi đã liên kết với nó từ tệp functions.php của chủ đề và chúng tôi có một thư mục nơi chúng tôi có thể cất giữ tài sản của chúng tôi.

Logic PHP cốt lõi

Trước khi chúng ta viết hàm PHP chính sẽ thực hiện công việc back-end, chúng ta cần tìm hiểu xem nó thực sự sẽ hoạt động như thế nào. Định dạng của các hướng dẫn shortcode này dựa trên thư viện JavaScript bên ngoài là khá chuẩn:
  • Yêu cầu các nội dung mà giao diện người dùng / trình duyệt sẽ cần - các tệp CSS và JavaScript.
    • Chúng có thể là tài sản riêng của chúng tôi hoặc có thể là tài sản do thư viện bên ngoài cung cấp.
  • Lấy một số dữ liệu từ WordPress và sắp xếp, ngăn nắp hoặc cấu trúc nó thành một mảng.
  • Đặt thuộc tính “data-” của một phần tử HTML với mảng có cấu trúc của chúng tôi.
  • Thêm một chút JavaScript giao diện người dùng để tìm phần tử HTML của chúng tôi, trích xuất thuộc tính “data-” và chuyển tất cả vào thư viện JS.
Điều làm cho mỗi hướng dẫn shortcode này khác nhau là cách chúng tôi lấy và định dạng dữ liệu WordPress trước khi chúng tôi gắn nó vào thuộc tính “data-” và xử lý nó trong giao diện người dùng.

Trong trường hợp này, tài liệu cho wordcloud2.js cho biết chúng ta cần tạo một mảng danh sách từ, ở định dạng sau:

[
[word, size, data1, data2, ... ],
[word, size, data1, data2, ... ],
[word, size, data1, data2, ... ],
...
]

… Trong đó “size” là kích thước phông chữ và data1 / data2 /… là bất cứ thứ gì chúng tôi muốn - chúng tôi sẽ chuyển một số URL vào đó.

Chúng ta cũng sẽ muốn có các từ lớn nhất ở đầu mảng và các từ nhỏ nhất ở cuối.

Chúng ta không thể chỉ đặt số lượng từ vào trường “size”, bởi vì nếu một từ có số lượng là 153, thì giao diện người dùng sẽ cố gắng hiển thị từ đó với kích thước phông chữ là 153pt. Đường rất rộng. Vì vậy, chúng ta cũng cần tính số lượng từ và chia tỷ lệ chúng lên / xuống đến một phạm vi kích thước phông chữ hợp lý. Điều đó có nghĩa là… một số phép toán.

Theo kinh nghiệm, việc chuyển các mảng trong thuộc tính “data-” có thể hơi thú vị - trình duyệt có thể giải mã chúng dưới dạng một đối tượng, thay vì dưới dạng một mảng. Vì vậy, chúng tôi sẽ chuyển ba đối tượng vào giao diện người dùng. Một đối tượng sẽ chứa các tùy chọn chung cho đám mây từ, một đối tượng khác sẽ chứa danh sách từ và đối tượng cuối cùng chỉ dành cho một số cài đặt sai. Khi chúng tôi chọn những thứ này trong trình duyệt ( word-cloud-frontend.js ), chúng tôi sẽ chuyển đổi từ-list-object thành một mảng có định dạng đúng cho wordcloud2.js.

Mã PHP chính

Đây là khối mã lớn. Sao chép và dán tệp này vào wpt-word-cloud.php . Đọc qua các nhận xét và bạn sẽ thấy các phần mà chúng tôi vừa đề cập trong phần logic.
/**
* WP Tutorials Word Cloud (WPTWC)
*
* https://wp-tutorials.tech/refine-wordpress/word-tag-cloud/
*
*/
// Block direct access.
if (!defined('WPINC')) {
exit('Do NOT access this file directly.');
}
const WPTWC_DEFAULT_MIN_FONT_SIZE = 16;
const WPTWC_DEFAULT_MAX_FONT_SIZE = 60;
const WPTWC_DEFAULT_TAXONOMY = 'post_tag';
const WPTWC_DEFAULT_GRID_SIZE = 15;
const WPTWC_DEFAULT_ROTATE_RATIO = 0.25;
const WPTWC_DEFAULT_ROTATION_STEPS = 2;
const WPTWC_WEIGHT_THRESH_HIGH = 0.60;
const WPTWC_WEIGHT_THRESH_MED_HIGH = 0.30;
const WPTWC_WEIGHT_THRESH_MED_LOW = 0.05;
function wpt_enqueue_wordcloud_assets_if_not_already_enqueued() {
$base_url = get_stylesheet_directory_uri() . '/' . pathinfo(__FILE__, PATHINFO_FILENAME) . '/';
$version = wp_get_theme()->get('Version');
wp_enqueue_script('wordcloud2', $base_url . 'wordcloud2.js', array('jquery'), '2.0.3', true);
wp_enqueue_script('wpt-word-cloud', $base_url . 'word-cloud-frontend.js', array('wordcloud2'), $version, true);
wp_enqueue_style('wpt-word-cloud', $base_url . 'word-cloud-frontend.css', null, $version);
}
function do_shortcode_wpt_word_cloud($atts) {
$html = '';
if (is_admin()) {
// Don't do anything.
} elseif (wp_doing_ajax()) {
// Don't do anything.
} else {
wpt_enqueue_wordcloud_assets_if_not_already_enqueued();
$args = shortcode_atts(
array(
'taxonomy' => WPTWC_DEFAULT_TAXONOMY,
'min_font' => WPTWC_DEFAULT_MIN_FONT_SIZE,
'max_font' => WPTWC_DEFAULT_MAX_FONT_SIZE,
'gridSize' => WPTWC_DEFAULT_GRID_SIZE,
'rotateRatio' => WPTWC_DEFAULT_ROTATE_RATIO,
'rotationSteps' => WPTWC_DEFAULT_ROTATION_STEPS,
'class' => '',
),
$atts
);
// Extract the terms from our taxonomy. This is an array of WP_Term
// objects. Each WP_Term object has a name, slug and count.
$terms = get_terms(array(
'taxonomy' => $args['taxonomy'],
'hide_empty' => true,
));
$words = array();
$min_count = PHP_INT_MAX;
$max_count = 0;
if (is_array($terms)) {
foreach ($terms as $term) {
$key = sprintf('%08d_%s', $term->count, $term->name);
$words[$key] = array(
'slug' => $term->slug,
'text' => $term->name,
'count' => $term->count,
'link' => get_term_link($term, $args['taxonomy']),
);
if ($term->count < $min_count) {
$min_count = $term->count;
}
if ($term->count > $max_count) {
$max_count = $term->count;
}
}
krsort($words);
}
// The maths bit - scale the term counts to font sizes.
$count_range = ($max_count - $min_count);
$min_font_size = $args['min_font'];
$max_font_size = $args['max_font'];
$font_size_range = ($max_font_size - $min_font_size);
foreach ($words as $key => $word) {
$percentage = 1.0 * ($words[$key]['count'] - $min_count) / $count_range;
$words[$key]['weight'] = round($min_font_size + ($percentage * $font_size_range));
}
// Options for wordcloud2.js
$wordcloud_options = array(
'gridSize' => $args['gridSize'],
'rotateRatio' => $args['rotateRatio'],
'rotationSteps' => $args['rotationSteps'],
'drawOutOfBound' => false,
'shrinkToFit' => true,
);
// Other bits and bobs we want to pass to the frontend.
$misc_options = array(
'maxWeight' => $max_font_size,
'minWeight' => $min_font_size,
'weightThresholdHigh' => round($min_font_size + (WPTWC_WEIGHT_THRESH_HIGH * $font_size_range)),
'weightThresholdMedHigh' => round($min_font_size + (WPTWC_WEIGHT_THRESH_MED_HIGH * $font_size_range)),
'weightThresholdMedLow' => round($min_font_size + (WPTWC_WEIGHT_THRESH_MED_LOW * $font_size_range)),
);
// CSS classes for the word cloud container div.
$classes = array('wpt-word-cloud');
if (!empty($args['class'])) {
$classes[] = sanitize_title($args['class']);
}
$html .= sprintf(
'<div class="%s" data-word-cloud-words="%s" data-word-cloud-options="%s" data-word-cloud-misc="%s" style="opacity: 0.0;"></div>',
esc_attr(implode(' ', $classes)),
esc_attr(json_encode($words)),
esc_attr(json_encode($wordcloud_options)),
esc_attr(json_encode($misc_options))
);
}
return $html;
}
add_shortcode('wpt_word_cloud', 'do_shortcode_wpt_word_cloud');
do_shortcode_wpt_word_cloudChức năng chính bị phá vỡ như thế này:
  1. Xếp hàng các nội dung, bao gồm cả wordcloud2.js.
  2. Sử dụng shortcode_atts () để phân tích cú pháp các thuộc tính được chuyển đến shortcode, do đó $argsmảng chứa các tham số đã được làm sạch của chúng tôi.
  3. Tạo $optionsmảng để chuyển tới wordcloud2.js trong giao diện người dùng.
  4. Gọi get_terms()để lấy tất cả các thuật ngữ chúng tôi muốn, dưới dạng một mảng các đối tượng WP_Term.
  5. Vòng qua $terms
    1. Tạo một khóa cho mỗi thuật ngữ, dựa trên số lượng từ của nó và chính từ đó. Thí dụ: 00000023_Some Term Name
    2. Thêm thuật ngữ vào $wordsmảng của chúng tôi .
  6. Sử dụng krsort () để sắp xếp ngược lại $wordstheo các khóa mà chúng tôi đã tạo, sao cho các từ được sử dụng nhiều nhất đầu tiên trong mảng.
  7. Lặp lại $words
    1. Chỉ định kích thước phông chữ (trọng lượng) cho mỗi từ, dựa trên số lượng từ của nó.
  8. Kết xuất <div>phần tử
  9. Đặt thuộc data-word-cloud-wordstính để giữ phiên bản được mã hóa JSON của $words.
  10. Đặt thuộc data-word-cloud-optionstính để giữ phiên bản được mã hóa JSON của $options.
  11. Opacity bằng 0 trên <div>sẽ làm cho nó trong suốt. Chúng tôi sẽ làm mờ nó sau khi wordcloud2.js đã hiển thị các từ.

Mã JavaScript giao diện người dùng của chúng tôi

Mã giao diện người dùng phải thực hiện một số việc, nhưng logic khá đơn giản, ngay cả khi jQuery thoạt đầu trông hơi khó hiểu:
  1. Chúng tôi kiểm tra WordCloud.isSupportedxem wordcloud2.js có hài lòng vì tất cả các điều kiện tiên quyết đã được đáp ứng hay không.
  2. Đối với mỗi phần tử HTML có thuộc data-word-cloud-wordstính…
    1. Lấy data-word-cloud-wordsvà biến nó thành một mảng có định dạng chính xác cho wordcloud2.js
    2. Nếu chúng ta có nhiều hơn 0 từ…
      1. Xác định một số trọng số ngưỡng để chúng ta có thể gán các lớp CSS khác nhau cho các từ trong các dải trọng số khác nhau.
      2. Lấy data-word-cloud-optionsvà thêm một số tùy chọn bổ sung. Chúng đến từ tài liệu API cho wordcloud2.js:
        1. xử lý nhấp chuột
        2. trình xử lý các lớp.
        3. Thêm một trình xử lý cho sự kiện wordcloudstop, sự kiện này được nâng lên sau khi đám mây từ đã tự vẽ, vì vậy chúng tôi có thể đặt độ mờ thành 1,0 (100%).
      3. Cuối cùng… hãy gọi WordCloud()hàm chính và để wordcloud2.js thực hiện công việc khó khăn thực sự cho chúng tôi.
Sao chép và dán nội dung sau vào wpt-word-cloud / word-cloud-frontend.js và lưu nó.
/**
 * WP Tutorials Word Cloud - Frontend
 * 
 * https://wp-tutorials.tech/refine-wordpress/word-tag-cloud/
 *
 * Thanks to wordcloud2.js: https://github.com/timdream/wordcloud2.js
 */
(function($) {
    'use strict';
    $(window).on('load', function() {
        // console.log('WP Tutorials Word Cloud : load');
        if (WordCloud.isSupported) {
            $('[data-word-cloud-words]').each(function(index, value) {
                // Get our words object.
                var wordsObject = $(this).data('word-cloud-words');
                // Convert wordsObject into an array that wordcloud2 can use.
                var wordsArray = Object.keys(wordsObject).map(function(key, index) {
                    return [
                        wordsObject[key].text,
                        wordsObject[key].weight,
                        wordsObject[key].link
                    ];
                });
                // Uncomment to see what the word array looks like.
                // console.log(wordsArray);
                // Only proceed if we've actually got some words in wordsArray.
                if (wordsArray.length > 0) {
                    // Get the weight CSS class thresholds,
                    // and any other misc. options.
                    var miscOptions = $(this).data('word-cloud-misc');
                    // get the data-word-cloud-options prop.
                    var options = $(this).data('word-cloud-options');
                    // Add the actual words.
                    options.list = wordsArray;
                    // The click-on-word handler.
                    options.click = function(item) {
                        var word = item[0];
                        var size = item[1];
                        var url = item[2];
                        // Uncomment this to see some diagnostics.
                        // console.log('Word=' + word + ' :: Size=' + size + ' :: URL=' + url);
                        // Comment these if you want to stop following clicks.
                        if (url) {
                            location.href = url;
                        }
                    };
                    // Assign CSS classes to the words.
                    options.classes = function(word, weight, fontSize, distance, theta) {
                        if (weight >= miscOptions.weightThresholdHigh) {
                            return 'high-weight';
                        } else if (weight >= miscOptions.weightThresholdMedHigh) {
                            return 'medium-high-weight';
                        } else if (weight >= miscOptions.weightThresholdMedLow) {
                            return 'medium-low-weight';
                        } else {
                            return 'low-weight';
                        }
                    };
                    // When the rendered has finished, set the opacity to 1.0
                    // to fade it in.
                    $(this).on('wordcloudstop', function() {
                        $(this).css({ opacity: '1.0' });
                    });
                    // Get the containing  element.
                    var element = $(this)[0];
                    // Call the main wordcloud2.js function - WordCloud().
                    WordCloud(element, options);
                }
            });
        }
    });
})(jQuery);
Đó là nó ... khá nhiều. Nếu bạn truy cập nội dung có mã ngắn của bạn và thực hiện tải lại bắt buộc / đầy đủ (bỏ qua bộ nhớ cache) thì bạn sẽ thấy một đám mây từ… đại loại là… có thể… có lẽ là không.

<div>Phần tử của chúng tôi chưa có chiều cao, vì vậy đám mây từ đang hoạt động, nhưng phần tử DOM cần một số thuộc tính CSS để chúng tôi thực sự có thể nhìn thấy nó.

Thêm một số kiểu

Sao chép và dán nội dung sau vào wpt-word-cloud / word-cloud-frontend.css và lưu nó.
/*
 * WPT Word Cloud
 * https://wp-tutorials.tech/refine-wordpress/word-tag-cloud/;
 */
.wpt-word-cloud {
    position: relative;
    border-radius:  2em;
    width:  100%;
    height:  25em;
    transition: opacity 0.50s;
    background-color:  transparent !important;
    margin-top:  1em;
    margin-bottom:  1em;
}
.wpt-word-cloud > span {
    transition:  0.3s;
}
.wpt-word-cloud > span:hover {
    color:  #ff8c00 !important;
    cursor: pointer;
}
.wpt-word-cloud .high-weight {
    color:  #1700cc !important;
}
.wpt-word-cloud .medium-high-weight {
    color:  #1700ccc0 !important;
}
.wpt-word-cloud .medium-low-weight {
    color:  #1700cca0 !important;
}
.wpt-word-cloud .low-weight {
    color:  #1700cc80 !important;
}

Lưu, kiểm tra và triển khai đám mây thẻ

Đó là nó! Đảm bảo mọi thứ đã được lưu, truy cập nội dung trang web của bạn và tải lại toàn bộ, bỏ qua bộ nhớ cache của trình duyệt. Bây giờ bạn sẽ thấy một đám mây thẻ / từ tương tác! Kiểm tra bảng điều khiển JavaScript của bạn để xem có bất kỳ lỗi nào không.

Kiểm tra các tùy chọn mã ngắn

Tùy chọn mã ngắn, được phân tích cú pháp bởi shortcode_atts ().
Option Default Notes
taxonomy “post_tag” The taxonomy that we want to grab terms for.
min_font 16 Minimum font size used when scaling term counts to font sizes.
max_font 60 Maximum font size used when scaling term counts to font sizes.
gridSize 15 Controls the spacing between the words when they’re rendered. A bigger number gives more spacing.
rotateRatio 0.25 The probability that any given word is rotated. Set to zero to have all words horizontal. Set to 1.00 to make all words rotated.
rotationSteps 2 How many rotation orientations are there.
class “” A list of space-separated CSS class names to pass to the <div> container.

Ví dụ này sẽ hiển thị một đám mây từ gồm tất cả các danh mục bài đăng trên một trang web và không có từ nào được xoay vòng.

Hãy vui vẻ với những đám mây từ của bạn.