Cum să creezi un plugin WordPress (Pas cu Pas pentru Începători)

Am creat multe pluginuri WordPress de-a lungul anilor, ajutându-ne atât pe noi, cât și pe mii de utilizatori. Mulți dintre cititorii noștri ne-au întrebat cum își pot crea propriile pluginuri.

Crearea unui plugin WordPress poate părea dificilă la început, dar de fapt este destul de distractiv și satisfăcător. Fie că doriți să adăugați o nouă funcționalitate site-ului dvs. sau să împărtășiți ceva util cu alții, crearea unui plugin este o modalitate excelentă de a face acest lucru.

În acest ghid, vă vom arăta cum să creați primul dumneavoastră plugin WordPress pas cu pas.

Ce ai nevoie pentru a crea primul tău plugin WordPress?

Pluginurile WordPress sunt ca aplicațiile pentru site-ul dvs. WordPress. La fel ca aplicațiile de pe telefon, puteți instala pluginuri în WordPress pentru a adăuga funcționalități noi.

Pentru a afla mai multe despre pluginurile WordPress, consultați ghidul nostru despre pluginurile WordPress și cum funcționează.

Pentru a crea primul dumneavoastră plugin WordPress, veți avea nevoie de cunoștințe de bază despre limbaje de codare precum PHP, CSS, HTML și JavaScript.

Acest lucru poate suna ca mult, dar nu vă faceți griji; puteți urma în continuare tutorialul nostru. Vă vom ghida prin proces pas cu pas și, la sfârșitul acestuia, veți avea suficientă înțelegere a programării WordPress pentru a crea un plugin WordPress simplu.

Din acest motiv, ne vom limita la elementele de bază și nu vom intra în detalii despre abilitățile avansate de codare WordPress.

În al doilea rând, veți avea nevoie de un mediu de dezvoltare local pentru a testa pluginul WordPress pe computerul dvs. Pentru a configura acest lucru, consultați ghidul nostru despre cum să instalați WordPress pe computerul dvs. Windows sau Mac).

Puteți, de asemenea, să vă testați pluginul pe un site de staging. Cu toate acestea, dacă apare o eroare, ați putea ajunge să vă stricați site-ul, făcându-l inaccesibil.

Consultați ghidul nostru despre cum să remediați erorile comune WordPress pentru a aborda aceste probleme.

Veți avea nevoie, de asemenea, de un editor de text simplu pentru a scrie codul. Notepad sau TextEdit vor funcționa bine. Cu toate acestea, dacă doriți să încercați ceva mai avansat, consultați acești editori de cod pentru dezvoltatori.

Cu acestea pregătite, să începem tutorialul. Puteți folosi linkurile rapide de mai jos pentru a sări la un subiect specific:

• Pasul 1: Creați un plugin WordPress de bază
• Pasul 2: Instalați și activați primul dvs. plugin WordPress
• Pasul 3: Trimite-ți pluginul în depozitul de pluginuri WordPress.org
• Pasul 4: Utilizați Subversion (SVN) pentru a încărca pluginul dvs.
• Step 5: Add Artwork to Your Plugin on WordPress.org

Pasul 1: Creați un plugin WordPress de bază

Primul pas este să creați un nou folder pe desktop sau în folderul documente și să-l numiți ceva de genul wpb-plugin-tutorial sau my-first-plugin.

Apoi, trebuie să creați un fișier nou în editorul dvs. de text și să îl salvați în folderul pluginului ca wpb-plugin-tutorial.php sau my-first-plugin.php. Important este extensia .php, dar puteți numi fișierul cum doriți.

Va trebui să deschideți acel fișier PHP cu editorul dvs. de text.

Primul lucru pe care trebuie să-l adăugați în fișierul plugin-ului este antetul plugin-ului. Acest bloc de comentarii spune pur și simplu WordPress numele plugin-ului dvs., versiunea, site-ul web, numele autorului plugin-ului și multe altele:

/*
Plugin Name:  WPBeginner Plugin Tutorial
Plugin URI:   https://www.wpbeginner.com
Description:  A short little description of the plugin. It will be displayed on the Plugins page in WordPress admin area.
Version:      1.0
Author:       WPBeginner
Author URI:   https://www.wpbeginner.com
License:      GPL2
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  wpb-tutorial
Domain Path:  /languages
*/

După adăugarea antetului pluginului, puteți începe să adăugați codul pluginului sub acesta.

Pentru acest tutorial, vom crea un plugin simplu care adaugă un mesaj la sfârșitul fiecărui articol, cerând utilizatorilor să ne urmărească pe Twitter.

