Como criar estilos personalizados no wordpress vinte quinze
Video: Curso WordPress - Como Criar Temas Filhos
Conteúdo
No padrão Vinte Quinze tema, ter um olhar para o content.php modelo clicando-lo na página Editar temas. Na parte superior do molde (linha 13, especificamente) é esta linha de código:
o post_class () - seção é a parte legal da tag. Esta tag diz WordPress para inserir marcação HTML específica no seu modelo. Essa marcação HTML permite que você use CSS para fazer estilos personalizados para mensagens pegajosas, categorias, marcas e formatos de correio.
Por exemplo, você pode definir as seguintes opções para um post:
Furar este post para a página inicial
Arquivado em uma categoria WordPress
Marcados com Notícias
Para o exemplo anterior, WordPress insere a seguinte marcação HTML:
Da mesma forma, para os formatos de post, se você publicar um post usando o formato de pós Imagem, o post_class () tag no modelo contém a seguinte marcação HTML, indicando que este post deve ser formatado para uma exibição de imagem:
Você pode usar CSS junto com o post_class () - tag para fornecer estilos personalizados para cada um dos tipos de pós, categorias e tags que você tenha configurado no seu site.
Adicionando estilos únicos para seus formatos pós começa com a criação das designações de conteúdo que deseja exibir para cada formato. As possibilidades são infinitas, e todos eles são até você.
Nas etapas a seguir, você criar um simples, despojado Índice principal (index.php) Arquivo para usar em seu site e incluir suporte pós formato. Este modelo é apenas uma amostra para você seguir e consulte quando criar sua exibição personalizada para seus formatos de correio. Não há tempo como o presente, por isso siga estes passos:
Abra o seu editor de texto favorito, como o Bloco de Notas (PC) ou TextEdit (Mac).
Video: Como criar ou personalizar campos no checkout do woocommerce
Digite o código abaixo para criar um modelo simples para formatos de correio.
Salve o arquivo como index.php no seu computador local.
Fazer o upload do arquivo para sua pasta tema (localizado no / Wp-content / themes / your-theme-nome do diretório), Substituindo a existente index.php Arquivo.
? Lt; get_header php () - gt; ? # 1lt; php if (have_posts ()):? gt; ? # 2LT; PHP quando (have_posts ()):? the_post () - gt; # 3‘- # 10echo the_title () - # 11echo‘‘- # 12echo the_content () - # 13} # 14elseif (has_post_format (‘galeria’)) {# 15echo‘# 59lt; php endwhile- mais:? Gt; # 60lt;? Php endif- gt; # 61lt; get_sidebar php () - gt?; # 62lt; get_footer php () - gt?; # 63‘- # 16echo the_title () - # 17echo‘
‘- # 18echo the_content () - # 19} # 20elseif (has_post_format (‘imagem’)) {# 21echo‘‘- # 22echo the_title () - # 23echo‘
‘- # 24echo the_post_thumbnail (‘imagem no formato’) - # 25echo the_content () - # 26} # 27elseif (has_post_format (‘link’)) {# 28echo‘‘- # 29echo the_title () - # 30echo‘
`- # 31echo the_content () - # 32} # 33elseif (has_post_format ( `quote`)) {# 34echo the_content () - # 35} # 36elseif (has_post_format ( `status`)) {# 37echo the_content () - # 38 } # 39elseif (has_post_format ( `video`)) {# 40echo `‘- # 41echo the_title () - # 42echo‘
‘- # 43echo the_content () - # 44} # 45elseif (has_post_format (‘audio’)) {# 46echo‘‘- # 47echo the_title () - # 48echo‘
‘- # 49echo the_content () - # 50} # 51else {# 52echo‘‘- # 53echo the_title () - # 54echo‘
‘- # 55echo the_content () - # 56 # 57} gt;? # 58
Aqui está uma repartição das linhas de bacalhau:
Linha 1: Uma função que inclui todo o código do header.php arquivo do seu tema.
Linhas 2 e 3: Indica o início de O laço..
Linha 4: Fornece HTML e CSS marcação usando o post_class () - função que lhe fornece classes CSS únicas para cada um dos seus diferentes formatos de correio.
Linha 5: Inicia o início de uma PHP função.
Linhas 6-8: fornecer conteúdo para o a parte, de lado formato de post.
Linhas 9-14: fornecer conteúdo para o Bate-papo formato de post.
Linhas 15-20: fornecer conteúdo para o Galeria formato de post.
Linhas 21-27: fornecer conteúdo para o Imagem formato de post.
Linhas 28-33: fornecer conteúdo para o Ligação formato de post.
Linhas 34-36: fornecer conteúdo para o Citar formato de post.
Linhas 37-39: fornecer conteúdo para o estado formato de post.
Linhas 40-45: fornecer conteúdo para o Vídeo formato de post.
Linhas 46-51: fornecer conteúdo para o auditivo formato de post.
Linhas 52-57: fornecer conteúdo para todas as outras mensagens padrão.
Linha 58: Termina a PHP função.
Linha 59: Fecha o HTML div etiqueta que foi aberta no Passo 4.
Linhas 60 e 61: Feche a EndWhile e E se declarações que foram abertos nas linhas 2 e 3.
Linha 62: Esta função chama no código incluído no sidebar.php arquivo do seu tema.
Linha 63: Esta função chama no código incluído no footer.php arquivo do seu tema.
Este é um exemplo simples e não inclui um monte de marcação ou CSS classes de HTML. Isso é feito intencionalmente para que você possa se concentrar nos bits de código que são necessários para designar e definir conteúdos diferentes telas para os seus formatos de correio.
Você pode ver que alguns formatos de conter a tag de modelo para exibir o título - o título()- - e que outros não. No entanto, todos eles contêm a tag de modelo para exibir o conteúdo do post: o conteúdo()-. Você pode jogar com diferentes tipos de conteúdo e de marcação que você deseja adicionar aos seus formatos de correio.
Casal de suas adições de modelo para formatos de post com o post_class () - que adiciona classes CSS especiais e marcação para cada tipo de formato de post. Você pode realmente personalizar a exibição de cada formato de postagem individual ao índice do seu coração.