Sinu WordPressi sait töötab, aga näeb välja nagu sajad teised? Sama standardkujundus, samad fondid, mitte mingit individuaalsuse märki. Platvorm pakub hulgaliselt kohandamisvõimalusi; küsimus on, kust alustada, ilma et saiti seejuures katki teeks.

WordPressi saidi kujunduse muutmine ei tähenda tingimata täielikku nullist ümberehitamist. Mõnikord piisab kolmest-neljast sihipärasest näpunäitest, et su sait ei näeks enam välja tavaline, vaid muutuks meeldejäävaks. Allpool on samm-sammuline jaotus: värviskeemist faviconini, koos konkreetsete tööriistadega ja ilma koodita seal, kus saad ilma hakkama.

💡 Kiire ülevaade:

• Vali 3 värvist koosnev värviskeem, kasutades Adobe Colorit, Coolorsi või ColorHexat
• Seadista fondid Google Fontsi kaudu, kohandatud kirjatüüpide jaoks Use Any Font
• Muuda kuupäeva- ja kellaajavormingut ühe koodirea või kohandaja kaudu

Värviskeemi valimine

Värvid loovad poole muljest. Külastaja pole veel pealkirjagi lugenud, kuid juba tajub, kas sait tundub „premium" või „odav", tehniline või loominguline, usaldusväärne või kahtlane. Värviskeem on sinu brändi visuaalne ankur.

Optimaalne lähenemine on kolm põhivärvi: primaarne (taust/tekst), aktsent (nupud, lingid, olulised elemendid) ja toetav (äärised, eraldajad, hõljumisolekud). Rohkem kui kolm riskib visuaalse müraga; vähem on igav. Peamine reegel: kasuta aktsentvärvi säästlikult, ainult seal, kus on vaja tähelepanu tõmmata.

Kust värvivalikuga alustada:

Adobe Color (endine Kuler)

Adobe tööriist värviskeemide loomiseks harmooniareeglite alusel: monokromaatiline, komplementaarne, triaadiline, analoogne. Kapoti all on värviring, kus määrad baasvärvitooni ja süsteem valib ülejäänud automaatselt. Üleslaaditud pildist saab paleti eraldada, mis on mugav, kui sul on referents. Tasuta saadaval aadressil color.adobe.com.

Coolors

Kiirusele ehitatud paletigeneraator. Vajuta tühikuklahvi ja saad uue viiest värvist koosneva kombinatsiooni. Saad lukustada mis tahes värvi ja keerutada ülejäänuid. Väljundiks on kasutusvalmis HEX-koodid. Olemas on plugin Chrome'ile/Firefoxile ja iOS-i rakendus. Töötab aadressil coolors.co.

ColorHexa

ColorHexa pole lihtsalt pipett, vaid värvi entsüklopeedia. Sisesta HEX, RGB või nimi ja saad lehe, kus on komplementaarsed toonid, gradiendid, triaadid, protsentuaalne koostis ja pime eelvaade (kuidas värv paistab erinevat tüüpi värvipimedusega inimestele). Värvisegisti: sisesta #ff0000+#0000ff+#ff00ff, saad tulemuseks #aa00aa koos täieliku analüüsiga. colorhexa.com.

Valmis HTML-paletid

Kui sa ei soovi nullist valida, haara valmispaletid. htmlcolorcodes.com pakub 216 veebiturvalist värvi koos HEX-koodidega, mis ühilduvad CSS-i, Photoshopi ja mis tahes graafikaga. Teenus Paletton (endine Color Scheme Designer) pakub skeeme koos eelvaatega saidi maketil.

CSS-i gradientide generaator

Gradiendid teevad tagasitulekut ja nüüd pole need 2012. aasta bändid, vaid peened üleminekud sektsioonide taustadel ja nuppudel. ColorZilla Gradient Editor on Photoshopi-laadne redaktor: määra ankrupunktid värvide ja läbipaistvusega, liiguta keskpunkti, kopeeri valmis CSS. See toetab lineaarseid, radiaalseid ja korduvaid gradiente. Chrome'ile ja Firefoxile on olemas plugin koos pipetiga otse brauseris.

Fontide valimine ja seadistamine

Värvid tõmbavad tähelepanu; tekst hoiab seda. Font mõjutab loetavust ja tooni tajumist: range seriif loob toimetusliku kvaliteeditunde, samas kui puhas sans-serif annab edasi tehnoloogilist õhustikku.

Veebifontide probleem on see, et külastajad näevad ainult neid fonte, mis on nende arvutisse installitud, välja arvatud juhul, kui kasutad manustatud (veebi) fonte. Seega kohandatud kujunduse jaoks ainult välised fondid.

