Thủ thuật wordpress, Tất cả bài viết

Hướng dẫn tạo code icon bố cục 10 cột giống tiki wordpress

Đăng vào Tháng 3 31, 2025Tháng 3 31, 2025 bởi admin

admin

31/03/2025

1 Phút đọc

75 Lượt xem

Đánh giá

5/5 - (1 bình chọn)

Để tạo một bố cục tương tự như trên, với 10 cột và các icon được bố trí giống Tiki trong WordPress, bạn cần sử dụng CSS Grid hoặc Flexbox để sắp xếp các phần tử trong một layout 10 cột. Đây là cách bạn có thể triển khai bằng HTML và CSS.

HTML:

<div class="styles__ContainerWidget-sc-1905sp2-2 hkUftd" style="min-height: 126px;">
<div class="style__QuickLinksStyled-sc-1j9jq39-0 dTYmVt">
<div class="style__QuickLinkV2Styled-sc-1j9jq39-2 dYnjmk">
<a href="https://gachlatsan001.sharecodegiare.io.vn/dat-hang-so-luong-lon/">
        </p>
<div class="style__BorderStyled-sc-1j9jq39-4 gmDlFL" style="width: 44px; height: 44px;">
          <picture class="webpimg-container"><source type="image/webp" srcset="https://salt.tikicdn.com/ts/upload/2f/52/8e/00ab5fbea9d35fcc3cadbc28d7c6b14e.png"><img srcset="https://salt.tikicdn.com/ts/upload/2f/52/8e/00ab5fbea9d35fcc3cadbc28d7c6b14e.png" width="44" height="44" alt="quick-link-icon" class="styles__StyledImg-sc-p9s3t3-0 hbqSye" style="width: 44px; height: 44px; opacity: 1;">
          </picture>
        </div>
<div class="style__QuickLinkTitleStyled-sc-1j9jq39-3 hzrFdJ" style="color: rgb(217, 56, 67);">TOP DEAL</div>
<p>
      </a>
    </div>
<div class="style__QuickLinkV2Styled-sc-1j9jq39-2 dYnjmk">
      <a href="https://gachlatsan001.sharecodegiare.io.vn/dat-hang-so-luong-lon/">
        </p>
<div class="style__BorderStyled-sc-1j9jq39-4 gmDlFL" style="width: 44px; height: 44px;">
          <picture class="webpimg-container"><source type="image/webp" srcset="https://salt.tikicdn.com/ts/upload/72/8d/23/a810d76829d245ddd87459150cb6bc77.png"><img srcset="https://salt.tikicdn.com/ts/upload/72/8d/23/a810d76829d245ddd87459150cb6bc77.png" width="44" height="44" alt="quick-link-icon" class="styles__StyledImg-sc-p9s3t3-0 hbqSye" style="width: 44px; height: 44px; opacity: 1;">
          </picture>
        </div>
<div class="style__QuickLinkTitleStyled-sc-1j9jq39-3 hzrFdJ" style="color: rgb(39, 39, 42);">Sỉ lẻ</div>
<p>
      </a>
    </div>
<div class="style__QuickLinkV2Styled-sc-1j9jq39-2 dYnjmk">
      <a href="https://gachlatsan001.sharecodegiare.io.vn/dat-hang-so-luong-lon/">
        </p>
<div class="style__BorderStyled-sc-1j9jq39-4 gmDlFL" style="width: 44px; height: 44px;">
          <picture class="webpimg-container"><source type="image/webp" srcset="https://salt.tikicdn.com/ts/upload/8b/a4/9f/84d844f70e365515b6e4e3e745dac1d5.png"><img srcset="https://salt.tikicdn.com/ts/upload/8b/a4/9f/84d844f70e365515b6e4e3e745dac1d5.png" width="44" height="44" alt="quick-link-icon" class="styles__StyledImg-sc-p9s3t3-0 hbqSye" style="width: 44px; height: 44px; opacity: 1;">
          </picture>
        </div>
<div class="style__QuickLinkTitleStyled-sc-1j9jq39-3 hzrFdJ" style="color: rgb(39, 39, 42);">Coupon siêu hot</div>
<p>
      </a>
    </div>
<div class="style__QuickLinkV2Styled-sc-1j9jq39-2 dYnjmk">
<a href="https://gachlatsan001.sharecodegiare.io.vn/dat-hang-so-luong-lon/">
        </p>
