⚠ Desculpe pela bagunça aqui, eu estou atualizando meu tema então algumas coisas ficarão fora do lugar por um tempo, mas logo logo voltarão ao normal.

⚠ Sorry for the mess in here, I'm currently updating my theme so some things will be out of place for a while, but soon it will be back to normal.

sexta-feira, 29 de março de 2019

Como solucionar/evitar erros em temas no Tumblr

Como solucionar/evitar erros em temas no Tumblr

(Última atualização em 04/03/2022) - (English version of this post here!)

Nem todo problema que surge em um tema é um defeito que já veio nele. Existem algumas coisas que você pode fazer ao instalar ou personalizar um tema que podem corromper seu código e causar erros.

Neste post eu listei os problemas mais comuns que acontecem em temas e mostrei como resolvê-los e também como prevenir outros.

Leia a tabela a seguir com os problemas listados e se algum deles soar parecido com o que você está tendo, então clique em todas as causas á sua frente. Se esse post não te ajudar, então entre em contato comigo via Ask do Tumblr e explique com bastante detalhes o que está acontecendo com o seu tema (se possível, mande prints para mostrar o que você quer dizer).

Problemas mais comuns:

Problema Possíveis causas
A) Não consigo instalar o tema: Causa 04 Causa 02 Causa 01 Causa 05
B) Não consigo mais editar o tema: Causa 04 Causa 05
C) O tema não carrega na pré-visualização: Causa 14
D) O tema está todo bagunçado/O tema não carrega quando abro meu blog: Causa 01 Causa 02 Causa 03 Causa 06 Causa 12
E) O tema carrega, mas demora muito e/ou fica todo travado: Causa 13
F) Algumas opções do tema não estão funcionando: Causa 08
G) A rolagem infinita não está funcionando: Causa 09
H) Alguns links do tema não estão funcionando: Causa 11 Causa 07
I) Os botões de Curtir, Reblogar e Seguir não estão aparecendo nos Links Parmanentes dos meus posts: Causa 07
J) Os links de redirecionamento do Tumblr estão dando erro: Causa 07
K) Tags não estão funcionando: Causa 10

Possíveis causas:

Causa 01: Partes faltando:

Pode ter acontecido de, na hora em que você copiou o código do tema para colocar no seu blog, você acidentalmente não ter copiado ele por inteiro e assim acabou instalado o tema com uma parte do código faltando. Então a primeira coisa a se fazer se o seu tema está dando algum erro, é certificar-se de que o código não está incompleto.

Para te dar uma ajudinha: os meus temas sempre começam com "<!--" e terminam com "</html>". Se o seu tema começa e termina dessa forma então ele está completo e deve estar correto. A menos que você tenha modificado (adicionado, removido ou mudado) uma ou mais partes do código, pois você pode ter acidentalmente removido ou corrompido alguma parte importante dele.

Se você modificou o tema ou o instalou com partes faltando, apenas pegue seu código original novamente (certifique-se de copiá-lo por inteiro) e reinstale-o no seu blog.

Causa 02: Código corrompido:

Fique atento(a) se você usa algum tradutor de texto automático no seu navegador de internet, ele pode estar traduzindo o HTML e tornado-o inválido. Códigos HTML são em Inglês por padrão, se alguma ferramenta traduzir esses códigos para qualquer outro idioma, o navegador não identificará esses códigos com códigos HTML.

Também, se você usa algum tipo de corretor de texto automático, ele pode estar "corrigindo" partes do código como se o código fosse um texto.

Outra prática que pode acabar corrompendo um código HTML é salvá-lo como um documento de texto no seu computador ou em algum site que não seja próprio para códigos. Muitas pessoas gostam de salvar o código de temas que gostam para não perdê-los, o que faz muito sentido, porém a melhor opção para não perder um tema é salvar o link do site onde você encontrou ele, e não o seu código em si. E existem dois motivos para isso:

Motivo 1:

Editores de texto e sites que não são próprios para códigos, são programados para escrever textos portanto consideram códigos como erros e tentam corrigi-los (colocando espaços, pontuações e acentos em alguns lugares, e alguns até traduzem alguns códigos para Português), ou seja, acabam modificando o HTML e tornado-o inválido.

Motivo 2:

Ao salvar um código no seu computador, você terá a mesma versão dele para sempre... Desenvolvedores costumam atualizar seus códigos de tempo em tempo, para corrigir bugs e também para que eles não acabem ficando ultrapassados pelas novas regras de programação que vão surgindo com o passar dos anos. Por isso, a melhor opção é sempre pegar um código direto de sua fonte (direto do site oficial), para garantir que você esteja usando a sua versão mais recente, antes que ele comece a ficar deprecado com o tempo e passe a apresentar erros.

Então, para resolver esse problema, basta ir atrás do código original e instalá-lo novamente, agora sem colá-lo em nenhum lugar antes e sem esquecer de desativar qualquer tradutor automático antes de abrir a página do código (ou seja, a página de onde você vai copiar o código) e antes de instalar o código no seu tema (ou seja, antes de colá-lo em "Editar HTML" lá na sua página Personalizar).

Causa 03: Tema desatualizado:

É importante ficar de olho em novas atualizações do tema que você usa. Dê uma checada pelo menos 1 vez por ano no blog/site onde você pegou o tema, para ficar por dentro se novas versões desse tema foram lançadas. Pois, alguns desenvolvedores postam notas de atualizações em seus blogs, nos posts de seus temas ou em seus códigos mesmo.

E se você estiver usando um tema que não foi atualizado a mais de 5 anos, talvez seja hora de trocar para um que seja mais atual, pois é possível que ele esteja ultrapassado. Partes dele podem não ser mais reconhecíveis por alguns navegadores de internet, fazendo com que ele comece a apresentar erros. Ou o Tumblr pode ter recentemente passado por algumas mudanças que acabaram prejudicando o funcionamento de temas antigos (isso acontece bastante).

Se você usa um tema meu:

Se você usa um tema meu, você pode conferir a data da última atualização em seu post:

Em meus temas mais atuais, você também encontra a data da última atualização no início de seu código:

Causa 04: Erro de HTTPS:

Se, ao tentar instalar um tema novo, ao tentar editar um tema que já está usando a alguns anos ou ao incluir um código no HTML do tema, você receber a seguinte mensagem:

Isso significa que o HTML do seu tema contém assets de links que não são "https". De um tempo pra cá o Tumblr bloqueou o uso de assets que não são de origem "https" por motivos de segurança, já que esses links podem não ser seguros.

Então você pode estar recebendo esta mensagem por dois motivos:

Motivo 1: Tema desatualizado

Você provavelmente está usando um tema desatualizado, que ainda não foi adaptado para essa mudança que ocorreu no Tumblr a um tempo atrás. Para resolver isso, você pode trocar para um tema mais atualizado ou você pode tentar atualizar os links do tema manualmente.

Dependendo do tema que está usando, fazer alterações nos links dos assets podem causar bugs no tema, mas se você quiser tentar mesmo assim para ver se resolve, aqui vão as instruções:

Abra o HTML do seu tema > clique em qualquer parte do código (apenas para focar na janela de códigos) > então aperte CTRL+F (ou Command+F) e uma aba de pesquisa irá aparecer pra você (desse jeito) > use essa aba para pesquisar por "http:" no código > substitua todos os "http:" que você encontrar no código do seu tema por "https:", certifique-se de não deixar nenhum para trás > salve e veja se resolveu.

Motivo 2: Algum plugin/código personalizado que voce incluiu no tema

Se você instalou algum plugin/código no seu tema (tipo um player de música, contador de visitas, ou alguma outra coisa), pode ser que não tenha nada de errado com o tema e sim esse código que você instalou que possui assets que não são "https" e estão causando problema.

