Og 图像在 wordpress 中的 whatsapp 共享中不起作用

Question

最初，当我在 whatsapp 中分享博客post link，然后在网站 header.php 页面上添加新的元标记时，它可以正常工作，它仅适用于元标记 og 图像。最后我删除了它，但它不起作用。

我的更改（带有 og 图像的元标记）正在添加到此 header.php 页面，但共享图像 post 无法使用 link.please 帮助我。 header.php

<?php
/**
 * NewsGamer Theme
 *
 * Theme by: MipThemes
 * http://themes.mipdesign.com
 *
 * Our portfolio: http://themeforest.net/user/mip/portfolio
 * Thanks for using our theme!
 *
 */
?>

<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie"> <![endif]-->
<!--[if IE 9]>    <html class="no-js ie9 oldie"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" <?php language_attributes(); ?>> <!--<![endif]-->
<head>

    <!-- start:global -->
    <!-- <meta property="og:url" content="https://www.mediatenlive.com/webpage/"> -->

    <meta charset="<?php bloginfo( 'charset' );?>" />
    <!--[if IE]><meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"><![endif]-->
    <!-- end:global -->

    <!-- start:responsive web design -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />



    <!-- end:responsive web design -->
    <title><?php wp_title('|',true,'right'); ?></title>


    <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
    <?php
        // Theme Custom Meta
        MipThemeFramework_Util::miptheme_set_meta();
    ?>

    <!-- start:wp_head -->
    <?php wp_head(); ?>
    <!-- end:wp_head -->

    <!--[if lt IE 9]>
    <script src="<?php echo get_template_directory_uri(); ?>/assets/js/respond.js"></script>
    <script src="<?php echo get_template_directory_uri(); ?>/assets/js/html5shiv.js"></script>
    <![endif]-->

    <!-- RMS Code Start -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script>
    $(function(){
        $(".soc-media").prepend("<a href='https://play.google.com/store/apps/details?id=com.mediaten.media10'><i class='fa fa-android'></i></a>");
        $(".soc-media-sharing").prepend('<a class="btn-social btn-facebook btn-icon" href="whatsapp://send?text='+window.location.href+'" onclxick="window.open(this.href, \'weeklywin\', \'left=50,top=50,width=600,height=360,toolbar=0\'); return false;"><i class="fa fa-whatsapp fa-lg"></i><span id="smWhatsapp">whatsapp</span></a>');
    });

    /*$(document).click(function(event) { 
        //alert("Clicked");
        if(!$(event.target).closest('#mobile-menu').length && !$(event.target).closest('#nav-expander').length){
            //alert("outside menu=="+$('#mobile-menu').is(":visible")+"==");
            if($('#mobile-menu').is(":visible")) {
                //alert("visible");
                $('#mobile-menu').hide();
                $("#wall-ad-container").remove();
            }
        }        
    });*/
    </script>
    <!-- RMS Code End -->
</head>
<body <?php body_class() ?> itemscope itemtype="http://schema.org/WebPage">

    <!-- start:body-start -->
    <?php get_template_part('elements/body-start'); ?>
    <!-- end:body-start -->

    <!--RMS Code start:ad-top-banner -->
    <?php if (!wp_is_mobile()) echo"<div style='height:100px;align:center;' class='hidden-xs'></div>";get_template_part('elements/ad-wall-banner'); ?>

<!-- end:ad-top-banner -->

    <!-- start:page outer wrap -->
    <div id="page-outer-wrap">
        <!-- start:page inner wrap -->
        <div id="page-inner-wrap">

            <!-- start:page header mobile -->
            <?php get_template_part('elements/header-mobile'); ?>
            <!-- end:page header mobile -->

            <!-- start:page header -->
            <?php get_template_part('elements/header-navigation'); ?>
            <!-- end:page header -->

            <!-- start:page top grid -->
            <?php get_template_part('elements/top-grid'); ?>
            <!-- end:page top grid -->

            <!-- start:ad-side-banner -->
            <?php get_template_part('elements/ad-side-banner'); ?>
            <!-- end:ad-side-banner -->

            <!-- start:outside post header -->
            <?php get_template_part('elements/post-header-outside'); ?>
            <!-- end:outside post header -->

            <!-- start:ad-top-banner -->
            <?php get_template_part('elements/ad-top-banner'); ?>


            <!-- end:ad-top-banner -->

single.php