<div class="style__BorderStyled-sc-1j9jq39-4 gmDlFL" style="width: 44px; height: 44px;">
          <picture class="webpimg-container"><source type="image/webp" srcset="https://salt.tikicdn.com/ts/upload/a5/d8/06/cb6ff520f12973013c81a8b14ad5e5b3.png"><img srcset="https://salt.tikicdn.com/ts/upload/a5/d8/06/cb6ff520f12973013c81a8b14ad5e5b3.png" width="44" height="44" alt="quick-link-icon" class="styles__StyledImg-sc-p9s3t3-0 hbqSye" style="width: 44px; height: 44px; opacity: 1;">
          </picture>
        </div>
<div class="style__QuickLinkTitleStyled-sc-1j9jq39-3 hzrFdJ" style="color: rgb(39, 39, 42);">Siêu sales</div>
<p>
      </a>
    </div>
<div class="style__QuickLinkV2Styled-sc-1j9jq39-2 dYnjmk">
<a href="https://gachlatsan001.sharecodegiare.io.vn/dat-hang-so-luong-lon/">
        </p>
<div class="style__BorderStyled-sc-1j9jq39-4 gmDlFL" style="width: 44px; height: 44px;">
          <picture class="webpimg-container"><source type="image/webp" srcset="https://salt.tikicdn.com/ts/upload/cf/46/d1/e474a9eb803909a59927600ee64ddd4f.png"><img srcset="https://salt.tikicdn.com/ts/upload/cf/46/d1/e474a9eb803909a59927600ee64ddd4f.png" width="44" height="44" alt="quick-link-icon" class="styles__StyledImg-sc-p9s3t3-0 hbqSye" style="width: 44px; height: 44px; opacity: 1;">
          </picture>
        </div>
<div class="style__QuickLinkTitleStyled-sc-1j9jq39-3 hzrFdJ" style="color: rgb(39, 39, 42);">Hàng ngoại giá hot</div>
<p>
      </a>
    </div>
<div class="style__QuickLinkV2Styled-sc-1j9jq39-2 dYnjmk">
      <a href="https://gachlatsan001.sharecodegiare.io.vn/dat-hang-so-luong-lon/">
        </p>
<div class="style__BorderStyled-sc-1j9jq39-4 gmDlFL" style="width: 44px; height: 44px;">
          <picture class="webpimg-container"><source type="image/webp" srcset="https://salt.tikicdn.com/ts/upload/21/c1/02/65f847f59e5248746dc3d689faba85a0.png"><img srcset="https://salt.tikicdn.com/ts/upload/21/c1/02/65f847f59e5248746dc3d689faba85a0.png" width="44" height="44" alt="quick-link-icon" class="styles__StyledImg-sc-p9s3t3-0 hbqSye" style="width: 44px; height: 44px; opacity: 1;">
          </picture>
        </div>
<div class="style__QuickLinkTitleStyled-sc-1j9jq39-3 hzrFdJ" style="color: rgb(39, 39, 42);">Mỹ phẩm</div>
<p>
      </a>
    </div>
<div class="style__QuickLinkV2Styled-sc-1j9jq39-2 dYnjmk">
      <a href="https://gachlatsan001.sharecodegiare.io.vn/dat-hang-so-luong-lon/">
        </p>
<div class="style__BorderStyled-sc-1j9jq39-4 gmDlFL" style="width: 44px; height: 44px;">
          <picture class="webpimg-container"><source type="image/webp" srcset="https://salt.tikicdn.com/ts/upload/ea/4f/d9/fcd5f95210ba2f3ce68974efd0b0ae90.png"><img srcset="https://salt.tikicdn.com/ts/upload/ea/4f/d9/fcd5f95210ba2f3ce68974efd0b0ae90.png" width="44" height="44" alt="quick-link-icon" class="styles__StyledImg-sc-p9s3t3-0 hbqSye" style="width: 44px; height: 44px; opacity: 1;">
          </picture>
        </div>
<div class="style__QuickLinkTitleStyled-sc-1j9jq39-3 hzrFdJ" style="color: rgb(39, 39, 42);">Thực phẩm</div>
<p><a href="https://gachlatsan001.sharecodegiare.io.vn/dat-hang-so-luong-lon/"></p>
<p>
      </a>
    </div>
<div class="style__QuickLinkV2Styled-sc-1j9jq39-2 dYnjmk">
      <a href="https://gachlatsan001.sharecodegiare.io.vn/dat-hang-so-luong-lon/">
        </p>
<div class="style__BorderStyled-sc-1j9jq39-4 gmDlFL" style="width: 44px; height: 44px;">
          <picture class="webpimg-container"><source type="image/webp" srcset="https://salt.tikicdn.com/ts/upload/81/05/13/417c6431ef14e702d466858d6b8b7e2f.png"><img srcset="https://salt.tikicdn.com/ts/upload/81/05/13/417c6431ef14e702d466858d6b8b7e2f.png" width="44" height="44" alt="quick-link-icon" class="styles__StyledImg-sc-p9s3t3-0 hbqSye" style="width: 44px; height: 44px; opacity: 1;">
          </picture>
        </div>
<div class="style__QuickLinkTitleStyled-sc-1j9jq39-3 hzrFdJ" style="color: rgb(39, 39, 42);">Gel dưỡng ẩm</div>
<p>
      </a>
    </div>
<div class="style__QuickLinkV2Styled-sc-1j9jq39-2 dYnjmk">
<a href="https://gachlatsan001.sharecodegiare.io.vn/dat-hang-so-luong-lon/">
        </p>
<div class="style__BorderStyled-sc-1j9jq39-4 gmDlFL" style="width: 44px; height: 44px;">
          <picture class="webpimg-container"><source type="image/webp" srcset="https://salt.tikicdn.com/ts/upload/4a/47/32/47b17d8467da8f25cc3da756ff97056a.png"><img srcset="https://salt.tikicdn.com/ts/upload/4a/47/32/47b17d8467da8f25cc3da756ff97056a.png" width="44" height="44" alt="quick-link-icon" class="styles__StyledImg-sc-p9s3t3-0 hbqSye" style="width: 44px; height: 44px; opacity: 1;">
          </picture>
        </div>
<div class="style__QuickLinkTitleStyled-sc-1j9jq39-3 hzrFdJ" style="color: rgb(39, 39, 42);">Son môi</div>
<p>
      </a>
    </div>
<div class="style__QuickLinkV2Styled-sc-1j9jq39-2 dYnjmk">
<a href="https://gachlatsan001.sharecodegiare.io.vn/dat-hang-so-luong-lon/">
        </p>
<div class="style__BorderStyled-sc-1j9jq39-4 gmDlFL" style="width: 44px; height: 44px;">
          <picture class="webpimg-container"><source type="image/webp" srcset="https://salt.tikicdn.com/ts/upload/e7/29/22/54acb55d05be22564873cacbfa7ffb66.png"><img srcset="https://salt.tikicdn.com/ts/upload/e7/29/22/54acb55d05be22564873cacbfa7ffb66.png" width="44" height="44" alt="quick-link-icon" class="styles__StyledImg-sc-p9s3t3-0 hbqSye" style="width: 44px; height: 44px; opacity: 1;">
          </picture>
        </div>
<div class="style__QuickLinkTitleStyled-sc-1j9jq39-3 hzrFdJ" style="color: rgb(39, 39, 42);">Dưỡng thể</div>
<p>
      </a>
    </div>
</p>
</div>
</div>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

</p>

</picture>

</div>

<p>

</a>

</div>

</p>

</picture>

</div>

<p>

</a>

</div>

</p>

</picture>

</div>

<div class="style__QuickLinkTitleStyled-sc-1j9jq39-3 hzrFdJ" style="color: rgb(39, 39, 42);">Coupon siêu hot</div>

<p>

</a>

</div>

</p>

</picture>

</div>

<div class="style__QuickLinkTitleStyled-sc-1j9jq39-3 hzrFdJ" style="color: rgb(39, 39, 42);">Siêu sales</div>

<p>

</a>

</div>

</p>

</picture>

</div>

<div class="style__QuickLinkTitleStyled-sc-1j9jq39-3 hzrFdJ" style="color: rgb(39, 39, 42);">Hàng ngoại giá hot</div>

<p>

</a>

</div>

</p>

</picture>

</div>

<p>

</a>

</div>

</p>

</picture>

</div>

<p>

</a>

</div>

</p>

</picture>

</div>

<div class="style__QuickLinkTitleStyled-sc-1j9jq39-3 hzrFdJ" style="color: rgb(39, 39, 42);">Gel dưỡng ẩm</div>

<p>

</a>

</div>

</p>

</picture>

</div>

<p>

</a>

</div>

</p>

</picture>

</div>

<div class="style__QuickLinkTitleStyled-sc-1j9jq39-3 hzrFdJ" style="color: rgb(39, 39, 42);">Dưỡng thể</div>

