Miten lisätä painikkeen WordPress editor [opetusohjelma]

Miten lisätä painikkeen WordPress editor [opetusohjelma]

Miksi WordPress-painikkeen lohko on niin tärkeä?

Verkkosivuston navigointi on tärkeää kävijöille ja asiakkaille. Haluamme lähettää heidät yhdeltä alasivulta eteenpäin. Opastaa heitä koko ostoprosessin läpi. Siksi on tärkeää sijoittaa tärkeät linkit oikein sivun sisällön sisälle.

Meillä on periaatteessa 2 vaihtoehtoa. Käytä tavallista linkkiä tai painiketta. Mielipiteitä siitä, milloin käytetään ensimmäistä ja milloin jälkimmäistä vaihtoehtoa, on erilaisia. On tavallista, että yhdellä sivulla on useita mahdollisia toimintoja. Meidän on varmistettava, mikä niistä on ensisijainen ja mikä toissijainen. Suosittelemme käyttämään painiketta vain ensisijaiseen toimintoon. Näin saavutat suuremman näkyvyyden tälle ensisijaiselle toiminnolle. Keskität kävijöiden huomion tähän toimintoon. Voimme kutsua sitä myös call-to-action-painikkeeksi. Älä luo liikaa painikkeita yhdelle alasivulle.

Mitkä ovat tärkeimmät painikkeiden toiminnot?

  • Painikkeet voivat saada kävijöiden huomion - toimintakutsu
  • Ne erottavat sivun tai viestin sisällön toisistaan ja tekevät siitä luettavampaa.
  • Apua sivun suuntaamiseen. Monet kävijät skannaavat sivua vain visuaalisesti silmillään.
  • Navigoida kävijöitä muille sivuille hyperlinkkien avulla

Painikkeen onnistumisen määrittävät monet parametrit. Tärkeitä ovat esimerkiksi koko, sijoittelu tai painikkeen väri. On välttämätöntä noudattaa tavanomaisia UI- ja UX-periaatteita. Vihreää väriä käytetään painikkeissa, joissa on positiivinen toiminta, esimerkiksi ostaminen. Punainen väri on tarkoitettu negatiiviseen painikkeeseen - esimerkiksi uutiskirjeen tilauksen peruuttamiseen. Oikein suunnitellut painikkeet vaikuttavat suoraan kävijän toimintaan.

Lisääminen painiketta tahansa Sivu tai viesti WordPressissä

Tilanne ennen WordPress 5

Painikkeiden lisääminen oli melko monimutkainen prosessi ennen kuin WordPress Block Editor keksittiin. Koska tämä ominaisuus ei ollut luonnollisesti WordPress. Voit käyttää teemaa Page Builderin tai kolmannen osapuolen pluginin kanssa. Lyhytkoodit luovat painikkeet tässä tapauksessa.

Vanhemmissa WordPress-teemoissamme voit lisätä painikkeen visuaalisen editorin lyhytkoodien avulla. Kun olet klikannut Insert Shortcode -> Button voit asettaa erilaisia asetuksia modaalisessa ikkunassa. Teksti, tekstin väri, painikkeen väri, url, kohdistus ja niin edelleen. Näiden kehittyneiden asetusten ansiosta voit lisätä painikkeen melko helposti ja nopeasti ilman ohjelmointia.

Painikkeen lisääminen lyhytkoodien kautta
Painikkeen lisääminen lyhytkoodien kautta ennen lohkoeditorin julkaisua

Miten käyttää painiketta lohko WordPress editor?

Kiitos WordPress 5 on toinen tapa. Paljon helpompi. WordPressin visuaalinen editori tuo monia hyödyllisiä palikoita. Luodaksesi painikkeen verkkosivustolle voit nyt käyttää WordPress Button -lohkoa editorissa.

Vaiheittainen opas, miten lisätä painike WordPress editori

1. Aluksi sinun on päätettävä, mihin haluat lisätä painikkeen.
2. Painike lohko voidaan lisätä eri tavoin:
- napsauttamalla "+" yläpalkissa tai missä tahansa lohkoeditorissa, jossa valitset Button blockin

Lisää painike klikkaamalla "+"
Painikkeen lisääminen napsauttamalla "+"-painiketta.
Lisää painike hakupalkin kautta
Painikkeen lisääminen hakupalkin kautta
Lisää painikkeen lohko kautta vinoviiva
Painikkeen lohkon lisääminen vinoviivalla "/"

- voit myös löytää minkä tahansa lohkon käyttämällä hakupalkkia, kirjoita vain "painike".

- kirjoittamalla "/", joka antaa sinulle pääsyn kaikkiin käytettävissä oleviin lohkoihin.

3. Luotu Button-lohko voidaan konfiguroida edelleen

Lisää painikkeen teksti ja URL-osoite

