Para criar um botão de impressão que imprima apenas um elemento específico da página em um site WordPress que utiliza o Elementor, você pode seguir os seguintes passos:
- Identifique o Elemento a Ser Impresso: Primeiro, você precisa identificar o elemento que deseja imprimir. Isso pode ser feito utilizando o inspetor do navegador (ferramentas de desenvolvedor) para encontrar o ID ou a classe CSS do elemento.
- Adicione um Botão no Elementor: No editor do Elementor, adicione um botão onde deseja que o botão de impressão apareça.
- Personalize o Botão: Personalize o botão conforme necessário, alterando o texto para algo como “Imprimir”.
- Adicione um Script Personalizado:
jQuery(document).ready(function($){
$('#imprimir').on('click', function(){
var tituloPostagem = document.querySelector('.post-title').innerText;
var printContent = document.querySelector('table').outerHTML;
var logoUrl = 'https://faveni.edu.br/wp-content/uploads/sites/4/2022/06/logo.png'; // Substitua pela URL da sua logo
var dataAtual = new Date().toLocaleString(); // Data e hora atuais
var WinPrint = window.open('', '', 'width=900,height=650');
WinPrint.document.write('<html><head><title>' + tituloPostagem + '</title>');
// Incluir estilos CSS e a fonte Montserrat
WinPrint.document.write('<style>');
WinPrint.document.write('@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap");');
WinPrint.document.write('body { font-family: "Montserrat", sans-serif; }');
WinPrint.document.write('table { width: 100%; border-collapse: collapse; }');
WinPrint.document.write('th, td { border: 1px solid black; padding: 5px; text-align: left; }');
WinPrint.document.write('footer { position: fixed; bottom: 0; width: 100%; text-align: center; }'); // Estilo para rodapé
WinPrint.document.write('</style>');
WinPrint.document.write('</head><body>');
WinPrint.document.write('<img src="' + logoUrl + '" alt="Logo" style="width: 100px;">'); // Logo no topo
WinPrint.document.write('<h1>' + tituloPostagem + '</h1><h3>Grade Curricular:</h3>'); // Título da postagem
WinPrint.document.write(printContent); // Conteúdo da tabela
WinPrint.document.write('<footer><p>Data e Hora da Impressão: ' + dataAtual + '</p></footer>'); // Data e hora no rodapé
WinPrint.document.write('</body></html>');
WinPrint.document.close();
WinPrint.focus();
setTimeout(function(){
WinPrint.print();
WinPrint.close();
}, 250);
});
});