Acompanhando a aula, fui fazendo o arquivo page.php e a parte css dele, que fica em style.css. Acontece que o css (que peguei dos arquivos do curso) não são aplicados às classes das tags html da page.php (as quais copiei a mão porque nos arquivos do curso está extremamente diferente do usado em aula). Se eu abro o site na index.php o style.css funciona, no que diz respeito a single.php também, mas não na page.php.
Códigos abaixo:
page.php:
<?php get_header(); ?>
<main class="pagina-main">
<article class="pagina">
<h1 class="pagina-titulo">
<?php the_title(); ?>
</h1>
<?php
if( have_posts() ) {
while( have_posts() ) {
the_post();
?>
<div class="pagina-conteudo">
<?php the_content(); ?>
</div>
<?php
}
}
?>
</article>
</main>
<?php get_footer(); ?>
style.css:
/*
Theme Name: Malura
Author: Ítalo Aguiar
Description: Tema para a imobiliária Malura
Version: 1.0alpha
*/
html {
font-size: 16px;
height: 100%;
}
body {
height: 100%;
font-family: 'Open Sans', sans-serif;
color: #747474;
-webkit-font-smoothing: antialiased;
}
.chamada-principal {
margin: 2rem 0;
}
.chamada-principal h1 {
font-size: 2.5rem;
font-weight: bold;
}
.chamada-principal p {
font-size: 2rem;
}
.container {
width: 1024px;
margin: 0 auto;
}
.home-main {
background-color: #F4F4F4;
}
.imoveis-listagem {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
padding-top: 2rem;
}
.imoveis-listagem-item {
flex-basis: 30%;
margin-bottom: 1.5rem;
}
.imoveis-listagem-item:not( :nth-child(3n) ) {
margin-right: 5%;
}
.imoveis-listagem-item a {
display: block;
text-decoration: none;
color: #000;
}
.imoveis-listagem-item img {
max-width: 100%;
height: 250px;
}
.imoveis-listagem-item h2 {
font-size: 2rem;
font-weight: bold;
margin: 1rem 0;
color: #333;
}
.imoveis-listagem-item p {
font-size: .9rem;
line-height: 1.5;
}
.busca-localizacao-form {
display: flex;
align-items: center;
justify-content: center;
padding: 1rem 0;
flex-basis: 100%;
}
.single-imovel {
margin-bottom: 2rem;
}
.single-imovel-thumbnail img {
width: 100%;
max-height: 500px;
}
.single-imovel p {
font-size: 1rem;
line-height: 2;
}
.single-imovel-data {
display: block;
font-size: 1.1rem;
color: #888;
margin-top: 1rem;
font-style: italic;
}
.single-imovel-geral {
display: flex;
}
.single-imovel-descricao {
flex-basis: 80%;
}
.single-imovel-informacoes {
flex-basis: 20%;
margin-left: 5%;
border: 1px solid #000;
border-radius: 5px;
padding: 1rem;
}
.single-imovel-informacoes dt {
font-weight: 700;
font-size: 1.2rem;
margin-bottom: .8rem;
}
.single-imovel-informacoes dt:not(:first-child) {
margin-top: .8rem;
}
.pagina-main {
background-color: #F4F4F4;
height: 100%;
}
.pagina {
background-color: #FFF;
width: 1000px;
margin: 0 auto;
padding: 1.5rem;
line-height: 1.7;
font-size: 1rem;
}
.pagina-titulo {
font-size: 3rem;
font-weight: 700;
color: #000;
}
.pagina-conteudo {
margin-bottom: 1rem;
}
.pagina-thumbnail img {
max-width: 100%;
max-height: 500px;
}
.contato-subtitulo {
font-size: .9rem;
}
.form-nome,
.form-email,
.form-mensagem {
margin: 1rem 0;
}
.form-nome input,
.form-email input {
width: 100%;
display: block;
font-size: 1rem;
padding: .5rem;
border-radius: 8px;
border: 1px solid #949494;
box-sizing: border-box;
}
.form-mensagem textarea {
width: 100%;
height: 200px;
border-radius: 8px;
box-sizing: border-box;
border: 1px solid #949494;
}
.form-nome label,
.form-email label,
.form-mensagem label {
display: block;
font-weight: 700;
font-size: 1.1rem;
margin-bottom: .5rem;
}
.email-fracasso,
.email-sucesso {
display: block;
color: #FFF;
padding: .5rem;
}
.email-sucesso {
background-color: green;
}
.email-fracasso {
background-color: red;
}
header.php:
<!DOCTYPE HTML>
<html>
<head>
<?php $home = get_template_directory_uri(); ?>
<meta charset="utf-8">
<?php wp_head();?>
<link rel="stylesheet" type="text/css" href="<?=$home;?>/reset.css">
<link rel="stylesheet" type="text/css" href="<?=$home;?>/style.css">
</head>
<body>