Miten tehdä sarakkeita WordPress ilman plugin

Miten tehdä sarakkeita WordPress ilman plugin

Sisällön järjestäminen sarakkeisiin on lastenleikkiä WordPress Columns -lohkon ansiosta. Tämä lohko kuuluu ydinlohkoihin, joita saatetaan käyttää jokaisessa WP-teemassa. Columns-lohkossa voi olla enintään 6 saraketta. Sinulla voi siis olla 6 erilaista sisältöä vierekkäin. Tänään me...

Tänään näytämme sinulle, miten tehdä sarakkeita WordPress ilman plugin - käyttämällä sarakkeet lohko. Tuomme sinulle myös yhteenvedon uusimmat ominaisuudet WP 5.3 versiosta päivitys.

Tässä opetusohjelmassa löydät tietoa seuraavista asioista:

Mikä on sarakkeiden tarkoitus

Verkkosivuston sarakkeilla voi olla useita sovelluksia. Ensinnäkin ne voivat tehdä sisällöstä hyvin järjestettyä, luettavampaa ja helpommin selattavaa. Järjestämällä sisältöä sarakkeisiin voit korostaa tärkeitä tietoja tai parametreja.

Voit esimerkiksi käyttää monisarakkeista asettelua palvelujesi esittelyyn. Lisää sinne havainnollistava kuva, kuvaus tai painike. Voit tietenkin tehdä kuvasta klikattavan.

Monipalstainen ulkoasu palveluiden kanssa
Monisarakkeinen ulkoasu palveluiden kanssa

Samoin kuin palveluissa, voit käyttää WordPressissä sarakkeita tuotteiden tai tuoteryhmien näyttämiseen. Se on ihanteellinen, jos sinulla on yksinkertainen yrityssivusto.

Monipalstainen asettelu tuotteilla ja kategorioilla
Tuotteiden ja luokkien näyttämiseen käytettävät sarakkeet

Blogikirjoituksissa voit käyttää sarakkeita sisällön erottamiseen. Voit sijoittaa tekstiä, luetelmakohtia tai kuvia vierekkäin.

Erillinen sisältö sarakkeiden avulla
Sarakkeiden käyttäminen sisällön erottamiseen

Kuinka sarakkeet toimivat vanhassa editorissa

Jos halusit tehdä monisarakkeista sisältöä, sinun oli ennen WordPress 5+:a käytettävä taulukoita. Se oli paljon vaikeampaa kuin uusimmassa editorissa. Lisäksi tyyleissä ja taulukoiden näyttämisessä mobiililaitteissa oli yleensä ongelmia. Miten se toimi ennen?

Sinulla on ollut useita vaihtoehtoja, miten luoda sarakkeita WordPress verkkosivuilla:

1. Lisää HTML-koodi manuaalisesti tekstieditoriin

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

Tätä lähestymistapaa käyttivät pääasiassa kehittäjät, jotka pystyivät nopeasti luomaan taulukon tai sarakkeen vaatimustensa perusteella. Haittapuolena oli, että kaikki WordPress-teemat eivät pystyneet käsittelemään sarakkeita hyvin. Taulukot eivät yleensä olleet täydellisiä, eikä keskivertokäyttäjä voinut helposti ratkaista kaikkia mahdollisia ongelmia.

2. Taulukoiden salliminen WordPress-editorissa

Koska WordPress käytti TinyMCE-editoria, oli mahdollista sallia toimintojen muokkaaminen taulukoissa. Jos olet kiinnostunut oppimaan lisää, löydät kaikki yksityiskohdat tällä foorumilla. Jos teet saman AIT-teemoillemme, taulukot toimivat oikein.

3. Columns elementin käyttäminen AIT-teemoissa

Jos käytät jotakin vanhemmista WordPress-teemoistamme, tunnet varmasti Columns -elementtimme. Tätä elementtiä voidaan käyttää sarakkeiden lisäämiseen sivujen sisälle. Se on tilattavissa oleva elementti, eli voit sijoittaa sen minne haluat. Etuna on sen muunneltavuus sivujen sisällä.

Sarakkeet elementti
Tilattavissa oleva elementti Columns - voit käyttää sitä missä tahansa AIT-teemassa.

