Como Projetar um modelo de página personalizada do WordPress [atualizar 2021]

Cutsom WordPress templates

os temas do WordPress são ótimos. Eles fazem WordPress Web design tão fácil.

mas, o que acontece quando você quer ir além do tema escolhido?

e se você quiser usar um layout WordPress personalizado em uma página específica?

bem, alguns temas não permitirão que você altere seus layouts.

 resultado da imagem para o meu meme

mas existem algumas soluções alternativas para isso.

Siga-me para descobrir.

o que é um modelo de página personalizado e como atribuir um?

WordPress páginas e posts layout são controlados por um arquivo de modelo chamado ” página.pai”. Modelos são arquivos que dizem ao WordPress como exibir diferentes tipos de conteúdo.

Agora, você pode não querer que todas as páginas e postagens tenham a mesma aparência. É quando você precisa de um modelo de página personalizado.

quais modelos de página do WordPress você está usando?

quer descobrir qual modelo de página você está usando ou como alternar entre modelos?

é fácil peasy, você precisará:

  1. Cabeça para o seu Painel de Administração do WordPress,
  2. a Partir do menu à esquerda, selecione “Páginas”,
  3. Passe o mouse sobre o título de uma página,Todas as Páginas no WordPress
  4. a Partir do menu abaixo do título, selecione “Edição Rápida”,
  5. a Partir de uma “Edição Rápida” janela, vá para o “Modelo” suspensa.

modelos WordPress

aqui você pode ver todos os modelos de tema disponíveis e pode atribuir um modelo diferente à sua página atual.

por exemplo, há uma opção para alterar sua página para largura total, se desejar. Mas não há opção para um modelo que adiciona uma segunda barra lateral.

é por isso que os modelos personalizados do WordPress podem ser úteis. Sempre que você salvar um novo modelo, ele estará disponível ao lado dos antigos também.

Agora, você pode atribuir fazer esta atribuição dentro da página também. Quando você optar por editar uma página, no lado direito, vá para” Atributos da Página ” – > modelo.

atribuindo um modelo de página

como criar um tema filho

agora, antes de sujar as mãos com a criação de um modelo de página personalizado do WordPress, há uma coisa a ter em mente: faça as alterações em um tema filho. Você não gostaria de causar alterações irreversíveis no tema pai.

um tema filho do WordPress é um subtema que herda todos os recursos e estilos do tema pai. Agora, se o tema pai receber uma atualização, o tema filho não será afetado e suas alterações não serão substituídas.

agora, como você cria um tema filho? Aqui estão os passos:

  1. início de sessão para o seu cPanel,
  2. Vá para o Gerenciador de arquivos,Acesso Gerenciador de arquivos dentro do cPanel
  3. Cabeça para public_html -> wp-content -> pasta de temas,Acesso pasta de Temas no cPanel
  4. Enquanto dentro de “Temas” da pasta, adicionar uma nova pasta a partir de “+Pasta” no menu superior. Dá-lhe um nome. Uma prática recomendada é usar o nome do tema, ao qual você anexa “-criança”. Além disso, use hífens, em vez de espaço. No meu caso, vou usar mesmerize-child, porque estou usando o tema Mesmerize,
  5. dentro da pasta, criar um novo arquivo e chamá-lo de “estilo.css”,criar estilo.css em cPanel
  6. . Clique com o botão direito do mouse no arquivo e selecione a opção “Editar”.
    /* Theme Name: Your Theme Child Theme URL: http://yourdomain.comDescription: Your Theme Child Theme Author: Your NameAuthor URL: http://yourdomain.comTemplate: yourtheme Version: 1.0.0 Text Domain: yourtheme-child */

    aqui você pode colar parte do código no arquivo CSS pai ou adicionar seu próprio estilo.

  7. altere o tema e os nomes de domínio e clique em “Salvar”,
  8. crie outro arquivo na mesma pasta. Desta vez, nomeie-o “funções.pai”. Cole o seguinte código:
    <?phpadd_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );function enqueue_parent_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );}?>
  9. vá para o painel do WordPress, aparência -> tema. O tema do seu filho estará lá, você só precisa ativá-lo.

e pronto.

em seguida, vamos fazer um novo modelo, vamos?

como criar um modelo de página personalizada do WordPress?

você pode começar a partir do Código do tema existente e fazer os ajustes necessários.

Aqui estão as etapas:

  1. Ir para cPanel -> Gerenciador de arquivos,
  2. Navegar para public_html -> wp-content -> pasta de temas,
  3. Abra o seu tema principal pasta,
  4. Identificar a página.arquivo php. Vai ficar assim:
    <?php mesmerize_get_header(); ?> <div class="page-content"> <div class="<?php mesmerize_page_content_wrapper_class(); ?>"> <?php while (have_posts()) : the_post(); get_template_part('template-parts/content', 'page'); endwhile; ?> </div> </div><?php get_footer(); ?>
  5. selecione o arquivo e escolha “Copiar”,
  6. na janela que aparece, altere o caminho do arquivo, para aquele na pasta filho do tema,página de cópia.php para novo local de arquivo
  7. renomeie o novo arquivo para que você possa identificar facilmente o que ele faz.
  8. adicione um comentário dentro do arquivo para que você possa dizer ao WordPress que este é um novo modelo personalizado. Fazer isso selecionando “editar” e inserir este texto:
    /* * Template Name: Your custom TEmplate's name * description: >- Explain what your new templates does */

    O novo arquivo deve ficar assim:

    <?php /* * Template Name: Custom Full Width * description: >- Page template without sidebar */mesmerize_get_header(); ?> <div class="page-content"> <div class="<?php mesmerize_page_content_wrapper_class(); ?>"> <?php while (have_posts()) : the_post(); get_template_part('template-parts/content', 'page'); endwhile; ?> </div> </div><?php get_footer(); ?>

Você pode adicionar aqui cópias de outros arquivos. Por exemplo, você pode personalizar o single.arquivo php, que mudará a aparência das postagens do blog.

em seguida, você precisará arregaçar as mangas e escrever algum código.

e se você quiser alterar o estilo CSS, você pode fazer isso dentro do personalizador de tema filho, dentro de CSS adicional ou dentro do estilo.arquivo css.

no entanto, há uma solução mais simples…

com um construtor de sites como o Colibri, todo o código “fica” para trás e não bloqueia um criador de sites não técnico. Cada adição ou alteração a uma página personalizada é refletida visualmente no Personalizador. Assim, o criador do site tem mais controle sobre o design. A bela página personalizada estará pronta em um piscar de olhos, sem se preocupar com o código por trás da página.

Leave a Reply

Deixe uma resposta

O seu endereço de email não será publicado.