Cum să codificați în WordPress cu AI

Publicat: 2023-09-30

În trecut, utilizatorii WordPress fără cunoștințe de codificare fie petreceau ore întregi pe Google căutând un răspuns, fie solicitau ajutorul unui dezvoltator web profesionist. Odată cu apariția inteligenței artificiale (AI), acest lucru începe să se schimbe. Există destul de multe instrumente de asistență de cod AI, dar nu toate sunt proiectate special pentru WordPress. În această postare, vă vom arăta cum să codificați în WordPress cu AI, astfel încât să vă puteți economisi timpul și banii câștigați cu greu pentru alte sarcini.

Să ne scufundăm.

Cuprins
  • 1 Ce este codificarea asistată de AI pentru WordPress?
  • 2 De ce ar trebui să codificați în WordPress cu AI
  • 3 Care sunt beneficiile codării în WordPress cu AI?
  • 4 Cum să codificați în WordPress cu AI
    • 4.1 Cum să codificați CSS în WordPress cu AI
    • 4.2 Cum să codificați PHP pentru WordPress cu AI
  • 5 gânduri finale despre codificarea în WordPress cu AI

Ce este codificarea asistată de AI pentru WordPress?

Codarea asistată de AI este utilizarea modelelor AI generative de învățare automată care ajută la crearea de cod pentru WordPress. Majoritatea asistenților de codare AI le permit utilizatorilor WordPress să descrie ceea ce doresc să facă codul introducând un mesaj text simplu. De acolo, AI generează automat codul pentru tine, complet cu nume de variabile personalizate sau clase CSS.

De ce ar trebui să codificați în WordPress cu AI

cod în WordPress cu AI

imagine creată cu Divi AI

Există mai multe motive pentru a codifica în WordPress cu AI. În primul rând, permite codificatorilor începători sau celor fără cunoștințe de codare să adauge fragmente de cod PHP sau JavaScript care schimbă funcționalitatea site-ului dvs. În mod similar, AI poate genera și CSS pentru dvs., permițându-vă să faceți modificări avansate de stil elementelor de design ale site-ului dvs. Un alt motiv pentru care ar trebui să luați în considerare utilizarea AI pentru codificare în WordPress este depanarea erorilor. Dacă ați fost vreodată într-o situație în care vedeți ecranul alb al morții sau alte erori comune, AI vă poate ajuta să aflați unde este problema și să o remediați.

Care sunt beneficiile codării în WordPress cu AI?

dezvoltator web fericit

imagine creată cu Divi AI

Există nenumărate beneficii ale codării în WordPress cu AI. Să evidențiem câteva, astfel încât să înțelegeți mai bine modul în care AI vă poate ajuta să vă ușureze viața:

  • Curbă minimă de învățare: atunci când utilizați AI, petrecerea nenumăratelor ore pe tutoriale PHP este inutilă. De fapt, te poate lăsa confuz și frustrat. În schimb, optați pentru un pic de asistență AI pentru a vă ajuta. Probabil vei învăța și câteva lucruri.
  • Editarea fișierelor cu teme: când sunteți în principal un designer web, este posibil să nu vă simțiți confortabil să editați fișiere cu tema. Cu AI, vă puteți liniști problemele, deoarece un mesaj text vă poate ajuta să creați acele hack-uri de fișiere functions.php pe care le era prea frică să le încercați înainte.
  • Economisiți bani: în trecut, dacă trebuia să faceți ceva care necesita cunoștințe de codare, fie trebuia să învățați cum să codificați, ceea ce consumă timp și uneori costisitor, fie plătiți un dezvoltator pentru a vă ajuta. Folosind AI, puteți evita intermediarul și puteți economisi bani pentru altceva, cum ar fi achiziționarea de pluginuri esențiale sau o temă premium WordPress.
  • Faceți-vă site-ul în evidență: utilizatorii WordPress nu ar trebui să fie niciodată mulțumiți cu un site web cu cookie-uri. Frumusețea WordPress este că vă puteți face site-ul să arate așa cum doriți. Acestea fiind spuse, uneori, site-ul dvs. poate avea nevoie de un pic suplimentar. Adăugarea de cod în WordPress cu AI este o modalitate excelentă de a adăuga animații sau alte funcționalități pentru a face site-ul dvs. unic.

Cum să codificați în WordPress cu AI

codificați WordPress cu AI

imagine creată cu Midjourney

