Tạo mã QR trong các bài đăng trên WordPress

Tìm hiểu cách sử dụng thư viện Mã QR PHP có sẵn để tạo Mã QR trong trang web WordPress của bạn. Chúng tôi sẽ sử dụng thư viện để tạo mã QR SVG nhanh chóng - không có hình ảnh PNG hoặc tệp tạm thời, chỉ là Mã QR có thể mở rộng hoàn hảo. Chúng tôi cũng sẽ sử dụng bộ đệm ẩn đối tượng WordPress để lưu trữ Mã QR của chúng tôi trong thời gian ngắn, vì vậy chúng tôi không phải tạo động chúng cho mỗi lần tải trang. Đẹp và nhanh chóng. Chúng tôi sẽ gói gọn toàn bộ trong một mã ngắn nên việc thêm Mã QR vào bất kỳ mục nội dung nào cũng rất dễ dàng.

Lấy nguồn mã QR PHP

“PHP QR Code” là một thư viện mã nguồn mở được viết bởi Alexandre Assouad và được lưu trữ trên GitHub. Có rất nhiều tệp trong cây nguồn, nhưng chúng tôi chỉ cần một trong số chúng.
  1. Điều hướng đến https://github.com/t0k4rt/phpqrcode
  2. Nhấp vào phpqrcode.php
  3. Ở trên cùng bên phải của chế độ xem mã nguồn, có một nút cho biết “Nguyên”. Nhấp vào nút - bây giờ bạn sẽ thấy tệp PHP thô trong trình duyệt của mình.
  4. Lưu tệp / trang vào máy tính của bạn với tên “phpqrcode.php”. Chúng tôi sẽ cần nó một lần nữa trong giây lát.

Triển khai một số mã Scaffold

Trong chủ đề con tùy chỉnh của bạn, hãy tạo một tệp trống có tên wpt-qrcode.php và một thư mục có tên wpt-qrcode . Trong thư mục wpt-qrcode, hãy tạo một tệp trống có tên wpt-qrcode.css . Tiếp theo, lấy phpqrcode.php và sao chép nó vào thư mục wpt-qrcode. Đây là những gì bạn nên kết thúc với chủ đề con tùy chỉnh của mình:
  • functions.php
  • style.css
  • wpt-qrcode
    • phpqrcode.php
    • wpt-qrcode.css
  • wpt-qrcode.php
Để bắt đầu với một số mã giàn giáo (mã giữ chỗ), hãy sao chép và dán đoạn mã sau vào wpt-qrcode.php :
/**
 * WP Tutorials QR Codes
 *
 * https://wp-tutorials.tech/add-functionality/generate-qr-codes-in-wordpress-posts/
 *
 */
if (!defined('WPINC')) {
   exit('Do NOT access this file directly.');
}
Tiếp theo, mở functions.php và dán thông tin sau vào đó:
/**
 * WP Tutorials QR Codes.
 */
require_once 'wpt-qrcode.php';
Tải lại trang web của bạn để đảm bảo rằng chúng tôi không vi phạm bất cứ điều gì.

Bây giờ chúng ta có thể bắt đầu thêm mã thích hợp… để thực hiện công việc thực tế.

Bit PHP chính

Đoạn mã PHP chính của chúng tôi chỉ cần thực hiện một số điều sau:
  1. Đăng ký mã ngắn
  2. Đặt hàng trước một tệp CSS cho giao diện người dùng.
  3. Gọi một hàm từ bên trong phpqrcode.php.
… Về cơ bản, nó chỉ kết hợp mọi thứ lại với nhau.

Bắt đầu bằng cách mở wpt-qrcode.php , dán thông tin sau vào đó và lưu nó.

/**
 * WP Tutorials QR Codes
 *
 * https://wp-tutorials.tech/add-functionality/generate-qr-codes-in-wordpress-posts/
 *
 * Registers a shortcode called "wpt_qrcode"
 *
 */
if (!defined('WPINC')) {
   exit('Do NOT access this file directly.');
}
const WPTQRC_IS_DIAGNOSTICS_ENABLED = false; //true;
const WPTQRC_IS_CACHING_ENABLED = true;
const WPTQRC_CACHE_DURATION = WEEK_IN_SECONDS;
const WPTQRC_MAX_CACHE_KEY_LENGTH = 45;
/**
 * Enqueue the frontend assets, if they've not already been euqueued.
 */
function wptqrc_include_hphqrcode_lib() {
   global $wptqrc_have_assets_been_loaded;
   if (is_null($wptqrc_have_assets_been_loaded)) {
      $base_dir = trailingslashit(dirname(__FILE__) . '/wpt-qrcode');
      // Include the PHP QR Code library... but only if it's not already been
      // included by another plugin.
      // Source: https://github.com/t0k4rt/phpqrcode
      if (!class_exists('QRcode')) {
         require_once $base_dir . 'phpqrcode.php';
      }
      $base_url = get_stylesheet_directory_uri() . '/' . pathinfo(__FILE__, PATHINFO_FILENAME) . '/';
      $version = wp_get_theme()->get('Version');
      wp_enqueue_style('wptqrc', $base_url . 'wpt-qrcode.css', '', $version);
      $wptqrc_have_assets_been_loaded = true;
   }
}
/**
 * Render the QR code as an HTML string.
 */