Põhireegel: mitte rohkem kui kaks fonti lehe kohta. Üks pealkirjade jaoks (suur, eristuv), teine sisuteksti jaoks (maksimaalselt loetav). Kolmas ainult siis, kui vajad koodi jaoks monospace'i.

Google Fonts, peamine allikas

Tasuta kataloog, mis sisaldab üle 1500 fondiperekonna aadressil fonts.google.com. Ühendamine võtab kaks rida. Klassikaline meetod on teema header.php kaudu:

1
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

Või style.css-is:

1
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

Pärast importimist on font saadaval igas CSS-i reeglis:

1
body { font-family: 'Roboto', sans-serif; }
2
h1, h2, h3 { font-family: 'Montserrat', sans-serif; }

GDPR-i nüanss: Google'i serveritest otse laaditavad Google Fonts edastavad külastajate IP-aadressid. Alates 2022. aastast on EL-i kohtud seda rikkumisena käsitlenud. Lahenduseks on plugin Local Google Fonts, mis laadib fondid teie serverisse alla ja serveerib neid lokaalselt. Alternatiiv neile, kes pluginatega tegeleda ei soovi, on artikkel Google Fontide lokaalse laadimise kohta meie blogis.

Kohandatud fondid pluginaga

Kui vajate brändifondi, mida Google Fonts'is pole, proovige Use Any Font. Laadige üles ttf-, otf- või woff-fail ning plugin teisendab selle woff2 vormingusse ja lisab halduspaneeli. Tasuta versioon võimaldab üles laadida ühe fondi; Pro eemaldab piirangu.

Käsitsi ühendamine @font-face abil

Kui eelistate koodi pluginatele, asetage fondifail kausta /wp-content/themes/your-theme/fonts/ ja lisage style.css-i:

1
@font-face {
2
    font-family: 'Museo300';
3
    src: url('fonts/museo300-regular.ttf') format('truetype');
4
    font-weight: normal;
5
}

Kasutamine:

1
#menu { font-family: 'Museo300', sans-serif; }

Kuupäeva ja kellaaja vormindamine

Standardne kuupäevavorming ei sobi alati disainiga. Õnneks võimaldab WordPress seda ilma pluginate abita muuta.

Meetod 1: kohandaja kaudu (koodivaba)

Minge jaotisse Välimus → Kohanda → Üldised seaded. Seal saab muuta ka kellaaja vormingut. Töötab enamiku klassikaliste teemade puhul.

Meetod 2: single.php kaudu (täpne kontroll)

Avage Välimus → Teema redaktor → single.php. Leidke funktsioon the_time() või the_date():

1
<?php the_time('F Y'); ?>

Vormingu sümbolid:

• l, nädalapäeva täispikk nimetus (väiketäht L)
• F, kuu sõnana
• j, kuupäev numbrina
• Y, aasta neljakohalisena
• y, aasta kahekohalisena

Kombinatsioonide näited:

('l, j F Y') → pühapäev, 14 juuni 2026. ('j F, Y') → 14 juuni, 2026.

Ära puuduta ülakomasid sulgude sees, muuda ainult nende vahel olevaid sümboleid. Kui teema kasutab the_date() funktsiooni the_time() asemel, on vormingut lihtsam muuta: Seaded → Üldine → Kuupäeva vorming.

Piltide kasutamine

Piltide lisamine WordPressis käib postituse redaktoris nupu „Lisa meediat" kaudu. Aseta kursor soovitud kohta → Lisa meediat → vali pilt meediateegist või laadi üles uus.

Paremal on manuse seadete paneel: pealkiri, alt-tekst (oluline SEO ja ligipääsetavuse jaoks), suurus, joondus, link. Lehe kiiruse huvides laadi üles juba tihendatud pildid (TinyPNG või ShortPixel enne üleslaadimist). Täpsemalt meie WordPressi meediateegi juhendis.

Faviconi lisamine

Favicon on väike ruut brauseri vahekaardil ja järjehoidjates. Väike detail, mis loob äratuntavust: kui kasutajal on avatud 20 vahekaarti, on favicon ainus asi, mis teie saiti visuaalselt teistest eristab.

Kuidas faviconit luua

Kõige usaldusväärsem teenus on RealFaviconGenerator. Laadige üles ruudukujuline pilt (vähemalt 260×260) ja saate ikoonipaketi kõigile platvormidele: iOS, Android, Windowsi paanid, Safari kinnitatud vahekaart. Lisaks valmis HTML-kood lisamiseks.

Kui vajate lihtsat.ico-faili mõõtmetega 16×16, sobib ükskõik milline graafikaredaktor, mis salvestab.ico-vormingusse (GIMP on tasuta). Või kasutage veebiteenust Favicon.io.

Kuidas WordPressis paigaldada

