Kā pievienot pogu WordPress redaktorā [pamācība]

Kā pievienot pogu WordPress redaktorā [pamācība]

Kāpēc WordPress pogu bloks ir tik svarīgs?

Apmeklētājiem un klientiem ir svarīga tīmekļa vietnes navigācija. Mēs vēlamies nosūtīt tos no vienas apakšlapas tālāk. Pārvadājiet viņus cauri visam iepirkšanās procesam. Tāpēc ir svarīgi pareizi ievietot svarīgas saites lapas saturā.

Būtībā mums ir 2 iespējas. Izmantot standarta saiti vai pogu. Viedokļi par to, kad izmantot pirmo un kad vēlāko iespēju, ir dažādi. Parasti vienā lapā ir iespējamas vairākas darbības. Mums ir jāpārliecinās, kura no tām ir primārā un kura sekundārā. Mēs iesakām izmantot pogu tikai primārajai darbībai. Šādā veidā jūs panāksiet lielāku šīs primārās darbības redzamību. Jūs pievērsīsiet apmeklētāju uzmanību šai darbībai. Mēs varam arī to saukt par aicinājuma uz darbību pogu. Neizveidojiet pārāk daudz pogas vienā apakšlapā.

Kādas ir galvenās pogas funkcijas?

  • Pogas var piesaistīt apmeklētāju uzmanību - aicinājums rīkoties
  • Tie atdala lapas vai amata saturu un padara to vieglāk lasāmu.
  • Palīdzība orientācijai lapā. Daudzi apmeklētāji vizuāli skenē lapu tikai ar acīm.
  • Virzīt apmeklētājus uz citām lapām, izmantojot hipersaites.

Pogas panākumus nosaka daudzi parametri. Svarīgi ir, piemēram, izmērs, izvietojums vai pogas krāsa. Ir jāievēro standarta UI un UX principi. Zaļā krāsa tiek izmantota pogām ar pozitīvu darbību, piemēram, lai kaut ko nopirktu. Sarkana krāsa ir paredzēta negatīvai darbībai, piemēram, lai atteiktos no jaunumu saņemšanas. Pareizi izstrādātas pogas šādā veidā tieši ietekmē apmeklētāju darbības.

Pogas pievienošana jebkurā WordPress lapā vai ierakstā

Situācija pirms WordPress 5

Pogu pievienošana bija diezgan sarežģīts process, pirms tika izgudrots WordPress bloku redaktors. Jo šī funkcija nebija dabiski WordPress. Jūs varējāt izmantot tēmu ar Page Builder vai trešās puses spraudni. Šajā gadījumā pogas veido īsās kodes.

Mūsu vecākajās WordPress tēmās varat pievienot pogu, izmantojot īsās kodes vizuālajā redaktorā. Noklikšķinot uz Insert Shortcode -> Button, jūs varat iestatīt dažādus iestatījumus modālajā logā. Teksts, teksta krāsa, pogas krāsa, url, izlīdzināšana utt. Pateicoties šiem uzlabotajiem iestatījumiem, jūs varat pievienot pogu diezgan viegli un ātri, bez programmēšanas.

Pogas pievienošana, izmantojot īsceļus
Pogas pievienošana, izmantojot īsceļus pirms bloka redaktora izlaišanas

Kā izmantot pogas bloku WordPress redaktorā?

Pateicoties WordPress 5, ir otrs veids. Daudz vieglāk. WordPress vizuālais redaktors piedāvā daudz noderīgu bloku. Lai izveidotu pogu tīmekļa vietnē, tagad redaktorā varat izmantot WordPress pogu bloku.

Soli pa solim, kā pievienot pogu WordPress redaktorā

1. Vispirms jāizlemj, kur vēlaties ievietot pogu.
2. Pogu bloku var pievienot dažādos veidos:
- noklikšķinot uz "+" augšējā joslā vai jebkurā bloka redaktora vietā, kur atlasīts pogas bloks.

Pievienot pogu, noklikšķinot uz "+"
Pogas bloka pievienošana, noklikšķinot uz "+"
Pievienot pogu, izmantojot meklēšanas joslu
Pogas bloka pievienošana, izmantojot meklēšanas joslu
Pievienojiet pogas bloku, izmantojot slīpsvītru
Pogas bloka pievienošana, izmantojot slīpsvītru "/"

- varat arī atrast jebkuru bloku, izmantojot meklēšanas joslu, vienkārši ierakstiet "poga".

- ierakstot "/", kas nodrošina piekļuvi visiem pieejamajiem blokiem.

3. Izveidoto pogu bloku var konfigurēt tālāk

Pievienojiet pogas tekstu un URL adresi

Tiklīdz ir izveidota WordPress bloķēšanas poga, varat tajā ievadīt tekstu. Atcerieties, ka aicinājuma uz darbību pogai labāk ir izmantot īsu tekstu ar skaidru vēstījumu. Varat iestatīt, lai teksts būtu treknrakstā, slīprakstā vai pasvītrots. Visas šīs izmaiņas var veikt, noklikšķinot uz rīkjoslas. Varat arī izlīdzināt pogu uz sāniem vai centrēt to.