Nesse caso, faça a mesma coisa que eu ensinei anteriormente: aperte CTLR+F e pesquise por "http:" no código. Se você encontrar, pode tentar substituir por "https:", mas isso pode causar bugs no código também. E se isso acontecer, você ainda pode tentar procurar por algum outro plugin/código personalizado que seja semelhante ao que você estava usando e que esteja atualmente funcionando no Tumblr.

Causa 05: Conexão ruim:

Às vezes, quando a conexão está ruim ou o servidor do Tumblr está enfrentando problemas, o Tumblr não consegue salvar o seu tema ou não consegue carregar o seu blog deixando ele todo em branco como se fosse uma página vazia. Nesse caso, faça o seguinte:

Instale o tema padrão do Tumblr > salve o tema > atualize a página Personalizar (tecle F5) > e tente instalar o tema desejado novamente.

Se o problema persistir, tente repetir esse processo após algumas horas ou em outro dia, ou utilizando outra rede de internet... Porém a opção mais rápida seria simplesmente procurar por um tema mais leve para colocar no seu blog (um tema que seja de apenas 1 coluna e não tenha rolagem infinita, por exemplo).

Causa 06: Plugin/código personalizado incompatível:

Alguns plugins (como players de música e contadores de visitas, por exemplo) podem gerar conflitos com alguns scripts do seu tema, fazendo com que ele apresente erros. Alguns inclusive podem causar aquele erro de "HTTPS", que eu mencionei na Causa 4.

Se você usa um ou mais códigos personalizados e está tendo problemas no seu tema, experimente remover todos esses códigos para ver se os erros param de acontecer. Se isso não resolver, então o problema não são os códigos personalizados e você pode colocá-los no seu tema novamente (nesse caso, as Causas 01, 02, 03 e 04 podem te ajudar a achar a fonte do problema).

Mas se resolver, isso quer dizer que o problema realmente são os códigos personalizados. E se você não quiser removê-los, você pode pesquisar por outros códigos parecidos até achar um que funcione no seu tema, ou você pode pedir minha ajuda para tentar fazer esse código funcionar no seu tema.

Causa 07: Players de música:

A maioria dos players de música que antigamente eram usados no Tumblr (como o WikPlayer e o SCMPlayer) não funcionam mais devido a atualizações tanto no Tumblr quanto em navegadores, e estão gerando vários problemas em muitos temas. Alguns desses problemas incluem: interferir nos links de redirecionamento do Tumblr (fazendo com que alguns links no seu blog fiquem quebrados) e fazer com que o seu tema não mostre os botões de Curtir, Reblogar, Seguir e etc. nos Links Permanentes dos seus posts.

Para resolver isso, o único jeito é remover esses players. Existem alguns players alternativos que funcionam no Tumblr e eu prentendo fazer um post apresentando eles, mas até eu ter tempo para isso você pode, é claro, fazer a sua própria pesquisa no Google para ver se encontra algum que goste.

Causa 08: Bug da página "Personalizar" do Tumblr:

Se você instalou um tema e algumas das opções dele aparecem como ativadas e mesmo assim não estão funcionando, não se preocupe com o seu tema, o problema não é com ele... Isso acontece porque as opções de interruptor (opções de ativar/desativar) da página Personalizar do Tumblr possuem um pequeno bug:

Às vezes, as opções de interruptor são mostradas ao contrário, elas aparecem como "ativadas" mesmo estando desativadas ou aparecem como "desativadas" mesmo estando ativadas.

Tudo o que você precisa fazer para dar um jeito nisso é clicar nelas ao menos duas vezes seguidas, apenas para alterar seu valor e depois voltar ao valor anterior (ou seja, ativar e depois desativar de volta, ou vice-versa) e isso, por algum motivo, as normaliza e faz com que passem a mostrar seus valores corretamente.

