有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

WordPress如何自定义标题、图片、链接分享到微信(无需公众号)

seo cat 1年前 (2021-06-14) 203次浏览 已收录 0个评论 扫描二维码

方法一:

大家经常通过微信分享信息,特别是公众号文章,可以显示清晰的标题、摘要描述、自定义图片和链接,分享效果很舒服,那么如何像分享公众号文章那样优雅的发送自己的网站文章呢?

WordPress如何自定义标题、图片、链接分享到微信(无需公众号)

平时更新了文章,都会通过微信发给朋友们阅读,之前都是直接复制链接发过去,直接却不直观,那么如何像公众号分享效果那样优雅的转发呢?

未添加代码前微信分享原始效果:

WordPress如何自定义标题、图片、链接分享到微信(无需公众号)

添加代码后自定义效果:

WordPress如何自定义标题、图片、链接分享到微信(无需公众号)

具体实现代码也很简洁,省去了网上常见的需要在微信公众号里进行设置、认证等环节,当然这段代码在核心处理上还是使用了微信的基础规则,想了解更多的话可以去阅读下微信的开发者文档。在实际使用时也很简单,只需要把下列代码 复制到你的网站源代码里即可,一般放在<head></head>之间即可,将代码中标注的地方换成你自己想要显示的标题、描述、链接、图片即可,无论是分享微信消息还是朋友圈发布均可实现自定义效果。

    <!-- 微信转发代码 -->
    <script>
    /** 微信接口 **/
    var appid = '';  // 应用id,如果有可以填,没有就留空
    var descContent = '山猫博客';  // 分享后的描述信息
    var shareTitle = '山猫博客';  // 分享后的标题
    var imgUrl = 'http://www.3zschool.com/wp-content/uploads/2018/10/logo_50_50.jpg';  // 分享后展示的一张图片
    var lineLink = window.location.href+'?fromtitle='+shareTitle; // 点击分享后跳转的页面地址
    // 当微信内置浏览器完成内部初始化后会触发WeixinJSBridgeReady事件。
    document.addEventListener('WeixinJSBridgeReady', function onBridgeReady() {
    // 发送给好友
    WeixinJSBridge.on('menu:share:appmessage', function(argv){
    WeixinJSBridge.invoke('sendAppMessage',{
    	 "appid": appid,
    	 "img_url": imgUrl,
    	 "img_width": "200",
    	 "img_height": "200",
    	 "link": lineLink,
    	 "desc": descContent,
    	 "title": shareTitle
    	}, function(res) {
    	});
    	});
    	}, false);
    </script>

使用这段代码有个注意事项,就是网站的域名需要备案,没有备案的域名分享会有问题,这可能是这段简化代码的硬伤吧。

方法二:

我们在制作好WordPress网站以后,希望通过微信朋友圈分享给大家。但是发现这样分享到微信朋友圈是没有小图标的。如何在链接前增加吸引人的图片呢?

1、将以下代码粘贴到functions.php文件中。

function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
 
//获取文章中第一张图片的路径并输出
$first_img = $matches [1] [0];
 
//如果文章无图片,获取自定义图片
 
if(empty($first_img)){ //Defines a default image
$first_img = "/你的图片路径";
 
//请自行设置一张default.jpg图片
}
 
return $first_img;
}

2、在网页的头部加上以下代码,图片路径自行修改。

<head>
<div id="wx_pic" style="margin:0 auto;display:none;width:300px;height:300px;">
<img src="<?php echo catch_that_image() ?> " width="300px" height="300px"> 
</div> 
</head>

3、制作像素是 300*300px的图片,命名为default.jpg。将图片放到媒体库。

WordPress如何自定义标题、图片、链接分享到微信(无需公众号)

300px*300px

4、保存好文件后,就可以分享到朋友圈了。此时分享的网页链接就会有小图片显示了。

注意事项:尺寸必须是300*300像素,否则在iphone手机上很可能显示不出来。

喜欢 (0)
cat
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址