Skip to main content

HTML da página principal

Para começar a construir o tema Wordpress, eu escrevi um código simples para a página principal do site. No arquivo index.php que se encontra na pasta raiz do tema (para tirar qualquer dúvida sobre a estrutura de pastas de um tema Wordpress consulte esta página). Eu simplesmente simulei o que seria o cabeçalho do site, o rodapé, os menus e as áreas em que entrarão os widgets do Wordpress.

Para o corpo da página, eu fiz uma divisão simples de barra lateral usando as próprias classes do Bootstrap 4.6. 

Segue o exemplo:

<!DOCTYPE html>
<html lang="pt-BR">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <title>Wordpress Dev</title>
</head>

<body>
    <header>
        <div class="container">
            <div class="row">
                <div class="col py-5 text-center">
                    <h1 class="mb-4">Wordpress Dev</h1>
                    <p>Projeto público de desenvolvimento de temas para o Wordpress</p>
                </div>
            </div>
        </div>
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
            <button class="navbar-toggler mx-auto" type="button" data-toggle="collapse" data-target="#navbarPrincipal" aria-controls="navbarPrincipal" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>

            <div class="collapse navbar-collapse" id="navbarPrincipal">
                <ul class="navbar-nav mx-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Menu 1</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Menu 2</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Menu 3</a>
                    </li>
                </ul>
            </div>
        </nav>
    </header>

    <main>
        <div class="container">
            <div class="row py-5">
                <div class="col-md-9">
                    <article>
                        <h4>Este é o título de um artigo</h4>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ullamcorper tellus in dolor mollis sagittis. Morbi at nibh lectus. Fusce tempor vel ipsum vitae maximus. Nulla eu placerat sapien. Fusce dignissim lectus sit amet quam condimentum, nec tempus massa auctor. Morbi suscipit blandit quam, ac aliquet tortor fermentum et.</p>
                    </article>
                </div>
                <div class="col-md-3">
                    <div class="widget mb-3">
                        <p>Este é um Widget</p>
                    </div>
                    <div class="widget mb-3">
                        <p>Este é um Widget</p>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <footer class="bg-dark w-100">
        <div class="container">
            <div class="row py-5 text-light">
                <div class="col-md-4">
                    <h6>Widget 1</h6>
                </div>
                <div class="col-md-4">
                    <h6>Widget 2</h6>
                </div>
                <div class="col-md-4">
                    <h6>Widget 3</h6>
                </div>
            </div>
        </div>
        <div class="container border-top text-center text-light py-3">
            <p class="mb-0">
                <small>
                    Tema de estudo Wordpress | Desenvolvido por <a href="https://wiki.phototricks.art.br/books/desenvolvimento-de-temas-wordpress" target="_blank" class="text-light"><b>Phototricks</b></a>
                </small>
            </p>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>
</body>

</html>
No Comments
Back to top