BubacatCity vietnes izveide vietnē WordPress

Mērķis

• Nodot drosmīgo "ēģiptiešu kaķu" atmosfēru
• Padarīt vietni saprotamu mazāk nekā 10 sekundēs
• Nodrošināt zibensātru ielādi (spēļu pircēji ir nepacietīgi!)
• Sagatavot tīru WooCommerce bāzi kārtīm + t-krekliem, cepurēm utt.
• Adaptīvi izkārtojumi mobilajām ierīcēm
• Vieta emuāram, personāžu profiliem un galerijai

Tēmas pielāgošana un globālie stili

Katrā jaunā vietnē es vienmēr speru pirmo soli: iestatu dizaina sistēmu Elementor un Astra. Es definēju globālās krāsas, tipogrāfiju un adaptīvos robežpunktus pirms jebkādu sadaļu izveides. Tas garantē vizuālo integritāti visās ierīcēs.

• Elementor > Vietnes iestatījumi > Globālās krāsas
• Elementor > Vietnes iestatījumi > Globālie fonti
• Elementor > Vietnes iestatījumi > Izkārtojums > Robežpunkti

(Pēc izvēles) Appearance / Astra > Customize > Global > Colors (Typography / Container) — Elementor stiliem ir prioritāte pār Astra iestatījumiem. Tomēr tēmas kontrolētās zonas, piemēram, emuāru arhīvi, galvenes un kājenes, izmanto Astra konfigurāciju. Ja pamanāt neatbilstības šajās zonās, vēlreiz pārbaudiet savus Astra customizer iestatījumus.

Galvene (Logotips, Izvēlne, Poga)

Šim projektam es izmantoju elastīgo Astra galveņu konstruktoru un paplašināju to ar pakārtoto tēmu. Es izveidoju pakārtoto tēmu, izmantojot Astra oficiālo pakārtoto tēmu ģeneratoru, kas man ļāva droši pievienot pielāgotu CSS, neaiztiekot pamata tēmas failus. Mērķis bija izveidot caurspīdīgu galveni, kas tiek fiksēta ritinot. To es panācu šādi:

.site-header {
  position: sticky;
  top: 0;
  z-index: 999;
}
#content {
  margin-top: -92px; /* Your header height */
}

Hero sadaļa

Pirmajam ekrānam es pievienoju 8 hieroglifu ikonas un skriptu, kas lēnām parāda tās pa vienai nejaušā secībā. Tā kā ielāde un attēlošana aizņem 2-3 sekundes, es pievienoju atpakaļskaitīšanas animāciju ar pakāpenisku izzušanu, lai padarītu gaidīšanas procesu saistošāku.

Sadaļa "Iepazīsties ar kaķiem"

Es izveidoju interaktīvas kartītes, kurās, nospiežot pogu "Uzzināt vairāk", poga pazūd un parādās personāža apraksts. Tam es izmantoju JavaScript:

document.addEventListener("DOMContentLoaded", function () {
  document.querySelectorAll(".reveal-container").forEach((container) => {
    const btn = container.querySelector(".reveal-btn");
    const hidden = container.querySelector(".hidden-text");
    if (btn && hidden) {
      btn.addEventListener("click", () => {
        btn.style.display = "none";
        hidden.style.display = "block";
      });
    }
  });
});

Emuāra sadaļa

Lai izveidotu emuāru, es izmantoju spraudni The Post Grid un pielāgoju tā stilus, lai tie atbilstu vietnes dizainam.

Katra raksta beigās es pievienoju saistīto ierakstu karuseli ar ķepiņu bultiņām:

Lai izveidotu šo automātiski ritošo karuseli, es izmantoju Blog Designer Pack spraudni.

Galerija

Galerijai es izvēlējos Modula Image Gallery – Photo Grid. Tāpat es nolēmu pievienot iespēju mainīt attēlus galerijā, izmantojot tastatūras bultiņas (kreisā bultiņa — iepriekšējais attēls, labā bultiņa — nākamais attēls). Lai tas darbotos, es izmantoju JavaScript kodu, kas, nospiežot taustiņu, imitē klikšķi uz bultiņām "uz priekšu" vai "atpakaļ":

document.addEventListener('keydown', function(e) {
    const container = document.querySelector('.modula-fancybox-container');
    if (!container) return;

    const style = window.getComputedStyle(container);
    if (style.display === 'none' || style.visibility === 'hidden' || style.opacity === '0') return;

    const next = container.querySelector('.f-button.is-next');
    const prev = container.querySelector('.f-button.is-prev');

    if (!next || !prev) return;

    if (e.key === 'ArrowRight') next.click();
    if (e.key === 'ArrowLeft') prev.click();
});

Veikals un galarezultāts

Veikalam es izmantoju WooCommerce spraudni. Pašlaik pabeidzu kāršu un kastes dizainu. Spēļu kārtis un kaste izskatīsies šādi: