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

半岛未凉° 2019-07-06 快速入门 75 NO 本文共3016个字,预计阅读需要8分钟。
  • 文章介绍
  • 快速入门
  • 增值服务

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


注意事项

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

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. //}
注意:本段内容隐藏解压密码/提取密码必须成功评论后刷新获取!

回复本文刷新本页

上一篇:

下一篇:

WordPress主题实现文章生成封面图片分享:等您坐沙发呢!
大牛,别默默的看了,快来点评一下吧!:)。

您必须登录后才能发表评论哦!:)

站内登录 QQ登录 微博登录
加载中...
wordpress自适应高级图片shejigh主题

Hi, 如果你对这款模板有疑问,可以跟我联系哦!

联系作者

模板下载吧,累计帮助1000+用户成功建站,为草根创业提供助力!

立刻开启你的建站之旅
现在加入模板下载吧,注册一个账号
  • 模板下载吧拥有海量网站模板及源码,站长亲测干净无后门。

  • 注册即能下载免费模板栏目资源,帮您更快的完成网站建设。

  • 每日更新模板资源,每日精品推荐,及时获取最新模板资源流行去向。

  • 完美的售后服务,帮助草根站长、企业等成功建站。

  • 将您最爱的资源收藏,建立自己的资源库,并与朋友分享。

喜欢我嘛?喜欢就按“ctrl+D”收藏我吧!♡