小编Cra*_*ray的帖子

我正在使用 Bootstrap 4 选项卡导航来查看选项卡面板内的不同滑块。

它适用于活动选项卡。但非活动选项卡中的滑块的宽度为 0 ( .slide-track)。因此，在我开始浏览选项卡之前，会出现显示问题。之后，宽度被设置并且滑块看起来不错。

有什么办法可以将滑轨的宽度设置为正确的大小吗？

$('.slider-home').slick({
  dots: true,
  arrows: true,
});

$('.slider-profile').slick({
  dots: true,
  arrows: true,
});

$('.slider-contact').slick({
  dots: true,
  arrows: true,
});

.slick-prev:before,
.slick-next:before {
  color: blue;
}

.tab-pane {
  padding: 2rem 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<link href="http://cdn.jsdelivr.net/jquery.slick/1.3.15/slick.css" rel="stylesheet" />
<link href="https://kenwheeler.github.io/slick/slick/slick-theme.css" rel="stylesheet" />

<div class="container">
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item"><a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a></li>
    <li class="nav-item"><a class="nav-link" …

我正在使用 Gutenberg 编辑器和 Bootstrap CSS 框架。默认情况下，古腾堡块周围没有容器或类似的东西。

有些块有一个alignwide和alignfull选项，可以在它们周围添加类似容器之类的东西。这些选项适用于封面图像或段落。

但标题块（默认情况下）没有这样的选项。

我很想为每个古腾堡块添加一个额外的复选框，以div在其周围切换一个额外的容器。不只是一个班级。

我找到了一些可以为每个古腾堡博客添加额外风格的东西：https://www.billerickson.net/block-styles-in-gutenberg/

这是那里的代码：

wp.domReady( () => {

    wp.blocks.registerBlockStyle( 'core/heading', {
        name: 'default',
        label: 'Default',
        isDefault: true,
    } );

    wp.blocks.registerBlockStyle( 'core/heading', {
        name: 'alt',
        label: 'Alternate',
    } );

} );

它效果很好，为块提供了额外的类/风格。但它并没有将任何东西包裹在块周围。

是否有任何选项可以将容器切换（添加类）之类的东西添加div到.container块中？

我想在我的活动订阅概览中显示订阅产品的名称。目前页面只显示具有该功能的订阅订单号$subscription->get_order_number()

我在后面打印了数组，$subscription但数组似乎没有关于订阅产品或有序变体的信息。

有没有办法显示订购的订阅产品的名称和变体？

只显示订单号，对用户帮助不大。

我需要为 WooCommerce 产品页面上的库存通知提供额外的课程。目前，有两个不同的类in-stock和out-of-stock。但 WooCommerce 还有第三种选择。如果库存商品很少，则类别也为in-stock。如果有类似的东西就好了few-in-stock。

stock.php我检查了生成输出的模板文件。只有一行代码：

<p class="stock <?php echo esc_attr( $class ); ?>"><?php echo wp_kses_post( $availability ); ?></p>

并且$class只有上面的两个选项。有什么函数可以用来添加第三个类吗？

目前我计算产品的库存是这样的：

$stock_count = $product->get_stock_quantity();

并像这样添加我的新课程：

<p class="stock <?php echo esc_attr( $class ); ?> <?php if ( $stock_count <= '2' ) : ?>few-in-stock<?php endif; ?>"><?php echo wp_kses_post( $availability ); ?></p>

但也许有更好的方法来做到这一点？！

我使用 Bootstra 4 中的容器将页面内容置于浏览器中间。到目前为止还算正常。

但我还需要更多东西。容器内的内容应在左侧展开，并应扩展到浏览器窗口。但仅限于左侧。

因为我使用的是光滑滑块，所以我无法position:absolute在容器 DIV 中的单个对象上使用或执行其他操作。我需要容器内有一个完整的 DIV 才能生长到左侧。我需要容器将其右侧与页面的其余部分对齐。

这是我的实际代码：https ://codepen.io/cray_code/pen/erQJey

这就是我需要的。幻灯片内的图像应向左增长。蓝色背景是浏览器窗口：

<div class="bg-dark">
    <div class="container bg-white">
        <div class="slider">
            <div><img src="http://via.placeholder.com/2500x500" class="img-fluid"></div>
            <div><img src="http://via.placeholder.com/2500x500" class="img-fluid"></div>
            <div><img src="http://via.placeholder.com/2500x500" class="img-fluid"></div>
        </div>
    </div>
</div>

<script type="text/javascript">
$(document).ready(function(){
    $('.slider').slick({
        infinite: true,
        dots: true,
        arrows: false,
        draggable: false,
        fade:true,
        autoplay:true,
        autoplaySpeed: 4000,
        speed:1200,
    })
});
</script>

要使用 Boostrap 4 类，我想向 WooCommerce 分页添加一些类名称。不幸的是我找不到办法这样做。

我已经查过了pagination.php。它给了我以下代码：

$total   = isset( $total ) ? $total : wc_get_loop_prop( 'total_pages' );
$current = isset( $current ) ? $current : wc_get_loop_prop( 'current_page' );
$base    = isset( $base ) ? $base : esc_url_raw( str_replace( 999999999, '%#%', remove_query_arg( 'add-to-cart', get_pagenum_link( 999999999, false ) ) ) );
$format  = isset( $format ) ? $format : '';

if ( $total <= 1 ) {
    return;
}
?>
<nav class="woocommerce-pagination">
    <?php
        echo paginate_links( apply_filters( 'woocommerce_pagination_args', array( // …

我有一个产品列表，应该在其自己的行中显示变化。到目前为止，该代码运行良好。

但我不知道如何显示变体的 SKU。

这是我当前的代码：

$args = [
    'status'    => array('publish', 'draft'),
    'orderby'   => 'name',
    'order'     => 'ASC',
    'limit'     => -1,
];
$vendor_products = wc_get_products($args);

$list_array = array();

foreach ($vendor_products as $key => $product) {

    if ($product->get_type() == "variable") {

        foreach ($product->get_variation_attributes() as $variations) {
            foreach ($variations as $variation) {

                $list_array[] = array(
                    'SKU'      => $product->get_sku(),
                    'Name'     => $product->get_title() . " - " . $variation,
                );

            }
        }

    } else {

        $list_array[] = array(
            'SKU'      => $product->get_sku(),
            'Name'     => $product->get_title(),
        ); …

我想根据我的文章标题生成一个目录列表。

我已经找到了一个解决方案，可以从内容中获取所有标题并<h2>用<a>标签替换标签。

问题是，我还需要用<h3>链接替换标签并在链接列表中显示它们。

我的结果应该是这样的：

<ul>\n    <li><a href="#h2-1">I was a H2 headline</a></li>\n    <li>\n        <a href="#h2-2">Also a H2 headline</a>\n        <ul>\n            <li><a href="#h3-1">H3 headline</a></li>\n            <li><a href="#h3-2">Another H3 headline</a></li>\n        </ul>\n    </li>\n</ul>\n

我的问题是，某些标题可能有class=""元素，而其他标题则没有。目前，我用 删除了所有class=""内容str_replace。\n这不是最好的解决方案，但它对我有用，而且我对正则表达式知之甚少。

以下代码是我从内容中获取每个标题的函数。

我首先获取帖子的内容并将其存储在$content.

从那里我得到所有的标题（<h2>- <h6>）并将它们存储在$results这一行中：

preg_match_all(\'#<h[2-6]*[^>]*>.*?<\\/h[2-6]>#\',$content,$results);\n

目前我只使用<h2>标题，因为我不确定如何以智能方式做到这一点，并且我必须为每个标题级别重复以下几行：

$toc = str_replace(\'<h2\',\'<li><a\',$toc);\n$toc = str_replace(\'</h2>\',\'</a></li>\',$toc);\n

但我最大的问题是标题的嵌套。\n我怎样才能生成像上面这样的 HTML 代码？

同样重要的是：我如何处理不同的标题格式，例如：

\n …