我已经在我的主题的选项面板中实现了以下教程。http://wptheming.com/2012/06/loading-google-fonts-from-theme-options/一切正常。但在操作面板中，默认系统字体显示在下拉列表中。
/**
* Returns an array of system fonts
* Feel free to edit this, update the font fallbacks, etc.
*/
function options_typography_get_os_fonts() {
// OS Font Defaults
$os_faces = array(
\'Arial, sans-serif\' => \'Arial\',
\'"Avant Garde", sans-serif\' => \'Avant Garde\',
\'Cambria, Georgia, serif\' => \'Cambria\',
\'Copse, sans-serif\' => \'Copse\',
\'Garamond, "Hoefler Text", Times New Roman, Times, serif\' => \'Garamond\',
\'Georgia, serif\' => \'Georgia\',
\'"Helvetica Neue", Helvetica, sans-serif\' => \'Helvetica Neue\',
\'Tahoma, Geneva, sans-serif\' => \'Tahoma\'
);
return $os_faces;
}
/**
* Returns a select list of Google fonts
* Feel free to edit this, update the fallbacks, etc.
*/
function options_typography_get_google_fonts() {
// Google Font Defaults
$google_faces = array(
\'Arvo, serif\' => \'Arvo\',
\'Copse, sans-serif\' => \'Copse\',
\'Droid Sans, sans-serif\' => \'Droid Sans\',
\'Droid Serif, serif\' => \'Droid Serif\',
\'Lobster, cursive\' => \'Lobster\',
\'Nobile, sans-serif\' => \'Nobile\',
\'Open Sans, sans-serif\' => \'Open Sans\',
\'Oswald, sans-serif\' => \'Oswald\',
\'Pacifico, cursive\' => \'Pacifico\',
\'Rokkitt, serif\' => \'Rokkit\',
\'PT Sans, sans-serif\' => \'PT Sans\',
\'Quattrocento, serif\' => \'Quattrocento\',
\'Raleway, cursive\' => \'Raleway\',
\'Ubuntu, sans-serif\' => \'Ubuntu\',
\'Yanone Kaffeesatz, sans-serif\' => \'Yanone Kaffeesatz\'
);
return $google_faces;
}
/**
* Checks font options to see if a Google font is selected.
* If so, options_typography_enqueue_google_font is called to enqueue the font.
* Ensures that each Google font is only enqueued once.
*/
function options_typography_google_fonts() {
$all_google_fonts = array_keys( options_typography_get_google_fonts() );
// Define all the options that possibly have a unique Google font
$google_font = woodpecker_get_option(\'google_font\', \'Rokkitt, serif\');
$google_mixed = woodpecker_get_option(\'google_mixed\', false);
$google_mixed_2 = woodpecker_get_option(\'google_mixed_2\', \'Arvo, serif\');
// Get the font face for each option and put it in an array
$selected_fonts = array(
$google_font[\'face\'],
$google_mixed[\'face\'],
$google_mixed_2[\'face\'] );
// Remove any duplicates in the list
$selected_fonts = array_unique($selected_fonts);
// Check each of the unique fonts against the defined Google fonts
// If it is a Google font, go ahead and call the function to enqueue it
foreach ( $selected_fonts as $font ) {
if ( in_array( $font, $all_google_fonts ) ) {
options_typography_enqueue_google_font($font);
}
}
}
add_action( \'wp_enqueue_scripts\', \'options_typography_google_fonts\' );
/**
* Enqueues the Google $font that is passed
*/
function options_typography_enqueue_google_font($font) {
$font = explode(\',\', $font);
$font = $font[0];
// Certain Google fonts need slight tweaks in order to load properly
// Like our friend "Raleway"
if ( $font == \'Raleway\' )
$font = \'Raleway:100\';
$font = str_replace(" ", "+", $font);
wp_enqueue_style( "options_typography_$font", "http://fonts.googleapis.com/css?family=$font", false, null, \'all\' );
}
/*
* Outputs the selected option panel styles inline into the <head>
*/
function options_typography_styles() {
$output = \'\';
$input = \'\';
if ( woodpecker_get_option( \'google_font\' ) ) {
$input = woodpecker_get_option( \'google_font\' );
$output .= options_typography_font_styles( woodpecker_get_option( \'google_font\' ) , \'.google-font\');
}
if ( $output != \'\' ) {
$output = "\\n<style>\\n" . $output . "</style>\\n";
echo $output;
}
}
add_action(\'wp_head\', \'options_typography_styles\');
// Returns a typography option in a format that can be outputted as inline CSS
function options_typography_font_styles($option, $selectors) {
$output = $selectors . \' {\';
$output .= \' color:\' . $option[\'color\'] .\'; \';
$output .= \'font-family:\' . $option[\'face\'] . \'; \';
$output .= \'font-weight:\' . $option[\'style\'] . \'; \';
$output .= \'font-size:\' . $option[\'size\'] . \'; \';
$output .= \'}\';
$output .= "\\n";
return $output;
}
在主题选项页面中添加了以下代码：
//fonts
$options[] = array( \'name\' => \'Selected Google Fonts\',
\'desc\' => \'Fifteen of the top google fonts.\',
\'id\' => \'google_font\',
\'std\' => array( \'size\' => \'36px\', \'face\' => \'Rokkitt, serif\', \'color\' => \'#00bc96\'),
\'type\' => \'typography\',
\'options\' => array(
\'faces\' => options_typography_get_google_fonts(),
\'styles\' => false )
);
$options[] = array( \'name\' => \'System Fonts and Google Fonts Mixed\',
\'desc\' => \'Google fonts mixed with system fonts.\',
\'id\' => \'google_mixed\',
\'std\' => array( \'size\' => \'32px\', \'face\' => \'Georgia, serif\', \'color\' => \'#f15081\'),
\'type\' => \'typography\',
\'options\' => array(
\'faces\' => $typography_mixed_fonts,
\'styles\' => false )
);
$options[] = array( \'name\' => \'System Fonts and Google Fonts Mixed (2)\',
\'desc\' => \'Google fonts mixed with system fonts.\',
\'id\' => \'google_mixed_2\',
\'std\' => array( \'size\' => \'28px\', \'face\' => \'Arvo, serif\', \'color\' => \'#ee9f23\'),
\'type\' => \'typography\',
\'options\' => array(
\'faces\' => $typography_mixed_fonts,
\'styles\' => false )
);
我没有在主题选项面板下拉列表中的$os\\U faces数组中列出字体。但会显示以下默认字体。查看下图。
请帮忙。
