get_template_directory_uri()
云策文档标注
概述
get_template_directory_uri() 函数用于获取当前活动主题的模板目录 URI，返回字符串格式的 URL。它适用于父主题，不返回尾部斜杠，并检查 SSL 设置。
关键要点
- 返回活动主题的模板目录 URI，适用于父主题场景
- 不返回尾部斜杠，需手动拼接路径
- 检查 SSL 以确保 URL 协议正确
- 使用子主题时，应改用 get_stylesheet_directory_uri() 获取子主题 URL
- WordPress 4.7.0 后，推荐使用 get_theme_file_uri() 自动处理子主题或父主题
- 可通过 apply_filters('template_directory_uri', ...) 过滤返回值
代码示例
// 示例1：在 HTML 中链接静态图片
<img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" width="" height="" alt="" />
// 示例2：正确路径入队脚本
add_action('wp_enqueue_scripts', 'wpdocs_scripts_method');
function wpdocs_scripts_method() {
wp_enqueue_script(
'custom_script',
get_template_directory_uri() . '/js/custom_script.js',
array('jquery')
);
}
// 示例3：入队脚本和样式
function wpdocs_theme_slug_scripts() {
wp_enqueue_script('theme-slug-custom-script', get_template_directory_uri() . '/js/custom-script.js', array(), '1.0.0', true);
wp_enqueue_style('genericons', get_template_directory_uri() . '/genericons/genericons.css', array(), '1.0.0');
}
add_action('wp_enqueue_scripts', 'wpdocs_theme_slug_scripts');注意事项
- 函数返回父主题目录 URI，使用子主题时需注意区分
- 路径拼接时需手动添加斜杠，如 get_template_directory_uri() . '/path/to/file'
- 自 WordPress 4.7.0 起，get_theme_file_uri() 提供更灵活的替代方案
原文内容
Retrieves template directory URI for the active theme.
Source
function get_template_directory_uri() {
$template = str_replace( '%2F', '/', rawurlencode( get_template() ) );
$theme_root_uri = get_theme_root_uri( $template );
$template_dir_uri = "$theme_root_uri/$template";
/**
* Filters the active theme directory URI.
*
* @since 1.5.0
*
* @param string $template_dir_uri The URI of the active theme directory.
* @param string $template Directory name of the active theme.
* @param string $theme_root_uri The themes root URI.
*/
return apply_filters( 'template_directory_uri', $template_dir_uri, $template, $theme_root_uri );
}
Hooks
- apply_filters( ‘template_directory_uri’, string $template_dir_uri, string $template, string $theme_root_uri )
-
Filters the active theme directory URI.
Changelog
| Version | Description |
|---|---|
| 1.5.0 | Introduced. |
Skip to note 6 content
Florian Simeth
This function returns the URL to the root theme. If a child theme is used and you want to return the URL to the current child theme, use get_stylesheet_directory_uri() instead.
Skip to note 7 content
Debabrata Ghosh
Using get_template_directory_uri() to link a static image with its correct path in html :
<img src="<?php echo get_template_directory_uri(); ?>/images/logo.png" width="" height="" alt="" />Skip to note 8 content
Carlos Longarela
Since WordPress 4.7.0 you can use
get_theme_file_uri()https://developer.wordpress.org/reference/functions/get_theme_file_uri/ and this function will give us actual child theme URL or Theme URL if no child Theme exists.Skip to note 9 content
Codex
Using get_template_directory_uri() to enqueue a script with the correct path.
add_action('wp_enqueue_scripts', 'wpdocs_scripts_method'); /* * Enqueue a script with the correct path. */ function wpdocs_scripts_method() { wp_enqueue_script( 'custom_script', get_template_directory_uri() . '/js/custom_script.js', array('jquery') ); }Skip to note 10 content
Emil Uzelac
/** * Enqueue scripts and styles. */ function wpdocs_theme_slug_scripts() { // Custom scripts require a unique slug (Theme Name). wp_enqueue_script( 'theme-slug-custom-script', get_template_directory_uri() . '/js/custom-script.js', array(), '1.0.0', true ); /* * To avoid double loading Genericons will not need a slug. Same applies * to all other non-custom styles or scripts. */ wp_enqueue_style( 'genericons', get_template_directory_uri() . '/genericons/genericons.css', array(), '1.0.0' ); } add_action( 'wp_enqueue_scripts', 'wpdocs_theme_slug_scripts' );