function wptqrc_do_shortcode_wpt_qrcode($atts) {
   $html = '';
   if (is_admin()) {
      // Don't do anything.
   } elseif (wp_doing_ajax()) {
      // Don't do anything.
   } else {
      // Enqueue our frontend assets.
      wptqrc_include_hphqrcode_lib();
      $args = shortcode_atts(
         array(
            'text' => '',
            'class' => '',
         ),
         $atts
      );
      $is_from_cache = false;
      $diagnostics = array();
      $text = $args['text'];
      if (empty($text)) {
         error_log('QR Code: text cannot be empty.');
      } else {
         // Do we have any additional CSS classes to add to the
         // outer 
? $classes = array('wpt-qrcode'); if (!empty($args['class'])) { $classes[] = $args['class']; } // If caching is enabled, look for this QRCode in the cache // from a previous run. $cache_key = 'qrcode_' . sanitize_title($text); if (strlen($cache_key) > WPTQRC_MAX_CACHE_KEY_LENGTH) { $cache_key = substr($cache_key, 0 - WPTQRC_MAX_CACHE_KEY_LENGTH); } $diagnostics[] = 'Cache key: ' . $cache_key; if (WPTQRC_IS_CACHING_ENABLED && !empty($qrcode_svg = wp_cache_get($cache_key))) { // We found an SVG QR Code for this text in the cache. $is_from_cache = true; $diagnostics[] = 'Code is from the cache'; } else { // We have an '@' here to surpress an error message because // QRcode::svg() calls the PHP header() function, even though // WordPress has already sent headers. It's safe to ignore // the error. // NOTE: Alternatively, you could edit phpqrcode.php and remove // the call to header(). ob_start(); @QRcode::svg($text); $qrcode_svg = ob_get_clean(); // The $qrcode_svg string contains an opening DOCTYPE that we // need to strip out, so find where our svg tag starts and // grab everything from that point onwards. $index_of_svg_tag = intval(strpos($qrcode_svg, ' 0) { $qrcode_svg = substr($qrcode_svg, $index_of_svg_tag); } $diagnostics[] = 'Generated a new code'; } // Build the HTML output. $html .= sprintf('
', esc_attr(implode(' ', $classes))); $html .= $qrcode_svg; $html .= '
'; // If diagnostics are enabled, write some useful info to help // with testing. if (WPTQRC_IS_DIAGNOSTICS_ENABLED) { foreach ($diagnostics as $diagnostic) { $html .= sprintf( '
%s
', wp_kses($diagnostic, 'post') ); } } // If caching is enabled, and we've just generated a new QRCode // SVG, save it to the cache it now... ready for next time. if (WPTQRC_IS_CACHING_ENABLED && !empty($qrcode_svg) && !$is_from_cache) { wp_cache_set($cache_key, $qrcode_svg, '', WPTQRC_CACHE_DURATION); } } } return $html; } add_shortcode('wpt_qrcode', 'wptqrc_do_shortcode_wpt_qrcode');

Giờ đây, bạn sẽ có thể chỉnh sửa một số nội dung trên trang web của mình và thêm mã ngắn, với các tham số như text = ”hello world” và class = ”right”.

Phần mã chính hiển thị shortcode (HTML) phải dễ đọc. và bạn có thể kiểm soát các chức năng quan trọng với WPTQRC_IS_DIAGNOSTICS_ENABLEDWPTQRC_IS_CACHING_ENABLEDở phía trên cùng của tập tin.

Bộ nhớ đệm đối tượng WordPress

Lưu vào bộ nhớ đệm ở đây là một cách thú vị để tăng tốc mọi thứ cho người dùng. Bạn có thể lưu trữ nội dung trong bộ nhớ cache của WordPress dưới dạng các cặp khóa / giá trị . Bạn chỉ cần một khóa (chuỗi) duy nhất cho đối tượng / giá trị / biến / thứ mà bạn muốn lưu trong bộ đệm.

Chìa khóa : Đối với Mã QR của chúng tôi, chúng tôi lấy văn bản cho Mã QR và chạy nó thông qua hàm sanitize_title () của WordPress. Điều này biến văn bản Mã QR của chúng tôi thành một slug - loại bỏ các ký tự không phải chữ và số.

Giá trị : Tất cả những gì phpqrcode thực sự làm là tạo ra một chuỗi dài với một <svg>phần tử trong đó. Các chuỗi thực sự dễ dàng lưu trữ trong bộ đệm đối tượng.

Trên một máy chủ WordPress nhanh như thế này, bộ nhớ đệm không tạo ra sự khác biệt đáng chú ý. Nhưng nếu bạn đang sử dụng máy chủ web chậm hoặc nếu trang web của bạn thấy nhiều lưu lượng truy cập, thì bộ nhớ đệm sẽ tạo ra sự khác biệt lớn.

Kiểu CSS

Để dọn dẹp mọi thứ một chút, hãy mở tệp wpt-qrcode.css và dán nội dung sau vào đó. Thật dễ dàng để tách nó ra và làm cho nó làm những gì bạn cần.
/**
 *  * WP Tutoruals : QR Code
 */

.wpt-qrcode,
.wpt-qrcode~.diagnostic {
text-align: center;
}

.wpt-qrcode.left,
.wpt-qrcode.left~.diagnostic {
text-align: left;
}

.wpt-qrcode.right,
.wpt-qrcode.right~.diagnostic {
text-align: right;
}

.wpt-qrcode~.diagnostic {
font-size: 10pt;
background-color: #ffffff88;
color: black;
padding: 0.5em 0;
margin-top: 0.5em
}

.wpt-qrcode > svg {
width: 100%;
height: auto;
box-shadow: 0 0 1.5em #00000022;
}

Kết thúc

Đó là tất cả những gì liên quan đến nó. Hãy vui vẻ khi rắc Mã QR xung quanh các dự án WordPress của bạn.

Nếu bạn đưa ra một số cách sử dụng thú vị cho hướng dẫn này, hãy cho chúng tôi biết trong phần bình luận bên dưới.