Cách tạo Shortcodes trong WordPress từ A-Z

Trong bài viết này, chúng ta sẽ tìm hiểu chi tiết về cách tạo Shortcodes trong WordPress từ đơn giản đến phức tạp, cùng với các ví dụ minh họa và hướng dẫn sử dụng. Nếu bạn muốn tăng cường tính tùy chỉnh cho trang web của mình và tiết kiệm thời gian trong việc tạo nội dung động, hãy cùng khám phá cách tạo Shortcodes trong WordPress từ A-Z.

Shortcodes là gì?

Shortcodes là một tính năng trong WordPress cho phép người dùng tạo ra các đoạn mã ngắn được nhúng vào bài viết hoặc trang web để hiển thị các tính năng hoặc nội dung động. Thay vì phải gõ mã HTML hoặc CSS phức tạp để tạo ra các đoạn mã, người dùng có thể tạo các Shortcodes ngắn gọn và dễ hiểu, giúp cho việc tùy chỉnh và quản lý nội dung trang web trở nên dễ dàng hơn.

Shortcodes được đặt trong cặp dấu ngoặc vuông, với từ khóa đầu tiên là tên của Shortcode và các tham số sau đó được bổ sung trong cặp dấu ngoặc đơn. Khi người dùng xem trang web, WordPress sẽ tự động chuyển đổi các Shortcodes thành các đoạn mã HTML hoặc CSS tương ứng để hiển thị các tính năng hoặc nội dung động tương ứng.

Ví dụ, nếu bạn muốn hiển thị một bảng giá sản phẩm trên trang web của mình, thay vì phải gõ mã HTML phức tạp, bạn có thể tạo ra một Shortcode với tên là "price_table". Sau đó, bạn có thể nhúng Shortcode này vào bài viết hoặc trang web bằng cách sử dụng cú pháp sau: [price_table]. WordPress sẽ tự động thay thế Shortcode này bằng một đoạn mã HTML tương ứng để hiển thị bảng giá sản phẩm của bạn.

Bài viết này được đăng tại [free tuts .net]

Tại sao nên sử dụng Shortcodes?

Có nhiều lý do vì sao nên sử dụng Shortcodes trong WordPress. Dưới đây là một số lý do quan trọng:

• Dễ dàng sử dụng: Shortcodes là một tính năng dễ sử dụng trong WordPress. Người dùng không cần phải có kiến thức kỹ thuật về mã HTML hoặc CSS để tạo ra các đoạn mã, thay vào đó, các Shortcodes có thể được tạo ra và sử dụng một cách dễ dàng.

• Tiết kiệm thời gian: Sử dụng Shortcodes có thể giúp tiết kiệm thời gian cho các nhà phát triển và người quản lý trang web. Thay vì phải gõ mã HTML hoặc CSS phức tạp để tạo nội dung động, người dùng có thể sử dụng các Shortcodes ngắn gọn để tạo ra nội dung động chỉ trong một vài phút.

• Tính tùy chỉnh cao: Shortcodes cho phép người dùng tùy chỉnh và điều khiển các tính năng và nội dung trên trang web một cách dễ dàng. Người dùng có thể sử dụng các tham số để điều chỉnh các thuộc tính của Shortcodes và hiển thị nội dung theo cách mà họ muốn.

• Quản lý dễ dàng: Shortcodes giúp cho người dùng quản lý nội dung trang web của họ dễ dàng hơn. Thay vì phải sửa đổi mã HTML hoặc CSS để cập nhật nội dung trang web, người dùng có thể sử dụng Shortcodes để thay đổi nội dung của trang web một cách nhanh chóng và dễ dàng.

Vì vậy, sử dụng Shortcodes là một cách tuyệt vời để tăng cường tính tùy chỉnh và quản lý trang web của bạn một cách dễ dàng và hiệu quả.

Cách tạo Shortcodes trong WordPress

Tạo Shortcode đơn giản

Khai báo hàm tạo Shortcode

Khai báo hàm tạo Shortcode trong file functions.php của theme hoặc plugin. Ví dụ, để tạo một Shortcode đơn giản hiển thị thông tin về tác giả bài viết, bạn có thể sử dụng mã sau:

