GeneratePress Child Theme

Hmm, bữa nay lại có hứng làm lại cái theme cho thèng bibica.review (GeneratePress Child Theme) 😀 nói cho oai là làm, chứ thật ra chỉ là thay đổi lại font màu sắc là chính :]]

Đúng ra thì nên update lại tại post cũ GeneratePress, mà cũng hơi dài, với lại viết bài mới chào 2018 lun vại ^_^

Bài viết đang ở chế độ hoàn thiện, sẽ cập nhập lại sau 😀

Một số thay đổi ở lần sửa này:

  1. Đổi lại font cho Site Title, Tagline, không dùng logo nữa, vì ếu có ai làm dùm :]] chơi text lun cho gấu :]]
  2. Đổi lại màu nền, màu link, font chữ, cỡ chữ ở tiêu đề bài viết và nội dung bài viết
  3. Bo tròn và đổ bóng khung bài viết
  4. Thêm read more nằm bên phải
  5. Bo tròn và đổ bóng khung phần chia trang
  6. Bo tròn và đổ bóng khung phần comment
  7. Bo tròn và đổ bóng khung các ảnh
  8. Thêm icon vào phần Primary Navigation
  9. Thêm icon vào phần Powered by dưới trang
  10. Làm trong suốt nền phần paging-navigation, page-header
  11. ……. nhiều cái nhỏ wá hem nhớ hết 😀 nói chung cũng là sửa lại màu sắc và font cho dễ nhìn thôi

Lần này mình cố gắng tập trung vào phần đọc nội dung bài viết nhiều hơn, nên Widget bên phải cho chung với màu nền luôn 😀 màu sắc cũng hạn chế các màu nóng, chủ yếu vẫn là đen xám trắng các kiểu, trang home thì chỉ link “Read more” là để thành xanh 😛 phần khung bài viết dùng border-radius và box-shadow làm nó nổi lên như hiệu ứng 3D á 😀 Pic cũng làm bo nhẹ các góc và đổ bóng 1 tẹo cho nó mềm mại hơn

Font chính thì sau khi chọt chọt 1 hồi, chốt lại là dùng Work Sans, chủ yếu là nhìn nó mềm mại, đơn giản rõ ràng

Ở cỡ chữ 17, dù khá bé nhưng đọc vẫn ổn, không tới mức mỏi mắt

Zoom lên 300% thì thấy là các chữ tiếng Việt có dấu nó bị lỗi, đậm nhạt không đều

Tấm này chắc bà con nhìn dễ hình dung hơn rồi á 😀

Nói chung cá nhân mình không có thiện cảm với chuyện dùng thêm font, như đợt này thử, thêm vào 4 font 😀 nó táng vào thêm ~ 105.70 kb :]] ờ, thôi kệ vại, dù sao link cũng từ Google sang, nó tối ưu cũng tởm, 4 cái file nặng hơn 100 kb mà còn load nhanh hơn cái file 3.3 kb :]]

Thêm icon vào phần Primary Navigation

Ban đầu mình chỉ tính dùng Font Awesome tạo cái icon Facebook cho phần Primary Navigation thôi, cơ mà để vào lại thấy vui vui, để là thêm hết icon cho các mục ở Primary Navigation luôn  nói chung là trông nó sinh động hơn

Loading… Loading… Loading… Loading… Loading…

Họ cũng có các hiệu ứng ảnh động khá bắt mắt 😀 bạn nào tính sáng tạo cao thì có thể lấy về dùng, cách làm thì xem ở đây

Có điều nhớ vào phần General của theme GeneratePress chỉnh tắt phần Load essential Font Awesome icons instead of the full library.)

Chủ yếu do từ bản v2.0 Tom hắn muốn tối ưu hẳn hiệu năng, thành ra chỉ dùng những cái cần thiết nên có thêm vụ này 😀 ụa móa, có nhiêu đó thôi mà Google 2-3h mới biết á

Nếu bạn quan tâm, mún dùng cái giao diện y chang thèng bibica.review đang dùng thì đây là cách làm :]]

  1. Download theme GeneratePress v2.0.1 (FREE từ WordPress)
  2. Cài đặt plugin GP Premium v1.5.6 (dư tiền thì mua 😀 thích thì google tí cũng thấy, còn không thì hú mềnh lấy file, ah, GeneratePress họ cho dùng Unlimited websites, thành ra một người có license cả họ được nhờ hé)
  3. Download GeneratePress Config (Import 8 file .json này vào, cái này mình làm sẵn rồi 😀 chứ chụp hình nhìn vào làm theo thì có mà 20-30 bước chưa xong :P)
  4. Nếu viết bài mà phần tóm tắt bài viết bạn tự điền bằng tay trong phần Excerpts thì dùng cài thêm plugin này vào
  5. Additional CSS bên dưới vào:

/* Thêm read more nằm bên phải */
.read-more,
.read-more:visited {
display: block;
float: right;
margin-top: 1em;
padding: 5px 5px;
}

/* Bo tròn và đổ bóng khung bài viết */
.inside-article {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
box-shadow: 0 0 5px 0 #ffffff;
}

/* Bo tròn và đổ bóng khung phần chia trang */
.paging-navigation {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
box-shadow: 0 0 5px 0 #ffffff;
}

/* Bo tròn và đổ bóng khung phần comment */
.comments-area {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
box-shadow: 0 0 5px 0 #ffffff;
}

/* Bo tròn và đổ bóng khung các ảnh */
img {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
box-shadow: 0 0 5px 0 #e9ebee;
}

Demo mình làm thử bên pantheonsite.io, chạy ổn ^_^

Tổng thể thì làm xong 5 bước trên nó cũng khá là tương đồng với chuyện bạn cài child theme cho GeneratePress rồi :]] cái khung cơ bản là thế, bạn nào thích tăng giảm cỡ chữ, đổi font hay hiệu ứng gì đó thì cứ vào sửa lại là được :]]

Bạn nào cuồng hiệu năng thì chỉnh Font family về inherit là được

2 thoughts on “GeneratePress Child Theme

  1. mục 3 “Import 8 file .json này vào” mình không hiểu lắm. import vào đâu á bạn

    • Ah, bạn phải cài GP Premium vào thì mới thấy phần import 😀
      Với lại bài này mình viết lúc vừa sửa theme vừa viết, so với thời điểm hiện tại thì nó cũng khác hơi nhiều, vì mình có sửa lại 1 số chỗ nữa, dễ nhìn thấy nhất là cái chữ Read More ở ngoài trang chủ á 😀

Leave a Comment