Con el fin de ayudar a muchos sitios web personales de tipo blog o sitios web oficiales a compartir sus contenidos de forma más cómoda, se ha diseñado una función sencilla y eficaz de generación de carteles con un solo clic. Con esta función, puedes generar fácilmente pósters para compartir imágenes con códigos QR, haciendo que tu contenido sea más fácil de difundir y promocionar. Con un solo clic, puedes generar bonitos pósters para hacer más atractivo el contenido de tu blog o sitio web oficial y atraer a más lectores para que presten atención y lo compartan. Ejemplo:
¿Qué tenemos que hacer para que esto funcione?
Preparación: Descomprima el siguiente archivo zip y copie todos los archivos obtenidos en la carpeta del tema
Paso 1: Modifique el archivo functions.php del tema y añada el siguiente código al final del mismo
require_once get_template_directory() . '/poster/index.php';
Paso 2: Modificar el archivo del tema single-product.php
Busque el siguiente código (cerca de la línea 42)
<a class="xs-btn c-btn" data-fancybox="video-gallery" data-width="800" data-height="480" href="/es/</?php the_field('product-jiaocheng')?>"><i class="iconfont icon-shipin mr-10"></i>Compartir cartel</a>
sustituir 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>Compartir cartel</a>
Paso 3: Modificar el archivo de tema footer.php
Busque el siguiente código (cerca de la línea 34)
<div class="apply clearfix bg-white position-fixed rounded-lg overflow-hidden d-block d-xl-none">
Añádele el siguiente 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="Cerrar"><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>
Paso 4: Modificar el archivo del tema js/xs.js
Añade el siguiente código al final
(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', }
datos: {
acción: 'get_poster',
id: id
}, éxito: function(datos) { acción: 'get_poster', id: id
éxito: function(datos) {
$('#dz-poster-modal .justify-content-center').remove()
$_this.removeClass('disabled')
if(!data.result) {
$('#dz-poster-modal .dz-pst-img').append('<p class="dz-tip">Error en la generación del cartel, inténtelo de nuevo</p>')
} else if(datos.poster) {
inited = 1
$('#dz-póster-modal .dz-pst-img').append('<img class="img-fluid" src="'+data.poster+'">')
}
}
})
})
})(jQuery);
Atención:La fuente utilizada actualmente para el cartel es Founder Black Simplified, que es una fuente gratuita y disponible comercialmente. Si desea cambiar el tipo de letra, sólo tiene que sustituir el archivo ttf.ttf existente. Además, el logotipo y las imágenes destacadas del cartel sólo se admiten actualmente en formatos jpg, jpeg y png. Si comprueba que las imágenes del cartel no se pueden generar, compruebe que están en el formato correcto para asegurarse de que cumplen nuestros requisitos. De este modo, podrá crear fácilmente un cartel que se ajuste a su estilo.