Lihtsaim meetod on sisseehitatud saidiikoon. Alates WordPress 4.3-st on see saadaval kohandajas:

Välimus → Kohanda → Saidi identiteet → Saidiikoon. Laadige üles ruudukujuline pilt ja WordPress lõikab selle automaatselt kõigile platvormidele vajalikesse mõõtudesse. Pole vaja pluginaid, FTP-d ega header.php-d.

Pluginameetod on All In One Favicon, mis annab rohkem kontrolli: eraldi ikoonid administraatorile, esiosale ja erinevad ikoonid erinevatele seadmetele. Kuid 95% saitide jaoks on sisseehitatud saidiikoon piisav.

Käsitsi meetod (lisa header.php-sse):

1
<link rel="shortcut icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico">

Asetage favicon.ico fail teema kausta juure. Ärge unustage seda dubleerida public_html kaustas, et favicon avaneks aadressil yoursite.com/favicon.ico.

⁉️🤔 Korduma kippuvad küsimused

Kas ma saan saidi kujundust muuta ilma sisu kaotamata?

Jah, WordPressi teema vahetamine ei mõjuta postitusi, lehti ega meediafaile. Need on salvestatud andmebaasi teemast eraldi. Ainus, mis võib „katki minna", on paigutus ja elementide positsioneerimine, eriti kui vana teema kasutas kohandatud postitüüpe või lühikoode. Enne vahetamist tehke täielik varukoopia (majutus + andmebaas). Turvaliseks testimiseks kasutage testkeskkonda; paljud majutusteenused (SiteGround, Kinsta, WP Engine) pakuvad seda ühe klõpsuga.

Kui palju fonte on saidi jaoks optimaalne?

Kaks: üks pealkirjadele, üks sisutekstile. Kolmas (monospace) koodile, kui see on saidil olemas. Iga lisafont suurendab laadimisaega 200-400 ms ja tekitab visuaalset müra. Google Fonts võimaldab valida ainult vajalikud paksused (tavaline + rasvane = 2 faili 9 asemel) ja Local Google Fonts plugin salvestab need lisaks teie serverisse puhvrisse.

Kas kohandamiseks on vaja koodiga tegeleda?

Ei. WordPressi kohandaja (Välimus → Kohanda) katab enamiku ülesandeid: värvid, fondid, logo, favicon, taustapildid, CSS. Plokiteemad (alates WP 5.9-st) pakuvad saidiredaktorit, mis on veelgi visuaalsem meetod ilma koodita. Koodi on vaja siis, kui soovite peenhäälestust: kuupäevavorming failis single.php, kohandatud @font-face, spetsiifiline CSS teatud pluginile.

Mida teha, kui sait läks pärast teema vahetamist katki?

Esiteks: ärge paanitsege, teie sisu pole kuhugi kadunud. Teiseks: kui administraatoripaneel on ligipääsetav, pöörduge tagasi vana teema juurde (Välimus → Teemad → Aktiveeri). Kui administraatoripaneel pole ligipääsetav, minge FTP kaudu kausta /wp-content/themes/, nimetage uue teema kaust ümber (lisage _disabled) ja WordPress lülitub automaatselt vaiketeemale. Pärast taastamist lubage failis wp-config.php WP_DEBUG, et näha vigu.

Kuidas kontrollida, kas favicon töötab?

Avage yoursite.com/favicon.ico; kui ikoon kuvatakse, on fail paigas. Brauseris ei ilmu favicon kohe: seda puhverdatakse agressiivselt. Kontrollimiseks avage sait inkognito režiimis või sundige vahemälu värskendama (Ctrl+Shift+R). RealFaviconGenerator pakub URL-i põhist faviconi kontrollimise tööriista.

WordPressi uuenduskuur: mida teha esimesena

Tegevuste järjekord kohandamiseks nullist: värviskeem → fondid → logo ja favicon → kuupäevavorming → vidinate ja menüüde paigutus. Just selles järjestuses: värvid ja tüpograafia on vundament, millele kõik muu ehitatakse.

Kui sait juba töötab ja toob liiklust, ärge tehke uuenduskuuri otse domeenil. Testkoopia + testimine → migratsioon. Otsingumootoritele märgatavaid muudatusi (HTML-struktuuri muutused, pealkirjad, URL-id) tuleks teha mõistvalt: järsk uuenduskuur ilma ümbersuunamisteta võib asetust langetada.

Neile, kes soovivad teemasse sügavamalt süüvida: kohandatud fontide juhend meie blogis, WordPressi meediakogu artikkel piltidega töötamiseks ja Google Fontide lokaalse laadimise üksikasjalik analüüs koos GTmetrixi enne/pärast testiga.

Alustage kolme värvi ja kahe fondiga; ülejäänu järgneb.