WordPress模板内核钩子，模板可用过滤器的列表

2023-06-11 / 356阅

WordPress模板内核钩子

WordPress中有大量的模板内核钩子可用于扩展主题。下面是一些常用的内核钩子：

wp_head

wp_head是用于插入头部信息的钩子。在头部信息插入该钩子可用于添加样式表、脚本或Meta标签等内容。

add_action('wp_head', 'my_custom_function');
function my_custom_function() {
  // 添加自定义CSS
  echo '<link rel="stylesheet" href="' . get_stylesheet_directory_uri() . '/custom.css">';
  // 添加自定义JS
  echo '<script src="' . get_stylesheet_directory_uri() . '/custom.js"></script>';
  // 添加自定义Meta标签
  echo '<meta name="description" content="My custom description">';
}

wp_footer

wp_footer是用于插入底部信息的钩子。在底部信息插入该钩子可用于添加脚本等内容。

add_action('wp_footer', 'my_custom_function');
function my_custom_function() {
  // 添加Google分析代码
  echo '<script async src="https://www.googletagmanager.com/gtag/js?id=GA_TRACKING_ID"></script>';
  echo '<script>';
  echo '  window.dataLayer = window.dataLayer || [];';
  echo '  function gtag(){dataLayer.push(arguments);}';
  echo '  gtag("js", new Date());';
  echo '  gtag("config", "GA_TRACKING_ID");';
  echo '</script>';
}

body_class

body_class是用于添加body标签的class属性的钩子。在该钩子中可以添加一些自定义class，方便后续的CSS样式设计。

add_filter('body_class', 'my_custom_function');
function my_custom_function($classes) {
  // 添加自定义class
  $classes[] = 'my-custom-class';
  // 返回class
  return $classes;
}

post_class

post_class是用于添加文章的class属性的钩子。在该钩子中可以添加一些自定义class，方便特定文章的CSS样式设计。

add_filter('post_class', 'my_custom_function');
function my_custom_function($classes) {
  // 如果是指定ID的文章，添加自定义class
  if(is_single(123)) {
    $classes[] = 'my-custom-class';
  }
  // 返回class
  return $classes;
}

wp_nav_menu_items

wp_nav_menu_items是用于修改菜单项的钩子。在该钩子中可以添加自定义菜单项或修改现有菜单项的HTML代码。

add_filter('wp_nav_menu_items', 'my_custom_function', 10, 2);
function my_custom_function($items, $args) {
  // 添加自定义菜单项
  $items .= '<li><a href="#">My Custom Link</a></li>';
  // 返回HTML代码
  return $items;
}

可用过滤器的列表

以下是一些在WordPress模板中常用的过滤器。通过这些过滤器可以修改WordPress的默认行为，扩展主题的功能。

获取页面标题

add_filter('wp_title', 'my_custom_function', 10, 2);
function my_custom_function($title, $sep) {
  // 添加自定义标题
  $title .= ' | My Custom Site';
  // 返回修改后的标题
  return $title;
}

获取文章发布日期

add_filter('the_time', 'my_custom_function');
function my_custom_function($time) {
  // 修改日期格式
  $time = date('Y-m-d', strtotime($time));
  // 返回修改后的日期
  return $time;
}

获取文章摘要

add_filter('get_the_excerpt', 'my_custom_function');
function my_custom_function($excerpt) {
  // 修改摘要长度和结尾
  $excerpt = substr($excerpt, 0, 100) . '...';
  // 返回修改后的摘要
  return $excerpt;
}

获取文章正文

add_filter('the_content', 'my_custom_function');
function my_custom_function($content) {
  // 在正文结尾添加自定义内容
  $content .= '<div class="my-custom-content">' . $custom_content . '</div>';
  // 返回修改后的正文
  return $content;
}

示例代码

以下是一个修改WordPress默认搜索表单的示例代码，它使用了get_search_form过滤器：

add_filter('get_search_form', 'my_custom_function');
function my_custom_function($form) {
  // 替换默认搜索文本
  $form = str_replace('value="Search"', 'value="Find something..."', $form);
  // 添加自定义class
  $form = str_replace('<label>', '<label class="my-custom-label">', $form);
  // 返回HTML代码
  return $form;
}

在主题中添加该代码后，WordPress默认的搜索表单将会变成下面这样：

<form role="search" method="get" class="search-form" action="/">
  <label class="my-custom-label">
    <span class="screen-reader-text">Search for:</span>
    <input type="search" class="search-field" placeholder="Find something..." value="" name="s" />
  </label>
  <input type="submit" class="search-submit" value="Search" />
</form>

注意：要使用上述代码，需要替换<form>标签中的action属性值为你自己的网站地址。

阅读文章或者观看视频过程中有任何问题，请下方留言或者联系我Q248758228

大家谈论

我的见解

WordPress模板内核钩子，模板可用过滤器的列表