Si të krijoni një shtojcë WordPress: hap pas hapi

Ju dëshironi të krijoni një plugin WordPress ? Ky tutorial do t'ju mësojë se si ta bëni atë.

Shtojcat kontribuojnë në popullaritetin e WordPress sepse ato lejojnë përdoruesit pa njohuri kodimi të krijojnë faqe interneti të mahnitshme.

Ka mbi 50 shtojca në rDrejtoria e WordPress  projektuar për qëllime të ndryshme. Ju do të gjeni WordPress plugins për abonim në buletinin , Siguria et  e-commerce . Thjesht emërtojeni.

Pa to, një faqe në internet e WordPress është vetëm një koleksion imazhesh statike dhe blloqe teksti. Me shtojcat, sistemi i menaxhimit të përmbajtjes mund të arrijë një nivel të jashtëzakonshëm personalizimi.

Pavarësisht nëse keni nevojë për një shtojcë të personalizuar për faqen tuaj të internetit ose dëshironi të krijoni një plugin WordPress dhe fito para, le të shkojmë.

Pyetje për fréquemment posées

A fitojnë para shtojcat e WordPress?

Po. THE WordPress plugins sjell para. Mund ta shisni shtojcën në faqen tuaj të internetit ose në një treg të palëve të treta.

CodeCanyon,  ThemeForest dhe Mojo treg  janë 3 faqet e internetit më të mira për të shitur shtojca.

Ju gjithashtu mund të shtoni një version falas të shtojcës tuaj në depon e WordPress dhe të ofroni një version premium me veçori shtesë.

A është e vështirë të krijosh shtojca WordPress?

Krijimi i një plugin WordPress është relativisht e lehtë dhe e vështirë, në varësi të veçorive që dëshironi.

Krijimi i një shtojce është i lehtë nëse tashmë jeni njohur me bazat e zhvillimit të WordPress dhe programimit PHP. Nëse nuk jeni, mund të jetë shumë e vështirë. Është më mirë të filloni me një shtojcë të thjeshtë, siç tregohet në këtë udhëzues.

Sa fitojnë zhvilluesit e shtojcave?

Sipas Zip Recruiter, norma mesatare për orë për zhvilluesit WordPress plugins në Shtetet e Bashkuara është 35 dollarë në orë. Kjo arrin në rreth 72 dollarë në vit dhe 000 dollarë në muaj.

Nëse e shisni shtojcën tuaj, mund të fitoni deri në 5 dollarë në muaj, në varësi të numrit të shitjeve. Ofrimi i shërbimeve të personalizimit të shtojcave mund t'ju fitojë midis 000 dhe 20 dollarë në orë.

Çfarë do t'ju duhet për të krijuar një shtojcë WordPress

Për të krijuar një shtojcë, nuk keni nevojë të jeni një zhvillues ekspert i WordPress. Ju duhet vetëm disa njohuri bazë të kodimit për të filluar.

• Njohuri bazë në programimin PHP: Shtojcat e WordPress janë shkruar në PHP, kështu që duhet të kuptoni gjuhën dhe sintaksën e saj përpara se të filloni.
• HTML dhe CSS bazë:  HTML dhe CSS ju lejojnë të kontrolloni shfaqjen dhe pamjen e shtojcave tuaja. Prandaj është thelbësore të kuptoni bazat e tyre për të krijuar një shtojcë WordPress.
• Njohja me WordPress:  është e dobishme të njiheni me platformën WordPress dhe funksionet e saj kryesore, si dhe me WordPress Codex (manuali në internet për zhvillimin e WordPress).
• Një mjedis zhvillimi: Për të zhvilluar dhe testuar shtojcën tuaj, duhet të instaloni WordPress në kompjuterin tuaj lokal ose në një faqe zhvillimi. Kjo do t'ju lejojë të testoni shtojcën tuaj pa ndikuar në një faqe interneti të drejtpërdrejtë. Ne do t'ju tregojmë se si ta bëni këtë në seksionin tjetër.
• Një redaktues teksti: Do t'ju duhet një redaktues teksti për të shkruar kodin tuaj të shtojcës. Shumë opsione janë në dispozicion, të tilla si STekst sublim, Atom et Kodi i Visual Studio.

Si të krijoni një shtojcë WordPress në 7 hapa

Hapi 1: Kuptoni se si funksionojnë shtojcat e WordPress

Për shkak se WordPress është shkruar në një gjuhë programimi, kushdo me njohuri kodimi mund të aksesojë dhe modifikojë kodin e WordPress.

