WordPress-verkkosivuston uudelleensuunnittelu (henkilökohtaisen kosketuksen lisääminen)

Mikään muu alusta ei anna sinulle valtaa mukauttaa verkkosivustosi ulkoasua ja tuntumaa, kuten WordPress. Se on yksi syy siihen, miksi WordPress on suosittu julkaisijoiden ja verkkokehittäjien keskuudessa.


Voit ottaa perustiedot (ja raahata) WP-teeman, lisätä logon, muokata muutamaa koodiriviä, muuttaa CSS: ääsi ja saada ammattimaisen (vielä miellyttävän) näköisen verkkosivuston nopeasti. Se on helppoa työtä ja tämä opetusohjelma näyttää sinulle kuinka tehdä se.

Oletko valmis? Aloitetaan ensin ensin; värit.

Värimaailman suunnittelu

Kun kehität WordPress-sivustosi värimaailmaa, on otettava huomioon monia asioita. Ajattele sitä maalaamalla talosi tai kivi- ja laastikauppasi. Sinun on määritettävä seinien väri ja väri, jonka haluat ovesi.

Tapa, jolla maalaat ulko- ja sisätiloja, riippuu seuraavista parista tekijästä: henkilökohtaiset mieltymyksesi.

Myös WordPress-sivustosi väritys ei ole erilainen. Mitä väriä haluat linkkisi? Taustasi, kuinka teet siitä houkuttelevamman ja jätät kilpailijoillesi suurta huomiota? Mitkä värit täydentävät (tai jopa lisäävät) viestiäsi? Kuinka haluat tekstin? Taivas on rajoitus värien valinnalle, jota voit käyttää WP-sivustossasi.

Sinun on määritettävä kaikki värit, joita käytät alusta alkaen. Suosittelen, että kiinnität vain kolme väriä, mutta voit käyttää niin monta väriä kuin haluat.

Älä vain liioittele sitä, muuten markkinointiviestisi loppuu kaikkiin väreihin. Loppujen lopuksi ylimääräinen mitä tahansa on myrkyllistä, joten valitsemasi väreistä riippumatta on tärkeää varmistaa harmonia.

On parasta käyttää eniten värejä siellä, missä suurin osa ihmisistä näkee (ja toivottavasti) rakastavat niitä. Puhun logostasi ja mastotunnistasi. Nämä alueet ovat tarkalleen missä tarvitset eniten värejä; muu verkkosivustosi voi olla vähemmän värikäs, mutta informatiivisempi.

216 väriä tai 12 väriä

Olemme kaikki perehtyneet kahteentoista perusväriin, mutta verkko on täynnä värejä ja niiden erilaisia ​​sävyjä. Juuri tästä syystä henkilökohtaista lämpöä herättävän värin valitseminen samalla kun luodaan ammattimainen ilme voi olla haastava tehtävä.

Sinulla on kuitenkin onnea, koska kalasin kaikkialla Internetissä ja löysin seuraavat työkalut päästäksesi alkuun:

Kuler

Kuler

Adobe on suunnitellut Kulerin auttamaan web-kehittäjiä luomaan huippuluokan värimaailmia. Kuler on online-työkalu, joka tarkoittaa, että voit kuljettaa sitä ympäri ja käyttää sitä mistä tahansa, mutta on myös työpöytäsovellus, jonka avulla voit kehittää värimalleja suoraan työpöydältäsi. Lisäksi, jos sinulla on Adobe ID, voit tallentaa värimaailmasi yhdellä napsautuksella.

Kulerin kanssa voidaan käyttää erilaisia ​​värisääntöjä, mukaan lukien monokromaattinen, yhdiste, täydentävä, analoginen ja triadi..

Katso Kuler.

HTML VÄRIVALKO

Käytettyjen värien tunteminen on vain puolet työstä. Värien toteuttamiseksi sinun on käännettävä ne HTML-koodeiksi.

html-värikartta

Tässä kohtaa HTML-värikartta tulee sisään. Se on värikäs kaavio, jossa on yli 200 (itse asiassa 216) web-värikoodia. Kartalla varustettuna minkään auringon alla olevan värin ei pitäisi osoittautua vaikeaksi toteuttaa.

Koodit toimivat HTML: n, CSS: n, Adobe PhotoShopin ja muiden graafisten manipulointityökalujen kanssa, joten sinulla on kaikki vapaus maailmassa leikkiä väreilläsi niin paljon kuin haluat..

