Menu nawigacyjne HTML: gotowy lepki nagłówek z koszykiem WooCommerce
Menu nawigacyjne jest jednym z najważniejszych elementów strony internetowej. Pozwala użytkownikowi szybko przejść do oferty, informacji o firmie, kontaktu albo innych kluczowych podstron.
W sklepie internetowym warto rozszerzyć klasyczne menu o ikonę koszyka z automatycznie aktualizowanym licznikiem produktów. Klient przez cały czas widzi wtedy, ile produktów dodał do koszyka i może szybko przejść do podsumowania zamówienia.
Poniżej znajdziesz gotowy kod tworzący responsywne menu z logo, czterema linkami, mobilnym przyciskiem i koszykiem WooCommerce. Wszystkie najważniejsze ustawienia można zmienić w jednym miejscu.
Co tworzy przygotowany kod?
Po aktywowaniu kodu otrzymasz shortcode: [sws_lepkie_menu]. Możesz umieścić go w Gutenbergu, Elementorze lub innym kreatorze obsługującym shortcode.
- logo graficzne albo tekstową nazwę firmy,
- cztery linki do samodzielnej podmiany,
- lepki nagłówek widoczny podczas przewijania,
- responsywne menu hamburgerowe,
- ikonę koszyka WooCommerce,
- licznik produktów aktualizowany po dodaniu produktu przez AJAX,
- możliwość zmiany kolorów, wysokości i szerokości nagłówka.
Gdzie zmienić logo, kolory i linki?
Na początku kodu znajduje się sekcja opisana komentarzem EDYTUJ TYLKO TEN FRAGMENT. Osoba początkująca nie musi zmieniać pozostałej części kodu.
Logo
Jeżeli pole logo_url pozostanie puste, nagłówek wyświetli tekst zapisany w polu logo_tekst. Aby użyć grafiki, wklej pełny adres pliku z biblioteki mediów WordPressa.
'logo_url' => 'https://twoja-strona.pl/wp-content/uploads/logo.png'
Kolory
Kolory zmienisz w ustawieniach kolor_tla, kolor_tekstu i kolor_akcentu.
Tło: #111111, tekst: #ffffff, akcent: #cafd00.
Linki
Każda pozycja w tablicy pozycje_menu zawiera nazwę oraz link. Możesz zmienić cztery przykładowe elementy albo skopiować jeden z nich i dodać kolejny.
array( 'nazwa' => 'Oferta', 'link' => '/oferta/' )
Jak działa licznik koszyka?
Po prawej stronie nagłówka znajduje się ikona prowadząca do strony koszyka WooCommerce. Kod pobiera aktualną liczbę produktów z aktywnej sesji klienta.
Po dodaniu produktu przez AJAX WooCommerce zwraca nowy fragment licznika i podmienia jego wartość bez przeładowania całej strony.
Jeżeli WooCommerce nie jest aktywne, menu nadal działa, ale ikona koszyka nie zostanie wyświetlona. Koszyk można również wyłączyć ręcznie, zmieniając ustawienie pokaz_koszyk na false.
Gotowy kod lepkiego nagłówka
Skopiuj cały poniższy kod do nowego fragmentu PHP we wtyczce Code Snippets. Jeżeli Code Snippets automatycznie dodaje otwarcie PHP, nie dopisuj znacznika <?php.
Wykonaj kopię zapasową strony i sprawdź menu na komputerze, tablecie oraz telefonie. Jeżeli używasz pamięci podręcznej, wyczyść cache po aktywowaniu kodu.
/**
* Lepkie menu nawigacyjne z koszykiem WooCommerce.
* Użycie: [sws_lepkie_menu]
*/
add_shortcode( 'sws_lepkie_menu', 'sws_lepkie_menu_shortcode' );
function sws_lepkie_menu_shortcode() {
/*
* =====================================================
* EDYTUJ TYLKO TEN FRAGMENT
* =====================================================
*/
$ustawienia = array(
'logo_tekst' => 'NAZWA FIRMY',
'logo_url' => '',
'logo_alt' => 'Nazwa firmy',
'logo_link' => '/',
'kolor_tla' => '#111111',
'kolor_tekstu' => '#ffffff',
'kolor_akcentu' => '#cafd00',
'szerokosc' => 1240,
'wysokosc_pc' => 78,
'wysokosc_mobile' => 68,
'pokaz_koszyk' => true,
);
$pozycje_menu = array(
array( 'nazwa' => 'Strona główna', 'link' => '/' ),
array( 'nazwa' => 'Oferta', 'link' => '/oferta/' ),
array( 'nazwa' => 'O nas', 'link' => '/o-nas/' ),
array( 'nazwa' => 'Kontakt', 'link' => '/kontakt/' ),
);
/*
* =====================================================
* KONIEC SEKCJI DO EDYCJI
* =====================================================
*/
$adres = static function ( $link ) {
$link = trim( (string) $link );
if ( '' === $link ) {
return '#';
}
if ( 0 === strpos( $link, '/' ) ) {
return home_url( $link );
}
return $link;
};
$id_menu = wp_unique_id( 'sws_menu_' );
$woocommerce = class_exists( 'WooCommerce' ) && function_exists( 'wc_get_cart_url' );
$pokaz_koszyk = $woocommerce && ! empty( $ustawienia['pokaz_koszyk'] );
$licznik = 0;
if ( $pokaz_koszyk && function_exists( 'WC' ) && WC()->cart ) {
$licznik = (int) WC()->cart->get_cart_contents_count();
wp_enqueue_script( 'wc-cart-fragments' );
}
static $style_i_skrypt = false;
ob_start();
if ( ! $style_i_skrypt ) {
$style_i_skrypt = true;
?>
<style>
.sws_menu,
.sws_menu * {
box-sizing: border-box;
}
.sws_menu {
position: sticky;
top: 0;
z-index: 99999;
width: 100%;
color: var(--sws-menu-tekst);
background: var(--sws-menu-tlo);
border-bottom: 1px solid rgba(255,255,255,.14);
box-shadow: 0 8px 24px rgba(0,0,0,.16);
}
body.admin-bar .sws_menu {
top: 32px;
}
.sws_menu__inner {
display: grid;
grid-template-columns: minmax(150px,1fr) auto minmax(90px,1fr);
align-items: center;
gap: 24px;
width: min(100% - 40px, var(--sws-menu-szerokosc));
min-height: var(--sws-menu-wysokosc-pc);
margin: 0 auto;
}
.sws_menu__logo {
display: inline-flex;
align-items: center;
justify-self: start;
max-width: 240px;
color: var(--sws-menu-tekst);
font-size: 20px;
font-weight: 800;
line-height: 1.1;
text-decoration: none;
}
.sws_menu__logo img {
display: block;
width: auto;
max-width: 220px;
max-height: calc(var(--sws-menu-wysokosc-pc) - 24px);
object-fit: contain;
}
.sws_menu__nav {
justify-self: center;
}
.sws_menu__list {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 0;
list-style: none;
}
.sws_menu__link {
display: inline-flex;
align-items: center;
min-height: 44px;
padding: 9px 14px;
color: var(--sws-menu-tekst);
font-size: 16px;
font-weight: 650;
line-height: 1.2;
text-decoration: none;
border-radius: 8px;
}
.sws_menu__link:hover,
.sws_menu__link:focus-visible {
color: var(--sws-menu-akcent);
background: rgba(202,253,0,.09);
outline: none;
}
.sws_menu__actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 10px;
justify-self: end;
}
.sws_menu__cart,
.sws_menu__toggle {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
color: var(--sws-menu-tekst);
background: transparent;
border: 1px solid rgba(255,255,255,.18);
border-radius: 50%;
text-decoration: none;
}
.sws_menu__cart:hover,
.sws_menu__cart:focus-visible,
.sws_menu__toggle:hover,
.sws_menu__toggle:focus-visible {
color: var(--sws-menu-akcent);
border-color: var(--sws-menu-akcent);
outline: none;
}
.sws_menu__cart svg {
width: 23px;
height: 23px;
fill: none;
stroke: currentColor;
stroke-width: 1.9;
stroke-linecap: round;
stroke-linejoin: round;
}
.sws_menu__cart-count {
position: absolute;
top: -5px;
right: -5px;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 22px;
height: 22px;
padding: 0 6px;
color: #111111;
background: var(--sws-menu-akcent);
border: 2px solid var(--sws-menu-tlo);
border-radius: 999px;
font-size: 12px;
font-weight: 800;
}
.sws_menu__toggle {
display: none;
padding: 0;
cursor: pointer;
}
.sws_menu__toggle span,
.sws_menu__toggle span::before,
.sws_menu__toggle span::after {
display: block;
width: 20px;
height: 2px;
background: currentColor;
border-radius: 2px;
transition: transform .2s ease, opacity .2s ease;
}
.sws_menu__toggle span {
position: relative;
}
.sws_menu__toggle span::before,
.sws_menu__toggle span::after {
position: absolute;
left: 0;
content: "";
}
.sws_menu__toggle span::before {
top: -6px;
}
.sws_menu__toggle span::after {
top: 6px;
}
.sws_menu.is-open .sws_menu__toggle span {
background: transparent;
}
.sws_menu.is-open .sws_menu__toggle span::before {
transform: translateY(6px) rotate(45deg);
}
.sws_menu.is-open .sws_menu__toggle span::after {
transform: translateY(-6px) rotate(-45deg);
}
@media (max-width: 900px) {
body.admin-bar .sws_menu {
top: 46px;
}
.sws_menu__inner {
grid-template-columns: minmax(0,1fr) auto;
gap: 12px;
width: min(100% - 28px, var(--sws-menu-szerokosc));
min-height: var(--sws-menu-wysokosc-mobile);
}
.sws_menu__logo img {
max-width: min(200px,55vw);
max-height: calc(var(--sws-menu-wysokosc-mobile) - 20px);
}
.sws_menu__toggle {
display: inline-flex;
}
.sws_menu__nav {
position: absolute;
top: 100%;
left: 0;
width: 100%;
max-height: 0;
overflow: hidden;
visibility: hidden;
opacity: 0;
background: var(--sws-menu-tlo);
border-top: 1px solid rgba(255,255,255,.12);
box-shadow: 0 16px 28px rgba(0,0,0,.18);
transition: max-height .25s ease, opacity .2s ease, visibility .2s ease;
}
.sws_menu.is-open .sws_menu__nav {
max-height: 75vh;
visibility: visible;
opacity: 1;
}
.sws_menu__list {
flex-direction: column;
align-items: stretch;
gap: 2px;
width: min(100% - 28px, var(--sws-menu-szerokosc));
margin: 0 auto;
padding: 14px 0 18px;
}
.sws_menu__link {
width: 100%;
min-height: 48px;
padding: 12px 10px;
}
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll('.sws_menu').forEach(function (menu) {
const przycisk = menu.querySelector('.sws_menu__toggle');
if (!przycisk) {
return;
}
function zamknij() {
menu.classList.remove('is-open');
przycisk.setAttribute('aria-expanded', 'false');
}
przycisk.addEventListener('click', function () {
const otwarte = !menu.classList.contains('is-open');
menu.classList.toggle('is-open', otwarte);
przycisk.setAttribute(
'aria-expanded',
otwarte ? 'true' : 'false'
);
});
menu.querySelectorAll('.sws_menu__link').forEach(function (link) {
link.addEventListener('click', zamknij);
});
document.addEventListener('click', function (event) {
if (!menu.contains(event.target)) {
zamknij();
}
});
document.addEventListener('keydown', function (event) {
if (event.key === 'Escape') {
zamknij();
}
});
});
});
</script>
<?php
}
$tlo = sanitize_hex_color( $ustawienia['kolor_tla'] ) ?: '#111111';
$tekst = sanitize_hex_color( $ustawienia['kolor_tekstu'] ) ?: '#ffffff';
$akcent = sanitize_hex_color( $ustawienia['kolor_akcentu'] ) ?: '#cafd00';
$szerokosc = max( 720, min( 1800, absint( $ustawienia['szerokosc'] ) ) );
$wys_pc = max( 56, min( 120, absint( $ustawienia['wysokosc_pc'] ) ) );
$wys_mob = max( 54, min( 100, absint( $ustawienia['wysokosc_mobile'] ) ) );
?>
<header
class="sws_menu"
style="
--sws-menu-tlo: <?php echo esc_attr( $tlo ); ?>;
--sws-menu-tekst: <?php echo esc_attr( $tekst ); ?>;
--sws-menu-akcent: <?php echo esc_attr( $akcent ); ?>;
--sws-menu-szerokosc: <?php echo esc_attr( $szerokosc ); ?>px;
--sws-menu-wysokosc-pc: <?php echo esc_attr( $wys_pc ); ?>px;
--sws-menu-wysokosc-mobile: <?php echo esc_attr( $wys_mob ); ?>px;
"
>
<div class="sws_menu__inner">
<a
class="sws_menu__logo"
href="<?php echo esc_url( $adres( $ustawienia['logo_link'] ) ); ?>"
>
<?php if ( ! empty( $ustawienia['logo_url'] ) ) : ?>
<img
src="<?php echo esc_url( $ustawienia['logo_url'] ); ?>"
alt="<?php echo esc_attr( $ustawienia['logo_alt'] ); ?>"
>
<?php else : ?>
<?php echo esc_html( $ustawienia['logo_tekst'] ); ?>
<?php endif; ?>
</a>
<nav
id="<?php echo esc_attr( $id_menu ); ?>"
class="sws_menu__nav"
aria-label="Główna nawigacja"
>
<ul class="sws_menu__list">
<?php foreach ( $pozycje_menu as $pozycja ) : ?>
<li>
<a
class="sws_menu__link"
href="<?php echo esc_url( $adres( $pozycja['link'] ) ); ?>"
>
<?php echo esc_html( $pozycja['nazwa'] ); ?>
</a>
</li>
<?php endforeach; ?>
</ul>
</nav>
<div class="sws_menu__actions">
<?php if ( $pokaz_koszyk ) : ?>
<a
class="sws_menu__cart"
href="<?php echo esc_url( wc_get_cart_url() ); ?>"
aria-label="Przejdź do koszyka"
>
<svg viewBox="0 0 24 24" aria-hidden="true">
<path d="M3 4h2l2.2 10.1a2 2 0 0 0 2 1.6h7.9a2 2 0 0 0 1.9-1.4L21 8H7"></path>
<circle cx="10" cy="20" r="1"></circle>
<circle cx="18" cy="20" r="1"></circle>
</svg>
<span class="sws_menu__cart-count">
<?php echo esc_html( $licznik > 99 ? '99+' : $licznik ); ?>
</span>
</a>
<?php endif; ?>
<button
type="button"
class="sws_menu__toggle"
aria-expanded="false"
aria-controls="<?php echo esc_attr( $id_menu ); ?>"
aria-label="Otwórz lub zamknij menu"
>
<span aria-hidden="true"></span>
</button>
</div>
</div>
</header>
<?php
return ob_get_clean();
}
/**
* Aktualizacja licznika po dodaniu produktu przez AJAX.
*/
add_filter( 'woocommerce_add_to_cart_fragments', 'sws_menu_aktualizuj_licznik' );
function sws_menu_aktualizuj_licznik( $fragmenty ) {
if ( ! function_exists( 'WC' ) || ! WC()->cart ) {
return $fragmenty;
}
$licznik = (int) WC()->cart->get_cart_contents_count();
ob_start();
?>
<span class="sws_menu__cart-count">
<?php echo esc_html( $licznik > 99 ? '99+' : $licznik ); ?>
</span>
<?php
$fragmenty['.sws_menu__cart-count'] = ob_get_clean();
return $fragmenty;
}Jak uruchomić menu?
-
1
Dodaj kod
Utwórz nowy snippet PHP, wklej cały kod i aktywuj go na całej stronie.
-
2
Uzupełnij ustawienia
Podmień logo, kolory, linki i rozmiary w sekcji przeznaczonej do edycji.
-
3
Wstaw shortcode
Umieść shortcode [sws_lepkie_menu] w wybranym miejscu szablonu.
Jeżeli motyw wyświetla własny nagłówek, po dodaniu shortcode mogą pojawić się dwa menu. W takim przypadku wyłącz standardowy nagłówek albo ukryj go w szablonie strony.
Najczęstsze problemy
Menu nie pozostaje na górze
Sprawdź, czy element nadrzędny nie posiada właściwości overflow, transform albo innego ustawienia zmieniającego zachowanie pozycji sticky.
Licznik koszyka się nie zmienia
Wyczyść pamięć podręczną i sprawdź, czy skrypt wc-cart-fragments nie jest wyłączany przez wtyczkę optymalizacyjną.
Na stronie są dwa nagłówki
Shortcode działa razem z nagłówkiem motywu. Wyłącz dotychczasowy nagłówek albo usuń z niego standardowe menu.
Podsumowanie
Kod tworzy kompletne menu nawigacyjne z logo, czterema linkami, mobilnym przyciskiem oraz koszykiem WooCommerce. Nagłówek pozostaje widoczny podczas przewijania i automatycznie dopasowuje się do mniejszych ekranów.
Najważniejsze ustawienia zostały zebrane na początku kodu. Użytkownik może podmienić nazwę firmy, obraz logo, kolory, linki, wysokość nagłówka i maksymalną szerokość zawartości.