Heti kun WordPress Block -painike on luotu, voit kirjoittaa tekstiä sen sisään. Muista, että toimintakutsupainikkeessa on parempi käyttää lyhyttä tekstiä, jossa on selkeä viesti. Voit asettaa tekstin lihavoiduksi, kursiiviksi tai alleviivatuksi. Kaikki nämä muutokset voidaan tehdä napsauttamalla työkalupalkissa. Voit myös kohdistaa painikkeen sivulle tai keskittää sen.

Nappulan painallus
Muutamassa sekunnissa voit muuttaa painikkeesi ulkoasun täysin.

Painike osoittaa yleensä toiselle sivulle tai ulkoiselle verkkosivustolle. Tästä syystä sen alla on syöttö, johon voi lisätä URL-osoitteen. Etuna on, että URL-osoitteen lisääminen ei vaadi tekstin valitsemista.

Painikkeen värin muuttaminen

Uuden editorin avulla voit muuttaa WordPress-painikkeen lohkoa muutamassa sekunnissa. Käytä vain oikealla puolella olevan sivupalkin asetuksia. Voit muuttaa painikkeen taustaväriä tai tekstin väriä painikkeen sisällä. Käytössäsi on valmiita perusvärejä tai voit valita omat väriäsi. Kaikki muutokset näkyvät heti, jotta näet, onko väriyhdistelmä kunnossa.

Painikkeen värin muuttaminen
Painikkeen värin välitön vaihtaminen napsauttamalla valittua väriä

Hieno ominaisuus on, että jos valitset vääriä yhdistelmiä esimerkiksi harmaa tausta ja valkoinen tekstin väri WordPress lohko editori varoittaa sinua, että painike ei voi olla luettavissa sivustollasi.

Löydä oma painiketyylisi

Painikkeen tyylivaihtoehdot
Muuta painikkeen tyyliä suoraan työkalurivin tai tarkastajan asetuksista.

Voit luoda tai muuttaa painikkeen erittäin nopeasti ja vaivattomasti käyttämällä jotakin valmiista tyyleistä. Painike voidaan muuttaa esimerkiksi pyöreäksi, reunustetuksi tai suorakulmaiseksi. Kokeile, mikä sopii parhaiten verkkosivustosi tyyliin tai suunnitteluun.

Muokkauspainikkeen muokkaaminen mukautetulla CSS:llä

Vielä enemmän mukautuksia voidaan tehdä mukautettujen CSS-luokkien avulla. Näin voit lisätä omia CSS-tyylejäsi ja tyylitellä painikkeen WordPress-editorissa juuri haluamallasi tavalla.

Mukautetun luokan syöttö
Lisää mukautettu luokka painikkeen tyyliin

Kuten näemme, on olemassa paljon helpompi tapa kuin painikkeen lyhytkoodin käyttö. WordPress Button lohko voidaan käyttää missä tahansa teema, joka on yhteensopiva WordPress Block Editor. Lue lisää upouudesta Citadela WordPress-teemastamme. Se on suunniteltu ja kehitetty erityisesti WordPress Block Editoria varten.

Lisävinkki lopussa

Älä unohda seurata WordPress-painikkeen lohkoa ja painikkeen onnistumista itse. Jos käytät Google Analyticsia, voit luoda yksilöllisen URL-osoitteen. Voit seurata kävijöiden klikkauksia lisäämällä Google UTM -parametri. URL-osoite voidaan luoda URL-rakentajan avulla. Parametrien lisäämisen avulla voit tunnistaa vierailun lähteen. Se on erittäin hyödyllistä, jos haluat tietää, mistä kävijät tulivat ostosivullesi.

Mikä on suurin ongelma, joka sinulla on tällä hetkellä WordPressin painikeblokin kanssa? Keskustellaan alla olevissa kommenteissa. Jaa kokemuksesi painikkeiden käytöstä verkkosivustolla.

4 ajatuksia aiheesta "How to add button in WordPress editor [tutorial]"

  1. Kiitos tämän opetusohjelman jakamisesta. Voitko myös opastaa minua, miten voin luoda lohkomallin? Teen saman käyttämällä tätä resurssia https://wpitech.com/create-wordpress-gutenberg-block-templates/ mutta se antaa virheen ja minulla on joitakin ohjelmointirivejä etupäässä. Tämä on koodi
    add_action( 'init', function() {
    $args = array(
    'public' => true,
    'label' => 'Uutiset',
    'show_in_rest' => true,
    'template_lock' => 'all',
    'template' => array(
    array( 'core/paragraph', array(
    'placeholder' => 'Breaking News',

  2. Tiedätkö, onko olemassa keino, jolla sisällön voi sulkea painikkeella ilman pluginin lataamista? Periaatteessa käytän wordpress.com premiumia, en yritystä, joten pluginien lataaminen ei ole helppo vaihtoehto.

    Kiitos!

    1. Hei,

      Kiitos kysymästä. Sinun pitäisi kysyä suoraan tukea wordpress.com tiimi, voisivatko he tarjota jonkinlaista ratkaisua ongelmasi ratkaisemiseksi. Parhaat terveiset!
      Zlatko
      AIT-tiimi

Kommenttien lisääminen on estetty.