questões
Quando utiliza o elemento Separadores, pode encontrar problemas de desempenho se adicionar um grande número de elementos (como os elementos Loop Grid ou Loop Carousel) ou muitos elementos (como criar quase todo o conteúdo da página em cada separador).
Estas questões incluem:
- Problemas de desempenho do front-end (páginas de carregamento lento).
- Problemas de desempenho no editor Elementor (dificuldades no funcionamento do editor).
Outro problema é que se utilizar elementos dependentes de JavaScript no conteúdo do separador, estes podem não ser apresentados corretamente. Por exemplo, se utilizar uma rotação circular em qualquer separador que não seja o primeiro,Elementos do Gallery Proou outros elementos que dependem do JS, pode encontrar um erro.
Estes problemas podem ser evitados com os métodos deste tutorial.
vantagem
- melhoria do desempenhoEvitar problemas de desempenho no front-end e no editor.
- Otimização SEOCada conteúdo de separador será uma página separada com
e meta-descrição separados, e nenhum conteúdo utilizará a exibição, o que tem um impacto positivo em SEO.
Cenários aplicáveis
- Quando os separadores contêm muito conteúdo
- Quando existem elementos dependentes de JavaScript num separador
- Quando a SEO é uma prioridade (ou seja, quando o conteúdo do separador é importante para a SEO)
Pseudo-tags em sítios Web populares
A "pseudo-tagging" é uma escolha popular para alguns sítios Web populares, como o Google:
Todos eles funcionam como títulos de etiquetas, mas na realidade são ligações para outras páginas. Este é um padrão de design muito utilizado.
Criar pseudo-rótulos
fazer uso deNav Elemento do menuSubstitua-o. De seguida.Ligue itens de menu a diferentes páginas correspondentes ao "conteúdo do separador".
Criar pseudo-rótulos
Criar página
Primeiro, crie uma nova página para o conteúdo de cada separador.
Se o fizer, melhora o desempenho e evita erros.
De seguida, dê um nome e publique estas páginas.
Criar menus
Em seguida, aceda ao painel de controlo do WordPress e clique, por sua vez, em "estado exterior" > "menu", clique em " criar um novo menu"Crie um novo menu de navegação.
Em seguida, adicione todas as páginas que acabou de criar a esse menu e clique em "guardar (um ficheiro, etc.) (informática)".
Criar modelos de página única
Para garantir que todos os "separadores" são consistentes, vamos criar um modelo de página única.
Este modelo pode ser ligado a determinados posts ou arquivos de tipo de post personalizado (CPT).
Passos:
- Aceda ao backend do WordPress e clique, por sua vez, em "modelo" > "Criador de temas".
- Clique em "Adicionar novo modelo de uma página".
Adicionar elementos de menu do WordPress
- Criar menus::
- Inicie sessão no painel de controlo do WordPress.
- Aceda a Aparência > Menu.
- Clique em "Criar novo menu", dê um nome ao menu e clique no botão "Criar menu".
- Nos itens de menu à esquerda, selecione a página, o artigo, a categoria ou a ligação personalizada que pretende adicionar ao menu e clique no botão "Adicionar ao menu".
- Pode arrastar os itens do menu para ajustar a ordem. Quando terminar, clique em "Guardar menu".
- Adicionar um menu a uma página::
- Vá a Páginas > Todas as páginas, localize a página à qual pretende adicionar um menu e clique em Editar.
- Se estiver a utilizar o editor clássico:
- No editor de páginas, selecione um widget de texto ou adicione um código curto diretamente ao conteúdo da página
[menu id="menu_id"]
quemenu_id
é o ID do menu que criou. - Utilizar o construtor Elementor
- Abra o editor Elementor e encontre o widget "Navigation Menu".
- Arraste o widget Menu de navegação para uma localização adequada na página.
- No painel esquerdo, selecione o menu que acabou de criar.
- No editor de páginas, selecione um widget de texto ou adicione um código curto diretamente ao conteúdo da página
- Estilos de menu personalizados(Opcional):
- Se precisar de personalizar o estilo do menu, pode defini-lo no personalizador de temas.
- Vá para Aparência > Personalizar > CSS adicional e adicione o código CSS personalizado conforme necessário.
Adicionar elementos HTML
- Abra o editor Elementor e encontre o widget "HTML".
- Arraste o widget "HTML" sobre o elemento do menu de navegação na página.
Encontre uma secção de código semelhante à seguinte e substitua-a por esse código. Os estilos foram ajustados para serem os mesmos que na demonstração acima, o que poupa tempo a alterar todo o CSS.
<div class="custom-html">
<!-- 您的自定义HTML代码 -->
<style>
/* 添加您自定义的CSS样式 */
.custom-html {
/* 示例样式 */
padding: 10px;
background-color: #f9f9f9;
border: 1px solid #ddd;
}
</style>
<!-- 示例内容 -->
<p>Este é um exemplo de elemento HTML que se encontra no topo do elemento do menu de navegação.</p>
</div>
Poderá ser necessário consultar o CSS abaixo e ajustá-lo conforme necessário.
Agora, ajuste o contentor (que deve conter elementos HTML e elementos do menu WordPress) até obter o estilo perfeito que pretende.
Adicione onde for necessário "Conteúdo da publicação"Elemento. Isto é."Conteúdos"Exibir local.
Publique o seu modelo de uma página eDefina condições para que todos os "separadores" o tenham.
Adicionar conteúdo
Agora só tem de ir a cada um dos "separadores" e adicionar-lhes o conteúdo de que necessita.
Resumo:
Como otimizar o desempenho e o SEO do seu Web site WordPress utilizando pseudo-tabs em vez de elementos Tabs? Esta publicação explica formas de criar pseudo-tabs, incluindo a criação de novas páginas, a configuração de menus de navegação e a adição de elementos HTML personalizados. Esta técnica evita problemas de desempenho no carregamento e no editor de front-end, garante que os elementos JavaScript sejam exibidos corretamente e melhora o SEO com uma estrutura de página separada. Também explica como criar modelos de uma página para manter a consistência e otimizar o conteúdo do separador. Ao implementar estes passos, pode melhorar significativamente a experiência do utilizador do seu Web site e as classificações dos motores de busca.
Sem comentários