WordPress开发入门08:自定义函数和WordPress钩子

开发入门 虚幻 1049℃ 0评论

当我们创建自定义主题或插件时,通常必须编写自己的PHP代码。这些代码通常存储在自定义函数中。我们知道函数是可复用的代码块,只要你需要就可以重复调用。

现在来看看几个WordPress常见的使用自定义函数的地方,以便大家了解自定义函数的工作原理。

function.php中的自定义函数

我们可以打开functions.php文件:

[mem]

hook function xuhss.com01 - WordPress开发入门08:自定义函数和WordPress钩子

[/mem]

首先看到它打开一个PHP块,然后,在下面,可以看到function关键字,函数的名称,括号,然后一对大括号。这就是我们正在使用的函数(代码中添加了详细解释)。

/***此函数用于主题的设置***/
function twentyfifteen_setup() /***function关键字-函数的名称-括号***/
{ /***一对大括号***/

	/*
	 * Make theme available for translation.
	 * Translations can be filed at WordPress.org. See: https://translate.wordpress.org/projects/wp-themes/twentyfifteen
	 * If you're building a theme based on twentyfifteen, use a find and replace
	 * to change 'twentyfifteen' to the name of your theme in all the template files
	 */
	load_theme_textdomain( 'twentyfifteen' );

	// Add default posts and comments RSS feed links to head.
	add_theme_support( 'automatic-feed-links' );

	/*
	 * Let WordPress manage the document title.
	 * By adding theme support, we declare that this theme does not use a
	 * hard-coded <title> tag in the document head, and expect WordPress to
	 * provide it for us.
	 */
	add_theme_support( 'title-tag' );/***添加主题对标题标签支持***/

	/*
	 * Enable support for Post Thumbnails on posts and pages.
	 *
	 * See: https://codex.wordpress.org/Function_Reference/add_theme_support#Post_Thumbnails
	 */
	add_theme_support( 'post-thumbnails' );/***添加主题对缩略图支持***/
	set_post_thumbnail_size( 825, 510, true );/***设置缩略图大小***/

	// This theme uses wp_nav_menu() in two locations.
	register_nav_menus( array(/***注册导航菜单***/
		'primary' => __( 'Primary Menu',      'twentyfifteen' ),
		'social'  => __( 'Social Links Menu', 'twentyfifteen' ),
	) );

	/*
	 * Switch default core markup for search form, comment form, and comments
	 * to output valid HTML5.
	 */
	add_theme_support( 'html5', array(/***添加主题对html5支持***/
		'search-form', 'comment-form', 'comment-list', 'gallery', 'caption'
	) );

	/*
	 * Enable support for Post Formats.
	 *
	 * See: https://codex.wordpress.org/Post_Formats
	 */
	add_theme_support( 'post-formats', array(
		'aside', 'image', 'video', 'quote', 'link', 'gallery', 'status', 'audio', 'chat'
	) );

	/*
	 * Enable support for custom logo.
	 *
	 * @since Twenty Fifteen 1.5
	 */
	add_theme_support( 'custom-logo', array(
		'height'      => 248,
		'width'       => 248,
		'flex-height' => true,
	) );

	$color_scheme  = twentyfifteen_get_color_scheme();
	$default_color = trim( $color_scheme[0], '#' );/***添加主题颜色设置***/

	// Setup the WordPress core custom background feature.

	/**
	 * Filter Twenty Fifteen custom-header support arguments.
	 *
	 * @since Twenty Fifteen 1.0
	 *
	 * @param array $args {
	 *     An array of custom-header support arguments.
	 *
	 *     @type string $default-color     		Default color of the header.
	 *     @type string $default-attachment     Default attachment of the header.
	 * }
	 */
	add_theme_support( 'custom-background', apply_filters( 'twentyfifteen_custom_background_args', array(
		'default-color'      => $default_color,
		'default-attachment' => 'fixed',
	) ) );

	/*
	 * This theme styles the visual editor to resemble the theme style,
	 * specifically font, colors, icons, and column width.
	 */
	add_editor_style( array( 'css/editor-style.css', 'genericons/genericons.css', twentyfifteen_fonts_url() ) );

	// Indicate widget sidebars can use selective refresh in the Customizer.
	add_theme_support( 'customize-selective-refresh-widgets' );
}
endif; // twentyfifteen_setup
add_action( 'after_setup_theme', 'twentyfifteen_setup' );/***添加这个主题设置函数的钩子***/

[mem]

再接下来,可以看到更多的函数,我们可以看到 twentyfifteen_widgets_init ,它的功能是初始化小工具。它用于设置侧边栏区域,允许我们向其添加小部件。

[/mem]

function twentyfifteen_widgets_init() {/***设置侧边栏区域,允许我们向其添加小部件***/
	register_sidebar( array(
		'name'          => __( 'Widget Area', 'twentyfifteen' ),
		'id'            => 'sidebar-1',
		'description'   => __( 'Add widgets here to appear in your sidebar.', 'twentyfifteen' ),
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h2 class="widget-title">',
		'after_title'   => '</h2>',
	) );
}
add_action( 'widgets_init', 'twentyfifteen_widgets_init' );

接下来 twentyfifteen_fonts_url() 是字体处理函数

