WordPress poster auto-generation function: one click to generate image sharing with QR code

In order to help many blog type personal websites or official websites to share their contents more conveniently, a simple and efficient one-click poster generation function has been designed. With this feature, you can easily generate image sharing posters with QR codes, making your content easier to spread and promote. With one click operation, you can generate beautiful posters to make your blog or official website content more attractive and attract more readers to pay attention and share. Example:

So what do we have to do to make this work?

Prep: Unzip the following zip file and copy all the files you get to the theme folder

Step 1: Modify the theme file functions.php by adding the following code at the end of it

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

Step 2: Modify the theme file single-product.php

Find the following code (near line 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>Share Poster</a>

replace with

<a class="xs-btn c-btn poster-trigger" data-width="800" data-height="480" href="javascript:;" data-toggle="modal" data-target="#dz-poster-modal" data-id="<?php global $post; echo $post->ID;?>"><i class="iconfont icon-shipin mr-10"></i>Share Poster</a>

Step 3: Modify the theme file footer.php

Find the following code (near line 34)

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

Add the following code to it

<div class="modal fade" id="dz-poster-modal" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
        <div class="modal-content">
            <button style="position:absolute;right:0;top:0;padding: 15px;line-height: 16px;z-index:1" type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
            <div class="modal-body p-0" style="min-height:106px">
                <div class="d-flex justify-content-center p-5">
                    <span class="spinner-border" style="color:rgba(0,0,0,0.2)" role="status" aria-hidden="true"></span>
                </div>
                <div class="dz-pst-img"></div>
            </div>
        </div>
    </div>
</div>

Step 4: Modify the theme file js/xs.js

Add the following code at the end of it

(function($) {
  var inited = 0
  $('.poster-trigger').on('click', function() {
    var $_this = $(this)
    if($_this.hasClass('disabled')) {
      if($_this.hasClass('disabled')) {
    }
    $_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: { tbdz.ajax_url, type: 'GET', }
      data: {
        action: 'get_poster',
        id: id
      }, success: function(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">Poster generation failed, please try again</p>')
        } else if(data.poster) {
          inited = 1
          $('#dz-poster-modal .dz-pst-img').append('<img class="img-fluid" src="'+data.poster+'">')
        }
      }
    })
  })
})(jQuery);

Attention:The font currently used for the poster is Founder Black Simplified, which is a free and commercially available font. If you want to change the font, just replace the existing ttf.ttf file. In addition, the logo and featured images in the poster are currently only supported in jpg, jpeg and png formats. If you find that the images in the poster can't be generated, please check if the images are in the correct format to make sure they meet our requirements. This way, you can easily create a poster that matches your style.

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: info@361sale.com
④ Working hours: Monday to Friday, 9:30-18:30, holidays off