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:

/*
Theme Name: bibica.net
Theme URI: https://bibica.net
Description: Child Theme được tạo từ GeneratePress
Author: bibica
Author URI: https://bibica.net
Template: generatepress
Version: 1.0
*/

/* Generated by Orbisius Child Theme Creator (http://orbisius.com/products/wordpress-plugins/orbisius-child-theme-creator/) on Sat, 13 Jan 2018 06:04:59 +0000 */
/* The plugin now uses the recommended approach for loading the css files.*/

/* thêm font hệ thống*/

body {font-family: -apple-system, system-ui, BlinkMacSystemFont, “Segoe UI”, Helvetica, Arial, sans-serif, “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”;
line-height: 1.5;
}
h1,h2,h3,h4,h5,h6 {font-family:-apple-system, system-ui, BlinkMacSystemFont, “Segoe UI”, Helvetica, Arial, sans-serif, “Apple Color Emoji”, “Segoe UI Emoji”, “Segoe UI Symbol”;}

/* 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;
border-bottom: 2px solid rgba(44, 212, 217, 0.6);
color: #5333ed!important;
position: relative !important;
cursor: auto !important;
cursor: pointer !important;
}

/* Phần bài viết liên quan Jetpack */

.jp-relatedposts-post-a{
text-decoration: none !important;
font-weight: normal !important;
display: block;
padding: 5px 0px 5px ;
border-bottom: 0px solid rgba(44, 212, 217, 0.6) !important;
color: #e56a39!important;
}

.jp-relatedposts-post-img {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
}
#jp-relatedposts h3.jp-relatedposts-headline {
font-size: 11pt;
}
#jp-relatedposts {
display: none;
margin: 0em 0;
}

/* 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;
}

/* chieu ngang anh toi da 725 px */
.single .inside-article img {
max-width: 725px;
}

/* Thêm gạch ngang màu xanh nhạt ở các link trong bài viết */
.entry-content a {
border-bottom: 2px solid rgba(45, 130, 230, 0.3);

}

/* Bo tròn Widget*/
.widget {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;

}

/*Làm trong suốt nền phần chia trang */
.paging-navigation
{
background-color: transparent !important;
}

/*Cho phần link chia trang lên cao gần bài viết */
.nav-links {
margin-top: -1em;
}

/* 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;
}

/* Ẩn border comment */
.comment-content {
border:0px !important;
margin-top: 1em!important;
padding: 5px 0px!important;
}
.children {
border:0px !important;
margin-top: -2em!important;
padding: 5px 10px!important;
}

/* Làm trong suốt nền phần box (review, toolbox ….) */
.page-header{
background-color: transparent !important;

}

.commend-post{
color: #1e72bd!important;

}
.view-post {
color: #e56a39!important;

}

.fa-copyright {
color:#343e47;
}

.fa-heart {
color:#343e47;
}
.fa-heartbeat{
color:#343e47;
}
.fa-moon-o {
color:#6c0eb5;
}
.fa-wordpress {
color:#343e47
}
.category-sticky{
border:0px solid #FFFF;
}

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

Update 30/11/2018

Cập nhập lại toàn bộ phần css của bibica.net

6 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ủ á 😀

      • Theme bạn chỉnh đẹp quá, cho xin mấy cái option bây giờ đi được không bạn? Thấy bạn làm đẹp quá bắt chước =))

        • Một số setting chắc phải chỉnh lại bằng tay á 😀 vì thấy lôi hết file config sang nó cũng có vẻ không hiện đúng như thế 😛

Leave a Comment