4. Lataa kolmannen osapuolen lisäosa taulukoiden hallintaan

Toinen ratkaisu sarakkeiden tekemiseen WordPress-viesteihin ja -sivuihin oli ladata yksi saatavilla olevista liitännäisistä taulukoiden luomiseen. Nämä laajennukset mahdollistavat sarakkeiden/taulukoiden lisäämisen muutamalla klikkauksella ilman koodausta. Myös vähemmän kokeneet käyttäjät pystyivät käyttämään tätä.

Kuinka tehdä sarakkeita WordPressissä ilman pluginia (lohkoeditorissa)

Uuden lohkoeditorin ansiosta sarakkeiden luomisesta tuli erittäin helppoa. Jos käytät vielä vanhaa WordPressiä, nyt on oikea aika päivittää uusimpaan versioon. Pystyt lisäämään ja hallitsemaan sarakkeita yksinkertaisesti, muutamalla napsautuksella Columns-lohkon avulla.

Tämä lohko on tervetullut muutos kaikille, jotka haluavat työskennellä monisarakkeisen sisällön kanssa, esitellä tuotteita tai kirjoittaa blogia eikä heillä ole kokemusta ohjelmoinnista.

Katsotaanpa, miten lisätä sarakkeet lohko ja miten luoda sarakkeita WordPress ilman plugin:

  • Ensimmäinen vaihtoehto on napsauttaa yläpalkin "+" -painiketta ja valita Columns-lohko käytettävissä olevista lohkoista.
  • Toinen vaihtoehto on klikata "+" missä tahansa editorin sisällä.
Lisää sarakkeita WordPressissä klikkaamalla "+"
Sarakkeiden lisääminen WordPressissä napsauttamalla "+"-painiketta.
Lisää Columns-lohko, jossa on vinoviiva "/"
Sarakkeiden lisääminen WordPressissä käyttämällä vinoviivaa "/"

WordPress Columns -lohkon ennalta määritellyt asettelut (UUSI WP 5.3:sta)

Uusin versio toi valtavia parannuksia sarakkeiden asetuksiin. Ensinnäkin käytettävissä on oletusasettelutyylejä. Mitä se tarkoittaa?

Käyttäjät voivat valita ulkoasun ja tasaustyylin lisätessään uuden lohkon sisältöalueelle. Ennalta määritellyt asettelut voivat olla erittäin hyödyllisiä - erityisesti niille käyttäjille, joilla ei ole kehittyneitä WordPress-taitoja. Tämä ominaisuus edustaa sitä, miten kuvittelemme tavan tehdä sarakkeita WordPressissä (ilman lisäosaa tai muuta lisäosaa).

Ennalta määritellyt asettelut Columns-lohkossa
Ennalta määritellyt asetteluvaihtoehdot

 

Jos et halua valita WordPress Columns -lohkossa esiasennettua asettelua, ohita se. Tämän vaiheen ohittamisen jälkeen sisältö erotetaan kahteen samaan osaan/ kahteen yksittäiseen sarakkeeseen, joita voidaan muokata.

Luotu sarakkeet-lohko
Sarakkeet-lohko, jossa on 2 oletusaluetta (sarakkeita), joita voit muokata.

Sarakkeet Lohkon perusasetukset

WordPress Columns -lohkossa itsessään ei ole paljon vaihtoehtoja. Miksi näin on, selitämme myöhemmin. Yläpalkissa voit vaihtaa kohdistuksen leveäksi tai täysleveäksi. Voit vaihtaa tämän linjauksen, jos aktiivinen teemasi tukee sitä.

Sarakkeet-lohkon ylin työkalurivi
Ylin työkalupalkki, jossa on kohdistusvaihtoehtoja

Tärkein Columns-lohkon asetus on oikealla puolella olevan tarkastajan sivupalkin sarakkeiden määrä. Oletusarvoisesti sarakkeita on 2, mutta voit lisätä määrän 6:een. Voit muuttaa sitä hiirellä tai syöttämällä numeron. Näet heti, miltä se näyttää, kun olet lisännyt tai vähentänyt sarakkeita. Lohko muuttuu dynaamisesti liukusäätimestä riippuen.

Sarakkeiden määrän muuttaminen
Liikuta liukusäätimellä muuttaaksesi sarakkeiden määrää tarpeen mukaan.