Pogas rediģēšana
Dažu sekunžu laikā varat pilnībā mainīt pogas izskatu.

Poga parasti norāda uz citu lapu vai ārējo vietni. Tāpēc tieši zem tās ir ievade, lai pievienotu URL adresi. Priekšrocība ir tā, ka, pievienojot URL adresi, nav jāizvēlas teksts.

Pogas krāsas maiņa

Jaunais redaktors ļauj dažu sekunžu laikā grozīt WordPress pogas bloku. Vienkārši izmantojiet iestatījumus sānu joslā labajā pusē. Jūs varat mainīt pogas fona krāsu vai teksta krāsu pogas iekšpusē. Ir pieejamas iepriekš definētas pamatkrāsas vai arī varat izvēlēties savas. Visas izmaiņas ir redzamas uzreiz, lai redzētu, vai krāsu kombinācija ir pareiza.

Pogas krāsas maiņa
Tūlītēja pogas krāsas maiņa pēc noklikšķināšanas uz izvēlētās krāsas

Lieliska iezīme ir tā, ka, ja izvēlaties nepareizu kombināciju, piemēram, pelēku fonu un baltu teksta krāsu, WordPress bloka redaktors jūs brīdinās, ka poga jūsu vietnē nevarēs būt salasāma.

Atrodiet savu pogas stilu

Pogas stila opcijas
Mainīt pogas stilu tieši no rīkjoslas vai Inspektora iestatījumiem

Lai īpaši ātri un bez piepūles izveidotu vai mainītu pogu, varat izmantot kādu no sagatavotajiem stiliem. Pogu var mainīt, piemēram, uz noapaļotu, norobežotu vai taisnstūrveida. Eksperimentējiet, kas vislabāk atbilst jūsu vietnes stilam vai dizainam.

Pogas rediģēšana ar pielāgotu CSS

Vēl lielāku pielāgošanu var panākt, izmantojot pielāgotas CSS klases. Tādējādi jūs varat pievienot savus CSS stilus un stila pogu WordPress redaktorā tieši tā, kā vēlaties.

Pielāgotās klases ievades
Ievietojiet pielāgotu klasi, lai stilizētu pogu

Kā mēs varam redzēt, ir daudz vienkāršāks veids, nekā izmantojot pogas shortcode. WordPress pogas bloku var izmantot jebkurā tēmā, kas ir saderīga ar WordPress bloku redaktoru. Uzziniet vairāk par mūsu jauno Citadela WordPress tēmu. Tā ir īpaši izstrādāta un izstrādāta WordPress bloku redaktoram.

Papildu padoms beigās

Neaizmirstiet uzraudzīt WordPress pogas bloku un pašas pogas panākumus. Ja izmantojat Google Analytics, varat izveidot unikālu URL. Lai izsekotu apmeklētāju klikšķus, varat pievienot Google UTM parametrs. URL var izveidot, izmantojot URL konstruktoru. Parametru pievienošana ļauj noteikt apmeklējuma avotu. Tas ir ļoti noderīgi, ja vēlaties uzzināt, no kurienes apmeklētāji nonākuši jūsu iepirkšanās lapā.

Kāda ir lielākā problēma, kas jums pašlaik ir ar WordPress pogu bloku? Apspriedīsim komentāros zemāk. Dalieties savā pieredzē, izmantojot pogas tīmekļa vietnē.

4 domāja par “How to add button in WordPress editor [tutorial]

  1. Paldies par dalīšanos ar šo pamācību. Vai jūs varat arī, lūdzu, norādīt, kā es varu izveidot bloka veidni? Es daru to pašu, izmantojot šo resursu https://wpitech.com/create-wordpress-gutenberg-block-templates/, bet tas dod kļūdu, un man ir dažas programmēšanas rindas priekšpusē. Šis ir kods
    add_action( 'init', function() {
    $args = masīvs(
    'public' => true,
    'label' => 'Ziņas',
    'show_in_rest' => true,
    'template_lock' => 'all',
    'template' => array(
    array( 'core/paragraph', array(
    'placeholder' => 'Jaunākās ziņas',

  2. Vai jūs zināt, vai ir veids, kā sabrukāt saturu ar pogu bez spraudņa lejupielādes? Būtībā es izmantoju wordpress.com premium, nevis biznesa, tāpēc spraudņu lejupielāde nav īsti vienkārša iespēja.

    Paldies!

    1. Sveiki,

      paldies par jautājumu. Jums vajadzētu jautāt tieši atbalsta wordpress.com komandu, vai viņi varētu piedāvāt kādu risinājumu, lai atrisinātu jūsu problēmu. Ar vislabākajiem sveicieniem!
      Zlatko
      AIT komanda

Komentāri ir slēgti.