Hướng dẫn tạo hộp text đẹp trong bài viết với plugin My Shortcodes

Khi bạn soạn thảo bài viết, sẽ có những đoạn văn bản mà bạn muốn nó có màu riêng, đóng khung hay hình nền riêng để đưa ra nhận định của bạn, lời khuyên hay khuyến cáo,… Có nhiều plugin giúp bạn làm việc này nhưng mình sẽ khuyên dùng plugin My Shortcodes bởi dùng plugin này bạn sẽ còn dùng được nhiều chức năng khác với nó mà không cài nhiều plugin khác. Mình sẽ lần lượt hướng dẫn cách khai thác plugin này sau, đây là plugin cho phép bạn làm được rất nhiều điều.

Dưới đây là ví dụ của các hộp văn bản mà mình hay dùng để đưa ra đánh giá nên hay không nên hoặc cảnh bảo người đọc.

custom text box với plugin My Shortcodes

Để tạo được những text box như vậy, đầu tiên bạn cần cài plugin có tên My Shortcodes.

Sau khi cài xong, bạn truy cập My Shortcodes và click New element.

my shortcode tip

Tiếp theo, bạn đặt tên cho shortcodes, giả sử mình cần đặt text box màu xanh, mình đặt tên như dưới đây.

green text box tip

Sau đó bạn click xuống tab Attributes và đặt tên label và slug, bạn có thể đặt tên bất kì, ở đây mình đặt là text.

custom text box tips

Tiếp theo click sang tab HTML và dán đoạn code như hình dưới.

html text box green

<div class="greenbox" style="text-align:left; width:;">{{text}}</div>

Bạn lưu ý chỗ mình gạch chân “text” kia chính là tên của Attributes mà bạn đặt ở bước bên trên.

Như vậy mình đã đặt xong shortcode cho text box nhưng đó mới là bước tạo shortcode cho text box, bây giờ việc cần làm là trang trí cho text box màu mè thế nào là theo ý chúng ta.

Các bạn để ý mình đặt class cho green text box này là greenbox nên bây giờ mình cần trang trí cho text box này bằng CSS. Các bạn click sang tab CSS và dán đoạn code sau:

.greenbox { color: #5f9025; background: #ebf6e0; border: 1px solid #b3dc82; display: block; padding: 15px; margin: 10px 0; font-size: 1em; border-radius: 2px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

Sau đó bạn click Save nó lại và Activate nó lên là xong.

Bây giờ khi soạn thảo bạn có thể chèn text vào box bằng cách click bào nút My shortcode trong khung soạn thảo, chọn tên shortcode bạn vừa tạo và nhập đoạn text bạn muốn chèn vào box rồi click Insert shortcode.

myshortscode

Ví dụ

insert shortcode

Nhập text cần chèn vào đây….

Như vậy là xong rồi, để làm các box với màu khác nhau bạn chỉ cần thay đổi màu trong đoạn code CSS ở bên trên. Nhớ đổi cả class và tên từ greenbox sang redbox chẳng hạn nhé!

Pin It

Comments are closed.