Cách tạo shortcode và widget chuyên nghiệp với MyShortcodes [NEW]

Về cách tạo widget và cách tạo shortcode, tôi có hai hướng dẫn rất chi tiết bằng cách mã hóa chúng theo cách thủ công. Nhưng đối với một số người không quen thuộc với PHP, đọc những hướng dẫn đó là một cơn ác mộng. Vì vậy, nếu bạn cần một cách để tạo shortcode và widget của riêng mình, có đầy đủ các tính năng cần thiết nhưng không muốn đụng đến mã nhiều thì trong bài viết này tôi sẽ hướng dẫn bạn cách sử dụng plugin. Mã ngắn của tôi để tạo ra nó. Đây là một plugin miễn phí rất hữu ích giúp bạn quản lý và tạo các shortcode / widget của riêng mình, mặc dù miễn phí nhưng tính năng của nó rất tuyệt vời.

Bằng cách này, bạn sẽ không phải lo lắng về việc bài viết của mình bị lỗi shortcode khi bạn thay đổi chủ đề vì nó sẽ chỉ tắt nếu bạn gỡ bỏ plugin này.

Tính năng của MyShortcode

  • Tạo widget và shortcode theo ý muốn một cách dễ dàng thông qua các cú nhấp chuột.
  • Hỗ trợ tạo tham số widget / shortcode không giới hạn.
  • Đối với shortcode, nó có hỗ trợ thêm nút chèn shortcode trong ngăn soạn thư.
  • Có thể nhập các thư viện CSS / JS để sử dụng như jQuery, jQuery UI, Bootstrap, …
  • Quản lý shortcode / widget theo nhóm.
  • Viết CSS, HTML, Javascript và PHP trong shortcode / widget.

Tuy nhiên, đó chỉ là những tính năng của phiên bản miễn phí. Nếu bạn là người dùng chuyên nghiệp cần nhiều tính năng hơn, phiên bản Pro của nó sẽ có các chức năng bổ sung mà khi sử dụng plugin bạn có thể thấy nó được gắn nhãn Pro trong một số tính năng, đặc biệt Hỗ trợ xuất shortcode / widget thành một plugin hoặc tệp PHP riêng biệt. Nhưng cảm giác của tôi là phiên bản miễn phí của nó đã rất tuyệt rồi.

Cách tạo Shortcode bằng MyShortcode

Tạo một mã ngắn đơn giản

Shortcode đơn giản ở đây có nghĩa là nó không có tham số nào cả, chỉ hiển thị một cái gì đó khi sử dụng shortcode.

Sau khi cài đặt plugin, hãy truy cập Mã ngắn của tôi trên menu bên trái và nhấn. cái nút Yếu tố mới.

Cách tạo shortcode và widget chuyên nghiệp với MyShortcodes [NEW]

Trong phần Cài đặt, chúng ta có những thông tin quan trọng cần khai báo sau:

myshortcode-basicshortcode-settings

Giải thích:

  • Tên phần tử: Tên của đối tượng bạn muốn tạo, để phân biệt với các đối tượng khác.
  • Mô tả phần tử: Mô tả chi tiết cho đối tượng bạn muốn tạo.
  • Loại: Danh sách cần bao gồm đối tượng này, danh mục được khai báo bằng chữ, nếu nhiều đối tượng có tên danh mục giống nhau thì sẽ cùng danh mục.
  • Sên: Tên định danh của đối tượng cần tạo, nếu là shortcode thì đây là tên shortcode. Ví dụ: nếu tôi viết shortcode cơ bản, tôi sẽ viết shortcode là [basic-shortcode].
  • Loại nguyên tố: Loại đối tượng, bạn chọn đối tượng nào thì đối tượng này sẽ là đối tượng đó, ở đây mình chọn Shortcode vì cần tạo shortcode.
  • Hộp nội dung: Ô nội dung cho đối tượng, mình nghĩ không cần sử dụng mà chúng ta sẽ sử dụng các thuộc tính (Attributes) để khai báo nội dung đầu vào.

Sau khi điền đầy đủ thông tin trong Cài đặt, bạn có thể tra menu bên trên và thấy có 4 phần: PHP, CSS, HTML và JS. Đây là 4 vùng để bạn viết mã cho shortcode muốn tạo, bạn muốn viết mã kiểu gì thì ghi vào vùng tương ứng với nó. Ví dụ: nếu tôi muốn hiển thị một bảng HTML, tôi nhấp vào vùng HTML và viết mã HTML như sau:

[html]

Một B C
D E

[/html]

myshortcode-basicshortcode-html

Bây giờ hãy nhấn nút Save để lưu đối tượng này, và nhấn vào nút Kích hoạt như hình bên dưới để nó hoạt động.

myshortcode-basicshortcode-active

Ok, bây giờ hãy truy cập trình chỉnh sửa và thử nhập mã ngắn [basic-shortcode] hoặc bấm vào nút Add Shortcode để xem những gì bạn đã khai báo.

myshortcode-insertopost

Bây giờ nội dung HTML mà chúng tôi đã thiết lập trong shortcode được hiển thị mà không cần viết bất kỳ HTML nào bên trong nội dung bài đăng. : D