<?php
/**
 * NewsGamer Theme
 *
 * Theme by: MipThemes
 * http://themes.mipdesign.com
 *
 * Our portfolio: http://themeforest.net/user/mip/portfolio
 * Thanks for using our theme!
 *
 */

// load header
get_header();

// Get Page properties
$mip_current_page   = new MipThemeFramework_Page();

// Update Post View
MipThemeFramework_Post_Views::update_post_views($post->ID);

// Load Custom post headers
get_template_part( 'elements/parts/post-header-'. $mip_current_page->page_template .'' );
?>

    <!-- start:post-info-bar -->
    <?php if ($mip_current_page->enable_post_info_bar) get_template_part( 'elements/post-info-bar' ); ?>
    <!-- end:post-info-bar -->

    <!-- start:page content -->
    <div id="page-content" class="<?php echo esc_attr($mip_current_page->page_template_class); ?> clearfix">

        <?php
            //get sidebar
            if ( ($mip_current_page->page_sidebar_template == 'left-sidebar')&&(!wp_is_mobile()) ) get_sidebar();
        ?>

        <!-- start:main -->
        <div id="main" class="main article">
            <!-- start:article post -->
            <article id="post-<?php echo esc_attr($post->ID); ?>" <?php post_class('article-post clearfix'); ?> <?php echo MipThemeFramework_Util::get_item_scope( $mip_current_page->review_post ); ?>>
            <?php
                if (have_posts()) :
                    // Get Template
                    get_template_part( 'elements/'. $mip_current_page->page_template .'' );
                else :
                    // No Posts
                    esc_html_e('No posts.', 'newsgamer');
                endif;
            ?>
            </article>
            <!-- end:article post -->
        </div>
        <!-- end:main -->

        <?php
            //get sidebar
            if ( ($mip_current_page->page_sidebar_template == 'right-sidebar')||( ($mip_current_page->page_sidebar_template == 'left-sidebar')&&(wp_is_mobile()) ) ) get_sidebar();
        ?>

    </div>
    <!-- end:page content -->

<?php
    // load footer
    get_footer();
?>

1.Normally 分享时 post 我是这样的 enter image description here 2.when 添加带有任何图像内容的元标记图像 link 我是这样的 enter image description here 表示获取任何 post 的图像。但我需要不同的图像 (posts) 和不同的 posts。请任何人帮助我。

Answer 1

在您的 functions.php

中添加此功能

function doctype_opengraph($output) {
    return $output . '
    xmlns:og="http://opengraphprotocol.org/schema/"
    xmlns:fb="http://www.facebook.com/2008/fbml"';
}
add_filter('language_attributes', 'doctype_opengraph');
function fb_opengraph() {
    global $post;

    if(is_single()) {
        if(has_post_thumbnail($post->ID)) {
            $img_src = wp_get_attachment_image_src(get_post_thumbnail_id( $post->ID ), 'thumbnail');
        } else {
            $img_src = get_stylesheet_directory_uri() . '/img/opengraph_image.jpg';
        }
        if($excerpt = $post->post_excerpt) {
            $excerpt = strip_tags($post->post_excerpt);
            $excerpt = str_replace("", "'", $excerpt);
        } else {
            $excerpt = get_bloginfo('description');
        }
        ?>

    <meta property="og:title" content="<?php echo the_title(); ?>"/>
    <meta property="og:description" content="<?php echo $excerpt; ?>"/>
    <meta property="og:type" content="article"/>
    <meta property="og:url" content="<?php echo the_permalink(); ?>"/>
    <meta property="og:site_name" content="<?php echo get_bloginfo(); ?>"/>
    <meta property="og:image" content="<?php echo $img_src[0]; ?>"/>

<?php
    } else {
        return;
    }
}
add_action('wp_head', 'fb_opengraph', 5);

这解决了我的问题！最初，元标记位于每个标记下方，并且没有获取图像！当我尝试这个时，元标记移动到所有其他标记之上，然后图像被添加到 WhatsApp 中。希望这个方法对你有帮助！

Answer 2

我在 OMG Diary News; 上遇到了同样的问题，当我在 WhatsApp 上分享帖子时，我的缩略图没有显示。将图像大小减小到小于 150kbs 永久解决了这个问题。希望这对你也有用。

Og 图像在 wordpress 中的 whatsapp 共享中不起作用

Og Image is not working in whatsapp share in wordpress

wordpress

whatsapp