Bom dia,
Como eu sou designer e não desenvolvedor, ou seja, programação não é meu ponto forte, pelo contrário, eu utilizaria a seguinte solução – mas você precisa entender pelo menos a lógica de HTML e WordPress para entender a solução.
Vendo o código fonte de seu mapa, você verá que o desenvolvedor colocou o código base do JavaScript e o estilo do mapa CSS entre <header>
e </header>
. E entre <body>
e </body>
colocou a chamada do JavaScript e inseriu o mapa com as imagens.
Pois bem, como eu uso PageLines, eu pegaria tudo que está no <header> e inseriria numa área feita justamente para inserir código. Para quem não usa PageLines, sugiro o plugin abaixo,
https://wordpress.org/plugins/insert-code-lite/screenshots/
Coloquei nos screenshots porque você pode ver que o plugin te dá a opção de inserir código no Header e no Footer. Eu trabalharia para colocar o máximo de código no Footer primeiro, por questões de desempenho junto ao GTmetrix (que usa as referências do Google PageSpped e do YSlow) e Pingdom. Mas como pode acontecer de dar erro ou nem rodar, passaria para o Header o código. Dessa forma, quando o WordPress montar o HTML que é o que ele exibe como resultado final, estaria lá o mesmo código do GitHub no Header de seu site.
Não esqueça de no GitHub baixar as pastas “img” e “sources” e fazer a referência do caminho para os arquivos dentro dessas pastas nesse código que vai colocar no Header de seu site.
Com a parte de código pronta, aí eu pegaria o que está no Body da página do mapa, iria em Páginas (ou Posts) > Inserir Novo, e na Área de Edição da nova página entraria na Área de Texto (aba no canto superior direito, que tem Visual e Texto) e inseriria o código que está entre <body>
e </body>
do HTML do demo do mapa.
Seria assim que eu tentaria inserir esse mapa. No PageLines “clonar” uma página HTML para WordPress é fácil porque ele já é preparado para inserção desses códigos externos de JavaScript e CSS – fora um plugin deles chamados Hook que permite uma manipulação de código que é tudo de bom. Desde que comecei no PageLines nunca abri um arquivo php ou js, tudo é manipulado pelo próprio PageLines e usando esse Hook.
Eu espero que o plugin que indiquei do repositório lhe permita o mesmo resultado. Pois basicamente o que você estará fazendo é tentando clonar o HTML do demo do mapa para dentro de seu WordPress.
Saudações e boa sorte!