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

47 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!

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...
Hướng Dẫn Làm Sạch Header WordPress Để Tăng Tốc Độ Tải Trang Và Cải Thiện SEO

Khi sử dụng WordPress, nhiều người dùng không để ý rằng phần Header của website chứa rất nhiều mã không cần thiết. Những đoạn mã...
Code Tự động Cập Nhật Giá Khi Tăng Giảm Số Lượng Trong WooCommerce

1. Giới Thiệu Code Tự động Cập Nhật Giá Khi Tăng Giảm Số Lượng Việc tự động cập nhật giá khi thay đổi số lượng...
Code chức năng xem thêm và thu gọn cho nội dung sản phẩm WordPress

Mục đích: Đoạn mã dưới đây được thiết kế để tạo ra một nút “Xem thêm” giúp người dùng có thể mở rộng nội dung...
Tại Sao Tối Ưu Hóa Tìm Kiếm Giọng Nói Là Một Xu Hướng Mới?

Ngày nay, việc tìm kiếm thông tin qua giọng nói đã trở thành một phần không thể thiếu trong cuộc sống hàng ngày của nhiều...
Tại Sao Tốc độ Tải Trang Lại Quan Trọng Cho SEO?

Tốc độ tải trang không chỉ là một yếu tố kỹ thuật mà còn ảnh hưởng trực tiếp đến thành công của một website trong...
Hướng dẫn mã hóa code khi người dùng viewsource

Khi phát triển ứng dụng web, bảo mật luôn là một yếu tố quan trọng cần được chú trọng. Một trong những vấn đề phổ...
Những Lợi Ích Của Việc Sử Dụng Hình Ảnh Trong Nội Dung Website

Việc sử dụng hình ảnh trong nội dung không chỉ đơn thuần là một lựa chọn mà đã trở thành một yêu cầu thiết yếu....
Thông tin cần thiết để thiết kế website cá nhân hiệu quả

Trong thế giới số hóa hiện nay, sở hữu một website cá nhân là một trong những cách tốt nhất để xây dựng thương hiệu...
Cách Xây Dựng Một Danh Sách Email Chất Lượng Tại Website

Trong thời kỳ công nghệ số hiện nay, việc xây dựng một danh sách email chất lượng trở thành một nhiệm vụ thiết yếu cho...
Các Lỗi Phổ Biến Khi Thiết Kế Website Và Cách Khắc Phục

Thiết kế website là một quá trình không hề đơn giản và thường gặp phải nhiều lỗi phổ biến. Những lỗi này không chỉ ảnh...
Hướng dẫn code vòng quay may mắn wordpress cực đẹp

Để tạo một vòng quay may mắn (Lucky Wheel) trên trang web WordPress, bạn có thể sử dụng mã PHP dưới đây. Bài viết này...
Responsive website là gì? Vì sao nó rất quan trọng trong SEO và chạy quảng cáo?

Responsive Website là gì? Responsive Website (website đáp ứng) là một kiểu thiết kế web giúp trang web tự động điều chỉnh giao diện, bố...