Og:Image的目标WooCommerce产品库图像(而不是特色图像)

时间:2021-02-25 作者:Daniel

我正在使用以下代码在函数中设置开放图元数据。php

它非常适合选择特色图像,但是我想将其设置为使用产品库图像(这对社交媒体营销更好)。这里有一个更具体的屏幕抓图:https://snipboard.io/buvHfk.jpg

如何修改下面的代码以定位第一张WooCommerce gallery图像?我在这上面找不到任何东西。

function insert_fb_in_head() {
    global $post;
    if ( !is_singular()) //if it is not a post or a page
        return;
        echo \'<meta property="og:title" content="\' . get_the_title() . \'"/>\';
        echo \'<meta property="og:type" content="article"/>\';
        echo \'<meta property="og:url" content="\' . get_permalink() . \'"/>\';
        echo \'<meta property="og:site_name" content="My Website"/>\';
    if( isset( $gallery_image_ids[1] ) ) { //the post does not have featured image, use a default image
        $default_image="https://www.website.com"; //replace this with a default image on your server or an image in your media library
        echo \'<meta property="og:image" content="\' . $default_image . \'"/>\';
    }
    else{
        $thumbnail_src = wp_get_attachment_image_url( $gallery_image_ids[1], \'single-post-thumbnail\');
        echo \'<meta property="og:image" content="\' . esc_attr( $thumbnail_src[0] ) . \'"/>\';
    }
    echo "
";
}
add_action( \'wp_head\', \'insert_fb_in_head\', 5 );
提前感谢您的帮助。

2 个回复
SO网友:Coder At Heart

您需要在其中一个WooCommerce产品对象上使用这些方法

例如:

function insert_fb_in_head() {
    global $post;
    if ( !is_singular()) //if it is not a post or a page
        return;
        echo \'<meta property="og:title" content="\' . get_the_title() . \'"/>\';
        echo \'<meta property="og:type" content="article"/>\';
        echo \'<meta property="og:url" content="\' . get_permalink() . \'"/>\';
        echo \'<meta property="og:site_name" content="My Website"/>\';
    if( isset( $gallery_image_ids[1] ) ) { //the post does not have featured image, use a default image
        $default_image="https://www.website.com"; //replace this with a default image on your server or an image in your media library
        echo \'<meta property="og:image" content="\' . $default_image . \'"/>\';
    }
    else{
        $product = wc_get_product($post->ID);
        $image = wp_get_attachment_image_src($product->get_image_id(), \'full\');
        echo \'<meta property="og:image" content="\' . $image . \'"/>\';
    }
    echo "
";
}
add_action( \'wp_head\', \'insert_fb_in_head\', 5 );

SO网友:Daniel

感谢您的帮助,但该代码中的某些内容破坏了网站(可能是我们中的一个人的小疏忽)。:)

然而,我确实在另一块板上找到了一个很好的解决方案,我想在这里分享它,以帮助其他人。

贷记至helgatheviking 来自WooCommerce社区的Slack。

function insert_fb_in_head() {
    global $post;
    // If it is not a post or a page.
    if ( ! is_singular() ) { 
        return;
    }
    echo \'<meta property="og:title" content="\' . get_the_title() . \'"/>\';
    echo \'<meta property="og:type" content="article"/>\';
    echo \'<meta property="og:url" content="\' . get_permalink() . \'"/>\';
    echo \'<meta property="og:site_name" content="My Website"/>\';
    $gallery_image_ids = get_post_meta( $post->ID, \'_product_image_gallery\', true );
    $gallery_image_ids = wp_parse_id_list( $gallery_image_ids );
    // The product has product gallery, use a default image.
    if( ! empty ( $gallery_image_ids ) ) {
        $thumbnail_src = wp_get_attachment_image_url( current( $gallery_image_ids ), \'single-post-thumbnail\' );
        echo \'<meta property="og:image" content="\' . esc_attr( $thumbnail_src ) . \'"/>\';     
    } else {
        // The post does not have featured image, use a default image.
        $default_image="https://www.website.com"; //replace this with a default image on your server or an image in your media library
        echo \'<meta property="og:image" content="\' . $default_image . \'"/>\';
    }
}
add_action( \'wp_head\', \'insert_fb_in_head\', 5 );
再次感谢大家。

相关推荐

是否使WordPress图库(.Gallery-Item)具有响应性?

库的短代码:[gallery link=\"file\" columns=\"5\" size=\"medium\"]我在一个网站的内页上使用了一个5列的图库,显然当该网站对移动设备甚至平板设备做出响应时,图库中的图像会保持默认的样式width: 20%; 看起来太小了。我尝试添加媒体查询样式以增加百分比宽度,但WP仍然应用列类.gallery-columns-5.理想情况下,桌面上有5列图像,平板电脑有3列,移动设备有1列。有谁知道有什么好办法吗?/ ## Gallery -----------