Létre szeretne hozni a WordPress plugint ? Ez az oktatóanyag megtanítja, hogyan kell csinálni.

A beépülő modulok hozzájárulnak a WordPress népszerűségéhez, mert lehetővé teszik a kódolási ismeretekkel nem rendelkező felhasználók számára, hogy lenyűgöző webhelyeket hozzanak létre.

Több mint 50 000 plugin található benne rWordPress könyvtár  különféle célokra tervezték. Meg fogod találni WordPress plugin mert feliratkozás a hírlevélre biztonság et  e-kereskedelem . Csak nevezd meg.

Ezek nélkül a WordPress webhely csak statikus képek és szövegblokkok gyűjteménye. A beépülő modulokkal a tartalomkezelő rendszer hihetetlen testreszabási szintet érhet el.

Függetlenül attól, hogy egyéni bővítményre van szüksége webhelyéhez, vagy szeretne létrehozni egy WordPress plugint és pénzt szerezni vele, gyerünk.

Kérdések fréquemment posees

Pénzt keresnek a WordPress bővítmények?

Igen. A WordPress plugin pénzt behozni. Eladhatja a beépülő modult a webhelyén vagy egy harmadik fél piacterén.

CodeCanyon Themeforest és Mojo piactér  a 3 legjobb bővítményt árusító webhely.

A bővítmény ingyenes verzióját is hozzáadhatja a WordPress tárházához, és prémium verziót kínálhat további funkciókkal.

Nehéz WordPress bővítményeket létrehozni?

Az a WordPress plugint viszonylag könnyű és nehéz, a kívánt funkcióktól függően.

A plugin létrehozása egyszerű, ha már ismeri a WordPress fejlesztés és a PHP programozás alapjait. Ha nem, akkor nagyon nehéz lehet. A legjobb egy egyszerű beépülő modullal kezdeni, amint az ebben az útmutatóban is látható.

Mennyit keresnek a beépülő modulok fejlesztői?

A Zip Recruiter szerint a fejlesztők átlagos óradíja WordPress plugin az Egyesült Államokban 35 dollár óránként. Ez körülbelül évi 72 000 dollárt és havonta 6 000 dollárt jelent.

Ha eladja bővítményét, az eladások számától függően akár 5 dollárt is kereshet havonta. A beépülő modulok testreszabási szolgáltatásaival óránként 000 és 20 dollár közötti bevételre tehet szert.

Mire lesz szüksége egy WordPress beépülő modul létrehozásához

Beépülő modul létrehozásához nem kell szakértő WordPress-fejlesztőnek lennie. Csak néhány alapvető kódolási tudásra van szüksége az induláshoz.

  • PHP programozási alapismeretek: A WordPress beépülő modulok PHP-ben készültek, ezért érdemes megértenie a nyelvet és annak szintaxisát, mielőtt elkezdené.
  • Alap HTML és CSS:  A HTML és a CSS lehetővé teszi a beépülő modulok megjelenítésének és megjelenésének szabályozását. Ezért elengedhetetlen, hogy megértsük az alapjaikat a WordPress bővítmény létrehozásához.
  • A WordPress ismerete:  hasznos megismerkedni a WordPress platformmal és fő funkcióival, valamint a WordPress Codex (a WordPress fejlesztés online kézikönyve).
  • Fejlesztői környezet: A bővítmény fejlesztéséhez és teszteléséhez telepítenie kell a WordPress-t a helyi gépére vagy egy fejlesztői webhelyre. Ez lehetővé teszi a bővítmény tesztelését anélkül, hogy az élő webhelyet érintene. A következő részben megmutatjuk, hogyan kell ezt megtenni.
  • Egy szövegszerkesztő: A beépülő modul kódjának megírásához szövegszerkesztőre lesz szüksége. Számos lehetőség áll rendelkezésre, mint például az Sfenséges Szöveg, atom et Visual Studio kód.

Hogyan készítsünk WordPress beépülő modult 7 lépésben

1. lépés: Ismerje meg a WordPress beépülő modulok működését

Mivel a WordPress programozási nyelven íródott, a kódolási ismeretekkel rendelkező bárki hozzáférhet és módosíthatja a WordPress kódot.