Există câteva moduri în care puteți codifica în WordPress cu AI. Puteți utiliza un generator de pagini AI precum Elementor pentru a crea CSS personalizat sau un instrument AI precum CodeWP pentru PHP. În momentul scrierii acestui articol, niciun plugin nu vă va permite să codificați PHP în WordPress. Cu toate acestea, CodeWP a fost instruit în mod specific folosind fișierele și structura WordPress, așa că își cunoaște lucrurile. Un bonus suplimentar este capacitatea de a stoca fragmente în cloud, astfel încât să le puteți salva pentru reutilizare.

Înainte de a începe să conectați fragmente de cod personalizate în site-ul dvs., ar trebui să faceți unul dintre cele două lucruri. Vă recomandăm fie să creați o temă copil, fie un site de organizare. E o idee bună să le faci pe amândouă. Indiferent, tema părinte sau site-ul live vor fi protejate de fragmente de cod care ar putea distruge site-ul dvs.

Să parcurgem pașii de care veți avea nevoie pentru a configura lucrurile și a genera cod în WordPress.

Cum să codificați CSS în WordPress cu AI

Creator de pagini Elementor AI

Elementor este unul dintre cei mai populari constructori de pagini din lume. În ultimele luni, s-au alăturat revoluției AI oferind text, imagini și generare CSS personalizată. Funcționează prin activarea butonului de editare cu AI în generatorul de pagini front-end al Elementor în orice modul care conține text sau imagini.

activați Elementor AI

Generați CSS în Elementor AI

Pentru generarea CSS, va trebui să plătiți pentru o licență pro, dar puteți încerca generarea de text și imagini Elementor AI în versiunea gratuită. Cu versiunea pro activată, treceți cursorul peste o secțiune pentru a dezvălui butonul de editare a secțiunii .

editați secțiunea Elementor

Apoi, faceți clic pe pictograma avansată din setările secțiunilor.

Setări avansate Elementor

Derulați pentru a dezvălui fila CSS personalizat . Extindeți meniul drop-down pentru a afișa caseta CSS personalizată .

Elementor CSS personalizat

Faceți clic pe butonul Editare cu AI de deasupra casetei CSS personalizate.

editați cu AI

Când apare caseta de dialog, introduceți o solicitare de text, cum ar fi animația de culoare de fundal 2 culori (1). Apoi faceți clic pe butonul Genera cod (2).

Solicitare text Elementor AI

Elementor AI se va pune pe treabă generând fragmentul de cod. Redarea poate dura până la un minut. Odată finalizat, veți obține o previzualizare a codului dvs. Dacă sunteți mulțumit de rezultate, faceți clic pe butonul de inserare pentru a adăuga codul în caseta CSS personalizat.

introduce codul

Odată ce codul dvs. este inserat, puteți urmări animația în direct în generatorul Elementor.

După ce codul dvs. CSS este live, puteți modifica culorile, viteza animației și puteți face alte ajustări pentru a se potrivi preferințelor dvs.

Dacă doriți să generați cu ușurință CSS pentru proiectele dvs. web cu Elementor, vă puteți înscrie pentru o licență Pro anuală pentru 59 USD. Rețineți, pentru a utiliza generatorul CSS al Elementor AI, va trebui să vă înscrieți pentru un plan plătit. Prețurile încep de la 2,99 USD pe lună pentru 18.000 de credite.

Cum să codificați PHP pentru WordPress cu AI

CodWP

CodeWP este un instrument AI antrenat special folosind WordPress. Vă ajută să creați fragmente de cod personalizate pentru a-și extinde funcționalitatea sau pentru a evita utilizarea pluginurilor grele. Când sunteți gata să implementați fragmente de cod generate, va trebui să instalați un plugin pentru fragmente de cod, cum ar fi WPCode, sau să creați o temă secundară și să copiați anumite fișiere din folderul include pentru a vă plasa fragmentele.

Dacă sunteți utilizator Divi și doriți să creați o temă copil, avem un tutorial detaliat despre pașii pe care va trebui să-i faceți. Acestea fiind spuse, dacă sunteți un utilizator începător, vă recomandăm cu căldură ruta de plugin pentru fragmente.

Înscrieți-vă pentru un cont CodeWP

Dacă nu v-ați înscris pentru CodeWP, faceți clic pe butonul Începe gratuit .

creați un cont CodeWP

Când ecranul se reîmprospătează, puteți crea un cont conectându-vă profilul Facebook, contul GitHub sau creând un nume de utilizator și adăugând adresa dvs. de e-mail.

creați un cont CodeWP

Răsfoind interfața CodeWP

CodeWP este destul de intuitiv. Veți putea să vă vizualizați fragmentele, să răsfoiți fragmente publice (verificate) trimise de alți utilizatori, să primiți cele mai recente știri și să lansați mai multe generatoare de cod.

