向WordPress页面添加样式的正确方法是使用wp_enqueue_style
函数中的函数\'wp_enqueue_scripts\'
行动挂钩。
类似于:
add_action( \'wp_enqueue_scripts\', \'my_styles_function\' );
function my_styles_function() {
wp_enqueue_style( \'style1\', get_template_directory_uri() . \'/css/style1.css\' );
wp_enqueue_style( \'style2\', get_template_directory_uri() . \'/css/style2.css\' );
}
这样,调用函数时,所有排队的样式都会正确插入模板中
wp_head()
.此函数调用通常位于
header.php
调用时WordPress在当前模板中包含的文件
get_header()
作用
如果希望某些页面具有不同的样式,可以为不同的页面排列不同的样式。这可以使用conditional tags.
假设您有一个名为\'special-page.php\'
.
使用条件标记is_page_template()
您可以轻松地为该自定义页面模板添加不同的样式。示例:
add_action( \'wp_enqueue_scripts\', \'my_styles_function\' );
function my_styles_function() {
$uri = get_template_directory_uri();
if ( is_page_template( \'special-page.php\' ) ) {
wp_enqueue_style( \'special-style\', $uri . \'/css/special-style.css\' );
} else {
wp_enqueue_style( \'style1\', $uri . \'/css/style1.css\' );
wp_enqueue_style( \'style2\', $uri . \'/css/style2.css\' );
}
}
作为替代,而不是使用内部样式的完整url
wp_enqueue_style
调用只能使用一次注册样式
wp_register_style
, 然后根据当前视图对它们进行条件排队。示例:
add_action( \'after_setup_theme\', \'my_register_styles\' );
function my_register_styles() {
$uri = get_template_directory_uri();
wp_register_style( \'bootstrap\', $uri . \'/css/bootstrap.css\' );
wp_register_style( \'common\', $uri . \'/css/common.css\' );
wp_register_style( \'single\', $uri . \'/css/single.css\' );
wp_register_style( \'page\', $uri . \'/css/page.css\' );
wp_register_style( \'contact\', $uri . \'/css/contact.css\' );
wp_register_style( \'special\', $uri . \'/css/special.css\' );
}
add_action( \'wp_enqueue_scripts\', \'my_styles_function\' );
function my_styles_function() {
wp_enqueue_style( \'bootstrap\' );
wp_enqueue_style( \'common\' );
if ( is_single() ) {
wp_enqueue_style( \'single\' );
} elseif ( is_page() ) {
wp_enqueue_style( \'page\' );
if ( is_page( \'Contact Page\' ) ) {
wp_enqueue_style( \'contact\' );
}
} elseif ( is_page_template( \'special-page.php\' ) ) {
wp_enqueue_style( \'special\' );
}
}
如您所见,当样式已注册时,要将其排队,只需使用
wp_enqueue_style
使用样式的id,这是传递给的第一个参数
wp_register_style
.
我所说的css在javascript文件中也是可行的,在javascript文件中,您需要使用wp_register_script
而不是wp_register_style
和wp_enqueue_script
而不是wp_enqueue_style
.
请注意,即使在小的可重用部分中单独的css/js可能很有用,但最终会在模板中链接不同的css/js url,其中每个url都需要加载单独的http请求:同一页面中的css/js太多对性能没有好处。
有时,从一页到另一页,您不仅希望更改样式和/或脚本,还希望更改页眉或页脚html标记。
WordPress通过使用参数get_header
和/或get_footer
功能。事实上,您可以创建许多不同的页眉和页脚,为文件添加后缀。E、 g.您可以:header.php
, header-single.php
, header-special.php
...
之后,单曲。php而不是调用get_header()
你可以打电话get_header(\'single\')
并加载header-single.php
而不是header.php
(如果header-single.php
在主题或子主题中找不到文件)。
这种技术与条件资产加载相结合,可以在WordPress中从一页到另一页深度定制方面。
查看this question/answer 用于更复杂/动态加载页眉/页脚文件。