A pluginok pontosan így működnek. Lehetővé teszik a WordPress funkcionalitásának módosítását és kiterjesztését azáltal, hogy bizonyos PHP-funkciók használatával közvetlenül kapcsolatba lép a WordPress-szel.

A WordPress beépülő modul létrehozása és a kód hozzáadása csak akkor vezet valamit, ha a PHP függvényt egy hook segítségével hívja meg. A horgok segítségével a beépülő modul együttműködhet a WordPress-szel anélkül, hogy szerkesztenie kellene az alapvető fájlokat.

Nézzük meg a szögletes zárójelek és a függvények közötti kapcsolatot, hogy megértsük a WordPress beépülő moduljainak alapjait.

WordPress funkciók:

A WordPress kód olyan funkciókra épül, amelyek lehetővé teszik bármely harmadik féltől származó kód interakcióját a WordPress-szel. Ezért sok funkciót talál a bővítményekben és témákban. Minden függvénynek megvan a neve, amelyet kapcsos zárójelek és a kapcsos zárójelben található kód követ.

Íme egy példa:

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

Ezt a függvényt közvetlenül a WordPress beépülő moduljában hívhatja meg, ha beírja a sticky_header() parancsot arra a helyre, ahol a kódot futtatni szeretné. De ez egy rossz gyakorlat, mert problémákba ütközhet. Íme még két ok, amiért ne hívjon függvényeket közvetlenül a kódban.

Először is, a közvetlen hívás csak alapvető funkciókhoz működik, például tartalom hozzáadása egy témafájlhoz. Ezenfelül ezzel a megközelítéssel többször meg kell hívnia a függvényeket, hogy több helyen is használhassa őket, ami időigényes és nehézkes a kódfájlokban.

Egy függvény kézi hívása is bonyolult lehet, ha még nem ismeri a kódolást. A beépülő modulok létrehozásakor a legjobb gyakorlat az, hogy egy horoghoz rögzíti őket. Ezzel megkímélheti, hogy több helyen is előhívja a funkciót.

WordPress akasztók:

A horog a WordPress kód egy olyan pontja, ahol saját egyéni funkcióit hajthatja végre. Kétféle horog létezik: akciókampó és szűrőkampó.

Akció horgok

Az Action hook segítségével egyéni funkciókat hajthat végre a WordPress futási ciklusának egy adott időpontjában. Így néz ki az akcióhorog szintaxisa.

add_action('hook_name', 'my_custom_function');

Le  horog_neve  a használni kívánt akcióhook neve.

A WordPressben számos akcióhorog található. Megtalálhatja őket a codex WordPress.

my_custom_function  az a függvény, amely a végrehajtani kívánt kódot tartalmazza. Ezt a függvényt a függvény előtt kell meghatározni ADD_ACTION.

A szintaxis így fog kinézni, ha a fenti ragadós fejléc funkciót egy horoghoz csatolja.

add_action( 'wp_footer', 'sticky_header' );

Ez a függvény a sticky_header() függvényt hajtja végre a wp_footer műveleti hook meghívásakor. A függvényt egy adott hook-hoz is csatolhatja, ha a wp_footer helyére a választott horognévre cseréli.

Például:

add_action( 'init', 'sticky_header' );

Ez futtatja a ragadós fejléc függvényt a WordPress init műveletének meghívásakor.

Szűrő horgok

A szűrőkampók lehetővé teszik az adatok módosítását, mielőtt azok megjelennének vagy elmentenék az adatbázisba. Íme egy példa egy szűrőkampóra, amely a blogbejegyzés címét csupa nagybetűre változtatja.

add_filter( ‘the_title’, ‘uppercase_title’ );

function uppercase_title( $title ) {

  return strtoupper( $title );

}

Ez a függvény egyetlen argumentumot fogad el, a $title-t, amely a blogbejegyzés eredeti címe.

A függvény ezután a függvényt használja strtoupper () a cím nagybetűssé alakításához, és a módosított értéket adja vissza.

A különbség az akció- és a szűrőkampók között

Az Action hook segítségével egyéni funkciókat hajthat végre a WordPress futási ciklusának egy adott időpontjában. A fenti példában az akcióhorog wp_footer közvetlenül a címke előtt hívják meg.

