Para ajudar muitos sítios Web pessoais do tipo blogue ou sítios Web oficiais a partilhar os seus conteúdos de forma mais conveniente, foi concebida uma função simples e eficiente de geração de cartazes com um clique. Com esta função, pode facilmente gerar cartazes de partilha de imagens com códigos QR, tornando o seu conteúdo mais fácil de divulgar e promover. Com um clique, pode gerar belos cartazes para tornar o conteúdo do seu blogue ou sítio Web oficial mais atraente e atrair mais leitores para prestar atenção e partilhar. Exemplo:
Então, o que é que temos de fazer para que isto funcione?
Preparação: Descompacte o seguinte ficheiro zip e copie todos os ficheiros obtidos para a pasta do tema
Passo 1: Modifique o ficheiro do tema functions.php e adicione o seguinte código no final do mesmo
require_once get_template_directory() . '/poster/index.php';
Passo 2: Modifique o ficheiro do tema single-product.php
Encontre o seguinte código (perto da linha 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>Partilhar o cartaz</a>
substitua por
<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>Partilhar o cartaz</a>
Passo 3: Modifique o ficheiro do tema footer.php
Encontre o seguinte código (perto da linha 34)
<div class="apply clearfix bg-white position-fixed rounded-lg overflow-hidden d-block d-xl-none">
Adicione-lhe o seguinte código
<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="Fechar"><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>
Passo 4: Modifique o ficheiro do tema js/xs.js
Acrescente o seguinte código no final do mesmo
(function($) {
var inited = 0
$('.poster-trigger').on('click', function() {
var $_this = $(this)
se($_this.hasClass('disabled')) {
se($_this.hasClass('disabled')) {
}
$_this.addClass('disabled')
se(inited) {
poster_toggle_poster_md(1)
$_this.removeClass('disabled')
return
}
var id = $_this.attr('data-id')
se(!id) {
$_this.removeClass('disabled')
return
}
$.ajax({
url: tbdz.ajax_url, type: 'GET', {
dataType: 'json', { data: { tbdz.ajax_url, type: 'GET', }
data: {
ação: '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')
se(!data.result) {
$('#dz-poster-modal .dz-pst-img').append('<p class="dz-tip">A geração de cartazes falhou, tente novamente</p>')
} else if(data.poster) {
inited = 1
$('#dz-poster-modal .dz-pst-img').append('<img class="img-fluid" src="'+data.poster+'">')
}
}
})
})
})(jQuery);
Atenção:O tipo de letra atualmente utilizado para o cartaz é Founder Black Simplified, que é um tipo de letra gratuito e disponível comercialmente. Se pretender alterar o tipo de letra, basta substituir o ficheiro ttf.ttf existente. Além disso, o logótipo e as imagens em destaque no cartaz só são atualmente suportados nos formatos jpg, jpeg e png. Se achar que as imagens do cartaz não podem ser geradas, verifique se as imagens estão no formato correto para se certificar de que cumprem os nossos requisitos. Desta forma, pode criar facilmente um cartaz que corresponda ao seu estilo.
Sem comentários