Szeretnél létrehozni egy WordPress bővítményt? Ez az oktatóanyag megtanítja, hogyan.

A bővítmények hozzájárulnak a WordPress népszerűségéhez, mivel lehetővé teszik a felhasználók számára, hogy kódolási ismeretek nélkül is lenyűgöző weboldalakat hozzanak létre.

Több mint 50 000 plugin található benne rWordPress könyvtár  különféle célokra tervezték. Találhatsz WordPress bővítményeket a következőkhöz hírlevél-feliratkozás , biztonság et  e-kereskedelem . Csak nevezd meg.

Nélkülük egy WordPress weboldal csak statikus képek és szövegblokkok gyűjteménye. Bővítményekkel a tartalomkezelő rendszer hihetetlen mértékű testreszabhatóságot érhet el.

Akár egyedi bővítményre van szükséged a webhelyedhez, akár létrehoznál egy WordPress bővítményt és szeretnél pénzt keresni vele, kezdjük is el.

---

Tartalomjegyzék

---

Kérdések fréquemment posees

---

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

Bővítmény létrehozásához nem kell szakértő WordPress fejlesztőnek lenned. Csak néhány alapvető kódolási ismeretre van szükséged 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 bővítmények megjelenítésének és megjelenésének szabályozását. Ezért az alapjaik megértése kulcsfontosságú egy WordPress bővítmény létrehozásához.
• A WordPress ismerete:  Hasznos megismerkedni a WordPress platformmal és főbb 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ő: Szükséged lesz egy szövegszerkesztőre a bővítmény kódjának megírásához. Számos lehetőség áll rendelkezésre, 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.

Pontosan így működnek a bővítmények. Lehetővé teszik a WordPress funkcionalitásának módosítását és bővítését azáltal, hogy közvetlenül kommunikálsz a WordPress webhelyeddel bizonyos PHP függvények segítségével.

A WordPress bővítmény létrehozása és a kód hozzáadása csak akkor fog működni, ha a PHP függvényt egy hook segítségével hívod meg. A hookok lehetővé teszik, hogy a bővítmény a WordPress-szel kommunikáljon anélkül, hogy a központi fájlokat szerkeszteni kellene.

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 függvényekre épül, amelyek lehetővé teszik bármely harmadik féltől származó kód számára, hogy interakcióba lépjen a WordPress-szel. Ezért találhatsz számos függvényt a bővítményekben és témákban. Minden függvénynek megvan a saját neve, amelyet kapcsos zárójelek és a zárójelek között 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 bővítményedben is meghívhatod a `sticky_header()` beírásával oda, ahová a kódot futtatni szeretnéd. Ez azonban nem megfelelő gyakorlat, mert valószínűleg problémákba ütközöl. Íme két további ok, amiért nem szabad függvényeket hívni közvetlenül a kódodban.

Először is, a közvetlen hívások csak az alapvető függvényeknél működnek, például tartalom hozzáadásakor egy témafájlhoz. Továbbá, ennek a megközelítésnek a használata a függvények ismételt meghívását igényli, hogy több helyen is használhassuk őket, ami időigényes és a kódfájlok méretét is növeli.

Egy függvény manuális meghívása bonyolult lehet, ha még csak most ismerkedsz a kódolással. Bővítmények létrehozásakor a legjobb gyakorlat az, ha egy hookhoz csatolod őket. Ez megakadályozza, hogy több helyen is meg kelljen hívnod a függvényt.

WordPress horgok 

A hook egy adott pont a WordPress kódban, ahol saját egyéni függvényeket futtathatsz. Kétféle hook létezik: action hook és filter hook.

Akcióhorgok

Az action hookok lehetővé teszik egyéni függvények végrehajtását a WordPress végrehajtási ciklusának egy adott pontján. Így néz ki egy action hook szintaxisa.

add_action('hook_name', 'my_custom_function');

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

A WordPressben számos action hooks található. Megtalálhatod ő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 sticky header függvényt egy hookhoz csatoljuk.

add_action( 'wp_footer', 'sticky_header' );

Ez a függvény a sticky_header() függvényt hajtja végre, amikor a wp_footer akcióhorog meghívódik. A függvényt egy adott hookhoz is csatolhatod, ha a wp_footer helyére a kiválasztott hook nevét írod.

Például:

add_action( 'init', 'sticky_header' );

Ez végrehajtja a sticky header függvényt, amikor a WordPress init művelete meghívódik.

Szűrő horgok

A szűrőhookok lehetővé teszik az adatok módosítását a megjelenítésük vagy az adatbázisba mentésük előtt. Íme egy példa egy olyan szűrőhookra, amely egy blogbejegyzés címét nagybetűsre 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 paramétert, 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őhorgok között

