Sử dụng shortcodes trong wordpress cherry framework

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài Sử dụng shortcodes trong wordpress cherry framework

Bài viết sau đây mình hướng dẫ các bạn sử dụng cherry shortcodes với cài đặt của cherry Framework trong wordpress.

Chi tiết sử dụng shortcodes trong cherry framework

1. Mở phần chỉnh sửa bài viết trong wordpress admin.
2. Chuyển sang chế độ hiển thị HTML (Visual), nhấn vào nút shortcodes và chọn lựa shortcode mà bạn muốn chèn vào editor.
chèn shortcode trong wordpress

Tất cả những shortcodes được chia làm 4 nhóm:

  • Dynamic : lấy dữ liệu trong wordpress, như post, custom post type,tags,…
  • Grid Columns : định dạng html dạng dòng và cột.
  • Elements : các thành phần của form, như input, button, mesagebox,…
  • Other : phần tử đối tượng nâng lên hơn trong form.

Chèn nội dung posts

Post Grid : hiển thị bản kê posts và custom posts theo dạng bảng giới hạn con số bởi dòng và cột. Khi lựa chọn shortcode một giao diện popup hiện ra cho bạn thiết lập tính chất của shortcode, sau đó nhấn insert để chèn shortcode vào editor. Chú ý: Một số tính chất nếu chẳng những định sẽ lấy giá trị mặc định. Ví dụ về shortcode “Post Grid” .

 [posts_grid columns="3" rows="3" order_by="date" order="DESC" thumb_width="100" thumb_height="100" meta="yes" excerpt_count="20" link="yes" link_text="more" custom_] 

Nhấn update post để lưu nội dung, xem bài viết trên frontend bạn sẽ thấy hình sau:
sử dụng shortcode postgrid trong wordpress

Post List : liệt kê danh sách các bài viết giống như trang category/home. Shortcode có dạng:

 [posts_list numb="3" thumbs="large" thumb_width="100" thumb_height="100" post_content="excerpt" order_by="date" order="DESC" link="yes" link_text="more" tags="yes" custom_] 

– Kết quả:
wordpress-shortcodes-post-list

Mini Post Grid : phiên bản nhỏ của shortcode post_grid , shortcode này chỉ hiển thị ảnh của posts với kích cỡ chỉ định. Ví dụ:

 [mini_posts_grid numb="3" thumbs="small" thumb_width="100" thumb_height="100" order_by="date" order="DESC" align="left"] 

Kết quả:
wordpress-shortcodes-mini-post-grid

Recent Posts : hiển thị bài viết hiện tại, thiết lập với một số tính chất sau: post type, posts amount, post format, excerpt length, button title and others

 [recent_posts num="3" post_format="standard" meta="false" thumb="true" excerpt_count="20"] 

Hình mẫu bạn nhận được:
wordpress-shortcodes-recent-posts

Recent Testimonials : hiển thị recent Testimonials với con số lượng chỉ định.

 [recenttesti num="2" thumb="true"] 

wordpress-shortcodes-recent-Testimonials

Banner : sử dụng để hiển thị khối ảnh, chữ, và liên kết…

 [banner img="#" banner_link="#" title="Title" text="Text" btn_text="Button" target="_self"] 

wordpress-shortcodes-banner

Comments : hiển thị danh sách các comments mới nhất.

 [recent_comments num="5"] 

wordpress-shortcodes-recent-posts

Post Cycle : hiển thị posts dạng sliders.

 [post_cycle num="5" type="portfolio" meta="false" thumb="true" thumb_width="50" thumb_height="50" effect="slide"] 

wordpress_shortcodes-post-slider

Carousel : liệt kê danh sách posts dạng chạy carousel với nhiều options.

 [carousel num="5" type="blog" thumb="true" thumb_width="120" thumb_height="50" date="yes" author="yes" min_items="3"] 

wordpress_shortcodes_carousel-

Roundabout : đây là một jquery plugin cấp phép chuyển đổi cấu trúc thành phần HTML tĩnh thành chuyển động 3D luôn chuyển giữa các posts.

 [roundabout title="Title" num="3" type="blog"] 

wordpress_shortcodes_-roundabout

Service Box : dùng để làm hiển thị thông tin block, block gồm có: title, icon, text, button. Icon của block sẽ lấy ảnh có trong thư mục images của themes, bạn cần upload những icon dùng cho Service Box nằm ngay wp_content/themes/your_theme/images , ví dụ: icon1.png, icon2.png,…

 [service_box title="Title" icon="icon1" text="Your text" btn_text="Button" btn_link="#" btn_size="normal" target="_self"] 

wordpress_shortcodes_-Service-box