function author_shortcode() {
    return 'Author: ' . get_the_author();
}
add_shortcode('author', 'author_shortcode');

Trong đó, 'author' là tên của Shortcode và 'author_shortcode' là tên của hàm xử lý Shortcode. Hàm này sử dụng hàm get_the_author() để lấy thông tin về tác giả bài viết và trả về chuỗi kết quả.

Sử dụng Shortcode trong bài viết hoặc trang

Sử dụng Shortcode trong bài viết hoặc trang chi tiết bằng cách chèn đoạn mã [author] vào vị trí mà bạn muốn hiển thị thông tin tác giả. Khi người dùng xem trang web, Shortcode sẽ tự động được thay thế bằng nội dung trả về từ hàm xử lý Shortcode.

Ví dụ, nếu bạn đăng một bài viết mới và muốn hiển thị thông tin về tác giả của bài viết, bạn chỉ cần chèn đoạn mã [author] vào bài viết, sau đó lưu và xem trang web để kiểm tra kết quả.

Như vậy, việc tạo và sử dụng Shortcode trong WordPress rất đơn giản và giúp cho việc quản lý và tùy chỉnh nội dung trang web trở nên dễ dàng hơn.

Tạo Shortcode với tham số

Ngoài cách tạo Shortcode đơn giản, bạn cũng có thể tạo Shortcode với tham số để truyền vào giá trị cho Shortcode. Các bước để tạo Shortcode với tham số như sau:

Khai báo tham số cho Shortcode

Khai báo tham số cho Shortcode bằng cách thêm tham số vào hàm xử lý Shortcode. Ví dụ, để tạo một Shortcode hiển thị tên sản phẩm và giá tiền, bạn có thể sử dụng mã sau:

function product_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'name' => 'Product name',
            'price' => '$0'
        ), $atts, 'product'
    );
    return 'Product name: ' . $atts['name'] . ', Price: ' . $atts['price'];
}
add_shortcode('product', 'product_shortcode');

Trong đó, $atts là một mảng chứa các giá trị của tham số được truyền vào Shortcode. Hàm shortcode_atts() được sử dụng để lấy giá trị của các tham số được truyền vào và gán giá trị mặc định cho các tham số nếu chúng không được truyền vào.

Sử dụng tham số trong hàm tạo Shortcode

Để sử dụng tham số trong hàm tạo Shortcode, bạn có thể sử dụng hàm shortcode_atts() để lấy giá trị của các tham số được truyền vào và gán giá trị mặc định cho các tham số nếu chúng không được truyền vào.

Cú pháp của hàm shortcode_atts() như sau:

shortcode_atts( array $pairs, array|string $atts, string $shortcode = '' )

Trong đó:

• $pairs: Một mảng chứa các giá trị mặc định của các tham số.
• $atts: Một mảng hoặc chuỗi chứa các giá trị của các tham số được truyền vào.
• $shortcode (tùy chọn): Tên của Shortcode đang được xử lý.

Ví dụ, để tạo một Shortcode hiển thị danh sách sản phẩm với các tham số cho phép tùy chỉnh số lượng sản phẩm hiển thị và loại sản phẩm, bạn có thể sử dụng đoạn mã sau:

function product_list_shortcode($atts) {
    $atts = shortcode_atts(
        array(
            'num_products' => 5,
            'product_type' => 'all'
        ), $atts, 'product_list'
    );

    $num_products = intval($atts['num_products']);
    $product_type = sanitize_text_field($atts['product_type']);

    // Truy vấn cơ sở dữ liệu để lấy danh sách sản phẩm
    // Ví dụ: $products = get_products($num_products, $product_type);

    $output = '<ul>';
    // Hiển thị danh sách sản phẩm
    // Ví dụ: foreach ($products as $product) { $output .= '<li>' . $product->name . '</li>'; }
    $output .= '</ul>';

    return $output;
}
add_shortcode('product_list', 'product_list_shortcode');

Trong đó:

• $atts là một mảng chứa các giá trị của các tham số được truyền vào Shortcode.
• shortcode_atts() được sử dụng để lấy giá trị của các tham số và gán giá trị mặc định cho các tham số nếu chúng không được truyền vào. Trong ví dụ này, nếu không có tham số nào được truyền vào thì Shortcode sẽ hiển thị 5 sản phẩm với tất cả các loại sản phẩm.
• $num_products và $product_type lần lượt lấy giá trị của các tham số num_products và product_type để sử dụng trong hàm tạo Shortcode.
• Hàm intval() được sử dụng để chuyển giá trị của $num_products thành một số nguyên. Hàm sanitize_text_field() được sử dụng để làm sạch giá trị của $product_type để tránh các lỗ hổng bảo mật.

Sau khi lấy giá trị của các tham số, bạn có thể sử dụng chúng để thực hiện các

xử lý trong hàm tạo Shortcode. Trong ví dụ này, một truy vấn cơ sở dữ liệu được sử dụng để lấy danh sách sản phẩm tương ứng với các tham số đã truyền vào. Sau đó, danh sách sản phẩm được hiển thị dưới dạng một danh sách HTML.

Cuối cùng, hàm tạo Shortcode trả về chuỗi HTML đã được xâu chuỗi, được hiển thị trên trang web khi Shortcode được gọi.

Để sử dụng Shortcode này trong bài viết hoặc trang chi tiết, bạn chỉ cần sử dụng cú pháp [product_list]. Nếu bạn muốn hiển thị danh sách các sản phẩm có màu đỏ và chỉ hiển thị 3 sản phẩm, bạn có thể sử dụng cú pháp [product_list num_products="3" product_type="red"].

Khi Shortcode được gọi, WordPress sẽ gọi đến hàm product_list_shortcode() và thực thi mã bên trong để trả về chuỗi HTML tương ứng. Sau đó, chuỗi HTML này sẽ được hiển thị trên trang web nơi Shortcode đã được sử dụng.

Đó là cách sử dụng tham số trong hàm tạo Shortcode. Việc sử dụng tham số giúp bạn tùy chỉnh và linh hoạt hơn trong việc tạo các Shortcode phong phú và đa dạng.

Tạo Shortcode với nhiều tham số

Khai báo nhiều tham số cho Shortcode

Ngoài việc tạo Shortcode với một tham số, bạn cũng có thể tạo Shortcode với nhiều tham số khác nhau để tạo ra các chức năng phức tạp hơn. Để tạo Shortcode với nhiều tham số, bạn có thể sử dụng tham số trong hàm tạo Shortcode giống như khi tạo Shortcode với một tham số. Sau đó, bạn có thể khai báo các tham số bổ sung trong phần đầu vào của hàm tạo Shortcode.

Ví dụ, hãy xem xét một trường hợp khi bạn muốn tạo một Shortcode để hiển thị một đoạn văn bản có màu nền, kích thước, font chữ và văn bản tùy chỉnh. Để làm được điều này, bạn có thể sử dụng nhiều tham số như sau:

function custom_text_shortcode($atts, $content = null) {
    $atts = shortcode_atts( array(
        'bgcolor' => '',
        'font_size' => '',
        'font_family' => '',
        'font_color' => ''
    ), $atts );

    $output = '<div style="';
    $output .= 'background-color:' . $atts['bgcolor'] . ';';
    $output .= 'font-size:' . $atts['font_size'] . ';';
    $output .= 'font-family:' . $atts['font_family'] . ';';
    $output .= 'color:' . $atts['font_color'] . ';';
    $output .= '">' . $content . '</div>';

    return $output;
}
add_shortcode('custom_text', 'custom_text_shortcode');

Trong ví dụ này, Shortcode custom_text được tạo với bốn tham số: bgcolor, font_size, font_family và font_color. Khi được gọi, Shortcode này sẽ hiển thị một đoạn văn bản có nền màu, kích thước, font chữ và văn bản tùy chỉnh.

