jQuery to PHP：如果多个子元素添加一个选择器类

Question

是否可以在PHP中实现与下面的jQuery代码相同的东西？

我用它来隐藏从批发商进口产品时出现的错误。

这是我使用的 jQuery 代码：

jQuery(document).ready(function( $ ){
    $('.woocommerce-product-details__short-description:has(p:nth-of-type(2)) p').addClass('ukryj-klase-krotki');
});

它是如何工作的：

jQuery 检查产品简短描述中是否有多个<p> 元素。如果还有更多 - 它将类 'ukryj-klase-krotki' 添加到所有 <p> 元素。然后我添加 CSS 类来隐藏产品简短描述中生成的第一个 <p> 元素，所以我想要的唯一一个是可见的：

CSS 代码：

.woocommerce-product-details__short-description .ukryj-klase-krotki{
    display: none;
}

.woocommerce-product-details__short-description .ukryj-klase-krotki ~ .ukryj-klase-krotki{
    display: block;
}

有什么帮助吗？

Answer 1

首先阅读Template structure & Overriding templates via a theme，了解如何通过活动子主题覆盖 WooCommerce 模板文件。

要覆盖的模板是single-product/short-description.php

在“woocommerce”文件夹 >“single-product”子文件夹中复制到您的chid主题后，打开/编辑short-description.php文件，并替换为：

<?php
/**
 * Single product short description
 *
 * This template can be overridden by copying it to yourtheme/woocommerce/single-product/short-description.php.
 *
 * HOWEVER, on occasion WooCommerce will need to update template files and you
 * (the theme developer) will need to copy the new files to your theme to
 * maintain compatibility. We try to do this as little as possible, but it does
 * happen. When this occurs the version of the template file will be bumped and
 * the readme will list any important changes.
 *
 * @see     https://docs.woocommerce.com/document/template-structure/
 * @package WooCommerce\Templates
 * @version 3.3.0
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly.
}

global $post;

$short_description = apply_filters( 'woocommerce_short_description', $post->post_excerpt );

if ( ! $short_description ) {
    return;
} 

if ( $short_description && substr_count($short_description, '</p>') > 1 ) {
    $short_description = str_replace( ['<p class="', '<p>'], ['<p class="ukryj-klase-krotki ', '<p class="ukryj-klase-krotki">'], $short_description );
}

?>
<div class="woocommerce-product-details__short-description<?php echo $class; ?>">
    <?php echo $short_description; // WPCS: XSS ok. ?>
</div>

在这里，使用substr_count() php 函数，我们从产品简短描述中计算</p> （结束标签） 的数量，以将ukryj-klase-krotki 作为类选择器添加到所有<p> 孩子使用str_replace() 函数的标签。经过测试并且可以工作。

Answer 2

如果你想安装插件来添加脚本，请看这里：https://it.wordpress.org/plugins/search/header+and+footer+scripts/。

如果你想使用 PHP 代码，你需要在你的活动主题的 functions.php 文件中添加以下代码（如果我在子主题中使用它）：

// add custom class
add_action( 'wp_footer', 'add_custom_class' );
function add_custom_class() {
    ?>
    <script type="text/javascript">
        jQuery(document).ready(function($){
            $('.woocommerce-product-details__short-description:has(p:nth-of-type(2)) p').addClass('ukryj-klase-krotki');
        });
    </script>
    <?php
}

根据上述 cmets 的建议，您应该尽快通过更改不正确的产品数据来解决问题。