Lightweight Grid Columns

Mô tả

Lightweight Grid Columns rất dễ sử dụng! Cài đặt và kích hoạt plugin, sau đó nhìn vào icon cột trong thanh công cụ TinyMCE (xem ảnh chụp màn hình).

Chỉ định chiều rộng cho cột trên máy tính, máy tính bảng và di động, thêm nội dung và chèn shortcode vào trong bài viết.

Lightweight Grid Columns sử dụng Unsemantic Framework: (http://unsemantic.com/)

Tìm hiểu thêm GeneratePress, theme WordPress tuyệt vời của chúng tôi! (https://wordpress.org/themes/generatepress)

Tính năng gồm:

  • Chiều rộng lưới trên máy tính
  • Chiều rộng lưới trên máy tính bảng
  • Chiều rộng lưới trên di động
  • Thêm CSS tùy chỉnh
  • Thêm kiểu inline tùy chỉnh
  • Cân bằng chiều cao cột

Ảnh màn hình

  • Icon cột trong trình sửa TinyMCE.
  • Tùy chọn bên trong công cụ tạo shortcode cho cột.
  • Hãy nhìn vào các cột hấp dẫn của bạn!

Cài đặt

Có hai cách để cài đặt Lightweight Grid Columns.

  1. Đi đến “Plugin > Cài mới” trong Bảng tin và tìm kiếm: Lightweight Grid Columns
  2. Tải tập zip từ WordPress.org về máy, và tải tệp lên vào trong thư mục /wp-content/plugins/ thông qua FTP.

Trong hầu hết trường hợp, #1 sẽ làm việc tốt và là cách dễ nhất.

Hỏi đáp

Thêm shortcode như nào?
  • Hãy chắc chắn Lightweight Grid Columns đã kích hoạt.
  • Trong khi sửa bài viết hoặc trang, bấm vào “Trực quan”.
  • Nhìn vào icon cột (tab ảnh chụp màn hình)
  • Chọn chiều rộng lưới trên máy tính, máy tính bảng và di động.
  • Nếu bạn đang thêm cột cuối trong một hàng, hãy đánh dấu hộp kiểm “Cuối cùng” (điều này rất quan trọng).
Tôi nên làm gì nếu không muốn sử dụng nút TinyMCE?

Rất dễ! Chỉ cần thêm shortcode vào bài viết.

Ví dụ, bên dưới sẽ là 4 cột trên máy tính, 2 cột trên máy tính bảng và 1 cột trên di động

[lgc_column grid="25" tablet_grid="50" mobile_grid="100"]Some content[/lgc_column]

[lgc_column grid="25" tablet_grid="50" mobile_grid="100"]Some content[/lgc_column]

[lgc_column grid="25" tablet_grid="50" mobile_grid="100"]Some content[/lgc_column]

[lgc_column grid="25" tablet_grid="50" mobile_grid="100" last="true"]Some content[/lgc_column]

Hãy lưu ý đến cột cuối cùng – xem phần last=”true”? Đừng quên đấy 😉

Có những tùy chọn tỉ lệ phần trăm nào?

Cái này được lấy trực tiếp từ (http://unsemantic.com):

Có rất nhiều class lưới với tên grid-x trong đó “x” đại diện cho tỉ lệ phần trăm chiều rộng của từng đơn vị lưới. Nó bao gồm 5, cho đến 100 (grid-5, grid-10 … grid-95, grid-100. Cũng có một số class chia một trang thành ba phần: grid-33 and grid-66 đại diện cho 33.3333% và 66.6667% chiều rộng.

Có cách nào khác để sử dụng ngoài shortcode không?

Có!

Bạn có thể dùng:

class

[lgc_column grid=”25″ tablet_grid=”50″ mobile_grid=”100″ class=”push-25″]Nội dung[/lgc_column]

kiểu

[lgc_column grid=”25″ tablet_grid=”50″ mobile_grid=”100″ style=”padding-left:0px;”]Nội dung[/lgc_column]

equal_heights

Mặc định, js điều chỉnh chiều cao thành “true”.

[lgc_column grid="25" tablet_grid="50" mobile_grid="100" equal_heights="true"]Some content[/lgc_column]

Đánh giá

Tháng Tư 7, 2019
Great Plugin, I recently started using Gutenberg and if you could turn this into a Block that would be awesome. Maybe for Generatepress, as a feature.
Tháng Mười Một 29, 2018
Love this plugin works really well. One really small point would be great if the button for columns showed up when editing a Toolset template, some kind of integration with Toolset. Its not a massive thing as you learn the code you can just manually write it but would be a nice little time saving update if it was integrated! 🙂
Tháng Bảy 8, 2018
Easy to use! 1. Goto Post: Click "TEXT" editor tab and Copy your original One column text/links 2. Click "Visual" editor and scroll down just past your original text/links and add an "Horizontal Line" so there is a safe space to add your new columns Before you go back and delete the original one-column text/links. 3. Click the TinyMice editor to add your new text/links to the Lightweight Grid Columns pop-out editor box. 4.Paste all your code in the pop-out box. Do Not click "last column". 5.Set your columns ie; 25%-Desktop, 50%-Tablets, 100%-small phones which will equal 4 columns on Desktops, 2 columns on Tablets and One column on iphones, androids. 5.Now, go back to VISUAL and delete 2,3 and 4 parts of your column just keeping the code for the first part. 6. Repeat this process by pasting all your code but keeping the 2nd part of the column but delete the 1st, 3rd and 4th. 7. Do again, paste all the code but delete the 1st, 2nd and 4th part. 8. Ok, now on this last one, paste all the original code again and just delete sections 1, 2 and 3 but leave the 4th part AND make sure to check the "last column" tickbox in the TinyMice editor for the plugin when you add all the code again. This defines the 4th column as the last. --I know it sounds confusing but it's really easy and worked great for me. Cheers!
Tháng Sáu 15, 2018
Were you born this cleaver or was it acquired?? You have saved me hundreds of dollars and proved to me that self-built using your foundation is better and cheaper in the long run that buying annual subscriptions to one domain wordpress solutions. I especially have come to love the agility your foundation offers if I am willing to put in the work. One quickly learns "nothing is free" and WordPress needs constant attention and nurturing that you will either pay for (as a developer or client) or learn to support yourself. Tom, thank you and the other unnamed GeneratePress people that have helped deliver an exceptional product. A word of caution: it helps to have a firm foundation in HTML5 and CSS3; a good working knowledge of PHP and JQuery; a good sense of humour and the understanding you will be generally out there on your own. Jeff
Đọc tất cả 37 đánh giá

Người đóng góp & Lập trình viên

“Lightweight Grid Columns” là mã nguồn mở. Những người sau đã đóng góp vào plugin này.

Những người đóng góp

“Lightweight Grid Columns” đã được dịch qua 6 ngôn ngữ. Cảm ơn những người tham gia dịch vì đóng góp của họ.

Dịch “Lightweight Grid Columns” sang ngôn ngữ của bạn.

Muốn tham gia phát triển?

Duyệt code, check out SVN repository, hoặc theo dõi nhật ký phát triển qua RSS.

Nhật ký thay đổi

1.0

  • Chuyển giá trị class tùy chỉnh vào container cha
  • Làm sạch code

0.7

  • Sửa lỗi cuộn chuột do transition và matchHeight
  • Chỉ tải matchHeight trên các trang có cột được kích hoạt.

0.6

  • Sửa lỗi class của cột khiến cho một vài cột không hoạt động

0.5

  • Chuyển thiết lập margin-bottom vào phần tử bên trong để thuộc tính style có thể viết đè lên nó
  • Điều chỉnh hàm lgc_columns_helper để sửa lỗi với <p> và thẻ <br /> quanh shortcode
  • Thêm jQuery matchHeight cho chiều cao để responsive cho người dùng tốt hơn
  • Giảm đáng kể kích thước của stylesheet

0.4

  • Hiển thị icon TinyMCE ở tất cả post type

0.3

  • Sửa lỗi icon TinyMCE không hiển thị khi Page Builder SiteOrigin và Widget Black Studio TinyMCE cùng kích hoạt.
  • Thêm tương thích IE 7 & 8

0.2

  • Cho phép ngắt dòng trong cột

0.1

  • Phát hành lần đầu