Trong hàm tạo Shortcode, chúng ta sử dụng hàm shortcode_atts() để định nghĩa các tham số mặc định cho Shortcode nếu những tham số đó không được truyền vào. Sau đó, chúng ta sử dụng các tham số đã được khai báo để tạo chuỗi HTML đại diện cho Shortcode.

Để sử dụng Shortcode này trong bài viết hoặc trang chi tiết, bạn có thể sử dụng cú pháp [custom_text bgcolor="#FFF" font_size="16px" font_family="Arial" font_color="#000"]Đoạn văn bản của bạn[/custom_text]. Khi Shortcode này được gọi, nó sẽ hiển thị đoạn văn bản của bạn với các thuộc tính tùy chỉnh đã được định nghĩa.

Đó là cách tạo Shortcode với nhiều tham số trong WordPress.

Tạo Shortcode với HTML và CSS

Tạo layout cho Shortcode

Khi tạo layout cho Shortcode, chúng ta có thể sử dụng các thẻ HTML để định nghĩa cấu trúc của nó. Các thẻ HTML thông thường được sử dụng để tạo layout bao gồm:

• div: dùng để đóng gói các phần tử và tạo một khu vực riêng biệt.
• p: dùng để tạo đoạn văn bản.
• h1, h2, h3, h4, h5, h6: dùng để tạo tiêu đề.
• ul và li: dùng để tạo danh sách không có thứ tự.
• ol và li: dùng để tạo danh sách có thứ tự.
• a: dùng để tạo liên kết.

Sau khi định nghĩa các phần tử HTML cho Shortcode, chúng ta cũng cần định nghĩa các lớp và ID để tùy chỉnh kiểu dáng của chúng. Điều này giúp tránh xung đột với các lớp và ID của các phần tử khác trên trang.

Ví dụ, giả sử bạn muốn tạo một Shortcode để hiển thị một bảng giá sản phẩm. Bạn có thể định nghĩa layout cho Shortcode của mình như sau:

<div class="product-table">
  <table>
    <thead>
      <tr>
        <th>Sản phẩm</th>
        <th>Giá</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Sản phẩm A</td>
        <td>10.000 VNĐ</td>
      </tr>
      <tr>
        <td>Sản phẩm B</td>
        <td>20.000 VNĐ</td>
      </tr>
      <tr>
        <td>Sản phẩm C</td>
        <td>30.000 VNĐ</td>
      </tr>
    </tbody>
  </table>
</div>

Ở đây, chúng ta sử dụng thẻ div để đóng gói bảng giá sản phẩm, và đặt tên lớp là product-table. Chúng ta cũng sử dụng thẻ table, thead, tbody, tr và td để tạo bảng, và đặt tên lớp cho các phần tử này để tùy chỉnh kiểu dáng.

Sau khi đã định nghĩa layout cho Shortcode, bạn có thể sử dụng CSS để tùy chỉnh kiểu dáng của nó. Bạn có thể thêm CSS vào file style.css của chủ đề WordPress của mình hoặc tạo một file CSS riêng để thêm vào trang chi tiết.

Sử dụng CSS để tạo kiểu cho Shortcode

Bạn có thể sử dụng CSS để tạo kiểu cho bảng giá sản phẩm của mình như sau:

.product-table {
  background-color: #f9f9f9;
  border: 1px solid #ccc;
  margin: 10px 0;
  padding: 10px;
}

.product-table table {
  width: 100%;
  border-collapse: collapse;
}