Pur și simplu copiați și lipiți următorul cod sub blocul antetului pluginului dvs.:

<?php
function wpb_follow_us($content) {

// Only do this when a single post is displayed
if ( is_single() ) { 

// Message you want to display after the post
// Add URLs to your own Twitter and Facebook profiles

$content .= '<p class="follow-us">If you liked this article, then please follow us on <a href="http://twitter.com/wpbeginner" title="WPBeginner on Twitter" target="_blank" rel="nofollow">Twitter</a> and <a href="https://www.facebook.com/wpbeginner" title="WPBeginner on Facebook" target="_blank" rel="nofollow">Facebook</a>.</p>';

}
// Return the content
return $content; 

}
// Hook our function to WordPress the_content filter
add_filter('the_content', 'wpb_follow_us'); 

Nu uitați să înlocuiți URL-urile profilurilor de Twitter și Facebook cu ale dumneavoastră înainte de a salva modificările.

Acum mergeți pe desktopul computerului dumneavoastră și creați un fișier zip pentru folderul pluginului.

Utilizatorii Mac pot face clic dreapta pe folder și selecta ‘Compress wpb-plugin-tutorial’. Utilizatorii Windows pot face clic dreapta pe folder și selecta ‘Compress to zip file’.

Pasul 2: Instalați și activați primul dvs. plugin WordPress

Acum că am creat plugin-ul, este timpul să îl instalăm pentru a-l putea testa. Pentru instrucțiuni pas cu pas, puteți consulta articolul nostru despre cum să instalezi un plugin WordPress.

Accesați zona de administrare WordPress de pe site-ul dvs. și vizitați pagina Pluginuri » Adăugare Nou.

Trebuie să faceți clic pe butonul „Upload Plugin” din partea de sus pentru a încărca pluginul dvs. Aceasta va afișa caseta de încărcare a pluginului.

Continuați și faceți clic pe butonul „Choose File” pentru a selecta fișierul zip pe care tocmai l-ați creat. Apoi, faceți clic pe butonul „Install Now” pentru a încărca și instala pluginul.

Odată instalat, continuați și activați pluginul.

Acum puteți vizita site-ul dvs. pentru a vedea pluginul în acțiune.

Veți putea vedea noul paragraf la sfârșitul tuturor postărilor dvs. unice.

Pasul 3: Trimite-ți pluginul în depozitul de pluginuri WordPress.org

Dacă doriți ca pluginul dvs. să fie descoperit și utilizat de alți utilizatori WordPress, atunci îl puteți trimite în depozitul de pluginuri WordPress.org.

Pentru a face acest lucru, mai întâi, va trebui să creați un fișier „Read Me” pentru pluginul dvs. Deschideți un fișier text gol și salvați-l ca readme.txt în folderul pluginului dvs.

Acest fișier readme.txt trebuie să respecte sintaxa fișierului readme.org de la WordPress.org. Informațiile pe care le adăugați în fișierul readme.txt vor fi afișate pe pagina pluginului dvs. pe WordPress.org.

Iată un fișier readme.txt eșantion pe care îl puteți folosi ca punct de plecare:

=== Your Plugin Name ===
Contributors: WPBeginner
Tags: wpbeginner, plugin tutorial
Requires at least: 6.0
Tested up to: 6.2
Stable tag: 1.0
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html

A WordPress plugin to teach beginners how to write a WordPress plugin. 

== Description ==

This simple plugin is part of our beginner's guide to writing a WordPress plugin. 

== Installation ==

1. Upload the plugin folder to your /wp-content/plugins/ folder.
1. Go to the **Plugins** page and activate the plugin.

== Frequently Asked Questions ==

= How do I use this plugin? =

Answer to the question

= How to uninstall the plugin? =

Simply deactivate and delete the plugin. 

== Screenshots ==
1. Description of the first screenshot.
1. Description of the second screenshot. 

== Changelog ==
= 1.0 =
* Plugin released.

Acum să explicăm puțin cum funcționează sintaxa fișierului readme al pluginurilor WordPress, astfel încât să îl poți personaliza pentru pluginul tău.

Prima linie a fișierului readme al pluginului este numele pluginului dvs. Acest nume va apărea în directorul de pluginuri WordPress.org ca titlul pluginului dvs.

Următoarea linie este Contribuitori. Acestea sunt ID-urile utilizatorilor responsabili pentru gestionarea plugin-ului dvs. pe WordPress.org. Dacă nu aveți deja un cont de utilizator WordPress.org, puteți crea un cont de utilizator gratuit WordPress.org pentru a obține ID-ul dvs. de utilizator.