Causa 09: Página muito curta para rolagem infinita:

Se você instalou um tema que possui rolagem infinita, porém ela parece não estar funcionando e você não consegue acessar as páginas antigas do seu blog, isso pode ser porque suas páginas estão muito "curtas". O script da rolagem infinita, na maioria dos temas, é executado ao rolar a página para baixo. Quando uma página é muito curta (quando o conteúdo dela cabe inteiramente na tela sem deixar nada para baixo), ela não possui barra de rolagem, pois não tem nada sobrando mais para baixo dela. E, quando não há barra de rolagem na página, é impossível rolá-la para baixo, portanto não é possível executar o script da rolagem infinita e é por isso que ele não funciona.

Para resolver esse problema, basta fazer o seguinte: vá até a página Personalizar do seu blog > abra as "Configurações avançadas" > clique na opção "Posts por página" e escolha o número máximo.

Isso fará com que vários posts sejam mostrados por vez em cada página do seu blog, fazendo assim com que suas páginas fiquem mais compridas, evitando que a barra de rolagem não apareça em alguma(s) página(s).

Porém, se você publica/rebloga muitos posts curtinhos é possível que esse problema continue acontecendo do mesmo jeito. Neste caso, a única opção que sobra seria você trocar seu tema por um que possua menos colunas, pois isso irá ajudar as páginas do seu blog a ficarem compridas o suficiente.

Causa 10: Tags ilegíveis:

Se algumas tags do seu blog não estão funcionando, primeiramente certifique-se de que você as configurou corretamente. Para saber como usar tags (como colocar e como acessar cada uma), dê uma olhada neste tutorial, e também confira os artigos do Tumblr sobre tags/marcadores.

Existem 3 motivos para as tags do seu blog não estarem funcionando:

Motivo 1: Caracteres não aceitos

Se você usar em suas tags caracteres que não são números e letras (isso inclui acentos, pontuações e principalmente emojis), isso irá complicar as coisas um pouco na hora de tentar acessar essa tag por causa de sua URL. URLs não conseguem ler caracteres que não sejam letras e números, então elas convertem esses caracteres em uma codificação que elas possam ler, que é chamada de "URL Encode". E esse pode ser o motivo de você não conseguir acessar essas tags, pois você precisaria codificá-las para conseguir (e eu vou mostrar como fazer isso logo em seguida).

Mas, na verdade, o Tumblr lê sim alguns caracteres especiais em pesquisas de tag e palavras-chave, mas isso não funciona para todo tipo de situação. Então e melhor escolha é sempre evitar caracteres especiais em tags por prevenção, e isso inclui hifens (-), vírgulas (,), pontos (.), letras com acentos e etc.

Porém, se você usou caracteres especiais em algumas tags e agora precisa acessá-las, você pode fazer isso da seguinte forma: vamos supor que a tag que você colocou em alguns posts era "R$38 reais", para filtrar seus posts por essa tag você terá que seguir este link:http://sua_url.tumblr.com/tagged/R%2438-reais. Isso porque o código para o símbolo de cifrão ($) é "%24", e também, para representar espaços entre as palavras, você deve usar hifens (-). Você pode conferir este artigo para descobrir quais são os códigos para cada um dos caracteres que você usou em suas tags.

Motivo 2: Limite de tags

O Tumblr nos permite colocar até 30 tags em cada post, porém apenas as 20 primeiras tags funcionam (se você sabe qual é o sentido disso, por favor, me conte, porque eu ainda não sei 🤷‍♀️😒), como o Tumblr mencionou neste artigo aqui. Se você ultrapassar o limite de 20 tags em um post, todas as tags depois das 20ª simplesmente serão anuladas.

Motivo 3: Blog novo

E o terceiro motivo para suas tags não estarem funcionando é se o seu blog for novo, e isso o Tumblr já deixou explicado na sua central de ajuda, e você pode ler sobre isso neste artigo aqui.

