Nhiều chủ đề Genesis và WordPress có vùng tiêu đề tùy chỉnh mà bạn có thể sử dụng để thêm biểu trưng hoặc tiêu đề của mình. Kích thước cho biểu trưng hoặc tiêu đề được đặt theo chủ đề. Bạn có thể thêm kích thước biểu trưng của riêng mình và bạn cũng có thể chỉnh sửa cài đặt tiêu đề tùy chỉnh để có thể tải lên biểu trưng của bạn với kích thước gấp đôi kích thước bình thường. Khi đó logo của bạn sẽ trông sắc nét và không bị mờ trên màn hình võng mạc.
Hướng dẫn này sẽ chỉ cho bạn cách thay đổi kích thước của công cụ tùy chỉnh tiêu đề để phù hợp với kích thước biểu trưng của bạn, để bạn có thể thêm biểu trưng retina vào các chủ đề Genesis hoặc WordPress, sau đó điều chỉnh các kiểu chủ đề để nó trông đẹp hơn.
Trong quản trị viên WordPress của bạn, nếu bạn đi tới Giao diện> Tiêu đề, bạn có thể thấy kích thước mà chủ đề của bạn cho phép đối với biểu trưng hiện tại. Bạn sẽ chỉnh sửa điều này để cho phép tải lên biểu trưng retina.
Chúng ta sẽ xem xét hai chủ đề ví dụ.
- Trong chủ đề Enterprise Pro, chiều rộng mặc định của biểu trưng là 320px và chiều cao là 80px.
- Trong chủ đề Genesis Author Pro, chiều rộng mặc định của logo là 320px và chiều cao là 70px.
Bước 1. Tạo biểu trưng Retina
Vì chúng tôi đã chọn kích thước biểu trưng là rộng 400px x cao 100px, nên biểu trưng võng mạc sẽ cần phải có chiều rộng gấp đôi và gấp đôi chiều cao. Vì vậy, bạn có thể thêm một biểu trưng võng mạc có chiều rộng 800px x chiều cao 200px. Bạn có thể sử dụng kích thước chính xác mà bạn muốn logo của mình.Bước 2. Thay đổi kích thước tiêu đề tùy chỉnh
Đầu tiên, bạn muốn tìm mã trong functions.php đặt kích thước logo. Nó trông giống như thế này trong chủ đề Genesis Enterprise Pro, nhưng sẽ tương tự trong tất cả các chủ đề WordPress.//* Add support for custom header
add_theme_support( 'custom-header', array(
'header-selector' => '.site-title a',
'header-text' => false,
'height' => 80,
'width' => 320,
) );//* Add support for custom header
add_theme_support( 'custom-header', array(
'header-selector' => '.site-title a',
'header-text' => false,
'height' => 200,
'width' => 800,
) );//* Add support for custom header
add_theme_support( 'custom-header', array(
'flex-height' => true,
'width' => 320,
'height' => 70,
'header-selector' => '.site-title a',
'header-text' => false,
) );//* Add support for custom header
add_theme_support( 'custom-header', array(
'flex-height' => true,
'width' => 800,
'height' => 200,
'header-selector' => '.site-title a',
'header-text' => false,
) );Bước 3. Thay đổi kiểu để thêm biểu trưng Retina vào chủ đề Genesis của bạn
Trong style.css của bạn, bạn sẽ muốn tìm phần Tiêu đề trang và Khu vực tiêu đề. Điều này dành cho các chủ đề Sáng thế ký; các chủ đề WordPress khác sẽ làm điều gì đó tương tự, nhưng các bộ chọn có thể không giống nhau; bạn sẽ cần sử dụng công cụ chọn tiêu đề ở trên để giúp bạn xác định nội dung cần chỉnh sửa.Đối với các bộ chọn sau, bạn sẽ muốn thực hiện những thay đổi này. Lưu ý rằng những kích thước này dành cho kích thước hiển thị của logo, không phải kích thước lớn hơn được sử dụng trong functions.php.
- chiều rộng sẽ cần được thay đổi từ 320px thành 400px
- min-height sẽ cần được thay đổi từ 70px hoặc 80px thành 100px.
.site-header {
background-color: #fff;
min-height: 150px;
}
/* ... */
.title-area {
float: left;
padding: 0 0 4px;
width: 320px;
}
/* ... */
.header-image .site-title > a {
background-position: top !important;
float: left;
min-height: 80px;
width: 100%;
}.site-header {
background-color: #fff;
min-height: 170px; /* add 20px to height */
}
/* ... */
.title-area {
float: left;
padding: 0 0 4px;
width: 400px; /* logo width */
}
/* ... */
.header-image .site-title > a {
background-position: top !important;
background-size: contain !important; /* required */
float: left;
min-height: 100px; /* logo height */
width: 100%;
}.site-header {
background-color: #7a8690;
color: #fff;
min-height: 120px;
position: fixed;
width: 100%;
z-index: 498;
}
/* ... */
.header-image .title-area {
padding: 25px 0;
width: 320px;
}
/* ... */
.header-image .site-title > a {
background-size: contain !important;
display: block;
float: left;
min-height: 70px;
width: 100%;
}.site-header {
background-color: #7a8690;
color: #fff;
min-height: 150px; /* add 30px to height */
position: fixed;
width: 100%;
z-index: 498;
}
/* ... */
.header-image .title-area {
padding: 25px 0;
width: 400px; /* logo width */
}
/* ... */
.header-image .site-title > a {
background-size: contain !important;
display: block;
float: left;
min-height: 100px; /* logo height */
width: 100%;
}Bước 4. Điều chỉnh một số bộ chọn khác
Enterprise Pro có khu vực tiện ích Header Right sẽ cần được điều chỉnh chiều rộng để phù hợp với biểu trưng lớn hơn. Vì vùng biểu trưng võng mạc mới lớn hơn 80px so với biểu trưng ban đầu, bạn sẽ muốn làm cho vùng tiêu đề bên phải của tiện ích nhỏ hơn 80px.Trong Enterprise Pro style.css, hãy tìm:
.site-header .widget-area {
float: right;
text-align: right;
width: 720px;
}và thay đổi chiều rộng thành 640px:
.site-header .widget-area {
float: right;
text-align: right;
width: 640px;
}Cũng trong @media only screen and (max-width: 1139px) {phần này, hãy tìm:
.site-header .widget-area {
width: 600px;
}và thay đổi chiều rộng thành 520px.
.site-header .widget-area {
width: 520px;
}Trong Author Pro, bạn không cần phải điều chỉnh độ rộng điều hướng; nó chiếm những gì còn lại, nhưng bạn sẽ cần thực hiện một số điều chỉnh cho tiêu đề cố định. Hãy nhớ rằng biểu trưng mới cao hơn 30px so với bản gốc, vì vậy đó là những gì chúng ta cần thêm vào các bộ chọn.
Tìm các bộ chọn này trong phần Điều hướng phụ:
.nav-secondary + .content-sidebar-wrap {
margin-top: 100px;
}
.nav-secondary.shrink + .content-sidebar-wrap {
margin-top: 70px;
}
.nav-secondary .genesis-nav-menu a {
color: #000;
padding: 42px 30px;
}Và thay đổi chúng thành:
.nav-secondary + .content-sidebar-wrap {
margin-top: 130px;
}
.nav-secondary.shrink + .content-sidebar-wrap {
margin-top: 100px;
}
.nav-secondary .genesis-nav-menu a {
color: #000;
padding: 72px 30px 42px;
}Bây giờ bạn sẽ có thể thêm một biểu tượng võng mạc vào các chủ đề Genesis WordPress. Chia sẻ nhận xét về cách bạn thêm logo của mình.