Se on erittäin käytännöllinen, koska voit muuttaa sarakkeiden lukumäärää kirjaimellisesti sekunneissa ilman vaikeita muutoksia asetuksiin tai koodaukseen.

Samoin kuin muut lohkot WordPress-editorissa, voit lisätä Custom CSS Class myös Columns-lohkoon.

Lohko-sovitin lohkojen kanssa työskentelyn sujuvoittamiseksi

Columns-lohko on erityinen, koska sillä voi luoda useita lohkoja. Ennen kuin uusi versio julkaistiin, oli melko vaikeaa työskennellä yksittäisten lohkojen kanssa. Kun halusit lisätä jonkin lohkon, et tiennyt tarkalleen, mistä kohtaa klikata. Lohkojen lisäyksen (ja sen erottamisen taustavärin mukaan) ansiosta on helpompi lisätä sisältöä oikeaan sarakkeeseen.

Lohko appender WordPress sarakkeet lohko
Block appender taustavärillä

Kuinka työskennellä WordPress Columns Blockin kanssa

Columns-lohkon kauneus on se, että jokainen sarake voi sijoittaa muita lohkoja. Se voi olla Kappale, Kuvan lohko tai painikkeen lohko. Sarakkeiden enimmäismäärä on 6, joten voit luoda monisarakkeista sisältöä tarpeen mukaan. Kuten aiemmin mainittiin, tuotteiden esittelemiseksi voit lisätä tuotteen kuvan, nimen, hinnan ja painikkeen vierekkäin.

Erilaiset sisällötyypit monisarakkeisessa ulkoasussa
Columns-lohkon avulla voit esittää erityyppistä sisältöä vierekkäin.

Voit myös käyttää useita pylväslohkoja toistensa alla luodaksesi ruudukon. Voit käyttää sitä palvelujesi esittelyyn tai tärkeiden ominaisuuksien edistämiseen.

Columns block' grid effect
Columns-lohkojen ruudukkovaikutus, jotka on sijoitettu toistensa alapuolelle

Sisäkkäisten lohkojen muokkaaminen

Kuten jo mainitsimme, voit sijoittaa muita lohkoja sarakkeiden sisään. Jokaisella sisäkkäisellä lohkolla on kaikki sen asetukset käytettävissä. Tämä tarkoittaa, että jos lisäät Image-lohkon sarakkeeseen, voit muokata sitä täsmälleen samalla tavalla kuin itsenäisessä sarakkeessa. Kuvalohko.

Kuvalohkon muokkaaminen sisäkkäisenä lohkona
Käytettävissä olevat asetukset sarakkeet-lohkoon sijoitetulle kuvalohkolle Columns-lohkossa

Johtopäätökset: Pylväiden lohkon edut

WordPressin lohkoeditorin vapauttaminen ja sarakkeiden käyttömahdollisuus sivuilla ja viesteissä yksinkertaistivat merkittävästi käyttäjien tapaa käsitellä sisältöä. WordPress Columns -lohkon ansiosta ei ole enää tärkeää käyttää kolmannen osapuolen ratkaisuja tai kirjoittaa HTML-koodia. Sarakkeiden lisääminen tai poistaminen on mahdollista muutamalla klikkauksella. Kaikki on hyvin intuitiivista ja nopeaa myös vähemmän teknisesti taitaville käyttäjille.

Sisältösi monisarakkeisessa asettelussa on kauniisti linjassa ruudukkoon. Se näyttää hyvältä myös responsiivisessa versiossa heti.

Työskentelimme kovasti uuden Citadela WordPress-teeman parissa, joka on kehitetty erityisesti WordPress-lohkoeditorille. Lue lisää Citadela-teemasta ja saatavilla olevista layout-paketeista.

2 ajatuksia aiheesta "How to make columns in WordPress without plugin"

    1. Hei David,

      Kiitos, että kirjoitit. Sinun pitäisi aktivoida Gutenberg-editori, joka tarjoaa mahdollisuuden valita yksittäisen sarakkeen, asetusten sivupalkissa (oikealla puolella) voit säätää sen leveyttä.

      Terveisin!
      Zlatko
      AIT-tiimi

Kommenttien lisääminen on estetty.