Chèn Shortcode bằng Custom Layout (Pro)

Custom Layout cho phép bạn chèn PHP, HTML, CSS, Javascript nhưng với shortcode thì không đơn giản.

Bạn không thể chèn shortcode bằng cách thêm vào Text Editor của Custom Layout nhưng bạn không thể khống chế hoàn toàn nó được.

Làm thế nào bạn style nó?

text editor shorcode
Bạn không thể thêm block để style như padding, canh giữa, margin,… nếu dùng text editor

Vậy cách tốt nhất để thêm shortcode với Custom Layout là gì?

Cách 1: Dùng Page Builder

Đây là cách đơn giản nhất và dễ nhất. Bật Page Builder và thiết kế thôi!

Page Builder cho phép bạn chèn shortcode dễ dàng, khi kết hợp với Custom Layout bạn hoàn toàn có thể khống chế Shortcode dễ dàng.

Cách 2: Dùng PHP và HTML

Một số thiết kế đơn giản bạn không cần dùng đến Page Builder và cũng không nên vì một số Page Builder có thể khiến theme tải nặng hơn và dễ lỗi hơn.

Quy tắc thêm như sau:

  1. Dùng PHP để tạo Shortcode
  2. Dùng HTML để tạo class cho CSS

Hãy tham khảo code như sau

<div class="special">
<?php echo do_shortcode('[shortcode_của_bạn"]'); ?>
<style>
.special{padding:30px;text-align:center}
</style>
</div>

Tôi đã inline CSS bên trong HTML (bạn chỉ nên inline CSS khi đơn giản và sử dụng trong một số ít trang, bạn nên dùng Additional CSS để style sẽ tối ưu hơn)