如何在 WooCommerce 类别页面中添加元标题和元描述

Question

我正在为我的网站使用元标题和元描述的多合一 SEO 包插件。我的网站具有 WooCommerce 和一体式 SEO 包，不支持 WooCommerce 类别页面的元标题和元描述。

所以我使用下面的代码在管理区域中为 WooCommerce 类别的元标题和元描述创建自定义字段。

function wh_taxonomy_add_new_meta_field() {
    ?>

    <div class="form-field">
        <label for="wh_meta_title"><?php _e('Meta Title', 'wh'); ?></label>
        <input type="text" name="wh_meta_title" id="wh_meta_title">
        <p class="description"><?php _e('Enter a meta title, <= 60 character', 'wh'); ?></p>
    </div>
    <div class="form-field">
        <label for="wh_meta_desc"><?php _e('Meta Description', 'wh'); ?></label>
        <textarea name="wh_meta_desc" id="wh_meta_desc"></textarea>
        <p class="description"><?php _e('Enter a meta description, <= 160 character', 'wh'); ?></p>
    </div>
    <?php
}

//Product Cat Edit page
function wh_taxonomy_edit_meta_field($term) {

    //getting term ID
    $term_id = $term->term_id;

    // retrieve the existing value(s) for this meta field.
    $wh_meta_title = get_term_meta($term_id, 'wh_meta_title', true);
    $wh_meta_desc = get_term_meta($term_id, 'wh_meta_desc', true);
    ?>
    <tr class="form-field">
        <th scope="row" valign="top"><label for="wh_meta_title"><?php _e('Meta Title', 'wh'); ?></label></th>
        <td>
            <input type="text" name="wh_meta_title" id="wh_meta_title" value="<?php echo esc_attr($wh_meta_title) ? esc_attr($wh_meta_title) : ''; ?>">
            <p class="description"><?php _e('Enter a meta title, <= 60 character', 'wh'); ?></p>
        </td>
    </tr>
    <tr class="form-field">
        <th scope="row" valign="top"><label for="wh_meta_desc"><?php _e('Meta Description', 'wh'); ?></label></th>
        <td>
            <textarea name="wh_meta_desc" id="wh_meta_desc"><?php echo esc_attr($wh_meta_desc) ? esc_attr($wh_meta_desc) : ''; ?></textarea>
            <p class="description"><?php _e('Enter a meta description', 'wh'); ?></p>
        </td>
    </tr>
    <?php
}

add_action('product_cat_add_form_fields', 'wh_taxonomy_add_new_meta_field', 10, 1);
add_action('product_cat_edit_form_fields', 'wh_taxonomy_edit_meta_field', 10, 1);

// Save extra taxonomy fields callback function.
function wh_save_taxonomy_custom_meta($term_id) {

    $wh_meta_title = filter_input(INPUT_POST, 'wh_meta_title');
    $wh_meta_desc = filter_input(INPUT_POST, 'wh_meta_desc');

    update_term_meta($term_id, 'wh_meta_title', $wh_meta_title);
    update_term_meta($term_id, 'wh_meta_desc', $wh_meta_desc);
}

add_action('edited_product_cat', 'wh_save_taxonomy_custom_meta', 10, 1);
add_action('create_product_cat', 'wh_save_taxonomy_custom_meta', 10, 1);

以上代码在管理区域中完美运行。但是如何在类别页面的前端显示输入的元标题和元描述？

我应该在 functions.php 文件中添加什么挂钩，以便它显示在前端的类别页面中？

Answer 1

// Display details on product category archive pages
add_action(
    'woocommerce_after_shop_loop', 
    'wpm_product_cat_archive_add_meta'
);

function wpm_product_cat_archive_add_meta() {
    $t_id = get_queried_object()->term_id;
    $term_meta = get_option( "taxonomy_$t_id" );
    $term_meta_content = $term_meta['custom_term_meta'];
    if ( $term_meta_content != '' ) {
        echo '<div class="woo-sc-box normal rounded full">';
            echo apply_filters( 'the_content', $term_meta_content );
        echo '</div>';
    }
}

Answer 2

您可以使用以下钩子在前端显示自定义元标题和元描述。

add_action('woocommerce_after_shop_loop','display_custom_meta_info');
    function display_custom_meta_info(){
       global $wp_query;
       $cat_obj = $wp_query->get_queried_object();
       $title_meta = get_term_meta($cat_obj->term_id
    ,'wh_meta_title',true);
       $desc_meta = get_term_meta($cat_obj->term_id
    ,'wh_meta_desc',true);

      $woocommerce_taxonomy_archive_description = $title_meta.$desc_meta;

return $woocommerce_taxonomy_archive_description;

    }

您始终可以按照 template structure

使用其他挂钩来修改元数据的显示

Answer 3

As you are using All in One SEO, so none of the wp default hook/filter will work as this plugin modify all the title, so you have to use aioseop_title, filter for Meta Title. and for Meta description you have to use wp_head.

元标题

add_filter('aioseop_title', 'wh_alter_pro_cat_title', 1);

function wh_alter_pro_cat_title($title)
{
    global $paged;
    if (is_product_category())
    {
        $page = get_query_var('page');
        if ($paged > $page)
        {
            $page = $paged;
        }

        $term = get_queried_object();
        $title = get_term_meta($term->term_id, 'wh_meta_title', true);
        $title = !empty($title) ? $title : $term->name;
        $page_part = (!empty($page) && ($page > 1)) ? ' | ' . 'Page ' . $page : '';
        $title .= ' | ' . get_bloginfo('name') . $page_part;
    }
    return $title;
}

对于元描述

add_action('wp_head', 'wh_alter_pro_cat_desc', 5);

function wh_alter_pro_cat_desc()
{
    if (is_product_category())
    {
        $term = get_queried_object();
        $productCatMetaDesc = get_term_meta($term->term_id, 'wh_meta_desc', true);
        if (empty($productCatMetaDesc))
            return;

        ?>
        <meta name="description" content="<?= $productCatMetaDesc; ?>">
        <?php
    }
}

所有代码都在您的活动 child 主题（或主题）的 functions.php 文件中。或者在任何插件 php 文件中。
代码已经过测试并且有效。

有帮助linkAdding custom field to product category in WooCommerce

如何在 WooCommerce 类别页面中添加元标题和元描述

How to add Meta Title and Meta Description in WooCommerce category page

php

wordpress

woocommerce

hook-woocommerce