A szűrőhorgok viszont lehetővé teszik az adatok módosítását a WordPress kódbázison való áthaladás során.

Mint a fenti példában, a szűrőkampó a cím lehetővé teszi a blogbejegyzés címének szerkesztését, mielőtt az megjelenik a webhelyen.

2. lépés: Állítson be egy tesztkörnyezetet

A WordPress beépülő modul létrehozásának második lépése egy teszt- vagy fejlesztői környezet beállítása. A cél az, hogy elkerüljük a valódi webhelyen való kísérletezést.

Egy plugin létrehozásához néha oda-vissza kell fordulni. Olyan hibákat is elkövethet, amelyek károsítják webhelyét.

Használhatja számítógépét helyi kiszolgálóként egy teszt WordPress webhely tárolására, ahol létrehozhatja és tesztelheti bővítményét.

Ha a tervedszállás támogatja a tesztoldal létrehozását, akkor azt is használhatja. Itt az első megoldást fogjuk használni.

A tesztkörnyezet létrehozásához megtesszük helyi letöltés , egy fejlesztőeszköz a WordPress webhelyek helyi tárolására.

A letöltés befejezése után indítsa el a szoftvert a számítógépén, és kattintson a gombra + ikonra a bal alsó sarokban egy új helyi webhely létrehozásához.

hozzon létre egy WordPress bővítményt

Válassz Hozzon létre új webhelyet és kattintson a gombra folytatódik.

Ezután kövesse a képernyőn megjelenő utasításokat a webhely nevének hozzáadásához, a környezet beállításához és a WordPress bejelentkezési adatainak létrehozásához.

Ha végeztél. Kattintson a gombra Webhely hozzáadása. A webhely hozzáadása után válassza ki webhelyét a helyi irányítópulton, és indítsa el a WordPress adminisztrátori irányítópultját.

Miután megnyílik az adminisztrátori bejelentkezési oldal, használja a felhasználónév és WordPress jelszó amelyet fent hozott létre az irányítópult eléréséhez.

Kész. A tesztkörnyezet készen áll. Kezdjük el létrehozni a WordPress bővítményt.

3. lépés: Hozza létre a plugins mappát

Miután a tesztkörnyezet a helyére került, először hozzon létre egy bővítményfájlt a webhely könyvtárában. Alapértelmezés szerint a WordPress az összes beépülő modult a könyvtárban tárolja wp-content/plugin.

A WordPress-webhelyekre telepített minden beépülő modulnak lesz egy mappája ebben a könyvtárban. Ezért a beépülő modulhoz létre kell hoznia egy mappát ebben a könyvtárban, és nevet kell adnia neki.

Ebben az oktatóanyagban a mappába navigálunk wp-content/plugin a helyi webhelykönyvtárunkban. Itt van, hogyan.

Megjegyzés:  A folyamat ugyanaz, ha közvetítő webhelyet használ.

A helyi irányítópulton kattintson a  Lépjen a Webhely mappájába . A rendszer átirányítja a helyi webhelykönyvtárba.

választ alkalmazások a lehetőségek között kattintson a gombra nyilvános majd be wp-tartalom. Ebben a könyvtárban különböző mappákat fog látni.

Nyissa meg a mappát Dugó és egy új almappát a beépülő modul nevével. Itt fogjuk használni Ragadós fejléc mivel ez a létrehozandó bővítmény neve.

4. lépés: Hozza létre a fő PHP-fájlt a bővítményhez

A bővítménymappa létrehozása után a következő lépés egy PHP-fájl hozzáadása ehhez a mappához. Itt lesznek elérhetők a beépülő modul kódjai és funkciói.

Ehhez az oktatóanyaghoz csak egy PHP-fájlra van szükségünk egy egyszerű beépülő modulhoz, amely ragadós fejlécet hoz létre a WordPressben.

Bonyolultabb, fejlett funkciókkal rendelkező bővítmények esetén különböző fájltípusok lehetnek a beépülő modul mappájában, például CSS és javascript. Esetünkben egyetlen PHP fájl elegendő.

Ehhez hozzon létre egy PHP-fájlt a plugin mappájában, az alábbi képernyőképen látható módon.

