Hướng dẫn này cung cấp các bước để triển khai gist.github.com/purzlbaum/afa41255afee372128e6 trong Genesis để người dùng có thể chọn họ phông chữ cho tiêu đề và phông chữ nội dung trong Customizer.
Mặc dù hướng dẫn đã được viết cho Genesis Sample 2.6.0, nhưng nó sẽ hoạt động với một vài điều chỉnh trong bất kỳ chủ đề Genesis nào.
Bước 1
Genesis Sample tải Source Sans Pro theo một số biến thể (trọng lượng phông chữ) theo mặc định.
Hãy để chúng tôi nhận xét điều này và chỉ tải nó khi chưa thực hiện lựa chọn trong Trình tùy chỉnh.
Chỉnh sửa các hàm.php .
Thay thế
wp_enqueue_style(
'genesis-sample-fonts',
'//fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,600,700',
array(),
CHILD_THEME_VERSION
);
với
$headings_font = esc_html( get_theme_mod( 'custom_headings_font' ) );
$body_font = esc_html( get_theme_mod( 'custom_body_font' ) );
if ( $headings_font ) {
wp_enqueue_style( 'custom-headings-fonts', '//fonts.googleapis.com/css?family=' . $headings_font );
} else {
wp_enqueue_style( 'custom-source-sans', '//fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,600,700' );
}
if ( $body_font ) {
wp_enqueue_style( 'custom-body-fonts', '//fonts.googleapis.com/css?family=' . $body_font );
} else {
wp_enqueue_style( 'custom-source-body', '//fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,600,700' );
}
Bước 2
Tạo một tệp có tên nói, google-fonts.php bên trong lib thư mục có như sau:
<?php
return array(
'Source Sans Pro:400,700,400i,700i' => 'Default',
'Source Sans Pro:400,700,400italic,700italic' => 'Source Sans Pro',
'Open Sans:400italic,700italic,400,700' => 'Open Sans',
'Oswald:400,700' => 'Oswald',
'Playfair Display:400,700,400italic' => 'Playfair Display',
'Montserrat:400,700' => 'Montserrat',
'Raleway:400,700' => 'Raleway',
'Droid Sans:400,700' => 'Droid Sans',
'Lato:400,700,400italic,700italic' => 'Lato',
'Arvo:400,700,400italic,700italic' => 'Arvo',
'Lora:400,700,400italic,700italic' => 'Lora',
'Merriweather:400,300italic,300,400italic,700,700italic' => 'Merriweather',
'Oxygen:400,300,700' => 'Oxygen',
'PT Serif:400,700' => 'PT Serif',
'PT Sans:400,700,400italic,700italic' => 'PT Sans',
'PT Sans Narrow:400,700' => 'PT Sans Narrow',
'Cabin:400,700,400italic' => 'Cabin',
'Fjalla One:400' => 'Fjalla One',
'Francois One:400' => 'Francois One',
'Josefin Sans:400,300,600,700' => 'Josefin Sans',
'Libre Baskerville:400,400italic,700' => 'Libre Baskerville',
'Arimo:400,700,400italic,700italic' => 'Arimo',
'Ubuntu:400,700,400italic,700italic' => 'Ubuntu',
'Bitter:400,700,400italic' => 'Bitter',
'Droid Serif:400,700,400italic,700italic' => 'Droid Serif',
'Roboto:400,400italic,700,700italic' => 'Roboto',
'Open Sans Condensed:700,300italic,300' => 'Open Sans Condensed',
'Roboto Condensed:400italic,700italic,400,700' => 'Roboto Condensed',
'Roboto Slab:400,700' => 'Roboto Slab',
'Yanone Kaffeesatz:400,700' => 'Yanone Kaffeesatz',
'Rokkitt:400' => 'Rokkitt',
);
Sửa đổi phông chữ sẽ xuất hiện trong trình đơn thả xuống nếu cần.
Bước 3
Hãy để chúng tôi xác định một chức năng tùy chỉnh đảm bảo rằng phông chữ đang được đặt thực sự là từ danh sách trên.
Chúng ta sẽ đặt hàm này làm sanitize_callback sau.
Chỉnh sửa lib / helper-functions.php .
Cuối cùng, hãy thêm
/*
* Props to the BLDR Theme: https://wordpress.org/themes/bldr/
*/
// Sanitizes Fonts.
function custom_sanitize_fonts( $input ) {
global $custom_google_fonts;
if ( array_key_exists( $input, $custom_google_fonts ) ) {
return $input;
} else {
return '';
}
}
Lưu ý rằng functions.php tải tệp này qua
// Adds helper functions.
require_once get_stylesheet_directory() . '/lib/helper-functions.php';
$custom_google_fonts sẽ được xác định trong bước tiếp theo.
Bước 4
Bây giờ chúng tôi sẽ thêm Phần “Phông chữ Google” trong Công cụ tùy chỉnh, Cài đặt và Điều khiển tương ứng cho cả hai trường đã chọn.
Chỉnh sửa lib / custom.php .
a) Gần đầu tệp, bên dưới tiêu đề nhận xét, thêm
$custom_google_fonts = require_once __DIR__ . '/google-fonts.php';
b) Bên trong function genesis_sample_customizer_register( $wp_customize )
cộng
global $custom_google_fonts;
là dòng đầu tiên tham chiếu đến nó.
Thêm phần sau vào bên trong hàm gần cuối:
$wp_customize->add_section(
'custom_google_fonts_section', array(
'title' => __( 'Google Fonts', 'genesis-sample' ),
'priority' => 24,
)
);
// Heading Font.
$wp_customize->add_setting(
'custom_headings_font', array(
'sanitize_callback' => 'custom_sanitize_fonts',
)
);
$wp_customize->add_control(
'custom_headings_font', array(
'type' => 'select',
'description' => __( 'Select your desired font for the headings.', 'genesis-sample' ),
'section' => 'custom_google_fonts_section',
'choices' => $custom_google_fonts,
)
);
// Body Font.
$wp_customize->add_setting(
'custom_body_font', array(
'sanitize_callback' => 'custom_sanitize_fonts',
)
);
$wp_customize->add_control(
'custom_body_font', array(
'type' => 'select',
'description' => __( 'Select your desired font for the body.', 'genesis-sample' ),
'section' => 'custom_google_fonts_section',
'choices' => $custom_google_fonts,
)
);
Đây là custom.php đã được sửa đổi đầy đủ để bạn tham khảo.
Lưu ý rằng functions.php tải tệp này qua
// Adds image upload and color select to Customizer.
require_once get_stylesheet_directory() . '/lib/customize.php';
Bước 5
Cuối cùng, chúng tôi sẽ chèn CSS để thiết lập họ phông chữ đã chọn trên giao diện người dùng.
Chỉnh sửa lib / output.php .
a) Thêm bên trong (gần trên cùng, nơi các biến được xác định)genesis_sample_css()
// Fonts.
$headings_font = esc_html( get_theme_mod( 'custom_headings_font' ) );
$body_font = esc_html( get_theme_mod( 'custom_body_font' ) );
b) Gần cuối, xác định vị trí khối if chứa .wp_add_inline_style()
Bên trên nó thêm
if ( $headings_font ) {
$font_pieces = explode( ':', $headings_font );
$css .= "h1, h2, h3, h4, h5, h6 { font-family: {$font_pieces[0]}; }";
}
if ( $body_font ) {
$font_pieces = explode( ':', $body_font );
$css .= "body, button, input, select, textarea { font-family: {$font_pieces[0]}; }";
}
Đây là file output.php đã được sửa đổi đầy đủ để bạn tham khảo.
Lưu ý rằng functions.php tải tệp này qua
// Includes Customizer CSS.
require_once get_stylesheet_directory() . '/lib/output.php';
Đó là nó!