Tạo một mã ngắn WordPress tùy chỉnh

Thong_Huynh · 26 Tháng Tám 2021 11:30

Trong bất kỳ dự án phần mềm nào, bạn sẽ thấy mình muốn sử dụng lại một số mã ở nhiều nơi. Điều này cũng tương tự khi viết một tài liệu - bạn sẽ muốn làm điều gì đó một lần và hiển thị nó ở nhiều nơi, có lẽ với một vài thay đổi nhỏ. Thông thường, trong phần mềm, chúng ta đặt mã có thể sử dụng lại vào một hàm, sau đó gọi hàm này bất cứ khi nào chúng ta muốn chạy đoạn mã này. Trong WordPress, chúng ta có thể sử dụng một shortcode tùy chỉnh để làm điều tương tự. Cả WordPress và WooComemrce đều bao gồm các shortcode hữu ích, nhưng sẽ không lâu trước khi bạn muốn tạo shortcode tùy chỉnh của riêng mình.

Trước khi bắt đầu, bạn sẽ cần một nơi nào đó để đặt các mã ngắn tùy chỉnh mới sáng bóng của mình. Nếu bạn chưa tạo chủ đề con tùy chỉnh , thì bạn nên tạo một chủ đề con ngay bây giờ. Khi bạn đã có một chủ đề con tùy chỉnh, bạn sẽ có một tệp functions.php nơi bạn có thể đặt các mã ngắn của mình. Chúng tôi sẽ không chỉ kết xuất một loạt mã sao chép và dán vào tệp functions.php của chúng tôi. Chúng tôi sẽ giữ cho functions.php của chúng tôi sạch sẽ và gọn gàng .

Thực ra mã ngắn là gì?

Nói một cách đơn giản, shortcode có một cái tên đơn giản và bạn gọi nó trong nội dung của mình bằng cách đặt nó giữa dấu ngoặc vuông. Ví dụ: để hiển thị 3 sản phẩm tính năng hàng đầu trên trang web có cài đặt WooCommerce, bạn có thể làm như sau:

[featured _ products limit = 3]

Khi bạn đang chỉnh sửa nội dung trong WordPress, bạn sẽ sử dụng Gutenberg Block Editor hoặc Classic Editor. Nếu bạn đang sử dụng Trình chỉnh sửa khối, chỉ cần tạo một khối mới, tìm kiếm mã ngắn và sau đó tạo khối mới.

Nếu bạn đang sử dụng trình chỉnh sửa cổ điển, bạn có thể tiếp tục và chèn mã ngắn trực tiếp vào nội dung của mình. Có rất nhiều mã ngắn mà bạn có thể chơi với:

Tạo một mã ngắn để sử dụng lại một đoạn mã HTML

Giả sử bạn đang xây dựng một trang web cho một doanh nghiệp nhỏ và bạn muốn có một bộ sưu tập các nút xã hội và lời kêu gọi hành động trên một số trang. Một cái gì đó như thế này.

<div class="my-call-to-action text-center mb-3">
<a href="https://www.facebook.com/headwallhosting/" class="btn mr-2" title="Follow Headwall Hosting on Twitter" style="background-color: #3B5998; color: white;"><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
<a href="https://twitter.com/HeadwallHosting" class="btn mr-2" title="Follow Headwall Hosting on Facebook" style="background-color: #1DA1F2; color: white;"><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
<a href="https://wp-tutorials.tech/contact" class="btn btn-theme-primary mr-2" title="Email us at Headwall Hosting"><i class="fa fa-envelope-o mr-2" aria-hidden="true"></i>Send us an Email</a>
</div>

Có một số thứ cần bỏ chọn ở đây…