Hero unit : hiển thị những thông tin chính của website như promotions,..thì bạn sử dụng shortcode này. Shortcode Hero unit thường đặt tại trang chính, cũng đều có thể nằm ở sau header để nổi bật.

 [hero_unit title="Title" text="Text" btn_text="Button" btn_link="#" btn_style="default" btn_size="normal" target="_self"] 

wordpress_shortcodes_-promotions

Categories : shortcode này dùng để hiển danh sách categories cho dù là cả blog posts (category) và custom post (taxonomy).

 [categories ] 

wordpress_shortcodes_-categories

Tags : shortcode liệt kê tags.

 [tags] 

wordpress_shortcodes_list-tags

Grid Columns

Grid Columns (span1-12) : sử dụng để xắp xếp các đối tượng dạng bảng lưới (grid), thay # là một số từ 1-12 thể hiện bề rộng khác nhau: [span#] [/span#] .
Chú ý: shortcode [span#] , khi tạo dòng cho grid bạn sử dụng shortcode dòng

tỉ dụ như sau:

 
[span6] Your Content... [/span6] [span6] t... [/span6]

Metabox “Page Attributes” ở bên phải chọn template cho post/page là “Fullwidth Page”.

Fluid Columns (one_half, one_third…) : giống như grid columns, nhóm các elements theo cấu trúc HTML grid, nhưng thiết lập bề rộng tương đối -> sử dụng %.

 [one_half] [/one_half] 

Giải thích:

  • one_half: một nửa=50%
  • one_third: một phần 3=1/3

Với shortcode này, chúng ta khai báo dòng row_fluid , xem ví dụ sau:

 [row_fluid] [five_sixth] Your content... [/five_sixth] [one_sixth... [/one_sixth] [/row_fluid] 

Multiple Columns (75% / 25%, etc.) : sử dụng phối hợp grids shortcode phía trên với nhiều kích thước.

 
[span8] t... [/span8] [span4] Your content... [/span4]

Kết quả:
shortcode-wordpress-cherry

Form Elements

Label : tạo label cho form.

 [label style="default"]label[/label] 

Highlight : dùng làm highlight một đoạn text.

 [highlight]Text[/highlight] 

Button : chèn đối tượng nút với nhiều kiểu dáng khác nhau.

Dropcap : dùng shortcode này nếu bạn muốn nổi bật 1 ký tự trước mắt của đoạn, bằng chữ hoa kích cỡ lớn.

 [dropcap]L[/dropcap]earn .... 

Blockquote : tạo blockquote dễ dàng.

 [blockquote] Text... [/blockquote] 

Lists gồm: unstyled, check, check2, arrow, arrow2, star, plus, minus : biết bao mẫu mã dùng để làm tạo danh sách (list).

 [check_list] List here ... [/check_list] 

Video Preview : chèn video giới thiệu sử dụng dịch vụ youtube, vimeo hoặc lấy URL trực diện được up lên host.

 [video_preview post_url="http://demolink.org/blog/video-post-type/" title="yes" date="yes" author="yes"] 

Alert Boxes (message, info, success, danger) : hiển thị thanh thông báo/tin nhắn.

 [alert_box style="message" close="yes"]Hello, World![/alert_box] 

Kết quả:
wordpress_shortcodes_-messageBox

Tabs shortcode : tạo tabs giống jquery tabs.

 [tabs tab1="Title #1" tab2="Title #2" tab3="Title #3"] [tab1] Tab 1 content... [/tab1] [tab2] Tab 2 content... [/tab2] [tab3] Tab 3 content... [/tab3] [/tabs] 

wordpress_shortcodes_tabs

Accordion : giống jquery Accordion.

 [accordions] 

title1

tab content

title2

another content tab
[/accordions]

wordpress_shortcodes_-Accordion

Table : tạo thẻ table.

 [table td1="#" td2="Title" td3="Value"] [td1] 1 [/td1] [td2] some title 1 [/td2] [td3] some value 1 [/td3] [/table] 

wordpress_shortcodes_-table

Google Map : chèn bản đồ google map vào website, bạn cần cung cấp vị trí cho bản đồ sử dụng tham số src .

 
	

    

Xem video hướng dẫn tại đây.
[youtube_sc url=”https://www.youtube.com/watch?v=wbCNMJdlPMI”]

Kết luận

Với sự hỗ trợ về mặt thành lập giao diện và các thành phần dữ liệu mà cherry framework đủ để bạn xây dựng website chuyên nghiệp cho mình rồi đấy. Chúc bạn thành công !

Để nhận được bài viết mới vui lòng đăng ký kênh kiến thức WordPress từ A-Z ở Form bên dưới. Bạn cũng có thể có thể thu được sự trợ giúp trên Twitter và Facebook

Bài viết Sử dụng shortcodes trong wordpress cherry framework được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

Bài Viết Liên Quan


Bài Viết Khác


Quảng cáo
Ads_ngang