Tinh chỉnh và tối ưu Theme Twenty Twenty-One (fast & simple) hiệu quả 100%

Theme Twenty Twenty-One

Ngày 9/12 vừa qua thì WordPress vừa cập nhật lên phiên bản 5.6, đồng thời xuất bản một Theme mới Twenty Twenty-One. Mình là một fan của tốc độ, và đơn giản, nên khi nhìn thấy Twenty Twenty-One là mình biết là nó ngon =)). Bởi vì không có một hình ảnh nào cả và sau khi tối ưu thì tốc độ load phải gọi là bàn thờ.

Twenty Twenty-One Review

Thật sự thì đây là theme mới theo chiến lượt của WordPress, mỗi năm họ cho ra mắt một phiên bản cùng một theme mới =) tuyệt !!! Với một con đỗ nghèo khỉ như mình thì nó quá tuyệt vời, vì sao ư

  1. Nó miễn phí ( of couse ) =)).
  2. Nó là đúc kết của một năm mà team WordPress làm được, với kinh nghiệm của họ thì đương nhiên cái mới sẻ tốt hơn cái cũ.
  3. Theme Twenty Twenty-One được tối ưu hoá cho tốc độ load và seo cực tốt, bạn sẻ không tìm được theme cân bằng tốt giữa 2 thứ này hơn nó đâu .
  4. Tương thích cực tốt với tất cả Plugin của wordpress, kiểu đây là gà nhà, các chú liệu mà đối xử vậy.

Tóm lại ở trên là những điểm tốt của Theme Twenty Twenty-One thế còn những điều chưa tốt thì cũng có vài thứ đáng nói:

  1. Bố cục trang chưa chuẩn lắm theo ý kiến cá nhân là vậy, còn nhiều khoảng trắng dư thừa.
  2. Cộng đồng sử dụng Theme Twenty Twenty-One khá là ít, có vẻ mọi người chê theme mặc định.
  3. Không có nhiều tuỳ chọn để chỉnh sửa nên khá là gò bó, nhưng hy vọng những bản cập nhật tới sẽ có thêm.

Ưu điểm thì ít nhưng nhược điểm cũng ít, không thể thoả mãn được hết số đông, nhưng với mình thì nó ổn 😗.

Cộng đồng support của Theme Twenty Twenty-One chính chủ, các bạn có thể xem ở đây : https://wordpress.org/support/theme/twentytwentyone/

Tinh chỉnh và tối ưu Theme Twenty Twenty-One

Theme Twenty Twenty-One
Theme Twenty Twenty-One tinh chỉnh và tối ưu

Đầu tiên là mình khuyên các bạn không nên sửa code, vì theo mình thấy họ đã làm rất tốt phần tối ưu bố cục và không có đoạn code dư thừa nào đâu. Bây giờ mà bạn sửa thì biết đâu nó vỡ mất kết cấu giao diện nữa, nên việc sửa code ở Theme Twenty Twenty-One là điều mình thấy là không cần thiết, còn nếu muốn chỉnh nhiều hơn, thì mình đề nghị là sử dụng theme Flatsome mà mình share ở đây.
Và ở Theme Twenty Twenty-One thì chúng ta chỉ nên chỉnh sửa CSS là bạn đã gần như có một Website WordPress được tinh chỉnh theo cá nhân rồi.

Để chỉnh CSS thì mọi người vào như sau

Setting -> Appearance -> Custumize -> Additional CSS

Cài Đặt -> Giao diện -> Tuỳ biến -> CSS bổ Sung

Giảm kích thước khoảng trắng giữa header và body

Mặc định của Theme Twenty Twenty-One là kích thước giữ các thành phần khá rộng, nên việc thu hẹp là tuỳ theo sở thích mỗi người. Họ tăng khoảng cách là có ý đồ, vì làm như thế ” First Contentful Paint ” sẽ được tăng tốc, kiểu như thứ nhìn thấy đầu tiên khi load ấy, giữ hình ảnh và text thì text nhẹ hơn chứ đúng không. Điều này sẽ tăng tốc độ tải trang, và thứ hạng khi seo, khá là cần thiết.

.site-header {
    padding-top: calc(0.5 * var(--global--spacing-vertical));
}
.site-header {
    padding-bottom: calc(0.5 * var(--global--spacing-vertical));
}
Twenty Twenty-One cho tốc độ nhìn thấy nội dung đầu tiên rất nhanh
Twenty Twenty-One và điểm hiệu suất thì tuyệt vời, ăn đứt mấy theme khác về tốc độ

Và khi gõ những dòng này khi sử dụng Theme Twenty Twenty-One thì đo PageSpeed đã đạt được 100 điểm với hiệu suất cực kỳ tốt.

Bật chế độ Dark Mode thành mặc định cho Theme Twenty Twenty-One

bật Dark Mode thành mặc định

Đây là thứ mình thích nhất đợt này của Theme Twenty Twenty-One phải nói là đẹp và tối ưu cho chế độ đọc cực kỳ tốt. Nhưng mà thằng này nó được bật như một tuỳ chỉnh, và mình không thích điều đó, thế nên mình bật nó thành luôn luôn hiện. Cũng khá đơn giản, vài dòng CSS là chúng ta sẽ giải quyết được vấn đề 😁

.is-dark-theme.is-dark-theme {
    --global--color-background: #28303d;
    --global--color-primary: var(--global--color-light-gray);
    --global--color-secondary: var(--global--color-light-gray);
    --button--color-text: var(--global--color-background);
    --button--color-text-hover: var(--global--color-secondary);
    --button--color-text-active: var(--global--color-secondary);
    --button--color-background: var(--global--color-secondary);
    --button--color-background-active: var(--global--color-background);
    --global--color-border: #9ea1a7;
}

Xoá ngày tháng, và danh mục bài viết cho Theme Twenty Twenty-One

Đối với mình thì, để ngày tháng và danh mục là cần thiết, nhưng đôi khi lại có những bạn cần, thôi thì chia sẻ luôn.

.posted-by {
    display: none;
}

.post-taxonomies {
    display: none;
}

Xoá tên tiêu đề bài viết

Đây chỉ là những tuỳ chỉnh thêm dành cho ai cần thiết

.entry-header {
display: none;
}
Tinh chỉnh và tối ưu Theme Twenty Twenty-One (fast & simple) hiệu quả 100%

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Chuyển lên trên