向``元素添加ID的多种方法

Avatar of Trishah Woolley
Trishah Woolley 发表于

DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 200 美元的免费额度！

以下是由 Trishah Woolley 撰写的一篇客座文章。多年来，Trishah 收集了大量代码片段，这些代码片段可以根据一些可变信息（如 URL 或来自 WordPress 的数据）添加 ID 和类。这些代码片段中的每一个要么是从文档或类似的在线资源中收集的，要么是 Trishah 根据所涉及语言和 API 的标准功能编写的。

在我从事 WordPress 网站设计期间，有时需要向<body>标签添加 ID 或类。例如：当将第三方软件集成到 WordPress 中时，通常会发生这种情况，这些软件会创建 WordPress 无法识别的页面。或者我需要为我正在创建的网站设计创建更细致的类。

为了以某种方式更改这些页面的外观，使样式仅应用于该页面，我们需要一种方法来仅定位该页面或页面类别。下面是我发现的一些对向非 WordPress（但仍然是 PHP）和 WordPress 页面的<body>添加 ID 和类有帮助的方法。

PHP 变体

＃01 – 从 URL 添加 ID

这将从 URL 中去除正斜杠、`.php` 和 `?pg=`，并使用其余部分作为 ID。更改数组以匹配您的特定情况。

<?php
  $page = str_replace(array('/', '.php', '?pg='), '', $_SERVER['REQUEST_URI']);
  $page = $page ? $page : 'default';

  /* Sanitize $page! */

?>

<body id="<?php echo $page ?>">

示例

http://domain.com/directory/test.php?pg=12345

变为

<body id="directorytest12345">

＃02 – 从 URL 添加 ID 和类

这将在 URL 中查找 `?`，并将它之前的内容转换为 ID，并将它之后的内容转换为类。

<?php
  list($page, $class) = explode('?', $_SERVER['REQUEST_URI']);
  $page = str_replace(array('/', '.php'), '', $page);
  $class = str_replace(array('='), '', $class);
  /* Sanitize $page and $class! */
?>

<body id="<?php echo $page ?>" class="<?php echo $class ?>">

示例

http://domain.com/directory/test/?pg=12345

变为

<body id="directorytest" class="12345">

＃03 – 从文件名添加 ID

这将删除 `.php` 并使用文件名作为 ID

<body id="<?=basename($_SERVER['PHP_SELF'],'.php')?>">

示例

http://domain.com/directory/test.php

变为

<body id="test">

＃04 – 从一级目录添加 ID

这将获取一级目录并将其用作 ID。

$url = explode('/', $_SERVER['REQUEST_URI']);
  $dir = $url[1] ? $url[1] : 'home';
?>

<body id="<?php echo $dir ?>">

示例

http://domain.com/directory1/directory2/test.php

变为

<body id="directory1">

WordPress 变体

WordPress 具有一个用于将类应用于 body 的原生函数

<body <?php body_class(); ?>>

根据您所在的页面，这将产生如下输出

<body class="single single-post postid-245501 single-format-standard">

但是您仍然可以做更多事情，例如将其与上述技术结合起来并添加您自己的类。

＃05 – WordPress：向默认 body 类添加类

使用以下方法向 WordPress 生成的类添加您自己的类

