WordPress主题实现文章生成封面图片分享

不知不觉,很多主题都支持文章生成封面图片分享,很多主题都慢慢的更新了这个功能,不得不说,体验下来,还是很友好的!大概的效果如下图:

WordPress主题实现文章生成封面图片分享
注意事项

需要实现文章生成封面图片分享,您还需要注意以下事项:

PHP 必须开启 GD 库,绘制海报图片要用到。如何开启,大家自行百度
必须引入 jQuery ,javascript 中 AJAX 提交到 admin-ajax.php 处理要用到

详细步骤

一、好了,下面简单说下使用方法,添加下面代码到文章适当位置,一般位于主题 single.php 文件里,自己找个合适位置添加如下代码(前端按钮):生成海报

二、添加下面代码到网页底部文件中,位于主题下 footer.php 文件,建议添加到 footer 代码结束后

三、在 functions.php 文件中添加如下代码(海报生成):

 

  1. //提交到wordpress自带的ajax处理
  2. $(document).on('click touchstart', '.btn-bigger-cover', function (event) {
  3. event.preventDefault();
  4. var bigger_cover = $('.poster-image img'),
  5. btn_bigger_cover = $('#bigger-cover');
  6. if (bigger_cover.hasClass('load-poster-img')) {
  7. $.ajax({
  8. //url: jsui.ajax_url,
  9. url: '/wp-admin/admin-ajax.php', // 这地方改成自己的 admin-ajax.php 地址
  10. type: 'POST',
  11. dataType: 'json',
  12. data: btn_bigger_cover.data(),
  13. }).done(function (data) {
  14. if (data.s == 200) {
  15. bigger_cover.attr('src', data.src);
  16. $('.poster-share-weibo').attr('href', data.share_weibo);
  17. $('.poster-share-qzone').attr('href', data.share_qzone);
  18. $('.poster-share-qq').attr('href', data.share_qq);
  19. $('.poster-share-renren').attr('href', data.share_renren);
  20. $('.poster-down').attr('href', data.src);
  21. bigger_cover.removeClass('load-poster-img');
  22. $('.image-loading').remove();
  23. else {
  24. alert( data.m );
  25. }
  26. }).fail(function () {
  27. alert('Error:网络错误,请稍后再试!');
  28. })
  29. }
  30. $('.poster-share').css({'opacity':'1','visibility':'inherit'});
  31. });
  32. //关闭窗口
  33. $(document).on('click touchstart','.poster-close',function() {
  34. $('.poster-share').css({'opacity':'0','visibility':'hidden'});
  35. });

按照以上步骤慢慢操作,基本就可以实现了!
扩展应用:

如果你是的主题使用了 OptionsFrameWork 框架搭建的后台设置面板,那么下面的步骤将有助于你生成一些后台控制按钮。将以下代码添加到主题 options.php 文件中去(部分主题可能不叫这名):

  1. $options[] = array(
  2. 'name' => __( '蝈蝈海报', 'QGG' ),
  3. 'type' => 'heading'
  4. );
  5. // 分享海报
  6. $options[] = array(
  7. 'name' => __('海报功能开启', 'QGG'),
  8. 'id' => 'poster_share_open',
  9. 'std' => true,
  10. 'desc' => __('开启', 'QGG'),
  11. 'type' => 'checkbox');
  12. $options[] = array(
  13. 'name' => __( '默认头部大图', 'QGG' ),
  14. 'desc' => __( '上传一张显示在封面顶部的大图', 'QGG' ),
  15. 'id' => 'poster_default_img',
  16. 'std' => '',
  17. 'type' => 'upload'
  18. );
  19. $options[] = array(
  20. 'name' => __( '左下角LOGO', 'QGG' ),
  21. 'desc' => __( '上传一张显示在封面底部的LOGO', 'QGG' ),
  22. 'id' => 'poster_logo',
  23. 'std' => '',
  24. 'type' => 'upload'
  25. );
  26. $options[] = array(
  27. 'name' => __( '网站宣传语', 'QGG' ),
  28. 'desc' => __( '显示在LOGO下方的一句宣传语', 'QGG' ),
  29. 'id' => 'poster_desc',
  30. 'std' => '',
  31. 'type' => 'text'
  32. );
  33. $options[] = array(
  34. 'name' => __( '右下角二维码', 'QGG' ),
  35. 'desc' => __( '开启后将再封面图的右下角现在当前文章的二维码', 'QGG' ),
  36. 'id' => 'share_poster_img_qrcode',
  37. 'std' => false,
  38. 'type' => 'checkbox'
  39. );

将 single.php 文件中的调用代码调整为如下代码:

 

生成海报

 

取消 poster.php 文件中如下代码的注释(大概在 342 行位置):

  1. // 获取海报底部二维码图片
  2. //if(QGG_Options('share_poster_img_qrcode')){
  3. $qrcode_img = get_template_directory_uri().'/poster/functions/qrcode.php?data='.get_the_permalink($post_id);
  4. //}else{
  5. //$qrcode_img = NULL;
  6. //}
注意:本段内容隐藏解压密码/提取密码必须成功评论后刷新获取!

回复本文刷新本页

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有M币奖励和额外收入!

模板下载吧 快速入门 WordPress主题实现文章生成封面图片分享 https://www.mbxzb.com/blog/file/rumen/14523.html

从明天起,做一个幸福的人,喂马、劈柴、周游世界…

常见问题
  • 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用
查看详情

相关文章

评论
4 条评论
点击按钮快速添加回复内容: 支持 高兴 激动 给力 加油 苦寻 生气 回帖 路过 威武 友军 顶贴
2022-04-15 01:01

支持模板下载吧,以后经常来

2020-04-03 18:47

支持模板下载吧,以后经常来

2020-03-09 10:49

支持模板下载吧,以后经常来

签到成功!签到时间:上午9:44:41,每日打卡,生活更精彩哦~

官方客服团队

为您解决烦忧 - 24小时在线 专业服务