‘Requires at least’ și ‘Tested up to’ se referă la versiunile WordPress cu care funcționează pluginul dvs. ‘Stable tag’ este versiunea propriului dvs. plugin.

Puteți lăsa câmpurile „Licență” ca GPL și URL-ul la fel.

Apoi, puteți edita zona Descriere pentru a explica ce face pluginul dvs.

După ce ați editat fișierul readme al pluginului dvs., nu uitați să salvați modificările.

Acum pluginul dvs. este gata să fie revizuit de echipa de pluginuri WordPress.org. Pentru a vă trimite pluginul, veți avea nevoie de un cont gratuit WordPress.org.

Vizitați pagina Adaugă pluginul tău și, dacă nu sunteți deja autentificat, faceți clic pe butonul „te rog autentifică-te”.

Odată autentificat, veți putea încărca și trimite pluginul dvs. pentru revizuire.

Pur și simplu faceți clic pe butonul „Selectați fișierul” pentru a alege fișierul zip al pluginului dvs. După aceea, bifați toate căsuțele care se aplică și faceți clic pe „Încărcați”.

Echipa de revizuire a pluginurilor WordPress.org va analiza apoi codul pluginului dvs. pentru erori comune și verificări de securitate. Odată aprobat, veți primi un e-mail de la echipa de pluginuri.

Acest e-mail va conține un link către depozitul Subversion (SVN) al plugin-ului dvs. găzduit pe WordPress.org.

Pasul 4: Utilizați Subversion (SVN) pentru a încărca pluginul dvs.

Subversion este un software de control al versiunilor. Permite utilizatorilor să facă modificări la fișiere și directoare, păstrând în același timp o evidență a modificărilor, gestionând diferite versiuni și permițând colaborarea.

Veți avea nevoie de un client SVN instalat pe computer pentru a încărca pluginul pe WordPress.org.

Utilizatorii de Windows pot folosi SilkSVN sau TortoiseSVN (gratuit). Utilizatorii de Mac pot instala SmartSVN sau Versions App pe computerele lor.

În acest articol, vă vom arăta capturi de ecran ale aplicației Versions pentru Mac. Cu toate acestea, procesul este foarte similar în toate aplicațiile SVN cu o interfață grafică.

Odată instalat, trebuie să deschideți aplicația Versions și să descărcați o copie a depozitului pluginului dvs. WordPress. Pur și simplu faceți clic pe butonul „New Repository Bookmark”.

Aceasta va deschide o fereastră pop-up unde, mai întâi, trebuie să furnizați un nume pentru acest marcaj. Îl puteți numi după pluginul dvs.

După aceea, trebuie să adăugați URL-ul depozitului SVN al plugin-ului dvs. WordPress.

Faceți clic pe butonul ‘Create’ pentru a vă conecta cu depozitul dvs.

Aplicația Versions va descărca acum o copie a depozitului pluginului dvs. pe computer. Apoi, faceți clic dreapta pe numele depozitului dvs. în vizualizarea browserului și selectați „Checkout”.

Vi se va cere să furnizați un nume pentru folder și să selectați o locație unde doriți să îl stocați pe computer. Puteți folosi același nume de folder ca directorul pluginului dvs. și faceți clic pe butonul „Checkout” pentru a continua.

Versiunile aplicației vor crea acum o copie locală a pluginului dvs. pe computer. O puteți vizualiza în depozitul pluginului dvs. sau o puteți naviga folosind aplicația Finder.

Acum trebuie să copiați fișierele pluginului dvs. și să le lipiți în folderul trunk al depozitului dvs. local.

Pe măsură ce faceți acest lucru, veți observa o pictogramă cu semnul întrebării lângă fișierele noi din aplicația Versions.

Deoarece aceste fișiere nu au existat înainte, trebuie să le adăugați. Selectați noile fișiere și faceți clic pe butonul „Adăugare” pentru a adăuga aceste fișiere în folderul local.

Acum că fișierele plugin-ului dvs. au fost adăugate la subversion, sunteți gata să le încărcați. Practic, veți sincroniza modificările din folderul local și directorul subversion.

Faceți clic pe depozitul dvs. local pentru a-l selecta, apoi faceți clic pe butonul „Commit”.

Va apărea o nouă fereastră pop-up.

Veți vedea lista modificărilor și o casetă pentru a adăuga un mesaj de commit. Doar faceți clic pe „Commit” pentru a continua.

Aplicația dvs. SVN va sincroniza acum modificările și le va trimite în depozitul pluginului dvs.

Acum că ați încărcat fișierele pluginului dvs. în trunk, este timpul să le etichetați la o versiune.

Accesați copia locală a pluginului dvs. și copiați fișierele din folderul trunk. După aceea, trebuie să deschideți folderul tags și, în interiorul acestuia, să creați un nou folder.

Denumiți acest folder după un nume de versiune. Asigurați-vă că acesta corespunde versiunii pe care ați introdus-o în antetul pluginului dvs. În exemplul de cod de mai sus, am folosit versiunea 1.0 pentru pluginul nostru.

După adăugarea folderului 1.0 în folderul /tags/. Veți observa pictograma semnului întrebării lângă numele folderului în aplicația Version.

Deoarece acesta este un folder nou, va trebui să faceți clic pe butonul „Adăugare” pentru a include folderul și toate fișierele sale în depozit.

După aceea, puteți continua și faceți clic pe butonul „Commit” pentru a sincroniza modificările. Puteți continua să editați fișierele pluginului în copia locală.

După ce ați terminat cu modificările, pur și simplu faceți clic pe butonul de commit pentru a le sincroniza cu depozitul WordPress.org.

Dacă ați făcut modificări majore la pluginul dvs., atunci veți dori să adăugați o nouă versiune adăugând un nou folder numit după numărul versiunii. Asigurați-vă că numărul versiunii corespunde antetului pluginului dvs.

Acum puteți previzualiza pluginul dvs. în directorul de pluginuri WordPress.org.

Pasul 5: Adăugați grafică la pluginul dvs. pe WordPress.org

WordPress.org vă permite să adăugați grafică și capturi de ecran la pluginurile dvs. Aceste elemente trebuie să respecte practicile standard de denumire și ar trebui încărcate folosind Subversion.

Banner antet plugin

Aceasta este imaginea mare care apare în partea de sus a paginii pluginului. Poate fi în 772 x 250 sau 1544 x 500 pixeli în formate de fișier jpeg sau png. Ar trebui să fie întotdeauna numită astfel:

• banner-772×250.jpg sau banner-772×250.png
• banner-1544×500.jpg sau banner-1544×500.png

Pictogramă plugin

Acest fișier imagine mai mic, de formă pătrată, este afișat ca o pictogramă de plugin în rezultatele căutării și în listările de pluginuri. Poate fi în format jpeg sau png, de 125 x 125 sau 250 x 250 pixeli.

Acest fișier pictogramă ar trebui să aibă acest nume:

• icon-128×128.jpg sau icon-128×128..png
• icon-256×256.jpg sau icon-256×256.png

Capturi de ecran

Fișierele capturilor de ecran trebuie denumite folosind următorul format:

• screenshot-1.png
• screenshot-2.png

Puteți adăuga oricâte doriți. Aceste capturi de ecran ar trebui să apară în aceeași ordine ca și descrierile capturilor de ecran din fișierul dvs. readme.txt.

Odată ce ați pregătit toate elementele grafice, le puteți plasa în folderul de resurse al copiei locale a pluginului dvs.

După aceea, veți observa o pictogramă cu semnul întrebării lângă folderul de resurse. Faceți clic pe butonul „Adăugare” pentru a adăuga noul fișier de resurse la depozitul dvs.

În final, continuați și faceți clic pe butonul de commit pentru a încărca fișierele pe depozitul WordPress.org. După un timp, veți putea vedea grafica apărând pe pagina pluginului dvs.

Ghiduri definitive pentru învățarea dezvoltării de pluginuri WordPress

Pluginurile WordPress pot fi la fel de simple ca cel pe care ți l-am arătat mai sus. Ele pot fi, de asemenea, mult mai puternice, cum ar fi chestionare, cronometre, RSVP-uri, voturi, recenzii Google și multe altele.

Unele pluginuri WordPress puternice pot avea și extensii. Aceste extensii funcționează ca pluginuri care extind alte pluginuri.

Iată câteva resurse care vă vor ajuta să învățați mai multe modalități de a adăuga funcționalități la pluginurile dvs. WordPress:

• Snippet-uri de cod WordPress utile pentru începători
• Adăugarea unui shortcode în WordPress
• trucuri pentru fișierul functions.php pe care le puteți folosi acum într-un plugin specific site-ului
• Crearea tipurilor de postări personalizate și taxonomiilor
• Adăugarea corectă a foilor de stil și a JavaScript în WordPress

Sperăm că acest articol v-a ajutat să învățați cum să creați un plugin WordPress. De asemenea, ați putea dori să consultați ghidul nostru despre cum să faceți sugestii de noi funcționalități pentru WordPress și lista noastră cu cele mai de succes afaceri și companii WordPress.

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.