Hướng dẫn cài đặt hiển thị văn bản làm tiêu đề trang genesis

Đối với một số bạn không biết photoshop để tự thiết kế cho mình một cái logo đẹp là một điều cực kỳ là khó khăn… Không những thế việc thuê thiết kế cũng đòi hỏi mất thời gian và tiền bạc của bạn, trung bình một cái logo đẹp thuê trên fiverr.com cũng có giá thấp nhất là $10 tương đương với 200.000 vnđ.

Trong khi những bạn mới setup site thì việc đầu tư nhiều tiền một phát cũng khá là chát… không phải ai cũng đủ điều kiện để làm tìm cho mình 1 cái logo ưng ý.

Để khắc phục điều này mình xin hướng dẫn các bạn tự thay đổi logo thành text trong genesis, mà một số site lớn đang làm.

Note: Bài viết này được thực hiện trên genesis 2.2.7, sample 2.2.2 và nó có thể hoạt động trên bất kỳ child theme nào.

Nội dung chính của bài viết là cài đặt hiển thị văn bản làm tiêu đề trang trong website.

Bước 1: Thêm đoạn code sau vào functions.php trong thư mục child theme.

add_theme_support( 'custom-header' );

Bước 2:  Vào Giao diện> Ảnh đàu trang.

Nhấn vào nút ẩn ảnh (Và tất nhiên là phải lưu lại).

Giờ đây, ở cài đặt chủ đề Genesis, bạn đã thấy phần Header mới với ‘Dynamic text‘ đã được cài đặt mặc định.

Nhấp vào ‘Lưu Cài đặt‘ trên trang cài đặt chủ đề Genesis.

 

Vấn đề là ở dòng 93 trong genesis/lib/structure/layout.php

if ( 'image' === genesis_get_option( 'blog_title' ) || ( get_header_image() && ! display_header_text() ) )

Trả lại kết quả mặc dù trong chủ đề hỗ trợ cho tiêu đề text đã bị gỡ bỏ vì ưu tiên tiêu đề có hình ảnh trong cơ sở dữ liệu được liên kết đến nó mà bạn đã tải lên trước đó trong bước 2.

Điều này không phải là các lỗi, các hình ảnh được tải lên đã bị xóa trước khi bạn xóa các tiêu đề tùy chỉnh trong chủ đề và hỗ trợ mã.

Ở giai đoạn này, có ba tùy chọn:

Đây là phương pháp đơn giản nhất.

A) Thực hiện bước 1 ở trên. Tức là, trong functions.php , thêm mã

add_theme_support( 'custom-header' );

B) Vào Giao diện> Ảnh đầu trang và xóa hình ảnh.

C) Trong functions.php , xóa mã vừa dán

add_theme_support( 'custom-header' );

Phương án 2: Dán code sau vào cuối file functions.php

// Removes 'header-image' class from the body_class array
 add_filter( 'body_class', 'remove_class' );
 function remove_class( $classes ) {

// search the array for the class to remove
 $unset_key = array_search( 'header-image', $classes );

if ( false !== $unset_key ) {
 // unsets the class if the key exists
 unset( $classes[$unset_key] );
 }

// return the $classes array
 return $classes;

}

Phương án 3: Dán đoạn CSS sau vào style.css

.header-image .site-title > a {
 background: transparent;
 min-height: 0;
 width: auto;
 float: none;
 }

.header-image .site-title,
 .header-image .site-description {
 text-indent: 0;
 }

Và kết quả

Thông tin liên hệ

    • 1

      Step 1

    • 2

      Step 2

    • 3

      Step 3

    1/3

    Step 1

    This will close in 0 seconds

    <div class="content-form-widget">
    <p style="color: #003DA5;">Nhận Báo Giá</p>
    <p style="font-size: 87.5%">InDMP sẽ trả lời mail của bạn trong thời gian sớm nhất</p>
    </div>

      This will close in 20 seconds