.product-table th, .product-table td {
  padding: 10px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.product-table th {
  background-color: #4CAF50;
  color: white;
}

Trong ví dụ trên, chúng ta sử dụng các thuộc tính CSS như background-color, border, margin, padding, width, border-collapse, text-align, border-bottom, background-color và color để tạo kiểu cho Shortcode. Chúng ta cũng sử dụng các lớp CSS product-table, table, th và td để tùy chỉnh kiểu dáng cho các phần tử HTML trong Shortcode.

Tạo Shortcode với mã PHP

Đôi khi bạn có thể cần sử dụng mã PHP để tạo tính năng cho Shortcode của mình. Điều này có thể đặc biệt hữu ích khi bạn muốn tính toán hoặc xử lý dữ liệu trước khi hiển thị chúng trong Shortcode.

Để sử dụng mã PHP trong Shortcode, bạn có thể thêm mã PHP vào hàm tạo Shortcode như sau:

function my_shortcode_with_php( $atts ) {
  // Lấy các giá trị của các tham số trong Shortcode
  $atts = shortcode_atts( array(
    'name' => 'World',
    'count' => 1,
  ), $atts );

  // Sử dụng các giá trị của các tham số trong Shortcode
  $output = '';
  for ( $i = 0; $i < $atts['count']; $i++ ) {
    $output .= 'Hello, ' . $atts['name'] . '!';
  }

  // Trả về kết quả
  return $output;
}
add_shortcode( 'my_shortcode_with_php', 'my_shortcode_with_php' );

Trong ví dụ trên, chúng ta sử dụng hàm shortcode_atts để lấy các giá trị của các tham số trong Shortcode và đặt giá trị mặc định nếu tham số không được cung cấp. Sau đó, chúng ta sử dụng các giá trị của các tham số để tính toán kết quả và trả về kết quả đó.

Tuy nhiên, việc sử dụng mã PHP trong Shortcode có thể gây ra các lỗ hổng bảo mật nếu không được xử lý đúng cách. Vì vậy, bạn cần đảm bảo rằng mã PHP của mình là an toàn bằng cách sử dụng các phương pháp như kiểm tra dữ liệu đầu vào, sử dụng hàm esc_html để mã hóa các ký tự đặc biệt và tránh sử dụng các hàm động lực như eval hoặc include.

Sử dụng Shortcode trong sidebar hoặc widget

Sử dụng Shortcode trong sidebar hoặc widget là một cách tiện lợi để hiển thị nội dung được tạo bởi Shortcode của bạn trong vị trí khác trên trang web của bạn. Để thêm Shortcode vào sidebar hoặc widget, bạn có thể sử dụng widget Text.

Đầu tiên, bạn cần truy cập vào trang Widgets bằng cách nhấp vào Appearance -> Widgets trong bảng điều khiển WordPress của bạn. Sau đó, bạn kéo widget Text vào vùng sidebar hoặc widget mà bạn muốn hiển thị Shortcode của mình.

Tiếp theo, bạn chỉ cần nhập Shortcode của mình vào ô văn bản trong widget Text và nhấn nút Lưu để lưu các thay đổi của bạn.

Có một số lưu ý cần lưu ý khi sử dụng Shortcode trong sidebar hoặc widget:

• Shortcode của bạn phải được viết bằng HTML và CSS hợp lệ và không chứa bất kỳ lỗi nào để tránh hiển thị bị lỗi trong sidebar hoặc widget.
• Các tham số trong Shortcode của bạn cũng cần được cung cấp đầy đủ và đúng định dạng để đảm bảo rằng nội dung được hiển thị chính xác.
• Nếu Shortcode của bạn chứa mã PHP, hãy chắc chắn rằng mã của bạn đã được xử lý an toàn và không chứa các lỗ hổng bảo mật.

Kết bài viết

Như vậy, qua bài viết này, chúng ta đã được tìm hiểu về cách tạo Shortcodes trong WordPress từ A-Z. Shortcode là một tính năng hữu ích giúp cho việc tạo ra các nội dung động và tùy chỉnh một cách dễ dàng trên WordPress.

Chúng ta đã học cách tạo Shortcode đơn giản, Shortcode với tham số, Shortcode với nhiều tham số, Shortcode với HTML và CSS, cũng như sử dụng Shortcode trong sidebar hoặc widget. Ngoài ra, chúng ta cũng đã tìm hiểu về việc sử dụng mã PHP để tạo tính năng cho Shortcode và đảm bảo an toàn cho mã PHP trong Shortcode.

Hy vọng rằng bài viết này sẽ giúp bạn hiểu rõ hơn về tính năng Shortcode trong WordPress và cung cấp cho bạn một số kiến thức cần thiết để tạo ra các Shortcode tùy chỉnh của riêng bạn.