Home > Article > Backend Development > Modify the behavior of parent theme in child theme
What is subtopic? Child themes are a useful WordPress feature that allows developers to avoid building a new template from scratch and instead take advantage of all the functionality already available in an existing theme.
Sometimes, however, the parent theme we choose for our website may have some features we don’t need (or we need to customize to best suit our needs), such as custom post types using different slugs, shortcodes, JavaScript libraries, image sizes we don't use, etc...
While it's easy to achieve what we want by editing the theme directly, we have to make all customizations again every time we update the theme. This can be frustrating, so there is another option: we can create a child theme and use the >functions.php> file to modify the parent theme > Features. This way we can upgrade the parent theme every time a new version is released without losing our custom content.
Before we get into more specific details, a quick note on theme appearance: We can modify the colors, background, typography, and layout by importing the child theme's style.css file of the parent style .css and override the styles we want to change.
For more control over the layout, we can also follow Abbas Suterwala's suggestion in his post and clone the parent custom template file in the child theme:
The child theme can then choose to overwrite other template files, such as author.php, category.php, etc. The WordPress framework first looks for the template file in the child theme directory and if not found, will get it from the parent directory.
Through the child theme’s functions.php file we can handle:
So, assuming we have this website structure:
Let's get started: Create an empty functions.php file in the /wp-content/themes/foo-theme-child/ directory.
In most cases we will use the generic wp_tuts_remove_features()
function, hooked into the WordPress after_setup_theme
action. We also set 10
as the third parameter (priority), so we are sure that this function fires before the parent function.
add_action( 'after_setup_theme', 'remove_parent_theme_features', 10 ); function remove_parent_theme_features() { // our code here }
Some parent themes add functionality to WordPress via the add_theme_support
function.
Available functions are:
Post format
Post thumbnail
Custom background
Custom header
Automatic feed link
So to remove them, we can modify the remove_parent_theme_features() function in the functions.php
file.
function remove_parent_theme_features() { remove_theme_support( 'post-formats' ); remove_theme_support( 'post-thumbnails' ); remove_theme_support( 'custom-background' ); remove_theme_support( 'custom-header' ); remove_theme_support( 'automatic-feed-links' ); }
Removing custom post types and custom taxonomies is simple: If the parent functions.php file adds the Movie
custom post via the parent_movie_add_post_type() function type:
// PARENT functions.php add_action( 'after_setup_theme', 'parent_movie_add_post_type' ); function parent_movie_add_post_type() { $parent_args = array( // other arguments... 'rewrite' => array( 'slug' => 'movie' ), 'supports' => array( 'title', 'editor', 'author', 'excerpt' ) ); register_post_type( 'movie', $parent_args ); }
...With the help of our child functions.php file we can customize it:
// CHILD functions.php function remove_parent_theme_features() { // remove Movie Custom Post Type remove_action( 'init', 'parent_movie_add_post_type' ); /* alternatively, we can add our custom post type to overwrite only some aspects of the parent function */ add_action( 'init', 'child_movie_post_type' ); } function child_movie_post_type() { $child_args = array( // other arguments... // change Custom Post slug 'rewrite' => array( 'slug' => 'child-movie' ), // remove excerpts and add post thumbs 'supports' => array( 'title', 'editor', 'author', 'thumbnail' ) ); register_post_type( 'movie', $child_args ); }
We can also remove only certain features without deregistering the post type, for example if we want to replace the excerpt field with the post featured image we can modify the function like this:
function remove_parent_theme_features() { add_action( 'init', 'wp_tuts_remove_post_feature' ); } function wp_tuts_remove_post_feature() { // remove excerpt remove_post_type_support( 'movie', 'excerpt' ); // add post thumbs add_post_type_support( 'movie', 'thumbnail' ); }
You can find the full list of features that can be removed in the WordPress Codex under remove_post_type_support
.
与自定义帖子类型类似,您可以通过 parent_taxonomy()
函数删除在父主题中添加的自定义分类,方法如下:
function wp_tuts_after_setup_theme() { remove_action( 'init', 'parent_taxonomy' ); }
我们可以通过 unregister_nav_menu()
函数删除父主题的菜单。该函数采用一个参数,即 register_nav_menu()
函数中使用的菜单位置标识符 slug。
如果父主题注册了标题菜单:
// PARENT functions.php add_action( 'after_setup_theme', 'register_my_menu' ); function register_my_menu() { register_nav_menu( 'header-menu', __( 'Header Menu' ) ); }
我们可以这样删除它:
// CHILD functions.php function remove_parent_theme_features() { unregister_nav_menu( 'header-menu' ); }
要识别已注册的菜单,我们可以在父主题代码中搜索 register_nav_menu()
调用。该函数的第一个参数代表我们可以用来取消注册的菜单 ID(在本例中为 header-menu
)。
WordPress 附带了一些我们可以停用的默认小部件。此外,我们的父主题可以添加自己的小部件,因此我们可以在主题文件中搜索它们的声明位置并记下它们的名称。通常它们在扩展 WP_Widget
类的 PHP 类中声明:
// PARENT theme class ParentWidgetName extends WP_Widget { // widget code }
因此,要取消注册小部件,我们使用类名 ParentWidgetName
:
add_action( 'widgets_init', 'wp_tuts_parent_unregister_widgets', 10 ); function wp_tuts_parent_unregister_widgets() { // remove (some) WordPress default Widgets unregister_widget( 'WP_Widget_Pages' ); unregister_widget( 'WP_Widget_Calendar' ); // remove Parent registered Widget unregister_widget( 'ParentWidgetName' ); // register a custom Widget (if needed) register_widget( 'MyCustomWidget' ); } // don't forget to add the Widget Class class MyCustomWidget extends WP_Widget { // Custom Widget code }
对于侧边栏,操作类似:
add_action( 'widgets_init', 'wp_tuts_parent_unregister_sidebars', 10 ); function wp_tuts_parent_unregister_sidebars() { // remove a sidebar registered by the Parent Theme unregister_sidebar( 'first-footer-widget-area' ); }
要识别已注册的侧边栏,我们可以在父主题的代码中搜索 register_sidebar()
调用。
我们需要做的就是记下侧边栏 ID:
// PARENT functions.php $args = array( 'id' => 'first-footer-widget-area', // other args... ); register_sidebar( $args );
覆盖或删除短代码很容易,我们只需要这样修改我们的函数:
function remove_parent_theme_features() { // remove the parent [gmap] shortcode remove_shortcode( 'gmap' ); // add our [gmap] shortcode add_shortcode( 'gmap', 'child_shortcode_gmap' ); } function child_shortcode_gmap( $atts ) { // create our shortcode that overwrites the parent one }
要识别已注册的短代码,我们可以在父主题代码中搜索 add_shortcode()
调用。第一个参数是我们要查找的参数;-)。
如果父主题添加了我们不在子主题中使用的新图像尺寸,我们可以在父主题代码中搜索 add_image_size()
调用。在本例中,它们是:custom_size_parent_1
和 custom_size_parent_2
。我们通过这种方式重置它们:
add_filter( 'intermediate_image_sizes_advanced', 'remove_parent_image_sizes' ); function remove_parent_image_sizes( $sizes ) { unset( $sizes['custom_size_parent_1'] ); unset( $sizes['custom_size_parent_2'] ); return $sizes; }
这很有用,因为每次用户上传图像时,WordPress 都不会创建我们不使用的其他图像尺寸。
要创建自定义图像尺寸,我们可以将其添加到子 functions.php 文件中:
if ( function_exists( 'add_image_size' ) ) { // 400 pixels wide and unlimited height add_image_size( 'custom_size_child_1', 400, 9999 ); // 320 pixels wide and 240 px tall, cropped add_image_size( 'custom_size_child_2', 320, 240, true ); }
通过 remove_meta_box()
函数,我们可以删除默认的 WordPress 和父主题元框。
WordPress 默认元框列表可在 WordPress Codex 中的 remove_meta_box()
下找到。该函数具有三个参数:元框 ID、将从中删除的页面、编辑上下文(normal
、advanced
、side
)。
如果父主题在帖子编辑屏幕中添加了元框,我们可以通过以下方式禁用它们:
add_action( 'admin_menu' , 'wp_tuts_remove_metaboxes', 99 ); function wp_tuts_remove_metaboxes() { // remove default WP Trackback Metabox from Posts editing page remove_meta_box( 'trackbacksdiv', 'post', 'normal' ); // remove a Parent Theme Metabox 'parent_post_foo_metabox' remove_meta_box( 'parent_post_foo_metabox', 'post', 'normal' ); }
我们可以通过在父主题代码中搜索 add_meta_box
或 add_meta_boxes()
调用来识别父元框。
要删除的元框的 ID 是 add_meta_box()
函数的第一个参数。
如果父主题添加了我们不需要的 JavaScript 和 CSS 样式:
// PARENT functions.php add_action( 'wp_print_scripts', 'parent_scripts' ); add_action( 'wp_print_styles', 'parent_styles' ); function parent_scripts() { wp_enqueue_script( 'fancybox-parent-js', get_stylesheet_directory_uri() . '/fancybox/jquery.fancybox.pack.js' ); } function parent_styles() { wp_enqueue_style( 'fancybox-parent-css', get_stylesheet_directory_uri() . '/fancybox/jquery.fancybox.css' ); }
我们可以这样删除它们:
// CHILD functions.php add_action( 'wp_print_scripts', 'child_overwrite_scripts', 100 ); add_action( 'wp_print_styles', 'child_overwrite_styles', 100 ); function child_overwrite_scripts() { wp_deregister_script( 'fancybox-parent-js' ); } function child_overwrite_styles() { wp_deregister_style( 'fancybox-parent-css' ); }
要识别已注册的 JavaScript 和 CSS 样式,我们可以在父主题代码中搜索 wp_enqueue_script()
和 wp_enqueue_style()
调用。
该函数的第一个参数是我们可以在 wp_deregister_script()
或 wp_deregister_style()
函数中使用的参数。
某些主题(例如 Thematic)提供了多个挂钩来修改主题行为,而无需更改主题文件。在本例中,Thematic 提供了一个 thematic_header
操作来加载其他操作:
thematic_brandingopen()
thematic_blogtitle()
thematic_blogdescription()
thematic_brandingclose()
thematic_access()
我们不会详细研究这些函数的作用,可能其中一些函数会在博客标题中打印一些信息:名称、描述等等...在这种情况下,我们可以停用 thematic_blogdescription()
函数这样:
// Unhook default Thematic functions function unhook_thematic_functions() { // we put the position number of the original function (5) // for priority reasons remove_action( 'thematic_header', 'thematic_blogdescription', 5 ); } add_action( 'init', 'unhook_thematic_functions' );
在这些情况下,可能很难理解父主题的结构及其工作原理。我的建议是选择一个带有详细文档、良好的支持论坛并在整个代码中提供钩子的父主题。
这肯定会让我们损失更少的开发时间,并使子主题的定制变得更加容易。
after_setup_theme
remove_action
add_theme_support
register_post_type
add_post_type_support
remove_post_type_support
register_nav_menu
unregister_nav_menu
register_widget
unregister_widget
register_sidebar
unregister_sidebar
add_shortcode
remove_shortcode
add_image_size
add_meta_box
remove_meta_box
wp_deregister_script
wp_deregister_style
The above is the detailed content of Modify the behavior of parent theme in child theme. For more information, please follow other related articles on the PHP Chinese website!