Katso HTML-värikartta.

GENOPAL

Jos tarvitset apua värien valintaan, GenoPal on haluamasi sovellus. Se on hyvin yksinkertainen verkkosovellus, joka “kiinnittää” väripaletit selainikkunaan. Kun valitset värejäsi, ne ilmestyvät selaimeesi värillisinä ”muistilappuina”. ��

genopal

GenoPalilla voit lisätä kirkkautta ja säätää värisävyä, joten saat tarkalleen haluamasi sävyn.

Heidän verkkosivustollaan mobiilisovellus on valmisteilla. Kun se on julkaistu, sen avulla voit kuljettaa sovellusta ja kehittää värejä mobiililaitteellasi. Heidän suunnittelu on nerokas, ja se, että tämä sovellus todella toimii, on selvä merkki siitä, että GenoPal tarkoittaa yritystä.

COLORHEXA

ColorHexa on taiteilijan maalauslevy. Tämä verkkosivusto antaa sinulle mahdollisuuden sekoittaa värejä syöttämällä vain värikoodit. Heidän edelläkävijäsovellus on värien sekoitustyökalu, mutta heillä on myös gradienttigeneraattori ja värivähennys. Eikö täällä olekaan niin puhdas nero??

colorhexa

Kuinka ColorHexa Blender toimii? Ainoa mitä sinun täytyy tehdä, on kirjoittaa värikoodisi erotettuna “+” ja ColorHexa tekee loput työn. Yritin esimerkiksi:

# ff0000 + # 0000ff + # ff00ff ja sain # aa00aa. Lisäksi ne antavat sinulle kokonaisen sivun väritietoja (lopullisella värilläsi, esimerkiksi # aa00aa). Tämä on yksi työkalu, jonka sinun täytyy kokeilla itse kokeaksesi värien sekoittumista kuin koskaan ennen.

Katso ColorHexa.

ULTIMATE CSS GRADIENT GENERATOR

lopullinen värigradienttigeneraattori

Tämä on luultavasti paras työkalu värigradienttien luomiseen asti. Se on täysin online-tilassa ja auttaa sinua luomaan virkistäviä keskipisteitä ja niitä vastaavia CSS-koodeja. Ne tarjoavat myös Chromen ja Firefox-lisäosat, joiden avulla voit integroida sovelluksen selaimeesi helpottaaksesi ja nopeuttaaksesi käyttöä.

On esikatselualue, jolla näet kaltevuutesi, joten sinun tarvitsee vain luoda kaltevuus sopivaksi katsomallasi ja kopioi liitä luotu CSS-koodi. Se on todella helppoa ja heillä on enemmän värejä kuin mitä koskaan käytät.

Katso Ultimate CSS Gradient Generator.

Fonttien poiminta

Nyt kun olen osoittanut sinulle kuinka valita ja sekoittaa värejä kuten Picasso, pelataan fontteja.

Värisi ja verkkosivustosi houkuttelevat ihmisiä, mutta sanat, ts. Sivusi ja viestit, saavat ihmiset pitämään kiinni.

Olemme kiireellisesti luomassa parhaimpia tarinoitamme kaikkina aikoina, joten suurin osa meistä unohtaa, että myös fontit ovat tärkeitä. Valitsemasi fontti vaikuttaa kuitenkin siihen, kuinka ihmiset ovat vuorovaikutuksessa verkkosivustosi kanssa. Oikeilla fonteilla kohdeyleisösi haluaa pysyä ympäri ja napsauttaa lopulta muille sivuillesi, mikä on juuri sitä mitä haluat. Sitoumus.

Siellä on miljoona ja yksi fontti, mutta valitettavasti käyttäjä näkee vain koneelleen asennetut fontit. Jos käyttämääsi fonttia ei ole asennettu heidän koneisiinsa, he näkevät läheisen vaihtoehdon (tai aivan toisen fontin), jolla ei ole samaa vaikutusta kuin haluat..

”Fonteilla pelaaminen on kuin tulen kanssa pelaaminen. Joskus se voi sytyttää verkkosivun ottelun, kauniin tekstin tähditävän. Muutoin se voi polttaa koko talon. ” – Lorelle, cameraontheroad.com.

Voit hallita fontteja (ja luoda haluamasi tehosteen) tyylitaulukolla. Teemasi tyylitaulukko on yleensä style.css tiedosto. Tämän tiedoston avulla voit hallita fonttisi väriä, kirjasintyyppiä / kirjasinperhettä, fontin kokoa ja muita valitsemasi fontin näkökohtia.