Ecran de bun venit CodeWP

Pentru acest tutorial, vom lucra cu versiunea gratuită a CodeWP, care vine cu o singură interfață: WordPress PHP. Pentru a debloca celelalte, trebuie să vă înscrieți pentru o licență pro.

Generați PHP în CodeWP

Pentru a genera primul fragment, faceți clic pe butonul Generare cod din partea stângă sus a interfeței CodeWP.

generați un nou fragment

Apoi, faceți clic pe butonul de solicitare nouă pentru a deschide caseta de dialog de solicitare text.

noua solicitare text CodeWP

Pentru a demonstra cât de ușor este să lucrezi în CodeWP, îi vom cere să creeze un nou tip de post personalizat pentru mașini și câteva câmpuri personalizate pe care le putem completa în tipul de postare pentru mașini.

Începeți prin a introduce următoarea solicitare în câmpul de text:
Creați un tip de post personalizat numit mașini și includeți o taxonomie pentru tipul de vehicul. Adăugați următoarele meta câmpuri la tipul de postare personalizat pentru mașini.

câmp meta număr întreg numit make
câmp meta număr întreg numit model
câmp meta număr întreg numit preț
câmp meta număr întreg numit culoare exterioară
câmp meta număr întreg numit culoare interioară
câmp meta număr întreg numit capacitate de locuri
câmp meta număr întreg numit tren de rulare
câmp meta număr întreg numit transmisie
câmp meta număr întreg numit cilindri
câmp meta număr întreg numit MPG

În cele din urmă, faceți clic pe butonul Generare cod WP .

adăugați promptul text CodeWP

După un minut sau două, CodeWP va genera codul PHP personalizat. Pentru a-l folosi în WordPress, va trebui să folosim pluginul pentru fragmente WPCode (sau similar).

copiați ieșirea CodeWP

Copiați rezultatul după eticheta PHP de deschidere, astfel încât să o putem lipi în WPCode.

Adăugarea codului PHP la WordPress

Reveniți la tabloul de bord de administrare WordPress. Dacă tot trebuie să instalați WPCode, faceți asta acum. Dacă aveți nevoie de îndrumări cu privire la instalarea pluginurilor, avem un ghid la îndemână de instalare a pluginurilor pe care să-l urmați.

Navigați la Fragmente de cod > + Adăugați fragment (1). De acolo, faceți clic pe Adăugați codul personalizat (fragment nou) (2).

adăugați un nou fragment WPCode

În mod implicit, WPCode selectează inserarea automată și setează locația peste tot, ceea ce vrem să facă. Pentru a vă difuza fragmentul, selectați PHP din meniul drop-down (1) și inserați fragmentul PHP în previzualizarea codului (2). Apoi, activați fragmentul (3) și salvați -l (4).

salvați fragmentul PHP

Odată salvată, apare un nou tip de postare în tabloul de bord de administrare WordPress.

cod în WordPress cu AI

Pentru a vă asigura că lucrurile funcționează corect, plasați cursorul peste mașină în panoul de administrare și faceți clic pe Adăugați nou .

adauga masina noua

Derulați în jos până când găsiți meta câmpurile pentru mașină . Dacă sunt acolo, felicitări! Dacă nu, puteți utiliza CodeWP pentru a ajuta la ajustarea codului în consecință.

CPT meta câmpuri

Gânduri finale despre codificarea în WordPress cu AI

Dezvoltarea WordPress evoluează rapid odată cu integrarea AI. Folosind instrumente precum Elementor AI sau CodeWP, puteți renunța la ore de cercetare sau la servicii costisitoare de dezvoltare web. Instrumentele AI concepute special pentru WordPress pot economisi bani și timp și pot învăța chiar și pe cel mai începător utilizator cum să codifice. Indiferent dacă trebuie să adăugați un script PHP personalizat sau să duceți designul site-ului dvs. la nivelul următor cu CSS, asistenții de codare AI oferă un suport neprețuit.

Dacă doriți să aflați mai multe despre ce puteți face cu AI pentru WordPress, consultați câteva dintre celelalte postări ale noastre legate de AI:

  • Cum să utilizați Divi AI: tot ce trebuie să știți
  • Construirea unei pagini de pornire cu Divi AI de la început până la sfârșit
  • Cum să generați imagini frumoase AI cu difuzie stabilă (2023)
  • Cum să utilizați AI pentru a crea un design web uimitor cu Divi (folosind ChatGPT și MidJourney)

Imagine prezentată prin Leonid studio / shutterstock.com