Função de geração automática de cartazes WordPress: um clique para gerar partilha de imagens com código QR

为了帮助众多博客类型的个人网站或官网更便捷地分享内容,设计了一种简单而高效的一键生成海报功能。通过这个功能,你可以轻松生成带有二维码的图片分享海报,让你的内容更易于传播和推广。一键操作,即可生成精美海报,让你的博客或官网内容更具吸引力,吸引更多读者关注和分享。例如:

Função de geração automática de cartazes WordPress: um clique para gerar partilha de imagens com código QR
Função de geração automática de cartazes WordPress: um clique para gerar partilha de imagens com código QR

那我们要怎么做才能实现这个功能呢?

前期准备:解压以下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="/pt/</?php the_field('product-jiaocheng')?>"><i class="iconfont icon-shipin mr-10"></i>分享海报</a>

替换成

<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>分享海报</a>
Função de geração automática de cartazes WordPress: um clique para gerar partilha de imagens com código QR

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

找到以下代码(34行附近)

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

在其上面加入以下代码

<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>

第四步:修改主题文件 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);

Atenção:目前海报使用的字体是方正黑体简体,这是一种免费且可商用的字体。如果你想要更换字体,只需要替换掉现有的ttf.ttf文件即可。此外,海报中的logo和特色图片目前只支持jpg、jpeg和png这三种格式。如果你发现海报中的图片无法生成,请检查一下图片格式是否正确,确保它们符合我们的要求。这样,你就能轻松打造出符合自己风格的海报了。

Função de geração automática de cartazes WordPress: um clique para gerar partilha de imagens com código QR

Contactar-nos
Não consegue ler o artigo? Contacte-nos para obter uma resposta gratuita! Ajuda gratuita para sítios pessoais e de pequenas empresas!
Tel: 020-2206-9892
QQ咨询:1025174874
(iii) Correio eletrónico: info@361sale.com
Horário de trabalho: de segunda a sexta-feira, das 9h30 às 18h30, com folga nos feriados
Publicado por photon fluctuations, retweetado com atribuição:https://www.361sale.com/pt/7871/

Como (4)
Anterior 2024年 4月 15日 pm2:54
Seguinte 2024年 4月 16日 am10:42

Recomendado

Deixe um comentário

O seu endereço de email não será publicado. Campos obrigatórios marcados com *

Contactar-nos

020-2206-9892

QQ咨询:1025174874

Correio eletrónico: info@361sale.com

Horário de trabalho: de segunda a sexta-feira, das 9h30 às 18h30, com folga nos feriados

Serviço ao cliente WeChat
Para facilitar o registo e o início de sessão de utilizadores globais, cancelámos a função de início de sessão por telefone. Se tiver problemas de início de sessão, contacte o serviço de apoio ao cliente para obter assistência na ligação do seu endereço de correio eletrónico.