Causa 11: Links quebrados:

Se os links do menu do seu tema não estiverem funcionando ou estiverem redirecionando para páginas de erro, isso pode ser porque seus links estão quebrados. Você precisa se certificar de sempre colocar "http://" ou "https://" na frente de qualquer endereço da web, sem isso os navegadores de internet não irão conseguir ler os links como endereços web, então eles não irão funcionar.

Por exemplo, se você fosse colocar o link do meu site em um post, em algum código do seu tema ou em qualquer lugar da internet, se você colocar o link dessa forma "anyhsthemes.com" ele não irá funcionar. Para o link funcionar ele deve ser escrito assim:

http://anyhsthemes.com

Você pode encurtar links no seu tema, mas apenas para páginas que pertencem ao seu blog e apenas se esses links forem ficar somente dentro do seu tema. Por exemplo, se você quer adicionar ao menu do seu tema um link para a página "Archive" (Arquivo) do seu blog, você pode simplesmente escrever seu link dessa forma: /archive; e isso te levará para a página Archive do seu blog (assim como "/ask" te levará para a página de Ask do seu blog, e "/submit" te levará para a página de Submit). Mas como eu disse, essas abreviações apenas irão funcionar quando estiverem em uma página que pertence ao seu blog, por isso não use links encurtados em posts, já que seus posts podem ser reblogados por outros blogs e também vistos através do painel do Tumblr, e lá seus links encurtados não irão funcionar.

Causa 12: Posts do App do Tumblr:

Se o seu tema está com problemas, nenhuma das outras causas nesse post te ajudou a resolver isso, você está usando um tema meu antigo e recentemente postou/reblogou em seu blog posts NPF (o novo formato de posts do Tumblr, que é inclusive o único formato disponível no app da plataforma, ou seja, todo post feito usando o app do Tumblr é um post NPF), então essa pode ser a causa.

Meus temas antigos não suportam posts no formato NPF, então se esse problema está atrapalhando muito o seu tema, a única solução é mudar para um tema mais atualizado.

Causa 13: Página pesada:

Meus temas atuais vêm com diversas características e a combinação de algumas delas infelizmente acaba deixando o tema um pouco lento, especialmente quando usado em blogs com muitas imagens. Eu estou atualmente trabalhando para otimizar meus temas e deixá-los mais rápidos, mas até que isso seja resolvido, eu incluí em meus temas opções para você poder desativar certas características que deixam o tema mais pesado. Elas são:

  • Infinite Scroll: deixe essa opção desativada para substituir a Rolagem Infinta por Paginação;
  • Smooth Scroll: essa opção, quando ativada, deixa a rolagem da página mais suave;
  • Custom Tooltips: essa opção, quando ativada, adiciona tooltips personalizados ao tema (clique aqui se não souber o que é isso).

Além de desativar essas opções, outra coisa que pode melhorar o desempenho do seu tema é diminuir o número de posts por página. Você pode configurar isso nas "Opções Avançadas" da página Personalizar do seu blog:

Causa 14: Pré-visualização do Tumblr:

É normal a pré-visualização da página Personalizar do Tumblr não funcionar corretamente de vez em quando, afinal ela não é uma página de verdade, é apenas uma prévia não funcional da primeira página do seu blog.

Geralmente, quando isso acontece, basta você fazer alguma alteração em qualquer uma das Opções do Tema que isso fará com que a pré-visualização carregue. Mas se isso não funcionar, salve o tema e depois abra a primeira página do seu blog. Se no seu blog o tema estiver funcionando como deveria então isso quer dizer que não há bug nenhum no tema e que é apenas a pré-visualização que não está carregando no momento.


Se você está tendo problemas com um tema meu e nenhuma das questões desse post tiverem te ajudado, ou se você tiver ficado com alguma dúvida, entre em contato comigo por aqui.