Kjo është saktësisht se si funksionojnë shtojcat. Ato ju lejojnë të modifikoni dhe zgjeroni funksionalitetin e WordPress duke ndërvepruar drejtpërdrejt me WordPress-in tuaj duke përdorur funksione të caktuara PHP.

Krijimi i shtojcës suaj të WordPress dhe shtimi i kodit do të bëjë diçka vetëm nëse telefononi funksionin PHP duke përdorur një goditje. Hooks janë ato që lejojnë shtojcën tuaj të ndërveprojë me WordPress pa pasur nevojë të modifikoni skedarët bazë.

Le të shohim marrëdhënien midis kllapave katrore dhe funksioneve për të kuptuar bazat e shtojcave të WordPress.

Funksionet e WordPress:

Kodi i WordPress është ndërtuar mbi funksione që lejojnë çdo kod të palës së tretë të ndërveprojë me WordPress. Kjo është arsyeja pse do të gjeni shumë funksione në shtojca dhe tema. Secili funksion ka emrin e tij, i ndjekur nga kllapat dhe kodi brenda kllapave.

Këtu është një shembull:

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’ );

Ju mund ta telefononi këtë funksion direkt në shtojcën tuaj të WordPress duke shtypur sticky_header() ku dëshironi që kodi të ekzekutohet. Por është një praktikë e keqe sepse mund të hasni probleme. Këtu janë dy arsye të tjera pse nuk duhet t'i telefononi funksionet drejtpërdrejt në kodin tuaj.

Së pari, thirrja direkte funksionon vetëm për funksionet bazë, si shtimi i përmbajtjes në një skedar teme. Gjithashtu, duke përdorur këtë qasje, do t'ju duhet të telefononi disa herë funksionet për t'i përdorur ato në shumë vende, gjë që kërkon kohë dhe e rëndë në skedarët e kodit.

Thirrja e një funksioni me dorë mund të jetë gjithashtu e ndërlikuar nëse jeni i ri në kodim. Kur krijoni shtojca, praktika më e mirë është t'i bashkoni ato në një goditje. Kjo do t'ju kursejë nevojën për të rikujtuar funksionin në shumë vende.

Gjuajtjet e WordPress:

Një goditje është një pikë specifike në kodin WordPress ku mund të kryeni funksionet tuaja të personalizuara. Ka dy lloje grepash: grepa për veprim dhe grepa filtri.

Grepa Veprimi

Aksionet e veprimit ju lejojnë të ekzekutoni funksione të personalizuara në një kohë specifike në ciklin e ekzekutimit të WordPress. Kështu duket sintaksa e një grepi veprimi.

add_action('hook_name', 'my_custom_function');

Le  grepa_emri  është emri i grepit të veprimit që dëshironi të përdorni.

Ka disa grepa veprimi në WordPress. Mund t'i gjeni në codex WordPress.

funksioni_my_custom  është funksioni që përmban kodin që dëshironi të ekzekutoni. Ky funksion duhet të përcaktohet para funksionit add_action.

Sintaksa do të duket kështu për të bashkangjitur funksionin ngjitës të kokës më lart në një goditje.

add_action( 'wp_footer', 'sticky_header' );

Ky funksion ekzekuton funksionin sticky_header() kur thirret grepa e veprimit wp_footer. Ju gjithashtu mund ta bashkëngjitni funksionin në një grep specifik duke zëvendësuar wp_footer me emrin e grepit sipas zgjedhjes suaj.

Për shembull:

add_action( 'init', 'sticky_header' );

Kjo do të ekzekutojë funksionin e kokës ngjitëse kur thirret veprimi i fillimit të WordPress.

Grepa filtri

Grupet e filtrit ju lejojnë të modifikoni të dhënat përpara se ato të shfaqen ose të ruhen në bazën e të dhënave. Këtu është një shembull i një kapëse filtri që ndryshon titullin e një postimi në blog në të gjitha shkronjat.

add_filter( ‘the_title’, ‘uppercase_title’ );

function uppercase_title( $title ) {

  return strtoupper( $title );

}

Ky funksion pranon një argument të vetëm, $title, i cili është titulli origjinal i postimit në blog.

Më pas funksioni përdor funksionin strtoupper () për të kthyer titullin në shkronja të mëdha dhe kthen vlerën e modifikuar.

Dallimi midis grepave të veprimit dhe filtrit

Aksionet e veprimit ju lejojnë të ekzekutoni funksione të personalizuara në një kohë specifike në ciklin e ekzekutimit të WordPress. Në shembullin e mësipërm, grepi i veprimit wp_footer thirret pak përpara etiketës.

Grupet e filtrit, nga ana tjetër, ju lejojnë të modifikoni të dhënat ndërsa kalohen përmes bazës së kodit të WordPress.

Si në shembullin e mësipërm, grepa e filtrit Titulli ju lejon të redaktoni titullin e një postimi në blog përpara se të shfaqet në faqen e internetit.

Hapi 2: Krijoni një mjedis testimi

Hapi i dytë në krijimin e një shtojce WordPress është krijimi i një mjedisi testimi ose zhvillimi. Qëllimi është të shmangni eksperimentimin në një sit real.

Krijimi i një shtojce ndonjëherë kërkon mbrapa dhe mbrapa. Ju gjithashtu mund të bëni gabime që do të dëmtojnë faqen tuaj të internetit.

Ju mund të përdorni kompjuterin tuaj si një server lokal për të pritur një sajt testues të WordPress ku mund të krijoni dhe testoni shtojcën tuaj.

Nëse plani juajakomodimi mbështet krijimin e një siti testimi, ju gjithashtu mund ta përdorni atë. Këtu do të përdorim zgjidhjen e parë.

Për të ngritur një mjedis testimi, ne do shkarko lokale , një mjet zhvillimi për pritjen lokale të faqeve të internetit të WordPress.

Pasi shkarkimi të përfundojë, hapni softuerin në kompjuterin tuaj dhe klikoni + ikonë në fund majtas për të krijuar një sajt të ri lokal.

Zgjidhni nga Krijo një faqe të re dhe klikoni butonin vazhdoj.

Më pas, ndiqni udhëzimet në ekran për të shtuar emrin e faqes tuaj, për të konfiguruar mjedisin dhe për të krijuar detajet e hyrjes në WordPress.

Pasi të keni mbaruar. Klikoni në butonin Shto Faqen. Pasi të keni shtuar faqen tuaj, zgjidhni faqen tuaj të internetit në pultin lokal dhe hapni pultin e administratorit të WordPress.

Pasi të hapet faqja e hyrjes së administratorit, përdorni emrin e përdoruesit dhe Fjalëkalimi i WordPress që keni krijuar më lart për të hyrë në panelin tuaj.

Është bërë. Mjedisi juaj i testimit është gati. Le të fillojmë të krijojmë shtojcën tuaj të WordPress.

Hapi 3: Krijoni dosjen tuaj të shtojcave

Pasi mjedisi juaj i testimit të jetë në vend, gjëja e parë që duhet të bëni është të krijoni një skedar plugin në drejtorinë e faqes tuaj. Si parazgjedhje, WordPress ruan të gjitha shtojcat në drejtori wp-content/plugin.

Çdo shtojcë e instaluar në një faqe WordPress do të ketë një dosje në këtë direktori. Për shtojcën tuaj, do t'ju duhet të krijoni një dosje brenda kësaj drejtorie dhe t'i jepni një emër.

Për këtë tutorial, ne do të lundrojmë në dosje wp-content/plugin në drejtorinë tonë lokale të faqes. Ja si.

Shënim:  Procesi është i njëjtë nëse jeni duke përdorur një faqe ndërmjetëse.

Në pultin tuaj lokal, klikoni  Shkoni te Dosja e sitit . Ju do të ridrejtoheni në drejtorinë tuaj lokale të faqes.

zgjedh apps në opsionet, klikoni mbi publik pastaj në wp-përmbajtjen. Do të shihni dosje të ndryshme në këtë direktori.

Hapni dosjen Shtesa dhe një nënfolder të ri me emrin e shtojcës suaj. Ne do të përdorim këtu Koka ngjitëse pasi është emri i shtojcës që duam të krijojmë.

Hapi 4: Krijoni skedarin kryesor PHP për shtojcën tuaj

Pas krijimit të dosjes suaj të shtojcave, hapi tjetër është të shtoni një skedar PHP në këtë dosje. Këtu do të jenë të disponueshme kodet dhe funksionaliteti i shtojcës suaj.

Për këtë tutorial, na duhet vetëm një skedar PHP për një shtojcë të thjeshtë që krijon një kokë ngjitëse në WordPress.

Për shtojca më komplekse me funksionalitet të avancuar, mund të ketë lloje të ndryshme skedarësh në dosjen e shtojcave, të tilla si CSS dhe javascript. Në rastin tonë, një skedar i vetëm PHP do të mjaftojë.

Për ta bërë këtë, krijoni një skedar PHP në dosjen e shtojcave, si në pamjen e mëposhtme të ekranit.

Pasi skedari të jetë gati, është koha për të shtuar disa informacione në shtojcën tuaj.

Hapi 5: Konfiguro informacionin e shtojcës suaj

I njohur gjithashtu si titulli i skedarit të shtojcës, informacioni i shtojcës suaj është një bllok komentesh PHP që përfshin detaje rreth shtojcës suaj, si emri i shtojcës, versioni, URL-ja, emri i autorit dhe uebsajti i tij, licenca, etj.

Ky është informacioni që shihni në faqen e shtojcave të WordPress pas instalimit të një shtojce.

Ju mund të gjeni titulli i skedarit të shtojcave në kodeksin e WordPress . Duket kështu.

Thjesht kopjoni dhe ngjisni këtë kod në skedarin PHP të shtojcës suaj, më pas modifikoni detajet që t'i përshtaten shtesës suaj. Në rastin tonë, lexuesi i skedarit të shtojcave të kokës ngjitëse do të duket kështu.

<?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

*/

Pasi ta ruani këtë skedar, ju keni krijuar një shtesë të re dhe mund ta gjeni në listën e shtojcave të instaluara tashmë në faqen tuaj.

Hyni në pultin e WordPress të faqes tuaj të testimit dhe shkoni te Plugins>Plugins installés.

Do të shihni shtojcën Sticky Header me detaje. Ja ku eshte.

Tani mund ta aktivizoni shtojcën, por nuk do të bëjë asgjë sepse nuk i kemi shtuar ende ndonjë funksionalitet. Pra, le ta bëjmë shtojcën tonë të bëjë diçka.

Hapi 6: Shtoni kodin në shtojcën tuaj

Për ta bërë këtë, ne do të shtojmë kodin ngjitës të kokës që kemi përdorur gjatë mësimit të funksioneve dhe grepave të WordPress më sipër. Ja si.

Hapni skedarin PHP të shtojcës suaj. Nën detajet e kokës, kopjoni dhe ngjisni këto copa kodi në skedarin kryesor PHP të shtojcës suaj dhe ruajeni atë.

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’ );

Ky kod bën dy gjëra thelbësore,

funksioni koka_ngjitëse aktivizohet kur përdoruesi lëviz faqen dhe ndalon kur lëvizja ndalon.

Së dyti, veprimi add_action('wp_footer', 'sticky_header'); perdor adresen…..

Ruani kodin dhe kaq. Ju keni krijuar me sukses një shtojcë WordPress që e bën kokën e faqes suaj të internetit të ngjitet kur përdoruesit lëvizin nëpër të.

Hapi 7: Aktivizoni shtojcën. Në veprim.

Kthehuni në faqen tuaj dhe aktivizoni shtojcën.

Kur lëvizni nëpër versionin e drejtpërdrejtë të faqes, titulli i faqes suaj do të mbetet në krye të faqes.

Pasi të keni parë efektin e shtojcës së re në faqen tuaj demo, është koha ta provoni atë në faqen tuaj reale.

Përpara kësaj, sigurohuni që të keni testuar shtojcën për gabime dhe dobësi. Zgjidhini ato, nëse ka. Si masë paraprake, kopjoni faqen tuaj të WordPress përpara se të vendosni shtojcën tuaj të re.

Nëse jeni të kënaqur me performancën e shtojcës në faqen tuaj, mund ta ngarkoni shtojcën tuaj në depon e shtojcave WordPress. Ndërsa pronarët e faqeve të internetit e përdorin atë falas, ju do të merrni komente se çfarë të përmirësoni dhe si ta bëni atë.

Dhe nëse doni të fitoni para me shtojcën tuaj, mund ta shisni atë në një nga faqet e internetit që renditëm më lart

Përfundim

Nëse e keni arritur deri këtu, do të pranoni se krijimi i një shtojce WordPress është relativisht i thjeshtë. Duke ndjekur udhëzimet në këtë udhëzues, do të jeni në gjendje të krijoni një shtojcë bazë WordPress. Mund të eksperimentoni me sa më shumë funksione që dëshironi dhe të përmirësoni funksionalitetin e shtojcës suaj.

Krijimi i shtojcave komplekse ndjek të njëjtën metodë. Më shumë funksionalitet do të thotë më shumë funksione në skedarin tuaj të shtojcës.

A keni provuar ndonjëherë të krijoni një plugin WordPress? Le të flasim për përvojën tuaj në seksionin e komenteve më poshtë.