<p>

</a>

</div>

</p>

</div>

Css:

/*10 cot*/
.hkUftd {
    display: flex;
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    align-self: stretch;
    border-radius: 8px;
    background: var(--Alias-Theme, #fff);
    overflow-x: auto; /* Cho phép trượt ngang */
    white-space: nowrap; /* Không xuống dòng danh mục */
}

.dTYmVt {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    gap: 8px;
    align-self: stretch;
    justify-items: center;
    overflow-x: auto; /* Trượt ngang khi cần */
    scroll-behavior: smooth; /* Hiệu ứng trượt mượt */
    white-space: nowrap; /* Ngăn danh mục xuống dòng */
}

.dYnjmk a {
    display: flex;
    width: 100px;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.gmDlFL {
    border: 1px solid rgba(0, 0, 0, 0.05);
    border-radius: 35%;
    overflow: hidden;
    box-sizing: content-box;
    background: white;
}

.hzrFdJ {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2; /* Giới hạn tối đa 2 dòng */
    overflow: hidden;
    color: var(--Alias-Primary---On-Theme, #27272a);
    text-align: center;
    text-overflow: ellipsis;
    min-height: 36px; /* Đảm bảo đủ không gian cho 2 dòng */
    font-family: Inter, sans-serif;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    white-space: normal; /* Cho phép xuống dòng */
    word-break: break-word; /* Xuống dòng khi cần */
}

/* Định dạng trượt ngang trên thiết bị di động và máy tính bảng */
@media (max-width: 1024px) {
    .dTYmVt {
        display: flex;
        overflow-x: auto;
        gap: 12px;
        padding-bottom: 10px;
    }

    .dYnjmk a {
        flex: 0 0 auto;
        width: 90px;
    }

    .hkUftd {
        overflow-x: auto;
    }
}

/*10 cot*/

.hkUftd {

display: flex;

padding: 16px;

flex-direction: column;

align-items: flex-start;

gap: 12px;

align-self: stretch;

border-radius: 8px;

background: var(--Alias-Theme, #fff);

overflow-x: auto; /* Cho phép trượt ngang */

white-space: nowrap; /* Không xuống dòng danh mục */

}

.dTYmVt {

display: grid;

grid-template-columns: repeat(10, 1fr);

gap: 8px;

align-self: stretch;

justify-items: center;

overflow-x: auto; /* Trượt ngang khi cần */

scroll-behavior: smooth; /* Hiệu ứng trượt mượt */

white-space: nowrap; /* Ngăn danh mục xuống dòng */

}

.dYnjmk a {

display: flex;

width: 100px;

flex-direction: column;

align-items: center;

gap: 8px;

text-align: center;

}

.gmDlFL {

border: 1px solid rgba(0, 0, 0, 0.05);

border-radius: 35%;

overflow: hidden;

box-sizing: content-box;

background: white;

}

.hzrFdJ {

display: -webkit-box;

-webkit-box-orient: vertical;

-webkit-line-clamp: 2; /* Giới hạn tối đa 2 dòng */

overflow: hidden;

color: var(--Alias-Primary---On-Theme, #27272a);

text-align: center;

text-overflow: ellipsis;

min-height: 36px; /* Đảm bảo đủ không gian cho 2 dòng */

font-family: Inter, sans-serif;

font-size: 14px;

font-style: normal;

font-weight: 500;

line-height: 150%;

white-space: normal; /* Cho phép xuống dòng */

word-break: break-word; /* Xuống dòng khi cần */

}

/* Định dạng trượt ngang trên thiết bị di động và máy tính bảng */

@media (max-width: 1024px) {

.dTYmVt {

display: flex;

overflow-x: auto;

gap: 12px;

padding-bottom: 10px;

}

.dYnjmk a {

flex: 0 0 auto;

width: 90px;

}

.hkUftd {

overflow-x: auto;

}

Xem thêm:

Thông báo chính thức: Muathemewpgiare chân thành mong muốn được đồng hành và hỗ trợ tốt nhất cho các khách hàng trong quá trình sử dụng giao diện WordPress. Vì vậy, khi mua những theme wordpress tại chúng tôi, chúng tôi cam kết hỗ trợ quý khách hàng hết sức có thể.

Chúng tôi hiểu rằng sự lựa chọn của quý khách là rất quan trọng. Việc mua source code tại chúng tôi không chỉ giúp đảm bảo chất lượng mà còn nhận được sự hỗ trợ tận tâm từ Muathemewpgiare. Chúng tôi rất mong quý khách cân nhắc kỹ, tránh những rủi ro không đáng có khi mua các source code không rõ nguồn gốc. Chúng tôi luôn sẵn sàng hỗ trợ và đồng hành cùng quý khách. Xin chân thành cảm ơn!

Flatsome vs Woodmart – Nên Chọn Chủ Đề Nào Cho Website Của Bạn?

Flatsome và Woodmart là hai cái tên nổi bật trong thế giới theme WordPress bán hàng chuyên nghiệp. Nhưng nếu bạn đang bắt đầu xây...
Cách Để Website Hiển Thị Nổi Bật Trên Google

Bạn từng thấy một số website xuất hiện nổi bật trên Google với tiêu đề hấp dẫn, phần mô tả rõ ràng và nhiều liên...
Theme WordPress Giá Rẻ Đáng Tin?

Bạn đang cân nhắc mua một theme WordPress giá rẻ? Có thể bạn đã thấy hàng trăm lời mời gọi như “theme WordPress chuẩn SEO...
Thủ Thuật Flatsome: Tạo Shortcode Đánh Giá Khách Hàng Cực Đẹp Cho Website WordPress

Bạn đang xây dựng một website bằng theme Flatsome và muốn hiển thị các đánh giá khách hàng chuyên nghiệp, đẹp mắt, tùy chỉnh linh...
Plugin Nulled Là Gì? Có Nên Tải Miễn Phí Trên Internet?

Ngày nay, khi xây dựng website bằng WordPress, rất nhiều người tìm đến các plugin bản quyền (premium) để tối ưu hóa tính năng, tăng...
Hướng Dẫn Cách Làm Menu Chính và Submenu trong WordPress Admin Với License Key

Trong bài viết này, chúng ta sẽ cùng tìm hiểu cách tạo một menu chính trong WordPress với tên “Mua Theme WP Giá Rẻ”, di...
Tự Động Xoá Tất Cả Admin Khác Được Tạo Ra Trái Phép WordPress

Phần 1. Ẩn tài khoản admin khỏi danh sách người dùng trong Admin Mục tiêu của bài viết Chỉ cho phép tồn tại duy nhất...
Bao Giờ Google Cập Nhật PageRank? Cập Nhật Mới Nhất Về PageRank 2025

Kể từ khi ra đời, PageRank đã trở thành một yếu tố quan trọng trong thuật toán của Google để đánh giá và xếp hạng...
Cách Chống Brute Force và Cảnh Báo Đăng Nhập Cho WordPress (Phần 2)

Bảo mật trang web WordPress của bạn là một yếu tố quan trọng để đảm bảo dữ liệu và thông tin cá nhân của người...
Chia Sẻ Code Tự Động Thêm Giá Và Thanh Toán Cho Bài Viết WordPress

Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách tạo một hệ thống thanh toán cho các bài viết trong WordPress, giúp bạn...
Cách chèn nhạc vào website wordpress

Để chèn nhạc vào website WordPress thông qua tệp functions.php, bạn có thể sử dụng một số phương pháp tùy thuộc vào cách bạn muốn...
Code chức năng kiểm tra link nội bộ trong bài viết wordpress

Phần 1: Hướng dẫn Code chức năng kiểm tra link nội bộ Khi xây dựng một trang web trên nền tảng WordPress, việc tối ưu...
Thủ thuật Css Tạo Hiệu Ứng Line Effect Khi Rê Chuột Vào Bài Viết WordPress

Trong bài viết này, mình sẽ hướng dẫn các bạn cách tạo một hiệu ứng line effect độc đáo và bắt mắt khi rê chuột...
1001 Lưu Ý Cẩn Thận Trong SEO 2025 Trên Google

SEO (Search Engine Optimization) luôn là một lĩnh vực không ngừng thay đổi, và vào năm 2025, Google đã có những cập nhật quan trọng...
Tối Ưu Hóa SEO Cho Các Doanh Nghiệp Nhỏ Năm 2025 Mới Nhất

Trong kinh doanh hiện đại, sự hiện diện trực tuyến không chỉ là một lợi thế mà còn là điều cần thiết cho sự thành...
Code tự in kích thước lên ảnh khi upload ảnh lên website wordpress

Khi upload hình ảnh lên website WordPress, đôi khi bạn muốn tự động in kích thước của ảnh lên chính bức ảnh đó. Điều này...