WordPress有一个伟大的功能,叫做WordPress Customizer API。通过它,主题开发者可以对他们的网站进行微调,如背景颜色、主题布局等。
在我之前的教程中,你已经看到如何为GeneratePress创建一个子主题。因此,在本教程中,我将向你展示如何在该子主题中添加你自己的自定义选项。
目 录
为什么你需要在子主题中使用自定义控件?
因为我们是在一个免费的GeneratePress主题上工作,所以缺少很多高级功能。例如,页脚信用文本。
你可以随时购买GeneratePress的高级版,但如果你的预算有限,你可以通过子主题中的自定义控件添加必要的功能。
如何添加自定义控件?
我们将首先使用WordPress定制器API创建一个名为 "GP子主题设置"的面板。然后我将在其中创建一个叫做 "页脚"的部分。
如何创建自定义器面板?
自定义器添加面板
要创建一个面板,请遵循下面的代码。
$wp_customize->add_panel( 'gp_child_theme_options',
array(
'priority' => 10,
'title' => __( 'GP Child Theme Settings', 'generatepresschild' ),
'description' => __( 'Generatepress Child Theme modification', 'generatepresschild' ),
'capability' => 'edit_theme_options',
)
);
在上面的例子中,我们向add_panel() 方法传递了一些参数。第一个是gp_child_theme_options,它是我们面板的唯一ID。第二个参数是一个与面板相关的数组。
| 优先级 | 它有助于设置我们的面板在定制器窗口中的位置 |
| 标题 | 我们面板的标题,即GP儿童主题设置 |
| 描述 | 我们的面板的简短描述。 |
| 能力 | 允许访问管理屏幕选项 |
如何在面板内添加自定义器部分?
在面板中添加部分
现在我们需要添加一个部分。比如说页脚。要在面板内添加一个部分,请按照以下步骤进行。
// Theme Options section
$wp_customize->add_section( 'gp_child_footer',
array(
'priority' => 100,
'title' => __( 'Footer', 'generatepresschild' ),
'description' => __( 'Modification related to footer section', 'generatepresschild' ),
'capability' => 'edit_theme_options',
'panel' => 'gp_child_theme_options',
)
);
add_section()的参数与add_panel()相同。但在第二个参数中是一个数组,我们必须传递我们想显示的部分的面板ID。在这个例子中,面板ID是"gp_child_theme_options"。
如何添加一个控件?
在章节中添加一个控件
为了在我们的页脚部分添加一个控件,我们需要先添加一个设置。
$wp_customize->add_setting( 'footer_credit_text',
array(
'default' => __( 'All rights reserved ', 'generatepresschild' ),
//'sanitize_callback' => 'sanitize_text_field',
'transport' => 'refresh',
)
);
在 add_setting() 方法中,我们已经传递了一个唯一的设置ID,即 'footer_credit_text'。 你可以在这里使用任何ID。我们可以从这里设置该控件的默认值。因为我们正在改变页脚的信用文本,所以它将是 "保留所有权利"。
sanitize_callback选项有助于对用户的输入进行消毒。我们不打算在这里使用它。最后一个选项是运输。它将刷新页面并在我们要改变控件的值时显示结果。
在这里,我们将改变页脚的信用文本。所以我们将在这里添加一个文本区域。
$wp_customize->add_control( 'footer_credit_text',
array(
'priority' => 10,
'type' => 'textarea',
'section' => 'gp_child_footer',
'description' => 'Text put here will be outputted in the footer. You can also use <b>%copy%</b>, <b>%current_year%,</b> <b>%blog_name%,</b> <b>%blog_url%</b>',
'label' => 'Copyright text',
)
);
由于我们需要文本区,我们必须将类型设置为文本区。你可以使用customize支持的不同控件。我们将在哪个部分添加控件,我们必须在部分选项中给出该ID。其他字段是不言自明的。
但是等等,我知道你正在复制和粘贴代码到 functions.php。但有一些问题,或者说在定制器中没有显示面板或部分。
我们需要使用customize_register动作来注册我们的面板、控件和部分。所以这里是完整的代码。
/********************************
*
* Gp child Cuztomization
*
*********************************/
function gpchild_customize_register( $wp_customize ) {
// Theme Options Panel
$wp_customize->add_panel( 'gp_child_theme_options',
array(
'priority' => 10,
'title' => __( 'GP Child Theme Settings', 'generatepresschild' ),
'description' => __( 'Generatepress Child Theme modification', 'generatepresschild' ),
'capability' => 'edit_theme_options',
)
);
// Theme Options section
$wp_customize->add_section( 'gp_child_footer',
array(
'priority' => 100,
'title' => __( 'Footer', 'generatepresschild' ),
'description' => __( 'Modification related to footer section', 'generatepresschild' ),
'capability' => 'edit_theme_options',
'panel' => 'gp_child_theme_options',
)
);
$wp_customize->add_setting( 'footer_credit_text',
array(
'default' => __( 'All rights reserved ', 'generatepresschild' ),
//'sanitize_callback' => 'sanitize_text_field',
'transport' => 'refresh',
)
);
$wp_customize->add_control( 'footer_credit_text',
array(
'priority' => 10,
'type' => 'textarea',
'section' => 'gp_child_footer',
'description' => 'Text put here will be outputted in the footer. You can also use <b>%copy%</b>, <b>%current_year%,</b> <b>%blog_name%,</b> <b>%blog_url%</b>',
'label' => 'Copyright text',
)
);
}
add_action( 'customize_register', 'gpchild_customize_register' );