Share a WordPress poster auto-generation feature with you!

One click to generate image sharing with QR code should be used by those who do blogging and other resource sites!

It is also relatively simple to implement this feature.

前期准备：解压以下zip文件，将获得的全部文件复制到主题文件夹中

第一步：修改主题文件 functions.php 在其最后加入以下代码

require_once get_template_directory() . '/poster/index.php';

第二步：修改主题文件 single-product.php

找到下面的代码（在42行附近）

<a class="xs-btn c-btn" data-fancybox="video-gallery" data-width="800" data-height="480" href="/en/</?php the_field('product-jiaocheng')?>"><i class="iconfont icon-shipin mr-10"></i>分享海报</a>

把它替换成

第三步：修改主题文件 footer.php

找到下面这些代码（34行附近）

<div class="apply clearfix bg-white position-fixed rounded-lg overflow-hidden d-block d-xl-none">

在其上面加入以下代码

第四步：修改主题文件 js/xs.js

在其最后加入以下代码

(function($) {
  var inited = 0
  $('.poster-trigger').on('click', function() {
    var $_this = $(this)
    if($_this.hasClass('disabled')) {
      return
    }
    $_this.addClass('disabled')
    if(inited) {
      poster_toggle_poster_md(1)
      $_this.removeClass('disabled')
      return
    }

    var id = $_this.attr('data-id')
    if(!id) {
      $_this.removeClass('disabled')
      return
    }

    $.ajax({
      url: tbdz.ajax_url,
      type: 'GET',
      dataType: 'json',
      data: {
        action: 'get_poster',
        id: id
      },
      success: function(data) {
        $('#dz-poster-modal .justify-content-center').remove()
        $_this.removeClass('disabled')
        if(!data.result) {
          $('#dz-poster-modal .dz-pst-img').append('<p class="dz-tip">海报生成失败，请重试</p>')
        } else if(data.poster) {
          inited = 1
          $('#dz-poster-modal .dz-pst-img').append('<img class="img-fluid" src="'+data.poster+'">')
        }
      }
    })
  })
})(jQuery);