Az action hookok lehetővé teszik egyéni függvények végrehajtását a WordPress végrehajtási ciklusának egy adott pontján. A fenti példában az action hook wp_footer közvetlenül a címke előtt hívják meg.

A szűrőhookok ezzel szemben lehetővé teszik az adatok módosítását, miközben azok áthaladnak a WordPress kódbázisán.

A fenti példához hasonlóan a szűrőhorog a cím lehetővé teszi a blogbejegyzés címének módosítását, mielőtt az megjelenne a weboldalon.

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

A WordPress bővítmény 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 az élő webhelyen történő kísérletezést.

Egy bővítmény létrehozása néha oda-vissza módosításokat igényel. Előfordulhat, hogy olyan hibákat követsz el, amelyek károsíthatják a webhelyedet.

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 tárhelycsomagod támogatja a tesztoldal létrehozását, akkor azt is használhatod. Itt az első lehetőséget fogjuk használni.

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

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

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 konfigurálásához és a WordPress bejelentkezési adatainak létrehozásához.

Ha végeztél. Kattintson a gombra Webhely hozzáadása. Miután hozzáadtad a webhelyedet, válaszd ki a webhelyedet a helyi irányítópulton, és indítsd el a WordPress adminisztrációs irányítópultját.

Miután megnyílt 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.

Ennyi. A tesztkörnyezeted készen áll. Kezdjük el létrehozni a WordPress bővítményedet.

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.

Minden WordPress webhelyre telepített bővítménynek lesz egy mappája ebben a könyvtárban. Ezért a bővítményhez létre kell hozni egy mappát ebben a könyvtárban, és nevet kell adni 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étrehozni kívánt 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ény mappa létrehozása után a következő lépés egy PHP fájl hozzáadása ehhez a mappához. Itt található a bővítmény kódja és funkciói.

Ehhez az oktatóanyaghoz csak egyetlen PHP fájlra van szükségünk egy egyszerű bővítményhez, amely rögzíthető 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 hozz létre egy PHP fájlt a bővítmény mappájában, ahogy az az alábbi képernyőképen látható.

Miután a fájl elkészült, itt az ideje, hogy hozzáadj néhány információt a bővítményhez.

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

A bővítmény fájlfejlécének is nevezett információ a bővítményről egy PHP kommentblokk, amely tartalmazza a bővítményre vonatkozó részleteket, például a bővítmény nevét, verzióját, URL-címét, a szerző nevét és webhelyét, licencét stb.

Ez az információ látható a WordPress bővítmény oldalán a bővítmény telepítése után.

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

Egyszerűen másold ki és illeszd be ezt a kódot a bővítményed PHP fájljába, majd módosítsd a részleteket a bővítmény specifikációi szerint. Esetünkben a bővítmény ragadós fejlécfájl-olvasó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.

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éckódot, amelyet a WordPress függvények és hookok tanulmányozásakor használtunk. Íme, hogyan kell csinálni.

Nyisd meg a bővítményed PHP fájlját. A fejléc részletei alatt másold ki és illeszd be ezeket a kódrészleteket a bővítményed fő PHP fájljába, majd mentsd 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 akkor áll meg, amikor a görgetés megáll.

Másodszor, a cselekvés add_action('wp_footer', 'ragadós_fejléc' ); a címet használja …

Mentsd el a kódot, és kész is. Sikeresen létrehoztál egy WordPress bővítményt, amely rögzíti a webhelyed fejlécét, amikor a felhasználók lefelé görgetnek.

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

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

Amikor a webhely élő verzióját görgeted, a webhely fejléce az oldal tetején marad.

Miután láttad az új bővítmény hatását a demó webhelyeden, itt az ideje, hogy kipróbáld az élő webhelyeden.

Mielőtt ezt megtennéd, győződj meg róla, hogy tesztelted a bővítményt hibák és sebezhetőségek szempontjából. Javítsd ki őket, ha szükséges. 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 vagy a bővítmény teljesítményével a webhelyeden, feltöltheted a WordPress bővítmény-tárházba. Mivel a webhelytulajdonosok ingyenesen használhatják, visszajelzést kapsz arról, hogy min kell javítani, és hogyan kell megvalósítani.

És ha pénzt szeretnél keresni a bővítményeddel, eladhatod a fent felsorolt ​​weboldalak egyikén.

---

Összegzés

Ha idáig eljutottál, egyetértesz abban, hogy egy WordPress bővítmény létrehozása viszonylag egyszerű. Az útmutatóban található utasításokat követve létrehozhatsz egy alapvető WordPress bővítményt. Annyi funkcióval kísérletezhetsz, amennyivel csak szeretnél, és fejlesztheted a bővítmény funkcionalitá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.