然后,twentyfifteen_scripts()是一个非常常见的函数,它的功能是链接CSS和JS。在后面的主题开发实战课程,会深入了解它。在这里,它在调用其他函数来添加css样式表以及不同类型的JavaScript脚本。

function twentyfifteen_scripts() {/***调用其他函数来添加css样式表以及不同类型的JavaScript脚本***/
	// Add custom fonts, used in the main stylesheet.
	wp_enqueue_style( 'twentyfifteen-fonts', twentyfifteen_fonts_url(), array(), null );

	// Add Genericons, used in the main stylesheet.
	wp_enqueue_style( 'genericons', get_template_directory_uri() . '/genericons/genericons.css', array(), '3.2' );

	// Load our main stylesheet.
	wp_enqueue_style( 'twentyfifteen-style', get_stylesheet_uri() );

	// Load the Internet Explorer specific stylesheet.
	wp_enqueue_style( 'twentyfifteen-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentyfifteen-style' ), '20141010' );
	wp_style_add_data( 'twentyfifteen-ie', 'conditional', 'lt IE 9' );

	// Load the Internet Explorer 7 specific stylesheet.
	wp_enqueue_style( 'twentyfifteen-ie7', get_template_directory_uri() . '/css/ie7.css', array( 'twentyfifteen-style' ), '20141010' );
	wp_style_add_data( 'twentyfifteen-ie7', 'conditional', 'lt IE 8' );

继续浏览下去,还可以看到有许多不同的函数。

在function.php文件的末尾,还可以看到使用require get_template_directroy() 来包含一些其他文件,后面跟的是包含的文件的名称

/**
 * Implement the Custom Header feature.
 *
 * @since Twenty Fifteen 1.0
 */
require get_template_directory() . '/inc/custom-header.php';/***包含其他文件***/

实际上,自己编写一个函数在WordPress中并没有太多的作用,我们需要做的是把所谓的钩子绑在一起。

WordPress钩子

钩子是让WordPress功能如此强大的原因。当WordPress官方的编程人员设计WordPress时,他们定义了数百个其他开发人员可以添加自己的自定义函数的钩子。我们将有专门的一整门课程针对钩子进行讲解。

那么,为了实现大量的WordPress定制功能,我们需要在一定程度上与钩子进行交互。

WordPress中存在两种类型的钩子,action和filter。

action钩子

action,可以在不同的时间节点运行运行自己的代码。例如,当保存文章时,运行你的代码。或者在加载菜单时,运行你的代码。你可以把它理解为对WordPress某个事件的响应

filter钩子

filter,则可以让你修改WordPress中的内容。例如,将自定义页脚添加到文章的主要内容的末尾,或将文章的摘录限制为一定数量的字符。

钩子的常见使用实例

我们来看WordPress中几个常见的使用钩子的例子。如果回到functions.php文件,就在我们的主题设置函数 twentyfifteen_setup() 的末尾,我们可以看到add_action,也就是说,在安装主题之后,触发对这个函数的响应。

[mem]

add_action( 'after_setup_theme', 'twentyfifteen_setup' );

[/mem]

这实际上就是一个action钩子,这个钩子就是在after_setup_theme这个动作发生时执行的。它将告诉WordPress,当我们在设置这个主题后,执行我们的设置函数。

接着,看下面这个小工具初始化函数 twentyfifteen_widgets_init() ,我们可以看到,twentyfifteen_widgets_init被挂接到widgets_init这个action钩子中。

add_action( 'widgets_init', 'twentyfifteen_widgets_init' );

再次,我们来到加载所有的CSS和JS函数 twentyfifteen_scripts() ,它将和wp_enqueue_scripts钩子绑定。

add_action( 'wp_enqueue_scripts', 'twentyfifteen_scripts' );

再往下,我们看到一个叫做 twentyfifteen_search_form_modify 的自定义函数,它是一个 filter 钩子,而不是 action,这个函数实现的是字符串替换。当WordPress去获取搜索表单时,它将改变WordPress的默认搜索方式。

add_filter( 'get_search_form', 'twentyfifteen_search_form_modify' );

WordPress钩子官方文档介绍

在WordPress的codex上,我们有一个特别的页面列出了WordPress提供的所有钩子。分为两种类型:filter和action。

[mem]

点我跳转

[/mem]基本上,所有的WordPress的filter钩子都在这里。打开链接可以看到WordPress已经列出了所有可能的filter的列表,包括文章,页面,评论,类别,链接,日期,作者,博客信息等。

[mem]

hook function xuhss.com02 - WordPress开发入门08:自定义函数和WordPress钩子

[/mem]

Action钩子也一样,它被分为这些不同的类别,并给出了每个钩子的一些基本介绍。

[mem]

hook function xuhss.com03 - WordPress开发入门08:自定义函数和WordPress钩子

[/mem]

熟悉了之后,你应该能够找到WordPress中使用的最常见的钩子类型的信息,以及如何调用它们。

这里只是简单的介绍钩子,后面我们还会有专门一整门介绍钩子的课程。

转载请注明:虚坏叔叔 » WordPress开发入门08:自定义函数和WordPress钩子

喜欢 (7)

您必须 登录 才能发表评论!