Este tutorial tem como objetivo demonstrar a utilização do TemplateDebug, um recurso utilizado para identificar caminhos de templates a serem editados, informando a localização no gerenciador de arquivos.

👍

Nesse tutorial você vai:

✓ Aprender a utilizar a Querystring TemplateDebug
✓ Aprender a identificar o template

Montando a query

1. Navegue para a página que deseja inspecionar

2. No final da URL coloque a querystring ?TemplateDebug=true

3. Clique com o botão direito pela página e selecione Inspecionar, ou pressione F12, para exibição das devtools:

4. No console serão exibidos comentários indicando os caminhos dos templates no gerenciador de arquivos:

🚧

Cache:

Algumas vezes o navegador armazena o cache da página. Recomenda-se, então, recarregar a página pressionando CTRL + F5 ou CTRL + SHIFT + R para limpar o cache.

📘

Caso a URL já possua uma query:

Deve-se utilizar “&” para diferenciar as queries (exemplo abaixo):
pesquisa?t=guitarra
pesquisa?t=guitarra&TemplateDebug=true

👍

Partials

Também é possível visualizar os conteúdos da página sem o carregamento de folhas de estilo ou scripts inserindo a query .partial na URL da página desejada, veja os exemplos abaixo:

www.loja.com.br/.partial
www.loja.com.br/.partial?ph=header
www.loja.com.br/.partial?ph=footer

Identificar o template

1. No devtools, selecione o elemento que será inspecionado:

2. Identifique o caminho do arquivo pelo comentário mais próximo ao elemento selecionado:

3. No Painel Administrativo, acesse o menu Aparência > Gerenciador de Arquivos

4. No gerenciador de arquivos, procure pela pasta no caminho indicado:

🚧

Identificar o widget

A mesma lógica pode ser aplicada para identificar widgets: