Cum se creează un plugin WordPress: pas cu pas

Doriți să creați un WordPress plug-in ? Acest tutorial vă va învăța cum să o faceți.

Pluginurile contribuie la popularitatea WordPress deoarece permit utilizatorilor fără cunoștințe de codificare să creeze site-uri web uimitoare.

Există peste 50 de plugin-uri în rDirectorul WordPress  concepute pentru diverse scopuri. Tu vei gasi WordPress plugin-uri pentru abonament la newsletter , securitate et  e-commerce . Doar numește-i.

Fără ele, un site web WordPress este doar o colecție de imagini statice și blocuri de text. Cu pluginuri, sistemul de management al conținutului poate atinge un nivel incredibil de personalizare.

Indiferent dacă aveți nevoie de un plugin personalizat pentru site-ul dvs. sau doriți să creați un WordPress plug-in și monetizează-l, hai să mergem.

Întrebări fréquemment posées

Pluginurile WordPress fac bani?

Da. THE WordPress plugin-uri aduce bani. Puteți vinde pluginul pe site-ul dvs. web sau pe o piață terță parte.

CodeCanyon,  ThemeForest și Mojo piaţă  sunt cele mai bune 3 site-uri web pentru a vinde pluginuri.

De asemenea, puteți adăuga o versiune gratuită a pluginului dvs. la depozitul WordPress și puteți oferi o versiune premium cu funcții suplimentare.

Este dificil să creezi pluginuri WordPress?

Crearea unui WordPress plug-in este relativ ușor și dificil, în funcție de caracteristicile pe care le doriți.

Crearea unui plugin este ușoară dacă sunteți deja familiarizat cu elementele de bază ale dezvoltării WordPress și programării PHP. Dacă nu ești, poate fi foarte dificil. Cel mai bine este să începeți cu un plugin simplu, așa cum se arată în acest ghid.

Cât câștigă dezvoltatorii de pluginuri?

Potrivit Zip Recruiter, tariful orar mediu pentru dezvoltatori WordPress plugin-uri în Statele Unite este de 35 USD pe oră. Aceasta înseamnă aproximativ 72 USD pe an și 000 USD pe lună.

Dacă îți vinzi pluginul, poți câștiga până la 5 USD pe lună, în funcție de numărul de vânzări. Oferirea serviciilor de personalizare a pluginurilor vă poate câștiga între 000 și 20 USD pe oră.

De ce veți avea nevoie pentru a crea un plugin WordPress

Pentru a crea un plugin, nu trebuie să fii un dezvoltator expert WordPress. Ai nevoie doar de cunoștințe de bază de codare pentru a începe.

• Cunoștințe de bază în programare PHP: Pluginurile WordPress sunt scrise în PHP, așa că ar trebui să înțelegeți limba și sintaxa acesteia înainte de a începe.
• HTML și CSS de bază:  HTML și CSS vă permit să controlați afișarea și aspectul pluginurilor dvs. Prin urmare, este crucial să înțelegeți elementele de bază pentru a crea un plugin WordPress.
• Familiaritate cu WordPress:  este util să vă familiarizați cu platforma WordPress și cu funcțiile sale principale, precum și cu Codul WordPress (manualul online pentru dezvoltarea WordPress).
• Un mediu de dezvoltare: Pentru a vă dezvolta și testa pluginul, trebuie să instalați WordPress pe mașina dvs. locală sau pe un site de dezvoltare. Acest lucru vă va permite să vă testați pluginul fără a afecta un site web live. Vă vom arăta cum să faceți acest lucru în secțiunea următoare.
• Un editor de text: Veți avea nevoie de un editor de text pentru a vă scrie codul pluginului. Sunt disponibile multe opțiuni, cum ar fi SText sublim, Atom et Codul Visual Studio.

Cum să creezi un plugin WordPress în 7 pași

Pasul 1: Înțelegeți cum funcționează pluginurile WordPress

Deoarece WordPress este scris într-un limbaj de programare, oricine are cunoștințe de codificare poate accesa și modifica codul WordPress.

Exact așa funcționează pluginurile. Acestea vă permit să modificați și să extindeți funcționalitatea WordPress prin interacțiunea directă cu WordPress folosind anumite funcții PHP.

Crearea pluginului WordPress și adăugarea codului vor face ceva numai dacă apelați funcția PHP folosind un cârlig. Cârligele sunt cele care permit pluginului tău să interacționeze cu WordPress fără a fi nevoie să editezi fișierele de bază.

Să ne uităm la relația dintre paranteze drepte și funcții pentru a înțelege elementele de bază ale pluginurilor WordPress.

Funcții WordPress:

Codul WordPress este construit pe funcții care permit oricărui cod terță parte să interacționeze cu WordPress. De aceea veți găsi multe funcții în pluginuri și teme. Fiecare funcție are numele ei, urmat de acolade și codul din interiorul acoladei.

Iată un exemplu:

function sticky_header() {

  ?>

  <script>

  // Select the header element

  var header = document.querySelector(‘header’);

  // Get the offset position of the header

  var sticky = header.offsetTop;

  // Add the sticky class to the header when you reach its scroll position. Remove “sticky” when you leave the scroll position

  function addSticky() {

    if (window.pageYOffset > sticky) {

      header.classList.add(“sticky”);

    } else {

      header.classList.remove(“sticky”);

    }

  }

  // Add the sticky class to the header when you scroll the page

  window.onscroll = function() {

    addSticky();

  };

  </script>

  <?php

}

add_action( ‘wp_footer’, ‘sticky_header’ );

Puteți apela această funcție direct în pluginul dvs. WordPress tastând sticky_header() unde doriți să ruleze codul. Dar este o practică proastă pentru că s-ar putea să întâmpinați probleme. Iată încă două motive pentru care nu ar trebui să apelați funcții direct în codul dvs.

În primul rând, apelul direct funcționează numai pentru funcții de bază, cum ar fi adăugarea de conținut la un fișier temă. De asemenea, folosind această abordare, va trebui să apelați funcții de mai multe ori pentru a le utiliza în mai multe locuri, ceea ce este consumator de timp și greoi în fișierele de cod.

Apelarea manuală a unei funcții poate fi, de asemenea, dificilă dacă sunteți nou în codificare. Când creați pluginuri, cea mai bună practică este să le atașați la un cârlig. Acest lucru vă va scuti de a reaminti funcția în mai multe locuri.

Cârlige WordPress:

Un cârlig este un punct specific din codul WordPress în care vă puteți îndeplini propriile funcții personalizate. Există două tipuri de cârlige: cârlige de acțiune și cârlige de filtrare.

Cârlige de acțiune

Cârligele de acțiune vă permit să executați funcții personalizate la un moment specific din ciclul de rulare WordPress. Așa arată sintaxa unui cârlig de acțiune.

add_action('hook_name', 'my_custom_function');

Le  hook_name  este numele cârligului de acțiune pe care doriți să îl utilizați.

Există mai multe cârlige de acțiune în WordPress. Le puteți găsi în codex WordPress.

funcția_personalizată  este funcția care conține codul pe care doriți să-l executați. Această funcție trebuie definită înaintea funcției ADD_ACTION.

Sintaxa va arăta astfel pentru a atașa funcția de antet lipicios de mai sus la un cârlig.

add_action( 'wp_footer', 'sticky_header' );

Această funcție execută funcția sticky_header() când este apelată cârligul de acțiune wp_footer. De asemenea, puteți atașa funcția unui anumit cârlig prin înlocuirea wp_footer cu numele cârligului la alegere.

De exemplu:

add_action( 'init', 'sticky_header' );

Aceasta va rula funcția de antet lipicios când este apelată acțiunea de inițializare WordPress.

Cârlige de filtrare

Cârligele de filtrare vă permit să modificați datele înainte ca acestea să fie afișate sau salvate în baza de date. Iată un exemplu de cârlig de filtru care schimbă titlul unei postări de blog cu majuscule.

add_filter( ‘the_title’, ‘uppercase_title’ );

function uppercase_title( $title ) {

  return strtoupper( $title );

}

Această funcție acceptă un singur argument, $title, care este titlul original al articolului de blog.

Funcția folosește apoi funcția strtoupper() pentru a converti titlul în majuscule și returnează valoarea modificată.

Diferența dintre acțiune și cârlige de filtru

Cârligele de acțiune vă permit să executați funcții personalizate la un moment specific din ciclul de rulare WordPress. În exemplul de mai sus, cârligul de acțiune wp_footer este numit chiar înainte de etichetă.

Cârligele de filtrare, pe de altă parte, vă permit să modificați datele pe măsură ce acestea sunt trecute prin baza de coduri WordPress.

Ca în exemplul de mai sus, cârligul filtrului titlul vă permite să editați titlul unei postări de blog înainte ca aceasta să fie afișată pe site.

Pasul 2: Configurați un mediu de testare

Al doilea pas în crearea unui plugin WordPress este configurarea unui mediu de testare sau dezvoltare. Scopul este de a evita experimentarea pe un site real.

Crearea unui plugin necesită uneori înainte și înapoi. De asemenea, puteți face greșeli care vă vor deteriora site-ul.

Puteți folosi computerul ca server local pentru a găzdui un site WordPress de testare unde vă puteți crea și testa pluginul.

Dacă planul tăucazare acceptă crearea unui site de testare, îl puteți folosi și. Vom folosi prima soluție aici.

Pentru a configura un mediu de testare, vom face descărcați local , un instrument de dezvoltare pentru găzduirea locală a site-urilor web WordPress.

Odată ce descărcarea este completă, lansați software-ul pe computer și faceți clic + pictogramă în stânga jos pentru a crea un nou site local.

Alege din Creați un site nou și faceți clic pe butonul A continua.

Apoi, urmați instrucțiunile de pe ecran pentru a adăuga numele site-ului dvs., pentru a configura mediul și pentru a crea detalii de conectare WordPress.

Odată ce ai terminat. Faceți clic pe butonul Adăugați site. După ce ați adăugat site-ul, selectați site-ul dvs. în tabloul de bord local și lansați tabloul de bord de administrare WordPress.

Odată ce pagina de conectare a administratorului se deschide, utilizați nume de utilizator și Parola WordPress pe care le-ați creat mai sus pentru a vă accesa tabloul de bord.

Este gata. Mediul dvs. de testare este gata. Să începem să vă creăm pluginul WordPress.

Pasul 3: Creați folderul cu pluginuri

Odată ce mediul dvs. de testare este stabilit, primul lucru pe care trebuie să-l faceți este să creați un fișier plugin în directorul site-ului dvs. În mod implicit, WordPress stochează toate pluginurile în director wp-content/plugin.

Fiecare plugin instalat pe un site WordPress va avea un folder în acest director. Pentru pluginul dvs., va trebui, prin urmare, să creați un folder în interiorul acestui director și să îi dați un nume.

Pentru acest tutorial, vom naviga la folder wp-content/plugin în directorul nostru local de site. Iată cum.

Notă:  Procesul este același dacă utilizați un site intermediar.

Pe tabloul de bord local, faceți clic pe  Accesați folderul site-ului . Veți fi redirecționat către directorul local al site-ului dvs.

selecta Apps în opțiuni, faceți clic pe public atunci WP-conţinut. Veți vedea diferite foldere în acest director.

Deschide folderul Plugin-uri și un nou subfolder cu numele pluginului dvs. Vom folosi aici Sticky antet deoarece este numele pluginului pe care vrem să-l creăm.

Pasul 4: Creați fișierul PHP principal pentru pluginul dvs

După crearea folderului de plugin, următorul pas este să adăugați un fișier PHP în acest folder. Aici vor fi disponibile codurile și funcționalitatea pluginului dvs.

Pentru acest tutorial, avem nevoie doar de un fișier PHP pentru un plugin simplu care creează un antet lipicios în WordPress.

Pentru plugin-uri mai complexe cu funcționalitate avansată, în folderul cu pluginuri pot exista diferite tipuri de fișiere, cum ar fi CSS și javascript. În cazul nostru, un singur fișier PHP va fi suficient.

Pentru a face acest lucru, creați un fișier PHP în folderul plugin, ca în captura de ecran de mai jos.

Odată ce fișierul este gata, este timpul să adăugați câteva informații la plugin.

Pasul 5: Configurați informațiile despre plugin

Cunoscută și ca antet de fișier de plugin, informațiile despre plugin sunt un bloc de comentarii PHP care include detalii despre plugin, cum ar fi numele pluginului, versiunea, adresa URL, numele autorului și site-ul său, licența etc.

Acestea sunt informațiile pe care le vedeți pe pagina de plugin WordPress după instalarea unui plugin.

Puteți găsi antetul fișierului plugin în codexul WordPress . Arata cam asa.

Doar copiați și inserați acest cod în fișierul PHP al pluginului dvs., apoi editați detaliile pentru a se potrivi cu pluginul dvs. În cazul nostru, cititorul de fișiere de plugin pentru antet lipicios va arăta astfel.

<?php

/*

Plugin Name: Sticky Header

Plugin URI: https://wordpress.org/plugins/sticky-header/

Description: Make your website header sticks to the top of every page on your website as users scroll.

Author: The Team

Author URI: https://blogpascher.com/sticky-header

Text Domain: Sticky Header 

Domain Path: /languages

*/

Odată ce ați salvat acest fișier, ați creat un nou plugin și îl puteți găsi în lista de pluginuri deja instalate pe site-ul dvs.

Conectați-vă la tabloul de bord WordPress al site-ului dvs. de testare și accesați Plugins>Plugins installés.

Veți vedea pluginul Sticky Header cu detalii. Iată-l.

Acum puteți activa pluginul, dar nu va face nimic, deoarece nu i-am adăugat încă nicio funcționalitate. Deci, să facem ca pluginul nostru să facă ceva.

Pasul 6: Adăugați codul pluginului dvs

Pentru a face acest lucru, vom adăuga codul de antet lipicios pe care l-am folosit când învățăm funcțiile și cârligele WordPress de mai sus. Iată cum.

Deschideți fișierul PHP al pluginului dvs. Sub detaliile antetului, copiați și inserați aceste fragmente de cod în fișierul PHP principal al pluginului și salvați-l.

function sticky_header() {

  ?>

  <script>

  // Select the header element

  var header = document.querySelector(‘header’);

  // Get the offset position of the header

  var sticky = header.offsetTop;

  // Add the sticky class to the header when you reach its scroll position. Remove “sticky” when you leave the scroll position

  function addSticky() {

    if (window.pageYOffset > sticky) {

      header.classList.add(“sticky”);

    } else {

      header.classList.remove(“sticky”);

    }

  }

  // Add the sticky class to the header when you scroll the page

  window.onscroll = function() {

    addSticky();

  };

  </script>

  <?php

}

add_action( ‘wp_footer’, ‘sticky_header’ );

Acest cod face două lucruri esențiale,

La fonction sticky_header este activat când utilizatorul derulează pagina și se oprește când defilarea se oprește.

În al doilea rând, acțiunea add_action('wp_footer', 'sticky_header'); foloseste adresa....

Salvați codul și gata. Ați creat cu succes un plugin WordPress care face ca antetul site-ului dvs. să fie lipicios atunci când utilizatorii îl derulează.

Pasul 7: Activați pluginul. In actiune.

Reveniți pe site-ul dvs. și activați pluginul.

Când parcurgeți versiunea live a site-ului, antetul site-ului dvs. va rămâne în partea de sus a paginii.

Odată ce ați văzut efectul noului plugin pe site-ul dvs. demo, este timpul să îl încercați pe site-ul dvs. real.

Înainte de asta, asigurați-vă că ați testat pluginul pentru erori și vulnerabilități. Rezolvați-le, dacă este cazul. Ca precautie, faceți copii de rezervă pentru site-ul dvs. WordPress înainte de a implementa noul dvs. plugin.

Dacă sunteți mulțumit de performanța pluginului pe site-ul dvs., vă puteți încărca pluginul în depozitul de pluginuri WordPress. Pe măsură ce proprietarii de site-uri îl folosesc gratuit, veți primi feedback cu privire la ceea ce trebuie îmbunătățit și cum să faceți acest lucru.

Și dacă doriți să faceți bani cu pluginul dvs., îl puteți vinde pe unul dintre site-urile web enumerate mai sus

Concluzie

Dacă ați ajuns până aici, veți fi de acord că crearea unui plugin WordPress este relativ simplă. Urmând instrucțiunile din acest ghid, veți putea crea un plugin WordPress de bază. Puteți experimenta cu câte funcții doriți și puteți îmbunătăți funcționalitatea pluginului dvs.

Crearea de pluginuri complexe urmează aceeași metodă. Mai multe funcționalități înseamnă mai multe funcții în fișierul plugin.

Ați încercat vreodată să creați un plugin WordPress? Să vorbim despre experiența ta în secțiunea de comentarii de mai jos.