<body <?php body_class('class-one ); ?>>

变为

<body class="page page-id-2 page-parent page-template-default logged-in class-one">

＃06 – WordPress：向默认 body 类添加多个类

您可以像这样添加多个类

<?php body_class(array("class-one", "class-two", "class-three")); ?>

变为

<body class="page page-id-2 page-parent page-template-default logged-in class-one class-two class-three">

＃07 – WordPress：向 body 标签添加 ID 和类

这可能是我最喜欢的！它与上面的功能相同，但将新类添加到 WordPress 的body_class中

list($page, $class) = explode('?', $_SERVER['REQUEST_URI']);
$page = str_replace(array('/', '.php'), '', $page);
$class = str_replace(array('='), '', $class);
?>

<body id="<?php echo $page ?>" <?php if (function_exists('body_class')) body_class($class ); ?>>

示例

http://domain.com/directory/test/?pg=12345

变为

<body id="directorytest" and class="page page-id-2 page-parent page-template-default logged-in 12345">

＃08 – WordPress：使用 Slug

<body id="<?php echo $post->post_name; ?>">

示例

http://domain.com/category1/slug/

变为

<body id="slug">

＃09 – WordPress：有条件地添加额外的类

这使用条件if()逻辑向 WordPress 生成的类添加 body 类。例如，这里我们使用 WooCommerce 提供的is_shop()布尔逻辑

<body <?php if (is_shop()) { body_class('shop'); } else { body_class(); } ?>>

变为

<body class="page page-id-2 page-parent page-template-default logged-in shop">

＃10 – WordPress：将 Slug 添加到 Body 类默认值

我们还可以通过过滤来更改body_class()函数的输出。我们可以在 `functions.php` 或我们自己的功能插件中执行此操作。

这里我们将添加 Slug

function add_slug_body_class( $classes ) {
global $post;
  if (isset($post)) {
    $classes[] = $post->post_type . '-' . $post->post_name;
  }
  return $classes;
}
add_filter('body_class', 'add_slug_body_class');

示例

http://domain.com/category/page-slug/

变为

<body class="page page-id-2 page-parent page-template-default logged-in page-slug">

＃11 – WordPress：使用 function.php 过滤器添加到 Body 类

将以下内容添加到 functions.php 中

function my_body_classes( $classes ) {
  $classes[] = 'class1';
  return $classes;
}
add_filter('body_class', 'my_body_classes');

然后它将输出如下，只需直接调用body_class()，无需执行任何其他操作

<body class="page page-id-2 page-parent page-template-default logged-in my_body_classes">

＃12 – WordPress：使用 Functions.php 对函数进行原始过滤

这是添加任何名称的单个类的方法

function my_body_classes( $classes ) {
  $classes[] = 'class1';
  return $classes;
}
add_filter('body_class', 'my_body_classes');

变为

<body class="page page-id-2 page-parent page-template-default logged-in class1">

在非商店页面上，它会变成这样

function my_body_classes( $classes ) {
  $classes[] = 'class1';
  if (is_shop()) {
    $classes[] = 'shop';
  }
  return $classes;
}
add_filter('body_class', 'my_body_classes');

在非商店页面上，它会变成这样

<body class="page page-id-2 page-parent page-template-default logged-in class1">

如果逻辑结果为true（例如，在商店页面上），则会变成这样

<body class="page page-id-2 page-parent page-template-default logged-in class1 shop">

#14 WordPress：使用 functions.php 删除默认输出中的类

通过此方法，您可以从body_class()中删除类。

function adjust_body_class($classes) {
  foreach ($classes as $key => $value) {
    if ($value == 'class-to-remove') unset($classes[$key]);
  }
  return $classes;
}
add_filter('body_class', 'adjust_body_class');

如果我们从这里开始

<body class="page page-id-2 page-parent page-template-default logged-in">

并删除了“page-parent”，我们将得到以下结果

<body class="page page-id-2 page-template-default logged-in">

#15 WordPress：添加分类

将分类添加到body_class()。

function add_category_name($classes = '') {
  if (is_single()) {
    $category = get_the_category();
    $classes[] = 'category-'.$category[0]->slug;
  }
  return $classes;
}
add_filter('body_class','add_category_name');

示例 URL

http://domain.com/category1/post-title/

变为

<body class="page page-id-2 page-parent page-template-default logged-in category1">

#16 WordPress：通过 functions.php 过滤器添加分类

您也可以通过过滤器来实现。

function add_category_to_single($classes) {
  if (is_single()) {
    global $post;
    foreach((get_the_category($post->ID)) as $category) {
      // add category slug to the $classes array
      $classes[] = $category->category_nicename;
    }
  }
  // return the $classes array
  return $classes;
}
add_filter('body_class', 'add_category_to_single');

示例 URL

http://domain.com/category1/post-title/

变为

<body class="page page-id-2 page-parent page-template-default logged-in category1">

#17 WordPress：添加浏览器类名

WordPress 提供了一些全局变量，包括关于正在使用什么浏览器的布尔值。您也可以将这些添加到 body 类中。

function browser_body_class($classes) {
  global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4, $is_safari, $is_chrome, $is_iphone;

  if ($is_lynx) $classes[] = 'lynx';
  elseif ($is_gecko) $classes[] = 'gecko';
  elseif ($is_opera) $classes[] = 'opera';
  elseif ($is_NS4) $classes[] = 'ns4';
  elseif ($is_safari) $classes[] = 'safari';
  elseif ($is_chrome) $classes[] = 'chrome';
  elseif ($is_IE) $classes[] = 'ie';
  else $classes[] = 'unknown';

  if ($is_iphone) $classes[] = 'iphone';
  return $classes;
}
add_filter('body_class', 'browser_body_class');

Chrome 示例

<body class="page page-id-2 page-parent page-template-default logged-in chrome">

小心不要依赖这些功能来实现重要的功能！像这样使用用户代理测试，已知会导致比它解决的问题更多的麻烦。

悄悄话！ 创建一个 DigitalOcean 帐户，即可获得200 美元的免费积分，用于基于云的托管和服务。

评论

  1. Jay M
    评论永久链接#

    假设这些代码片段的目标是经验不足的程序员；我建议在将 URL（尤其是查询字符串部分）附加到文档之前，应对其进行验证和清理。

  2. Aaron Graham
    评论永久链接#

    我相信您是为了清晰起见而使示例保持简短，但应该提到，从查询字符串中将任何内容回显到文档中都是一项危险的操作。通过操纵查询字符串，可以非常容易地将恶意脚本标签注入页面。

  3. peelhonda
    评论永久链接#

    很棒的文章

  4. MaxArt
    评论永久链接#

    $is_NS4
    天啊。这就是我不想碰 WordPress 的原因，哪怕是用一根棍子。
    我知道很多人不得不使用它，我向他们表示敬意和最美好的祝愿。更重要的是那些编写指南来帮助他人的人。

    在body中添加 id 的整个过程本身就是一个非常不好的做法。被迫这样做是几十年来开发没有明确指南的结果。

    而且，正如其他人所建议的那样，应该添加一些对查询字符串的清理。

  5. René
    评论永久链接#

    我同意 MaxArt 的观点，我真正喜欢的部分只有 #14（在 WP 中删除 body 类）。
    url、模板名称、帖子 ID 等不应作为脚本或样式使用的标识符，因为它们可能会更改。
    例如，我们通常运行同一代码的不同环境，但它们可能包含不同的内容，并且在不同域名上具有不同的自动递增。

    可能存在一些半有效的用例（尽管我认为我永远不会允许我们的代码库或任何插件中的代码要求它），但我更希望看到一篇关于如何避免使用常用 body 选择器的文章。

    抱歉没有建设性。我喜欢为创建这个详尽的列表和代码示例所付出的努力，这些示例可能非常有用。

    只是好奇，是否存在一些公共的（有用的）WP 插件，它没有其他识别方式？我想对它进行测试。

    有关 WP body 类的基本过滤器的参考

    // Remove some lame body classes. Instead, try something like BEM
// Reasons:
// - id classes: Id's can change - very bad practice to use them
// - archive: These are re-used for multiple post types which have their own styles
// - single: Same as above
// - *-template: Same as above
// - *-php: Some kind of ugly legacy class?
add_filter('body_class', function ($classes) {
    $classes = array_filter($classes, function($class) {
        if (
            true === in_array($class, ['single', 'archive', 'post-type-archive'])
            ||
            strpos($class, '-id-')
            ||
            0 === strpos($class, 'postid-')
            ||
            0 === strpos($class, 'term-')
            ||
            0 === strpos(strrev($class), strrev('-php'))
            ||
            0 === strpos(strrev($class), strrev('-template'))
        ) {
            return false;
        }
        return true;
    });
    return $classes;
}, 10);
  6. Requi Red
    评论永久链接#

    听起来像是简陋的 @document。除了 Firefox 之外，其他浏览器似乎都不关心它。

  7. Mario
    评论永久链接#

    这些东西让我感到难过。这是浪费精力。不要花时间学习另一个 WordPress 技巧。将您的时间投入到一些新的和现代的东西上。你永远不会后悔。相信我！:-)

此评论线程已关闭。如果您有重要信息需要分享，请联系我们。

© 2024 . All rights reserved.