Preskoči na sadržaj

Kako pretvoriti statičnu HTML stranicu u WordPress temu

zejd@synergydesign.io

Ako već imaš web stranicu napravljenu u običnom HTML-u i želiš je prebaciti na WordPress — ali zadržati isti dizajn — ovaj način je za tebe. U suštini, uzet ćeš svoj HTML, podijeliti ga na manje dijelove, smjestiti u WordPress strukturu teme i aktivirati je. Idemo korak po korak.

Step 1: Napravite folder teme i osnovne fajlove

Prvo, na računaru (ili direktno na hostingu ako ti je lakše) kreiraj novi folder — možeš ga nazvati npr. “my-theme”.
Unutar njega kreiraj barem sljedeće fajlove:

  • style.css
  • index.php
  • header.php
  • sidebar.php
  • footer.php

(Naravno, ne moraš koristiti sve — zavisi da li tvoj dizajn ima sidebar ili footer — ali ovo je standardna osnova.)

U style.css na samom vrhu dodaj zaglavlje teme. Ovo WordPressu govori da je folder zapravo tema. Na primjer:

/*
Theme Name: My Theme
Author: Your Name
Author URI: https://your-domain.com
Description: A custom theme created from a static HTML website
Version: 1.0
*/

Nakon ovog dijela, ispod njega zalijepi CSS svog starog HTML sajta.

Step 2: Prebaci svoj stari CSS u WordPress format

Kada kopiraš svoj stari CSS, provjeri da je style.css glavna CSS datoteka koju WordPress koristi.
WordPress očekuje da se sav osnovni stil nalazi u ovom fajlu.

Dakle, ukloni stare <link> tagove koji učitavaju eksterne stilove (ako si ih imao), ili sve te stilove spoji u ovaj fajl.

Step 3: Podijeli svoj HTML na WordPress template dijelove

Tvoj originalni HTML fajl je vjerovatno sadržavao sve u jednom komadu —
<!DOCTYPE html>, <head>, <body>, header, nav, content, footer…

Sada ćeš taj fajl podijeliti u više dijelova koje WordPress koristi:

U header.php:

Stavi sve od početka HTML-a pa do početka glavnog sadržaja
(uključujući <head>, početni <body> i header sekciju).

U footer.php:

Stavi sve s kraja — closing </body> i </html> tagove, plus sadržaj footera.

U sidebar.php:

Ako imaš sidebar, stavljaš ga ovdje.

U index.php ili page.php:

Ovdje ide glavni sadržaj stranice.

Na ovaj način, kada WordPress učita temu, on automatski uključuje (putem get_header(), get_footer(), itd.) sve ove dijelove — i tvoj sajt će izgledati potpuno isto kao stari HTML, samo sada koristi WordPress strukturu.

Step 4: Aktiviraj svoju novu temu u WordPressu

Nakon što imaš folder “my-theme” sa svim potrebnim datotekama (style.css, header.php, footer.php, index.php itd.), uradi sljedeće:

  1. Uploaduj folder u WordPress instalaciju — u wp-content/themes/ direktorij.
  2. Uloguj se u WordPress admin, idi na:
    Appearance → Themes → Add New → Upload Theme
    (ako si folder zipovao) → Install → Activate.
  3. Posjeti svoj sajt —
    trebao bi izgledati isto kao tvoja originalna HTML verzija, ali sada možeš koristiti WordPress funkcije, pluginove, postove i stranice.

Zaključak

Ako želiš zadržati svoj stari HTML dizajn, ali dobiti fleksibilnost WordPressa (dodavanje postova, stranica, pluginova itd.), ovaj pristup je odlična opcija.
Potrebno ti je samo osnovno poznavanje HTML/CSS-a i strukture WordPress tema — i cijeli proces postaje prilično jednostavan.