Seuraava on hyvä esimerkki:

#menu {kirjasinperhe: Arial, Helvetica, Sans-serif, Verdana, "Times New Roman"; fonttikoko: 0,8em; väri musta;}

Yllä oleva koodi asettaa fontin koon valikossa arvoon 0.8em ja asettaa värin mustaksi. Se asettaa fontin myös Arialille, mutta jos käyttäjällä ei ole Arialia koneessaan, Helvetica ottaa sen haltuunsa. Jos heillä ei ole Helveticaa tai Arialia, Verdana, Sans-serif tai Times New Roman ottaa haltuunsa.

Hallitsemalla fontteja voit luoda yhdenmukaisemman ilmeen.

Voit kuitenkin ratkaista fonttien epäjohdonmukaisuuden ongelman lopullisesti sulautetuilla kirjasimilla. Käyttämällä upotettuja (tai ulkoisia) fontteja käyttäjällä ei tarvitse olla kirjasinta koneessaan.

Lisäksi se on helppo herättävää työtä.

Ainoa mitä sinun on tehtävä on avata style.css ja laita seuraava koodi yläreunaan.

@ font-face {font-perhe: Museo300; src: url ("fontts / museo300-regular.ttf") muoto: ('truetype'); fontti-paino: normaali;}

HUOMAUTUS: Sinun on määritettävä fontin nimi ja sijainti. Yllä olevassa esimerkissä ”Museo300” on kirjasin, joka tallennettiin kansioon nimeltä “fontts”.

Voit esimerkiksi käyttää kirjasinta verkkosivustollasi kirjoittamalla:

body {fontti-perhe: Museo300;}

Voit käyttää upotettua kirjasinta mihin tahansa verkkosivustosi elementtiin. Esimerkiksi…

#menu {fontti-perhe: Museo300;}

… Asettaa Museo300-valikkoosi.

Yllä oleva menetelmä tarkoittaa, että joudut lataamaan fontin ja lähettämään sen palvelimellesi, mikä on joskus työlästä, jos kysyt minulta.

kuitenkin, ySinun ei tarvitse ladata ulkoista kirjasinta, jota haluat käyttää.

Voit linkittää vain otsikkosi (header.php) osiossa oleviin kirjasimiin seuraavasti:

Kuinka ja mihin lisäät yllä olevan rivin? Sinun on avattava WordPress-hallintapaneeli -> Ulkonäkö -> Editor -> header.php

Jos et halua tai et voi muokata header.php-tiedostoasi, tuo vain fontit kirjoittamalla seuraava rivi style.css:

@import URL (http://fonts.googleapis.com/css?family=over+the+rainbow);

Edellä olevan esimerkin avulla voit käyttää Yli sateenkaaren fontti Googlelta missä tahansa sivustosi sivustolla. Jos esimerkiksi haluat käyttää Over The Rainbow -sovellusta koko verkkosivustollasi, voit käyttää tätä koodia:

runko {font-perhe: "Over The Rainbow";}

Google tarjoaa yli 600 ilmaista kirjasinperhettä, joten pelata pois!

Päivitys (12.12.2013): Jos haluat lisätä Google-fontteja WordPress-sivustoosi helposti, voit käyttää Google Typography -laajennus. Voit myös oppia lisää Google-kirjasimista ja niiden toteuttamisesta tässä artikkelissa Paranna WordPress-verkkosivustosi typografiaa Google-kirjasimien avulla, kirjoittanut Tom Ewer.

Lisää resursseja fontteilla pelaamiseen

WordPress-laajennukset fonttien lisäämiseen

Ja niille, jotka eivät halua kaivaa koodia, voit aina asentaa WordPress-laajennuksen suorittaaksesi osan raskaasta nostamisesta puolestasi. Tässä on muutama suosituimmista ilmaisista fonttilaajennuksista WordPress.com: lta:

Onko sinulla hauskaa? Siirrytään eteenpäin…

 Päiväyksen ja ajan muotoilu

Oletko käynyt WordPress-sivustolla, joka näyttää päivämäärän tai ajan todella mukavalla sävyllä, joka sai sinut tuntemaan itsesi täydelliseksi noobiksi sivustosi suhteen? Näiden sivustojen omistajat pelasivat vain yksi rivi koodia ja nyt et voi saada tarpeeksi heidän päivämääriä. haha.

Hyviä uutisia, voit muokata tämä koodirivi ja yllättää myös lukijasi.

Sinun WP-hallintapaneeli, Navigoida johonkin Ulkomuoto, ja sitten kohtaan toimittaja kuten alla:

muotoilupäivä

Kun olet siellä, näet luettelon oikean reunan .php-tiedostoista:

yksi viesti

Napsauta yksittäistä viestiä (single.php) ja avaa hakupalkki, kun se on auki Ctrl + F. Kirjoita ilmestyvälle hakupalkkiin:

aika

Huomaat heti linjan, joka voi näyttää noin:

Nyt alue, jota haluat muokata, on (‘F Y’).

Sallikaa minun täsmentää tämä jakso antaaksesi sinulle jotain lihavampaa purra.

”F” (”F Y”) tarkoittaa Kuukauden koko nimi ja “Y” tarkoittaa Vuosi 4 numeroa. Siksi, jos käytät (‘F Y’), päivämäärä näyttää seuraavalta:

Syyskuu 2013

Jos heität pilkun F: n ja Y: n välillä, sinulla pitäisi olla jotain:

Syyskuu 2013

Jos haluat lisätä päivän ja muut elementit, voit käyttää seuraavia merkkejä:

l = päivän koko nimi (pienet kirjaimet L)

F = kuukausi

j = kuukauden päivä (päivämäärä)

Y = vuosi 4 numeroa

y = vuosi 2 numeroa

Lisää merkkejä löytyy alla olevasta taulukosta:

muotoilla päivämäärätaulukko

Ja tässä muutama esimerkki:

muotoilu päivämäärä esimerkkejä

Muista aina muokata vain hakasulkeissa olevia merkkejä (‘F Y’) ja, tee muistiinpano, Älä poista yksittäisiä lainausmerkkejä. Voit käyttää niin monta merkkiä kuin haluat saavuttaaksesi haluamasi vaikutuksen. Muista tallentaa kaikki, kun olet valmis.

Lisäksi voit päästä eroon päivämäärästä poistamalla…

… Kuten tein blogissani ei kauan sitten. �� Nyt kaikki, mitä saan Lähettäjä Fred siinä ja niin luokassa… blah blah. Ei päivämääriä ollenkaan.

Käytätkö seuraavaa osaa? Sinun on parempi olla.

Ei löytänyt aika-toimintoa?

Se on ok, koska useat päivät teemoja käyttävät_date () -toimintoa_time () -toiminnon sijasta, mikä on itse asiassa parempi käytäntö. Jos teemasi käyttää_date () -toimintoa, sinun ei tarvitse muokata mitään, koska voit yksinkertaisesti muuttaa tapaa, jolla tietosi näkyvät kojetaulussa kohdassa ”Asetukset-> Yleiset”.

Kuvien käyttö

Tämä on luultavasti tämän oppaan helpoin (ja lyhin) osa. Mutta jos olet todella uusi WordPress-ohjelmassa, kuvien lisääminen voi olla haaste.

WordPress antaa sinun lisätä kuvia latausohjelman tai (Lisää media -painike) kautta, kun luot uutta viestiä tai sivua. Ainoa mitä sinun on tehtävä, on sijoittaa kohdistin kohtaan, jossa haluat kuvan olevan viestissäsi tai sivullasi, ja napsauta sitten Lisää media.

lisää media

Kun lähetysapuohjelma avautuu, voit lisätä muita tietoja, kuten kuvatekstin, koon, linkit ja kohdistuksen.

lataa apuohjelma

Tämä alue löytyy latausapuohjelman oikealta puolelta.

Tutustu seuraaviin lähteisiin saadaksesi lisätietoja kuvien lisäämisestä:

Ja jos et ole varma, mistä löytää mahtavia ilmaisia ​​kuvia, tarkista kirjoittamassamme viesti kattaa WordPressin parhaat kuvaresurssit.

Katso? Sanoin, että se on lyhin ��

Faviconin lisääminen

Ennen kuin unohdamme kuvia kokonaan, luo meidän luoda ja lisätä favicon WordPress-sivustoosi. Favicon (tai suosikkikuvake) on kuvake, jota käytetään verkkosivuston kirjanmerkkeihin.

Favicon auttaa lukijoita tunnistamaan verkkosivustosi visuaalisesti.

Yleensä favicon on neliömäinen 16 x 16 pikselin graafinen tiedosto, jonka tunniste on .ico. Laajennus tarkoittaa kuvaketta.

Kuinka luoda Favicon

Voit luoda faviconin verkossa tai käyttämällä kuvankäsittelyohjelmia, kuten GIMP, tai jotain muuta, jonka avulla voit tallentaa .ico-tiedostoja. Suurin osa verkkopalveluista on ilmaisia.

Vaikka kuva on yleensä hyvin pieni (16 x 16 pikseliä), favicon tulee edustaa blogiiasi kokonaisuudessaan. Kuvasi tai tekstin, jota käytät faviconin luomiseen, tulee edustaa online-yritystäsi.

Jos käytät kuvaeditoria:

  • Rajaa tai lisää tilaa vastaavasti varmistaaksesi, että kuvasi on neliö
  • Kuvan koon muuttaminen 16 x 16 pikseliin ja
  • Tallenna kuva nimellä favicon.ico

Verkkopalveluihin, joiden avulla voit luoda faviconeita, kuuluvat (mutta ei niihin rajoittuen):

Kun olet luonut favicon, he antavat sinun ladata sen tietokoneellesi, joten älä ole huolissasi.

Kuinka asentaa Favicon WordPressiin

Jos teeman pääkansiossa on toinen favicon, sinun on poistettava se käyttämällä FTP-asiakasohjelmaa tai jotain muuta käytettävissä olevaa menetelmää. FTP-asiakkaita suositellaan, koska niitä on helppo käyttää ja löydät nopeasti etsimäsi tiedoston.

Tätä opetusohjelmaa varten luin faviconer.com-sivustolla favicon blogiini ja Filezilla nykyisten faviconien poistamiseen.

Lataa favicon.ico-tiedosto kädessäsi teeman pääkansioon. Tämä on kansio, johon nykyinen teema on tallennettu.

Lataa sitten toinen kopio faviconistasi juurihakemistoon (yleensä public_html) tai päähakemistoon, johon sivustosi on tallennettu, jotta voit nähdä faviconisi kirjoittaessasi sivustolle.com/favicon.ico. Tämä lisää favicon automaattisesti syötteisiisi.

Kun lataus on valmis, on aika saada favicon.ico toimimaan. Tämän pitäisi tehdä:

Faviconin lisääminen laajennuksella

Paras tapa lisätä faviconi on käyttää pluginia. Suosittelen käyttämään ”Kaikki yhdessä Favicon”Laajennus edistyneemmälle käytölle hyvin yksinkertaisen lähestymistavan avulla, jota voit käyttää”Yksinkertaisin Favicon-Laajennus, jolla ei ole taustavaihtoehtoja, sinun on vain ladattava favicon.ico-tiedosto tiedostollesi oikeaan paikkaan..

all-in-one-suosikkikuvake

Lisää favicon manuaalisesti malliin

Jotkut ihmiset saattavat mieluummin lisätä favisoneitaan manuaalisesti malliinsa (vaikka se ei olekin paras tapa) lisätäksesi tämän seuraavien vaiheiden avulla:

  • Kirjaudu sisään kojelauta
  • Navigoida johonkin Ulkomuoto
  • Sitten Toimittaja (Teemaeditori)
  • Etsi ja avaa header.php (otsikko) tiedosto

Lisää tämä rivi otsikkotiedostoosi (mieluiten yläreunassa, jossa näet muita) tunnisteet:

Tallenna kerran valmis. 

Päivitä selaimesi nähdäksesi uudet muutokset.

Tässä vaiheessa sinun pitäisi voida muuttaa värejä, valita parempia fontteja, muotoilla päivämääriä ja aikaa, käyttää kuvia ja lisätä favicon.

johtopäätös

WordPress-sivustosi uudelleensuunnittelusta on niin paljon keskusteltavaa, että se olisi karkea palvelu (sinulle) yrittää peittää kaiken yhdessä viestissä..

Hyötyäksesi sinulle parhaiten on parasta jakaa opetusohjelma useisiin osiin (tämä on osa 1). Jaamme lisää uudelleensuunnittelu temppuja päivien myötä, joten ole varovainen. Näiden opetusohjelmien tarkoituksena on auttaa sinua luomaan kaikkien aikojen paras WordPress-sivusto ja jättämään sinut tuntemaan olosi onnelliseksi, koska teit sen kaiken itse.

Jos haluat jakaa mielipiteesi tai mielipiteesi tai lisätä jotain keskusteluun, jätä kommentti alla olevaan kommenttiosaan.!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map