首页 文章

如何在WooCommerce类别页面中缩短（截断）长产品 Headers ？

提问于
浏览 次
1

我想在WooCommerce类别页面中用“......”截断较短 Headers 中的长产品 Headers . 如果我是对的，类别页面中的产品将通过“content-product.php”的循环显示 .

代码是：

<li<?php echo $class ?>>
<?php do_action( 'woocommerce_before_shop_loop_item' ); ?>

<a href="<?php the_permalink(); ?>">

    <div class="thumbnail">     
        <?php do_action( 'woocommerce_before_shop_loop_item_title' ); ?>

        <?php if ( yiw_get_option( 'shop_show_name' ) ) : ?>
            <strong class="<?php echo $title_position; ?>">
                <?php the_title(); ?>
            </strong>
        <?php endif ?>
    </div>

    <?php do_action( 'woocommerce_after_shop_loop_item_title' ); ?>
</a>

<?php do_action( 'woocommerce_after_shop_loop_item' ); ?>
</li>

我找到了很多PHP函数来缩短一个长字符串（这个看起来很简单http://shrtnr.us/r0yfwg），但我无法将该函数应用于 the_title() ...

如果有人能让我走上正确的道路，我将不胜感激 . 提前致谢 ：）

php wordpress woocommerce

6 回答

  • 1

    这是一个棘手的问题，因为你必须弄清楚你正在调用的the_title（）函数实际上是什么 . 最好的猜测是做类似的事情：$ title = the_title（）;然后检查$ title里面的内容，如果它只是纯文本，那么你可以使用截断函数，就像你提到的那样 . 如果它不仅仅是纯文本，您必须先过滤掉要截断的实际部分 .

    回复于
  • 1

    我按照Flobbo的建议通过jQuery找到了解决方案 .

    首先我改变了： <strong class="<?php echo $title_position; ?>"><?php the_title(); ?></strong>

    至： <span class="productname"><strong class="<?php echo $title_position; ?>"><?php the_title(); ?></strong></span>

    我的jQuery代码（放在 </body> 之前是：

    $(document).ready(function() {
    $('span.productname').each(function() {
        var title = $.trim($(this).text());
        var max = 31;

        if (title.length > max) {
            var shortText = jQuery.trim(title).substring(0, max).split(" ").slice(0, -1).join(" ") + "...";
            $(this).html('<strong class="below-thumb">' + shortText + '</strong>');
        }
    });
});

    多数民众赞成的 . 它有点DIY，但它的工作:)

    EDIT :

    上面的jQuery函数将截断关于单词和空格的字符串（不剪切单词） . 但是如果你不关心单词，你可以修改如下函数：

    $(document).ready(function() {
    $('span.productname').each(function() {
        var title = $.trim($(this).text());
        var max = 30;

        if (title.length > max) {
            var shortText = jQuery.trim(title).substring(0, max - 3) + '...';
            $(this).html('<strong class="below-thumb">' + shortText + '</strong>');
        }
    });
});
    回复于
  • 0

    请按照此处给出的使用以下代码，它工作正常 - shorten-woocommerce-product-titles

    只需将以下代码放在主题的functions.php及其完成中 .

    // Automatically shortens WooCommerce product titles on the main shop, category, and tag pages 
// to a specific number of words
function short_woocommerce_product_titles_words( $title, $id ) {
  if ( ( is_shop() || is_product_tag() || is_product_category() ) && get_post_type( $id ) === 'product' ) {
    $title_words = explode(" ", $title);
    if ( count($title_words) > 5 ) { // Kicks in if the product title is longer than 5 words
      // Shortens the title to 5 words and adds ellipsis at the end
      return implode(" ", array_slice($title_words, 0, 5)) . '...';
    } else {
      return $title; // If the title isn't longer than 5 words, it will be returned in its full length without the ellipsis
    }
  } else {
    return $title;
  }
}
add_filter( 'the_title', 'short_woocommerce_product_titles_words', 10, 2 );
    回复于
  • 0

    一个非常常见的问题：有时，WooCommerce产品 Headers 太长了 . 除此之外，您可能还希望保持店铺体验的一致性，并使所有WooCommerce产品的长度相同 . 这就是你如何做到的 .

    您可以使用简单的CSS而不是长PHP代码 . 这将100％致力于最新的woocommerce .

    .shop-products.products .product .product-wrapper .product-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
    回复于
  • 1
    function truncate($text, $limit) {
if (str_word_count($text, 0) > $limit) {
    $words = str_word_count($text, 2);
    $pos = array_keys($words);
    $text = substr($text, 0, $pos[$limit]) . '...';
}
return $text;
}

    然后你可以这样做：

    $title = get_the_title();

  <?php echo truncate($title, <w/e number>); ?>

    将函数放入functions.php中，这样您就可以在任何地方使用它 .

    回复于
  • 1

    有一个插件用于此目的：Woo Title Limit

    回复于

相关问题