Yksinkertaisten CSS-ruudukon ulkoasujen integrointi WordPressiin

Yhdenmukaisen ja vankan verkon asettaminen WordPressiin voi olla kivuton prosessi, jos käytät oikeita työkaluja. Tässä opetusohjelmassa opit askel askeleelta, miten nopeasti perustetaan verkkojärjestelmä WordPressissa, joka on erittäin kevyt ja helppo muokata. Pidämme muotoilun yksinkertaisena, jotta voimme keskittyä käyttämään oikeat työkalut ruudukon määrittämiseen, mutta pidä mielessä, että voit tarvittaessa suunnitella ruudukkoa itse.

Käytän WordPressissä olevaa oletusarvoista Pool-teemaa, jotta tämä opetusohjelma näyttää vain "alusta alusta" -lähestymistavan verkkojen hankkimiseen aivan oikein.

Vaihe 1: Määritä ruudukon leveys

Ennen kuin aloitat, sinun täytyy selvittää, kuinka laaja verkko on. WordPress-sivustoni nähdäkseni pääsarakkeen leveys on 450px käyttämällä Google Chromen "Tarkasta elementti" -toimintoa, kun napsautat hiiren kakkospainikkeella kohdetta. Tämä on nopein tapa, jolla olen löytänyt nopeasti määrittää kohteen leveyden ja korkeuden verkkosivulla.

Vaihe 2: Grid Designer

Sen sijaan, että saisit käsin rakentaa ruudukkoa, jota voit tehdä, jos haluat, haluan mennä yhteen monista käytettävissä olevista grid-generaattorityökaluista. Tätä opetusohjelmaa käytettäessä MindPlay käyttää gridigeneraattoria. Se on hyvin yksinkertainen ja kevyt ruudukon generaattori.

Haluan kolmen sarakkeen näytön ja minun on varmistettava, että pikselini ovat 450: ssä. Siten säädä ja siirry "Vie" -välilehdelle. Emme mene yli *typografia opetusohjelman ominaisuuksia, vaikka tämä on varmasti itsestään selvää.

Käytä Vie-välilehdessä kaikkein eniten "Style Sheet" -kehystä ja vieritä alas, kunnes näet Grid-kommentin. Kopioit kaiken kommentista tämän kehyksen alareunaan. Sen pitäisi olla vain noin 30 riviä

Vaihe 3: WordPress-tyylitaulukon päivittäminen

Kirjaudu WordPress-sivustoosi ja siirry Ulkoasu> Editoriin.

Editorin paneelin oikeassa alakulmassa näet a styles.css tiedosto (tai jotain vastaavaa teeman mukaan). Avaa se napsauttamalla tätä.

Selaa levyn alaosaan ja liitä ennakkosi MindPlay.dk: sta:

Vaihe 4: Ruudukon toteuttaminen

Jos haluat käyttää verkkoa, luo yksinkertaisesti a

luokka "ruudukko". Ruudukon jokainen alue on määritelty CSS: ssä. Avaa uusi sivu tai viesti. Siirry HTML-välilehdelle, kun haluat rakentaa verkkosi.

Seuraavassa on joitakin esimerkkejä, jotka voit liittää paikoilleen, jotta voit aloittaa:

   Vasen sarake
  Keskimmäinen sarake
  Oikea sarake

Näyttää siltä, mitä WordPressissa näyttää:

Tallenna / päivitä sivu ja katso tulokset. Minun tapauksessani tämä on sivuston sivu:

Kuten edellä näytetystä näytöstä näet, meillä on kolme saraketta ja kaikki on oikein, jos odotamme sen olevan. Voit lisätä niin monta riviä kuin haluat yksinkertaisesti aloittamalla seuraavat

    Vasen sarake
  Keskimmäinen sarake
  Oikea sarake
    Vasen rivi # 2
  Keskirivi # 2
  Oikea rivi # 2

Tässä on, miten se näyttää toistaiseksi:

Nyt voit lisätä kuvia tai tekstiä ja muotoilla jokaista riviä juuri niin kuin haluat.

Vinkkejä säätämiseen

Joissakin selaimissa saattaa olla ongelmia, kun sinulla on useampi kuin yksi rivi. Voit kiertää tämän ongelman tekemällä marginaalin oikeassa reunassa (.grid-m4, meidän tapauksessa) korkeuteen, jonka haluat kunkin rivin olevan. Jos käytät 250px: n 250 pikselin kuvia, tee rivikorkeus .grid-m4 olla 250px:

.grid-m4 float: vasen; leveys: 20px; korkeus: 250px;

Tämä varmistaa, että .grid-M1 seuraavan rivin vasemmalla puolella ei ole kellua sen yläpuolelle.

Jos haluat muotoilla koko ruudukon taustan, sinun on säädettävä .ruudukko luokka. Sanotaan siis, että ruudukkosi on neljä riviä, joista kukin on 250 pikseliä. Haluat lisätä korkeuden .grid-luokkaan 1000px: llä, joten kaikki lisäämäsi muotoiluelementit kattavat koko ruudukon.

.ruudukko leveys: 450px; korkeus: 1000px; marginaali: auto;

Käytettävän MindPlay.dk-verkon generaattorin versiosta riippuen sivusto ei ehkä luo ".grid-m4": tä ja sen sijaan sinun on käytettävä .grid-M1 jälkeen .grid-c3 varmistaa, että verkkosi ulottuu oikeaan paikkaan:

  Vasen sarake
  Keskimmäinen sarake
  Oikea sarake

Lopputulokset

Seuraavassa esitetään lopulliset tulokset kahdella rivillä ja yksinkertaisella grafiikalla:

Pidä hauskaa suunnittelussa ja muista, että voit suunnitella verkkosi haluamallasi tavalla.

Toimittajan huomautus: Tämä viesti on kirjoittanut Tara Hornor varten Hongkiat.com. Tara on suorittanut englanninkielisen tutkinnon ja kirjoittaa markkinoinnista, mainonnasta, tuotemerkistä, graafisesta suunnittelusta ja työpöytäjulkaisusta. Hänen kirjallisen uransa lisäksi Tara nauttii viettää aikaa miehensä ja kahden lapsensa kanssa.