WordPress Sage：如何在特定的单个或存档 CPT 页面上触发 JS？

Question

在 WordPress Sage 的 main.js 中，我们可以运行页面特定的 JS：

var Sage = {
  // All pages
  'common': {
    init: function() {
      // JavaScript to be fired on all pages
    },
    finalize: function() {
      // JavaScript to be fired on all pages, after page specific JS is fired
    }
  },
  // Home page
  'home': {
    init: function() {
      // JavaScript to be fired on the home page
    },
    finalize: function() {
      // JavaScript to be fired on the home page, after the init JS
    }
  },
  // About us page, note the change from about-us to about_us.
  'about_us': {
    init: function() {
      // JavaScript to be fired on the about us page
    }
  }
};

但是如何运行 JS 在特定的单个或存档 CPT 页面上？

Answer 1

检查 page/post/archive 主体上的 class 名称，您希望 JS 启动并使用其中之一。例如，如果您有名为 'work' 的自定义 post 类型，则工作存档正文元素的 class 将为 post-type-archive-work。您可以像这样使用它来触发您的特定 JS：

  // Note the change from about-us to about_us.
  'post_type_archive_work': {
    init: function() {
      // JavaScript to be fired on the 'work' archive
    }
  }

有关更多信息，请查看 Paul Irish's post

Answer 2

Josh Ellis 的回答是正确的，但有一些澄清。 Class 路由器有方法：

/**
* Fire Router events
* @param {string} route DOM-based route derived from body classes (`<body class="...">`)
* @param {string} [event] Events on the route. By default, `init` and `finalize` events are called.
* @param {string} [arg] Any custom argument to be passed to the event.
*/
fire(route, event = 'init', arg) {
  const fire = route !== '' && this.routes[route] && typeof this.routes[route][event] === 'function';
  if (fire) {
    this.routes[route][event](arg);
  }
}

使用正文中的任何 class。例如：对于 Sage 9，'teams-template-default single single-teams' => 'single_teams' 或 'singleTeams'。

WordPress Sage：如何在特定的单个或存档 CPT 页面上触发 JS？

WordPress Sage: how to fire JS on specific single or archive CPT pages?

javascript

wordpress

wordpress-theming