Uwaga! Wszystkie informacje i solucje zawarte w postach typu DYI mogą z czasem przestać być aktualne. Niektóre publikowane kody źródłowe, będąc zależnymi od używanych konfiguracji platform i sprzętu, mogą nie działać, lub działać nieprawidłowo u niektórych użytkowników. Stosując opisane rozwiązania przyjmujesz do wiadomości i zgadzasz się, że nie ponoszę odpowiedzialności za ich finalne efekty.
Nie wiem dlaczego ludzie mają manię stawiania wszelkich możliwych stron na WordPress-ie. Tak, WordPress to genialny CMS, jednak bardzo często, przy mikro stronach jego wdrażanie mija się z celem. Przykładem jest np. strona rekrutacji Radio Biznes – projektu, w którym pełnię funkcję grafika i webdevelopera. To w zasadzie prosty landingpage z osadzonym formularzem kontaktowym służącym do zbierania ofert współpracy. Zgodzisz się ze mną, że zupełnie bez sensu byłoby stawianie tej strony na WordPress-ie lub innym CMS?
Do stworzenia ramy strony wykorzystałem – Bootstrap – jeden z najpopularniejszych frameworków CSS, którego zadaniem jest ułatwienie tworzenia atrakcyjnych wizualnie stron internetowych i aplikacji. „Framework” definiuje strukturę strony i jej mechanizmy działania, pomagając w organizacji kodu, narzucając określone standardy jego pisania, co wpływa nie tylko na porządek w kodzie, ale także zwiększa jego czytelność.
Kod prostej, responsywnej strony „na Bootstrapie” może wyglądać więc tak:
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lorem Ipsum</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body {
background-color: #f8f9fa; /* Tło strony */
}
.navbar {
background-color: #007bff; /* Kolor tła nagłówka */
}
.navbar-brand, .nav-link {
color: #fff !important; /* Kolor tekstu w nagłówku */
}
.section {
padding: 50px 15px;
background-color: #ffffff; /* Tło sekcji */
margin-bottom: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Cień sekcji */
}
.footer {
background-color: #343a40; /* Tło stopki */
color: #fff; /* Kolor tekstu w stopce */
padding: 20px 0;
}
</style>
</head>
<body>
<!-- Nagłówek -->
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container">
<a class="navbar-brand" href="#">Lorem Ipsum</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="#lorem">Menu A</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#ipsum">Menu B</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#dolor">Menu C</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Sekcja: Lorem -->
<section id="lorem" class="container section text-center">
<h2>Lorem</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin risus ex, mattis vel enim in, efficitur ornare lorem. Sed ut accumsan ligula, quis ullamcorper diam. Suspendisse et orci leo. Fusce massa velit, cursus vitae orci ac, aliquet pellentesque sem. Fusce id hendrerit libero, nec tincidunt ligula. Cras vitae urna in velit eleifend maximus feugiat et sem. Vestibulum tempus lacinia leo vitae malesuada.</p>
<a href="#dolor" class="btn btn-primary btn-lg">Dolor</a> <!-- odnośnik do sekcji 'dolor' na tej samej stronie -->
</section>
<!-- Sekcja: Ipsum -->
<section id="ipsum" class="container section text-center">
<h2>Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin risus ex, mattis vel enim in, efficitur ornare lorem. Sed ut accumsan ligula, quis ullamcorper diam. Suspendisse et orci leo. Fusce massa velit, cursus vitae orci ac, aliquet pellentesque sem. Fusce id hendrerit libero, nec tincidunt ligula. Cras vitae urna in velit eleifend maximus feugiat et sem. Vestibulum tempus lacinia leo vitae malesuada.</p>
<a href="#lorem" class="btn btn-primary btn-lg">Lorem</a> <!-- odnośnik do sekcji 'lorem' na tej samej stronie -->
</section>
<!-- Sekcja: Dolor -->
<section id="dolor" class="container section text-center">
<h2>Dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin risus ex, mattis vel enim in, efficitur ornare lorem. Sed ut accumsan ligula, quis ullamcorper diam. Suspendisse et orci leo. Fusce massa velit, cursus vitae orci ac, aliquet pellentesque sem. Fusce id hendrerit libero, nec tincidunt ligula. Cras vitae urna in velit eleifend maximus feugiat et sem. Vestibulum tempus lacinia leo vitae malesuada.</p>
<a href="#ipsum" class="btn btn-primary btn-lg">Ipsum</a> <!-- odnośnik do sekcji 'ipsum' na tej samej stronie -->
</section>
<!-- Stopka -->
<footer class="footer text-center">
<div class="container">
<p class="mb-0">© 2024 Lorem Ipsum. Wszelkie prawa zastrzeżone.</p>
</div>
</footer>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Strona ma kod zgodny z wytycznymi W3C, a w przeglądarce wygląda bardzo ascetycznie. Możesz jednak rozbudować w kodzie jej style, nadając bardziej profesjonalnego wyglądu. Do dzieła!