Ha a fájl elkészült, ideje hozzáadni néhány információt a bővítményhez.

5. lépés: Konfigurálja a beépülő modul adatait

A beépülő modul fejléceként is ismert, a beépülő modul információi egy PHP megjegyzésblokk, amely olyan részleteket tartalmaz, mint a beépülő modul neve, verziója, URL-je, szerző neve és webhelye, licence stb.

Ez az információ, amelyet a WordPress beépülő modul oldalán láthat a beépülő modul telepítése után.

Megtalálhatod a plugin fájl fejléce a WordPress kódexben . Ez így néz ki.

Csak másolja ki és illessze be ezt a kódot a beépülő modul PHP-fájljába, majd szerkessze a részleteket a beépülő modulnak megfelelően. Esetünkben a ragadós fejléc beépülő modul fájlolvasója így fog kinézni.

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

*/

Miután elmentette ezt a fájlt, létrehozott egy új beépülő modult, amelyet megtalálhat a webhelyére már telepített bővítmények listájában.

Jelentkezzen be tesztwebhelye WordPress irányítópultjára, és lépjen a következő helyre: Plugins>Plugins installés.

Látni fogja a Sticky Header beépülő modult a részletekkel. Itt van.

hozzon létre egy WordPress bővítményt

Most már aktiválhatja a beépülő modult, de nem csinál semmit, mert még nem adtunk hozzá semmilyen funkciót. Tehát csináljunk valamit a bővítményünkkel.

6. lépés: Adjon hozzá kódot a bővítményhez

Ehhez hozzáadjuk azt a ragadós fejléc kódot, amelyet a WordPress fenti funkcióinak és akasztóinak megtanulásakor használtunk. Itt van, hogyan.

Nyissa meg a beépülő modul PHP-fájlját. A fejléc részletei alatt másolja ki és illessze be ezeket a kódrészleteket a beépülő modul fő PHP-fájljába, majd mentse el.

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

Ez a kód két lényeges dolgot tesz,

Funkció ragadós_fejléc akkor aktiválódik, amikor a felhasználó görgeti az oldalt, és leáll, amikor a görgetés leáll.

Másodszor, az akció add_action('wp_footer', 'sticky_header'); használd a címet...

Mentse el a kódot, és kész. Sikeresen létrehozott egy WordPress-bővítményt, amely ragadóssá teszi webhelyének fejlécét, amikor a felhasználók görgetnek rajta.

7. lépés: Aktiválja a bővítményt. Akcióban.

Térjen vissza webhelyére, és aktiválja a bővítményt.

Amikor végiggörget a webhely élő verziójában, a webhely fejléce az oldal tetején marad.

hozzon létre egy WordPress bővítményt

Ha már látta az új beépülő modul hatását bemutató webhelyén, itt az ideje, hogy kipróbálja a valódi webhelyén.

Előtte győződjön meg arról, hogy tesztelte a bővítményt hibák és sebezhetőségek szempontjából. Adott esetben oldja meg őket. Elővigyázatosságból készítsen biztonsági másolatot a WordPress webhelyéről az új beépülő modul telepítése előtt.

Ha elégedett a beépülő modul teljesítményével a webhelyén, feltöltheti a bővítményt a WordPress beépülő modulok tárházába. Mivel a webhelytulajdonosok ingyenesen használják, Ön visszajelzést kap arról, hogy mit és hogyan kell javítani.

Ha pedig pénzt szeretne keresni a bővítményével, eladhatja azt a fent felsorolt ​​webhelyek egyikén

Következtetés

Ha idáig eljutott, akkor egyetért azzal, hogy a WordPress bővítmény létrehozása viszonylag egyszerű. Az ebben az útmutatóban található utasításokat követve létrehozhat egy alapvető WordPress bővítményt. Tetszőleges számú funkcióval kísérletezhet, és javíthatja bővítménye működését.

Az összetett bővítmények létrehozása ugyanezt a módszert követi. A több funkció több funkciót jelent a bővítményfájlban.

Próbáltál már WordPress bővítményt létrehozni? Beszéljünk tapasztalatairól az alábbi megjegyzések részben.