myshortcode-shortcodefrontpage

Đó là nó.

Tạo shortcode với tham số

Các thông số (còn được gọi là thuộc tính) trong shortcode có nghĩa là bạn có thể thiết lập các thông số tùy chỉnh để bạn điền thông tin. Chẳng hạn như với shortcode kiểu [shortcode number="5" title="Hello"] thì trong đó, nummber là tên tham số có giá trị là 5, title là tên tham số có giá trị Hello. Và thông số này có thể được sử dụng để hiển thị bên ngoài trang web hoặc hoạt động bên trong mã tùy thích.

Để dễ hiểu, mình sẽ hướng dẫn các bạn cách tạo shortcode để tạo nút phiếu giảm giá như Thachpham.com để các bạn làm quen với các thông số.

THỬ NGHIỆM: [coupon title="Click xem demo" code="MÃ GIẢM GIÁ" link="https://thachpham.com"]

Trước khi tạo, chúng ta cần xem mã HTML của hàm này như sau:

[html]


[/html]

Trong đó, bạn thấy có một số giá trị tham số như sau mà bạn sẽ cần thay đổi nhiều như:

  • https://thachpham.com
  • MÃ GIẢM GIÁ
  • Bấm để xem bản demo

Bây giờ, chúng ta nên đặt cho 3 giá trị này 3 tên tham số như:

  • link: https://thachpham.com
  • code: MÃ GIẢM GIÁ
  • title: Bấm để xem bản demo

Tức là, nếu thành công, chúng ta sẽ có một shortcode như:

[tpcoupon title="Xem mã giảm giá" link="https://thachpham.com" code="MÃ GIẢM GIÁ"]

Cách tạo cũng rất dễ, bạn hãy tạo một Element mới như sau:

myshortcode-tpcoupon-settings

Và đây là phần quan trọng nhất: cài đặt thông số. Để thiết lập thông số, bạn trỏ chuột vào nút Thuộc tính bên tay trái và thêm 3 thông số như sau:

myshortcode-tpcoupon-thuộc tính

Trong phần thông số, bạn chú ý đến slug, slug là thông số mà bạn sẽ ghi trong shortcode. Nếu bạn muốn thêm giá trị mặc định, hãy nhập giá trị vào hộp Mặc định. Mục riêng biệt Loại hình tức là loại thuộc tính, nó chỉ hoạt động khi bạn sử dụng nút My Shortcodes để chèn shortcode vào bài viết.

Tiếp tục click vào phần HTML vì đoạn mã này ở dạng HTML, sau đó copy đoạn mã gốc vào:

[html]


[/html]

myshortcode-tpcoupon-htmloriginal

Và bây giờ bạn thay đổi các giá trị tương ứng cho từng tham số thành {{slug-tham-số}} như hình bên dưới:

myshortcode-tpcoupon-editattr

Cuối cùng, nhấn Lưu và Hoạt động Sau đó, hãy thử đăng shortcode với cấu trúc sau trong bài đăng và xem kết quả:

[tpcoupon title="Mã giảm giá" code="ABCXYZ" link="https://thachpham.com"]

myshortcode-tpcoupon-frontTrong đoạn mã trên, tôi đã đặt lớp của nút phiếu giảm giá là btn btn-success, đây là lớp của thư viện Bootstrap. Vì vậy, nếu chủ đề của bạn không sử dụng Bootstrap, bạn có thể sử dụng tính năng Thư viện bên ngoài của MyShortcodes để chèn thư viện CSS hoặc Javascript bên ngoài. Vui lòng chuyển sang tab Thư viện và nhấn nút Thêm Thư viện CSS và điền vào https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css đi vào.

myshortcode-tpcoupon-externalcss

Cách tạo widget với MyShortcodes

Sở dĩ mình viết phần tạo shortcode bằng plugin này hơi dài vì cách sử dụng để tạo widget là như nhau nên bạn chỉ cần biết cách tạo shortcode của MyShortcodes là có thể tạo được widget. Chỉ khác là trong phần Cài đặt sẽ có thêm một số tùy chọn như Kiểu tiện ích, Trường tiêu đề tiện ích, .. bạn nên để tất cả mặc định, tức là Có.

myshortcode-widget-settings

Như trong phần tạo thuộc tính, bạn có thể chọn nhiều kiểu trường khác nhau để làm cho giao diện nhập trường của Widget đa dạng hơn. Sau khi tạo xong, bạn vào Appearance -> Widgets và thêm một widget có tên My Shortcodes và chọn widget vừa tạo.

myshortcode-widget-ngoại hình

Phần kết

Vậy thì bạn đã biết cách sử dụng plugin này rồi, không quá khó phải không? Plugin này không chỉ người không rành về code mà ngay cả lập trình viên cũng dùng được vì viết code tạo shortcode / widget từ đầu đến cuối khá chán nên cũng rất lười (như mình). Với plugin này, chúng tôi chỉ tập trung mã để hiển thị nội dung bên ngoài trang web.

Đánh giá nội dung này