Hướng dẫn thêm mầu liên kết vào theme settings genesis framework

Hướng dẫn này cho phép bạn thêm một thiết lập thứ hai vào tuỳ chỉnh giao diện của genesis theme, bạn có thể thay đổi màu liên kết cho bất kỳ liên kết nào trên một trang. Bằng cách này, bạn có thể thay đổi màu liên kết hai lần tạo ra 2 màu khác nhau cho liên kết.

Việc này giúp cho bạn có thể thay đổi mầu link ngay trong phần admin, mà không phải cất công động đến code, hay phần mềm fpt nào để chỉnh sửa các file trong host.

Ảnh chụp màn hình sau đây cho bạn thấy 2 màu liên kết khác nhau được sử dụng trong cùng một mục bằng cách sử dụng cài đặt bổ sung được thêm vào tùy biến,Việc của bạn là chỉ cần thay đồi mầu tùy thích.

Hướng dẫn thêm mầu liên kết vào theme settings mà không cần chỉnh sửa CSS.

Bước 1: Thêm mã sau vào cuối file child theme > lib > customize.php.

Chú ý: Backup dữ liệu trước khi thực hiện thao tác này.
$wp_customize->add_setting(
 'infinity_accent_link_color',
 array(
 'default' => infinity_customizer_get_default_accent_color(),
 'sanitize_callback' => 'sanitize_hex_color',
 )
 );
$wp_customize->add_control(
 new WP_Customize_Color_Control(
 $wp_customize,
 'infinity_accent_link_olor',
 array(
 'description' => __( 'Change the default color of links in the content area of each entry.', 'infinity-pro' ),
 'label' => __( 'Accent Link Color', 'infinity-pro' ),
 'section' => 'colors',
 'settings' => 'infinity_accent_link_color',
 )
 )
 );

Bước 2: Thêm đoạn mã sau vào cuối file child theme > lib > output.php.

Chú ý: Backup dữ liệu trước khi thực hiện thao tác này.
$link_color_accent = get_theme_mod( 'infinity_accent_link_color', infinity_customizer_get_default_accent_color() );
$link_css .= ( infinity_customizer_get_default_accent_color() !== $link_color_accent ) ? sprintf( '
.entry-content a {
 color: %1$s;
 }
', $link_color_accent ) : '';
if ( $link_css ) {
 wp_add_inline_style( $handle, $link_css );
 }
Note: Nếu bạn muốn thay đổi mầu sắc bất kỳ của các liên kết trong trang website bạn có thể chỉnh sửa ở đoạn mã bên dưới cho phù hợp.
.entry-content a {
 color: %1$s;
 }