Como incorporar Planilha do Google no WordPress

O “causo”: Quero incorporar aqui no WordPress planilhas do Google. No caso do exemplo, os custos do plantio de abobrinhas, uma postagem de projeto, ainda em conclusão, com nome provisório de “Como plantar abobrinha – em vaso e no sítio”.

No Google planilhas basta ir em arquivo –> compartilhar –> Publicar na Web:

O procedimento gera um iframe para ser incorporado.

No WordPress, usei o “inserir HTML personalizado”:

Colando o código HTML do iframe:

<iframe 
src="https://docs.google.com/spreadsheets/d/e/2PACX-1vRmjcTttdWYzN60grlsAjS4K2NdJDm-Yn3yo6e2Y7YRw0Hbsmmx29zzYkf26fNSRK4RkV1wViZv_RTS/pubhtml?gid=0&amp;single=true&amp;widget=true&amp;headers=false">
</iframe>

Porém, o resultado não é nada satisfatório: 1-A planilha vai para o canto da tela, fora da área padrão de texto do Worpress; 2-Fica muito pequena, tanto em largura como altura.

Veja, antes do ajuste:

Noutra postagem (Toyota Bandeirante – Quanto custa – Ort), já usei a planilha e fiz o ajuste, porém, como faz tempo e não anotei o que fiz, esqueci! Para não perder tempo novamente, o passo a passo:

Para que o conteúdo fique dentro do container do WordPress, envolva-o numa DIV. Para que que ocupe toda a largura e para que possa regular a altura, incula as propriedades largura (“width=”100%”) e altura (style=”height: 50vh;”), pronto, eis o código:

<div>
<iframe 
src="https://docs.google.com/spreadsheets/d/e/2PACX-1vRmjcTttdWYzN60grlsAjS4K2NdJDm-Yn3yo6e2Y7YRw0Hbsmmx29zzYkf26fNSRK4RkV1wViZv_RTS/pubhtml?gid=0&amp;single=true&amp;widget=true&amp;headers=false" 
width="100%" style="height: 50vh;"></iframe>
</div>

E eis o resultado:

Ah, uma curiosidade: A medida vh é igual a 1/100 da altura da viewport. Logo, se a altura do navegador é 900px, 1vh equivale a 9px, 50Vh equivale a meia tela e assim vai. Para saber mais dessa medida CSS Units (w3schools.com).

É isso.