Không sử dụng kiểu nội tuyến. Tôi chỉ làm điều đó ở đây để giữ cho đoạn mã đơn giản (tôi không dựa vào biểu định kiểu bên ngoài cho màu Facebook và Twitter).
Đoạn mã này sử dụng một số lớp CSS Bootstrap . Nếu bạn không quen với Bootstrap thì tôi khuyên bạn nên thử với nó. Nó sẽ giúp bạn tiết kiệm rất nhiều thời gian trong tương lai. Hướng dẫn W3Schools Bootstrap là một nơi tốt để bắt đầu.
Chúng tôi đang sử dụng Font Awesome cho các biểu tượng Facebook và Twitter của mình. Chủ đề cha / cơ sở của bạn có thể đã có quyền truy cập vào Font Awesome. Nếu không, bạn có thể thêm Font Awesome bằng một plugin.
Chúng tôi có các URL được mã hóa cứng ở đây. Nếu chúng tôi thay đổi liên kết cố định cho trang liên hệ của mình thì chúng tôi sẽ cần cập nhật mọi nơi chúng tôi sử dụng đoạn mã này.
Nếu chúng tôi muốn thêm một nút xã hội mới trong tương lai, thì chúng tôi phải đến mọi nơi chúng tôi sử dụng đoạn mã này và cập nhật đoạn mã. Uất ức!

Tạo tệp HTML mẫu

Điều đầu tiên chúng tôi muốn làm là tạo một tệp mẫu nhỏ mà chúng tôi có thể sử dụng lại bất cứ khi nào chúng tôi muốn.

Trong thư mục chính của chủ đề con tùy chỉnh của bạn, hãy tạo một thư mục con được gọi là " đoạn mã ". Trong thư mục này, tạo một tệp mới có tên my-webs-socials-and-cta.php và dán đoạn mã sau vào đó.

// Block direct access.
if (!defined('WPINC')) {
exit('Do NOT access this file directly.');
}
?><div class="my-call-to-action text-center mb-3 bg-secondary">
<a
href="https://www.facebook.com/headwallhosting/"
class="btn mr-2"
title="Follow Headwall Hosting on Twitter"
style="background-color: #3B5998; color: white;"
><i class="fa fa-facebook-official" aria-hidden="true"></i></a>
<a
href="https://twitter.com/HeadwallHosting"
class="btn mr-2"
title="Follow Headwall Hosting on Facebook"
style="background-color: #1DA1F2; color: white;"
><i class="fa fa-twitter-square" aria-hidden="true"></i></a>
<a
href="<?php echo esc_url($cta_email_url) ?>"
class="btn btn-theme-primary mr-2"
title="Email us at Headwall Hosting"
><i class="fa fa-envelope-o mr-2" aria-hidden="true"></i><?php echo $cta_email_label; ?></a>
</div>

Bây giờ, tất cả những gì chúng ta cần làm là viết một hàm PHP nhỏ để đăng ký shortcode, nó sẽ bao gồm đoạn mã mà chúng ta muốn.

Đăng ký mã ngắn

Mặc dù chúng tôi chỉ có thể chỉnh sửa tệp functions.php trong chủ đề con tùy chỉnh của bạn, nhưng chúng tôi sẽ giữ mọi thứ gọn gàng hơn thế. Tạo một tệp mới trong thư mục chính của chủ đề con tùy chỉnh của bạn, được gọi là functions-shortcodes.php . Dán mã này vào tệp mới này…

/**
 * Example shortcode to display a snippet file that has some
 * socials and a call-to-action.
 * 
 * https://wp-tutorials.tech/add-functionality/custom-wordpress-shortcode/
 */
// Block direct access.
if (!defined('WPINC')) {
   exit('Do NOT access this file directly.');
}
function do_shortcode_socials_and_cta($atts = array()) {
   $html = '';
   if (is_admin()) {
      // Don't do anything.
   } elseif (wp_doing_ajax()) {
      // Don't do anything.
   } else {
      // Replace my-website-text-domain with your child theme's text domain.
      $cta_email_label = __('Send us an Email', 'my-website-text-domain');
      $cta_email_url = site_url('contact');
      $file_name = 'snippets/my-webs-socials-and-cta.php';
      $full_path = trailingslashit(dirname(__FILE__)) . $file_name;
      if (!is_file($full_path)) {
         $html .= sprintf('Not found: %s', $full_path);
      } else {
         ob_start();
         include $full_path;
         $html .= ob_get_clean();
      }
   }
   return $html;
}
add_shortcode('socials_cta', 'do_shortcode_socials_and_cta');

Bây giờ chỉ cần “bao gồm” tệp PHP mới này từ tệp functions.php chính của bạn. Một nơi nào đó gần đầu là tốt, như thế này:

// Load our custom child theme's shortcodes.
include_once 'functions-shortcodes.php';

Vì vậy… Chuỗi sự kiện khi WordPress tải một trang…

WordPress tải tệp functions.php của chủ đề con tùy chỉnh của chúng tôi .
Tệp functions.php của chúng tôi tải một tệp khác có tên là functions-shortcodes.php , tệp này đăng ký một shortcode có tên “ socials_cta ”.
Nếu nội dung bài đăng / trang bao gồm biểu thức [ socials_cta ] thì nó sẽ gọi hàm của chúng tôi và hiển thị PHP / HTML.

Mã ngắn mới của bạn sẽ hoạt động ngay bây giờ. Vì vậy,… hãy thử nó… thêm [ socials_cta ] vào một trong các bài đăng hoặc trang của bạn và đảm bảo rằng bạn có thể thấy các nút và liên kết email của mình:

Thêm thông số

Những gì chúng tôi đã làm cho đến nay là một bước khởi đầu tốt, nhưng trước mắt bạn sẽ muốn chuyển các tham số cho các mã ngắn của mình. Giả sử chúng tôi muốn làm điều gì đó như thế này trong một trong các bài đăng của chúng tôi:

[socials_cta email_address = " hello@headwall-hosting.com "]

Nếu chúng tôi chuyển tham số “email_address” thì chúng tôi sẽ hiển thị URL “mailto:” thay vì liên kết đến trang liên hệ của chúng tôi.

Khi WordPress gọi hàm shortcode đã đăng ký của chúng tôi, nó sẽ chuyển tất cả các tham số trong một mảng liên kết. Vì vậy, tất cả những gì chúng ta cần làm là sửa đổi hàm shortcode của mình một chút, như sau:

/**
 * Example shortcode to display a snippet file that has some
 * socials and a call-to-action.
 *
 * https://wp-tutorials.tech/add-functionality/custom-wordpress-shortcode/
 */
// Block direct access.
if (!defined('WPINC')) {
   exit('Do NOT access this file directly.');
}
function do_shortcode_socials_and_cta($atts = array()) {
   $html = '';
   if (is_admin()) {
      // Don't do anything.
   } elseif (wp_doing_ajax()) {
      // Don't do anything.
   } else {
        // Check the parameters for the email call-to-action button.
      $args = shortcode_atts(
         array(
            'email_address' => '',
            'email_label' => __('Send us an Email', 'my-website-text-domain'),
         ),
         $atts
      );
      // Set the email URL as the /contact path on your site, but override
      // it if the email_address parameter is a valid email address.
      $cta_email_url = site_url('contact');
      if (filter_var($args['email_address'], FILTER_VALIDATE_EMAIL)) {
         $cta_email_url = 'mailto:' . $args['email_address'];
      }
      $cta_email_label = $args['email_label'];
      $file_name = 'snippets/my-webs-socials-and-cta.php';
      $full_path = trailingslashit(dirname(__FILE__)) . $file_name;
      if (!is_file($full_path)) {
         $html .= sprintf('Not found: %s', $full_path);
      } else {
         ob_start();
         include $full_path;
         $html .= ob_get_clean();
      }
   }
   return $html;
}
add_shortcode('socials_cta', 'do_shortcode_socials_and_cta');

Dùng thử

Kiểm tra thử nghiệm kiểm tra… Đảm bảo rằng nó hoạt động. Đi đến bất kỳ trang nào hoặc bài đăng trên trang web của bạn và thêm mã ngắn mới vào đâu đó.

[socials_cta email_address = " hello@headwall-hosting.com "]

Chúng tôi cũng có thể thêm từ vựng cho CTA email.

[socials_cta email_address = " hello@headwall-hosting.com " email_label = " Nói xin chào! "]

Điều đó sẽ giúp bạn bắt đầu và vận hành bằng cách thêm các mã ngắn tùy chỉnh vào trang web WordPress của bạn. Bạn có thể tiếp tục thêm các mã ngắn tùy chỉnh mới vào tệp functions-shortcodes.php của mình mà không làm cho tệp functions.php chính của bạn quá lớn và lộn xộn… và chúng tôi thích mã sạch sẽ và gọn gàng.