WordPress egyéni téma bemutatója

WordPress egyéni téma bemutatója

az egyéni WordPress témák létrehozásának megtanulása egy teljesen új világot nyit meg az Ön számára. Ez lehetővé teszi, hogy egyedi terveket készítsen magának, ügyfeleinek, sőt hozzájáruljon a nyílt forráskódú közösséghez.

ebben az útmutatóban, megyünk, hogy elviszi a nulláról, hogy miután egy teljesen működőképes téma, hogy lehet benyújtani a WordPress.org téma könyvtár.

a követéshez alapvető ismeretekre van szükség a HTML, CSS, PHP és a WordPress működéséről.

az útmutatóban használt összes kód elérhető lesz a Github adattárban.

1. lépés: alapvető fájlok létrehozása az egyéni témához

egy működő WordPress téma csak két fájlból állhat: stílus.css és index.php. Ez a WordPress sablonhierarchiája miatt lehetséges.

amikor a WordPress kiad egy weboldalt, a rendelkezésre álló legspecifikusabb sablont keresi, ha egy sablon nem létezik, akkor lefelé mozog a hierarchiában, amíg nem talál egyet. Íme egy gyakorlati példa:

a felhasználó https://example.com/practical-example – en van, ami egy oldal. A WordPress megpróbálja megtalálni a sablont ebben a sorrendben:

1. 1. • oldal – {csiga}.php-az oldalcsiga /gyakorlati példa, a WordPress a-téma/oldal-gyakorlati-példát fogja használni.php
      • oldal – {id}.php-az oldalazonosító 42, a WordPress a-téma/oldal-42 használatát fogja használni.php.
      • oldal.a php-WordPress megpróbálja az általános célú your-theme/oldalt.php sablon.
      • egyes szám.php-a szinguláris sablon képes bejegyzéseket és oldalakat megjeleníteni, ezért a konkrétabb oldal után próbálkozik.php
      • index.php-végül a-téma / index.a php-t akkor használják, ha nem található más sablon.

kezdjük azzal, hogy egy témát építünk csak az alapvető fájlokkal, majd további funkciókat rétegezhetünk, amikor feltárjuk, hogyan működnek.

a /wp-content/themes/ programban hozzon létre egy my-custom-theme nevű mappát, és hozza létre a következő két fájlt:

stílus.css

ahhoz, hogy a WordPress felismerje a témánkat, és megfelelően megjelenítse azt a megjelenés fő Témalistájában, a stílus tetejére kell helyeznünk néhány WordPress-specifikus kódot.css, ez így néz ki:

/*Theme Name: My Custom ThemeTheme URI: https://yourwebsite.com/themeAuthor: Your NameAuthor URI: https://yourwebsite.comDescription: This is my first custom theme!Version: 1.0.0License: GNU General Public License v2 or laterLicense URI: <https://www.gnu.org/licenses/gpl-2.0.html>Text Domain: my-custom-themeTags: custom-background*/

technikailag egyik mező sem szükséges, de ha azt szeretné, hogy a témája jól nézzen ki a wp-admin alkalmazásban, akkor erősen ösztönzik őket. Ezekre akkor is szükség van, ha a témát a WordPress-en terjeszti.

1. 1. • téma neve – mindig adjon meg egy téma nevét. Ha nem, akkor a mappa nevét fogja használni, my-custom-theme példánkban.
      • Theme URI – használat esetén a theme URI-nak tartalmaznia kell egy linket egy oldalra, ahol a látogatók többet megtudhatnak a témáról.
      • szerző – a neved ide kerül.
      • Author URI – egy linket a személyes vagy üzleti honlapján lehet elhelyezni itt.
      • Description – a leírás megjelenik a wp-admin theme modálon és a WordPress theme listájában is.
      • Version – a verziószámok segítségével a fejlesztők nyomon követhetik a változásokat, és értesíthetik a felhasználókat, ha a legújabb verziót használják. A SemVer számozási rendszert követjük, hogy jelezzük a frissítés változásainak súlyosságát.
      • licenc – a téma licencelésének módja rajtad múlik, de ha nem GPL-kompatibilis licencet választasz, akkor nem tudod terjeszteni a témát a WordPress-en.
      • License URI – ez egyszerűen egy link a licenc fent felsorolt.
      • Szövegtartomány – a szövegtartomány a téma más nyelvekre történő fordításakor használatos. Ne aggódjon, ezt később részletesen megvizsgáljuk. Egyelőre elég tudni, hogy jó gyakorlat, ha a téma mappa és a szövegtartomány a szóközök helyett kötőjelekkel elválasztott téma neve.
      • címkék-címkék csak akkor használják, ha feltölti a témát a WordPress.org téma könyvtár. Ezek képezik a ‘Feature Filter’ mechanizmus alapját.

másolja be a fenti stílusba.css és akkor valami ilyesmi:

Megjegyzés: úgy néz ki, egy kicsit üres abban a pillanatban, mint mi nem egy screenshot még. Ezt később hozzáadjuk.

index.php

index.a php az egyetlen szigorúan szükséges fájl. Feladata, hogy a téma összes front-end kimenetét megjelenítse.

az index óta.a php minden oldalunkat (otthon, Hozzászólások, kategóriák, archívumok) renderelni fogja, sok munkát fog végezni. A kezdéshez szükségünk van egy fejrészre, amely lefedi a HTML alapjait.

<!DOCTYPE html><html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="profile" href="https://gmpg.org/xfn/11"> <?php wp_head(); ?> </head>

ez a szabványos HTML egy kivétellel, (<https://developer.wordpress.org/reference/hooks/wp_head/>). wp_head egy alapvető funkció, amely lehetővé teszi a WordPress és a harmadik féltől származó bővítmények számára, hogy kódot illesszenek be a fejlécbe anélkül, hogy módosítanák a sablonfájlokat. Ez az úgynevezett akció horog.

ha ismeri a HTML-t, észreveheti, hogy nincs < title> címke az oldal címének kiadására. Ennek oka az, hogy a WordPress a wp_head kampóval dinamikusan beszúrhatja a címet.

a wp_head másik használata a stílusok (.css) és szkriptek (.js). Nagyon jó okok vannak erre a kemény kódolás helyett, amelyeket később megvizsgálunk.

ezután megvan az oldal törzse:

<body <?php body_class(); ?>>

a body_class () a WordPress által biztosított segítő funkció, amely kiadja a hasznos CSS osztályok listáját, amelyek leírják a megjelenített oldalt, például:

class="page page-id-2 page-parent page-template-default logged-in"

body_class (); egy paramétert is Elfogad, így hozzáadhatja saját osztályait, például:

<body <?php body_class( 'wide-template blue-bg' ); ?>>

ezután megvan a sablon fejléc.

<header class="site-header"><p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></p><p class="site-description"><?php bloginfo( 'description' ); ?></p></header><! – .site-header – >

itt a WordPress beépített sablonfunkcióit használjuk a webhely címének és leírásának kiadására. Egy segítő funkciót, a home_url () függvényt is használtunk a webhely címének a kezdőlapra történő összekapcsolására.

következik az oldal törzse:

<div class="site-content"><?phpif ( have_posts() ) :while ( have_posts() ) :the_post();?><article <?php post_class(); ?>><header class="entry-header"><?php the_title( '<h1 class="entry-title">', '</h1>' ); ?></header><! – .entry-header – ><div class="entry-content"><?php the_content( esc_html__( 'Continue reading &rarr;', 'my-custom-theme' ) ); ?></div><! – .entry-content – ></article><! – #post-## – ><?php// If comments are open or we have at least one comment, load up the comment template.if ( comments_open() || get_comments_number() ) :comments_template();endif;endwhile;else :?><article class="no-results"><header class="entry-header"><h1 class="page-title"><?php esc_html_e( 'Nothing Found', 'my-custom-theme' ); ?></h1></header><! – .entry-header – ><div class="entry-content"><p><?php esc_html_e( 'It looks like nothing was found at this location.', 'my-custom-theme' ); ?></p></div><! – .entry-content – ></article><! – .no-results – ><?phpendif;?></div><! – .site-content – >

ez az, ahol érdekes (és egy kicsit bonyolultabb). Itt használjuk a WordPress legfontosabb jellemzőjét, a hurkot. A hurok elvégzi a kemény munkát, hogy kitalálja, melyik oldalon van a felhasználó, és mit kell megjeleníteni. Ezután visszaadja egy vagy több ‘hozzászólás’ listáját, amelyeket át tudunk húzni, és sablonfüggvények segítségével adatokat adhatunk ki.

ha a hurok nem ad vissza eredményt, például egy 404-es oldalon vagy törölt bejegyzésben, akkor egy else operátort használunk egy előre meghatározott üzenet megjelenítéséhez.

a környező kód nélkül egy egyszerűsített hurok így néz ki:

if ( have_posts() ) : // check if the loop has returned any posts.while ( have_posts() ) : // loop through each returned post.the_post(); // set up the content so we can use template tags like the_title().the_title(); // output the post title.the_content(); // output the post content.endwhile;else : echo 'No Page Found'; // output an error message if there are no posts.endif;?>

Megjegyzés: Mivel a WordPress a blogolásból származik, sok funkció a ‘post’ terminológiát használja, annak ellenére, hogy bármilyen típusú tartalmat (posztokat, oldalakat, egyedi bejegyzéstípusokat) visszaadhatnak és kiadhatnak.

végül megvan a lábléc, itt csak annyit kell tennünk, hogy bezárjuk a korábban megnyitott HTML-címkéket. Van egy másik akcióhorog, a wp_footer (), amelyet a WordPress és a pluginek aktívan használnak az oldal megjelenítéséhez szükséges szkriptek beillesztésére a láblécbe.

<?php wp_footer(); ?></body></html>

ha már a következő mentén eddig lesz egy teljesen működőképes WordPress téma, hogy néz ki, mint ez:

a téma nem fog nyerni semmilyen tervezési díjat (ez nem CSS), és ez hiányzik egy csomó funkciók, hogy a felhasználók úgy lényeges (oldalsávok, navigáció, metaadatok, miniatűrök, lapozás, stb.) de ez egy nagyszerű kezdet!

folytassuk, és nézzük meg, hogyan javíthatunk rajta.

2. lépés: funkciók létrehozása.php

funkciók.a php nem feltétlenül szükséges fájl, de annyi előnyt nyújt, hogy a témák 99,99% – ában van. Funkciókban.php használhatja a WordPress beépített témafunkcióit, valamint hozzáadhatja saját egyedi PHP kódját.

hozzon létre egy függvényt.php a téma mappájában most, mivel a következő szakaszokban kódot adunk hozzá.

navigációs menü hozzáadása

a legtöbb, ha nem az összes webhely használja a navigációs menüt, de eddig a témánk nem támogatja. Ahhoz, hogy elmondhassuk a WordPressnek, a témánk tartalmaz egy navigációs menüt, regisztrálnunk kell a funkciókban.php mint ez:

register_nav_menus( array( 'menu-1' => __( 'Primary Menu', 'my-custom-theme' ),);

Megjegyzés: register_nav_menus () Elfogad egy tömböt, így szükség esetén több menüt is regisztrálhat.

a WordPress már ismeri a menünket, de még mindig ki kell adnunk a témánkban. Ezt úgy tesszük, hogy hozzáadjuk a következő kódot az index webhelyleírása alá.php:

wp_nav_menu( array( 'theme_location' => 'menu-1',) );

most van egy (stílus nélküli) navigációs menü:

hozzáadása oldalsáv

a téma nem rendelkezik oldalsáv (widget terület) sem, nézzük erősít, hogy most.

először regisztrálnunk kell az oldalsávot a funkciókban.php:

function my_custom_theme_sidebar() { register_sidebar( array( 'name' => __( 'Primary Sidebar', 'my-custom-theme' ), 'id' => 'sidebar-1', ) );}add_action( 'widgets_init', 'my_custom_theme_sidebar' );

most hozzon létre oldalsávot.php a téma mappába, és adja hozzá a következő kódot:

<?php if ( is_active_sidebar( 'sidebar-1' ) ) { ?> <ul class="sidebar"> <?php dynamic_sidebar('sidebar-1' ); ?> </ul><?php } ?>

itt egy if utasítást használunk annak ellenőrzésére, hogy az oldalsáv aktív-e, mielőtt kiadnánk a kódot. Az aktív oldalsáv az, amelyhez a Felhasználó legalább egy widgetet hozzáadott.

az utolsó lépés az oldalsáv felvétele az indexbe.php, fenti wp_footer () adjunk hozzá egy get_sidebar () hívást.

kiemelt képek hozzáadása

mint az oldalsávok és a navigációs menük, nem csak kiemelt képeket adhatunk ki a témánkban, és elvárhatjuk, hogy működjenek, először meg kell mondanunk a WordPress-nek, hogy támogatjuk ezt a funkciót. Funkciókban.php add:

add_theme_support( 'post-thumbnails' );

most már hozzá the_post_thumbnail(); belül a hurok és a miniatűrök fog működni. Az egyetlen probléma az, hogy a WordPress maximális mérete 1920px x 2560px, ami túl nagy a legtöbb felhasználáshoz. Szerencsére a WordPress-nek van egy másik segítő funkciója: add_image_size ();

amikor egy felhasználó feltölt egy képet, és ha a képméret meg van adva, a WordPress a feltöltött képnek egy ilyen méretű verzióját generálja (az eredeti megtartása mellett). Ha a felhasználó képe kisebb, mint a beállított méretek, a WordPress semmit sem fog tenni, mivel nem képes nagyobb képet készíteni, mint az eredeti.

ha az eredeti helyett optimalizált funkcióképet szeretne használni, helyezze a következő kódot a függvényekbe.php:

add_image_size( 'my-custom-image-size', 640, 999 );

az első paraméter a fogantyú, a második a kép szélessége, a harmadik pedig a magasság. Mind a magasság, mind a szélesség opcionális, ha csak egy dimenziót szeretne korlátozni.

az indexben.php:

the_post_thumbnail( 'my-custom-image-size' );

Enqueueing stílusok és szkriptek

korábban azt mondtuk, hogy jobb, ha a stílusokat és szkripteket közvetlenül a sablonfájlokba kódoljuk. Ez azért van, mert az enqueuing sokkal nagyobb rugalmasságot tesz lehetővé.

ha helyesen végzett, az enqueuing azt is elmondja a WordPress-nek, hogy mely erőforrások vannak betöltve. Amikor a WordPress tudja, hogy mely erőforrásokra van szükség, megbizonyosodhat arról, hogy ugyanazt az erőforrást nem töltik be többször. Ez különösen fontos, ha van egy rendkívül népszerű könyvtárad, mint a jQuery vagy a FontAwesome, amelyet több téma és plugin fog használni.

az enqueuing másik előnye, hogy az enqueued erőforrást egy plugin törölheti, elkerülve a sablonfájlok módosítását.

bár témánknak van stílusa.css fájl még nem használja, nézzük enqueue, hogy most:

function my_custom_theme_enqueue() { wp_enqueue_style( 'my-custom-theme', get_stylesheet_uri() );}add_action( 'wp_enqueue_scripts', 'my_custom_theme_enqueue' );

get_stylesheet_uri() egy segítő funkció, amely beolvassa az aktuális téma stíluslapjának URI-ját. Ha mi enqueueing bármely más fájlt kellene csinálni ezt helyett:

wp_enqueue_style( 'my-stylesheet', get_template_directory_uri() . '/css/style.css' );

a téma nem rendelkezik szkriptek, ha ez lenne enqueue őket, mint ez:

function my_custom_theme_enqueue() {wp_enqueue_style( 'my-custom-theme', get_stylesheet_uri() );wp_enqueue_script( 'my-scripts', get_template_directory_uri() . '/js/scripts.js' );}add_action( 'wp_enqueue_scripts', 'my_custom_theme_enqueue' );

a fentiek alól kivételt képeznek a WordPress által előre regisztrált szkriptek, ezekben az esetekben csak az első paramétert kell megadnia ($handle):

wp_enqueue_script( 'jquery' );

stílus hozzáadása CSS-sel

témánknak erős alapjai vannak, de nincs semmilyen kialakítása, hozzáadva néhány alapvető CSS-t a stílushoz.a css hatalmas különbséget fog tenni. Körülbelül ~100 sornyi CSS-t adtunk hozzá a minta témához demonstrációként, és az eredmény így néz ki:

Title Tag

minden témának a WordPress beépített funkcionalitását kell használnia a címcímke létrehozásához, amely engedélyezve van, ha ezt a kódot hozzáadja a funkcióihoz.php fájl: add_theme_support( 'title-tag' );ennyi az egész, a WordPress kezeli a < cím> oldal kimenetét, és ha szükséges, a bővítmények szűrőkkel módosíthatják a kimenetet. A SEO beépülő modulok gyakran ezt teszik a címek további optimalizálása érdekében.

Lépés #3: Add sablon alkatrészek

most 80% – a sablon kód index.php.

bár ez működik, sok kódismétlést eredményez, ha más sablonfájljaink vannak, mint például a singular.php, keresés.php és archiválás.php. A sablonrészek megkönnyítik a téma fejlesztését azáltal, hogy lehetővé teszik számunkra a kód újrafelhasználását a sablonok között. Mivel a fejléc és a lábléc minden oldalon azonos lesz, tökéletes jelölt a sablon részek használatához. Először hozzon létre fejlécet.php és mozgassa a következő kódot az indexből.php:

<!DOCTYPE html><html <?php language_attributes(); ?>><head><meta charset="<?php bloginfo( 'charset' ); ?>"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="profile" href="<https://gmpg.org/xfn/11>"><?php wp_head(); ?></head> <header class="site-header"> <p class="site-title"> <a href="<?php echo esc_url( home_url( '/' ) ); ?>"> <?php bloginfo( 'name' ); ?> </a> </p> <p class="site-description"><?php bloginfo( 'description' ); ?></p><?phpwp_nav_menu( array( 'theme_location' => 'menu-1',) );?> </header><! – .site-header – >

az indexben.php cserélje ki a fenti kódot:

<?php get_template_part( 'header' ); ?>

Megjegyzés: Ha kapok egy sablon része, el kell hagynia a .php a sablon rész fogantyú.

ezután hozzon létre egy lábléc sablon részt a kód láblécbe mozgatásával.php és a fenti folyamat megismétlése:

<?php wp_footer(); ?></body></html>

végül áthelyezzük a’ no-results ‘ kódot egy sablonrészre is, mivel valószínűleg több sablonban is használják. Tartalom létrehozása-nincs.php és helyezze át ezt a kódot az új fájlba.

<article class="no-results"> <header class="entry-header"> <h1 class="page-title"><?php esc_html_e( 'Nothing Found', 'my-custom-theme' ); ?></h1> </header><! – .entry-header – > <div class="entry-content"> <p><?php esc_html_e( 'It looks like nothing was found at this location.', 'my-custom-theme' ); ?></p> </div><! – .entry-content – ></article><! – .no-results – >

az Indexnek most így kell kinéznie:

<?php get_template_part( 'header' ); ?> <div class="site-content"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <article <?php post_class(); ?>> <?php the_post_thumbnail(); ?> <header class="entry-header"> <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?> </header><! – .entry-header – > <div class="entry-content"> <?php the_content( esc_html__( 'Continue reading &rarr;', 'my-custom-theme' ) ); ?> </div><! – .entry-content – > </article><! – #post-## – > <?php // If comments are open or we have at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) : comments_template(); endif; endwhile; else : get_template_part( 'content-none' ); endif;?></div><! – .site-content – ><?phpget_sidebar();get_template_part( 'footer' );

bár a fentiek tökéletesen működnek, van egy kis javulás, amit tehetünk. A WordPress segítő funkciókkal rendelkezik a fejléc, a lábléc és az oldalsáv sablonrészeinek felvételéhez. Mivel a legjobb gyakorlat az alapvető funkciók használata, ahol csak lehetséges, inkább ezeket kell használnunk.

cserélje le a get_template_part( 'header' ); szót get_header(); – re és a get_template_part( 'footer' );szót get_footer();

4.lépés: egyes szám hozzáadása.php, archívum.php, keresés.php és 404.php

a sablon részekkel végzett alapozás osztalékot fizet, amikor új sablonfájlokat adunk a témánkhoz. Az alábbiakban felsoroltuk a leggyakoribbakat. Annak elkerülése érdekében, hogy elárasszuk Önt kódpéldákkal, inkább a GitHub forráskódjához kapcsolódtunk.

egyes szám.php

a bejegyzések és az oldalak, amikor a saját URL-jükön jelennek meg, Szingulárisnak minősülnek, mivel az elrendezés legtöbbször mindkét oldaltípus esetében azonos lesz. De abban az esetben, ha nem, használhatja a konkrétabb oldalt.php és single.php (post) helyett.

példa kód – egyes szám.php

archívum.php

az archív sablonok általában kétféleképpen különböznek az egyes sablonoktól: kivonatokat mutatnak, nem pedig a teljes tartalmat, és tartalmaznak egy archív fejlécet, amely elmagyarázza a tartalmat.

hivatkozzon vissza a sablonhierarchiára, és látni fogja, hogy az archív sablon minden típusú archívumot lefed (szerző, kategória, címke, taxonómia, Dátum), ha ez nem működik a használati esetben továbbra is használhatja a specifikusabb sablonokat:

1. 1. • szerző.php
      • kategória.php
      • címke.php
      • taxonómia.php
      • dátum.php

példa kód-archívum.php

keresés.php

WordPress weboldalak lehet keresni a ?s = URL paraméter, például yourwebsite.com?s=test. A keresés.a php sablon kiadja a keresések eredményeit.

példa kód-keresés.php

404.php

az else utasítás adunk index.a php elkapja az” oldal nem található ” hibákat, de érdemes szétválasztani ezt a funkcionalitást a saját sablonfájljába, hogy jobban ellenőrizhesse a kimenetet. Ez a 404-es Használati esete.php sablon fájl.

Példa Kód – 404.php

5. lépés: kiegészítő fájlok

ha a témát a nyilvánosság számára terjeszti, akkor a következő fájlok elengedhetetlenek. Ezek nélkül a téma elutasításra kerül a tématárolókból és a piacterekről.

képernyőkép.png

a képernyőkép a wp-admin témák listában jelenik meg, amikor a felhasználó új témát választ. Íme néhány legjobb gyakorlat, amelyet követnie kell:

1. 1. • screenshotok kell 1200px x 900px
      • screenshotok kell .png vagy .JPG formátumban
      • screenshotok kell egy pontos ábrázolása a téma
      • screenshotok optimalizálni kell (használja tinypng.com vagy hasonló)

readme.txt

a WordPress nem használ semmilyen információt a readme-től.txt, a stílusból húz mindent, amire szüksége van.css. Másrészt a WordPress téma Könyvtár fontos információkat húz ki a readme fájlból, és szükséges fájlnak tekinti.

a legtöbb fejlesztő a readme-t használja.txt, mint a központi helyet, hogy tárolja az összes információt a témát. Egy egyszerű readme.a txt így néz ki:

=== Theme Name ===Requires at least: 5.0Tested up to: 5.2Requires PHP: 5.6License: GPLv2 or laterLicense URI: <https://www.gnu.org/licenses/gpl-2.0.html>Short description. No more than 150 chars.== Description ==Theme desc.== Changelog === 1.0 =* Added new option== Resources ==* normalize.css <https://necolas.github.io/normalize.css/>, (C) 2012-2016 Nicolas Gallagher and Jonathan Neal, (<https://opensource.org/licenses/MIT>)

1. 1. • legalább megköveteli – ez a WordPress minimális verziója, amellyel a témája kompatibilis.
      • Tesztelve – ez a mező a WordPress legújabb verzióját jelöli, amellyel a témát tesztelték.
      • PHP – t igényel-ez a mező a PHP minimális verzióját jelöli, amelyen a téma működni fog.
      • Description – Ez a leírás mező jelenleg sehol nem jelenik meg.
      • Változásnapló – a változásnaplót sehol nem használják, de a fejlesztők és néhány felhasználó hivatkozni fog erre a fájlra, hogy lássa, milyen változások történtek.
      • erőforrások – a legtöbb harmadik féltől származó erőforrás valamilyen hozzárendelést igényel. Az erőforrások szakasz széles körben elfogadott hely ezek elhelyezésére. Még azoknál az erőforrásoknál is, amelyek nem igénylik kifejezetten a hozzárendelést, továbbra is jó gyakorlat ezeket itt felsorolni, hogy a felhasználók tisztában legyenek az általuk használt erőforrások licenceivel.

6. lépés: Oldalsablonok létrehozása

oldalsablonok lehetővé teszik a fejlesztők számára, hogy egyedi sablonokat hozzanak létre, amelyeket egyedi bejegyzésekhez és oldalakhoz lehet használni. Például a legtöbb téma két oszlopos (tartalom – oldalsáv) elrendezéssel rendelkezik, de egyes oldalakon a felhasználó csak a tartalomra összpontosíthat, és nem jeleníthet meg oldalsávot. Ez az, ahol egy oldalsablon segíthet.

hogyan készülnek az” oldalsablonok”?

a témamappánkban hozzon létre egy új mappát ‘oldalsablonok’ néven, és azon belül hozzon létre egy egyoszlopos nevű fájlt.php. A dolgok felgyorsítása érdekében másolja az összes kódot az egyes számból.php oldal-sablonok / egyoszlopos.php és távolítsa el a hívást a get_sidebar (), mivel ez a sablon nem kell, hogy.

most hozzá kell adnunk egy speciális fejlécet, amely azt mondja a WordPress-nek, hogy ez egy oldalsablon, így néz ki:

/*Template Name: Single Column TemplateTemplate Post Type: post, page*/

a kód magától értetődő, egyszerűen megmondjuk a WordPress-nek a sablon nevét és azt, hogy mely bejegyzéstípusokkal használható.

ennyi az egész, az új oldalsablonunk már elérhető a szerkesztőben az ‘Oldalattribútumok’alatt.

7.lépés: a téma kompatibilis az RTL-rel.css

nem minden nyelv olvasható balról jobbra. Az arab és a Héber nyelv például jobbról balra (RTL) olvasható. Van egy egyszerű módja annak, hogy témája kompatibilis legyen az RTL nyelvekkel.

hozzon létre egy új fájlt a téma mappájában, rtl néven.css, majd másolja be a következő kódot:

body {direction: rtl;unicode-bidi: embed;}

ha egy RTL nyelv az aktív nyelv a WordPress webhelyén, akkor a WordPress tudja, hogy automatikusan betölti ezt a CSS fájlt.

ez az RTL funkció nagyon alapvető megvalósítása a kezdéshez. Ha érdekli a tanulás Több Itt van két fantasztikus források:

jobbról balra nyelvi támogatási dokumentáció

húsz húsz RTL kód

8.lépés: mindig kövesse a legjobb gyakorlatokat

a legjobb gyakorlatok az idők során fejlődtek, hogy megkönnyítsék a WordPress témák felépítését és karbantartását. Ezen elvek követése nem csak segít, hanem megkönnyíti más fejlesztők számára is, amikor a kóddal kell dolgozniuk.

1) Használja A kezdő témákat

A kezdő témák szilárd alapot nyújtanak a téma felépítéséhez. Általában könnyűek, kevés vagy egyáltalán nem tartalmaznak stílusokat és nincsenek konfigurációs lehetőségek. Idővel lehet építeni a saját starter téma, amely alapján az összes projekt, de most itt van néhány népszerű lehetőségek:

1. 1. • aláhúzás
      • állvány
      • HTML5 üres

2) Ismerje meg a WordPress kódolási szabványait

a kódolási szabványok a kód következetes formázásának egyik módja a teljes kódbázisban. A WordPress rendelkezik HTML, CSS, Javascript és PHP kódolási szabványokkal. Bár a kódolási szabvány használata nincs hatással a végfelhasználói élményre, sokkal olvashatóbbá teszi a kódot. Még akkor is, ha nem használja a WordPress kódolási szabványokat, mindig javasoljuk egy szabvány használatát.

1. 1. • WordPress.org kódolási szabványok
      • WPCS
      • PHP kódolási szabványok

3) Használja a lokalizációt

az önkéntesek kemény munkájának köszönhetően a WordPress több száz nyelven érhető el. Ha a téma fog megjelenni nyilvánosan kell építeni oly módon, hogy lehetővé teszi, hogy le kell fordítani is.

ne aggódj, ez szuper könnyű csinálni. Csak annyit kell tennünk, hogy megbizonyosodunk arról, hogy az összes karakterlánc egy ‘lokalizációs függvényen’ halad át, nem pedig közvetlenül.

e helyett:

<?php echo 'Previous Post'; ?>

ezt tesszük helyette:

<?php echo __( 'Previous Post', 'my-custom-theme' ); ?>

__() egy lokalizációs függvény, amely elfogadja a karakterláncot és a szövegtartományt. A függvény a megadott karakterlánc fordítását adja vissza, vagy az eredeti karakterláncot, ha nem áll rendelkezésre fordítás.

4) kerülje a Plugin funkcionalitását

amikor a felhasználó megváltoztatja a témát, csak a prezentációs rétegnek kell megváltoznia. A tartalom és a funkcionalitás többnyire ugyanaz marad. Ez azt jelenti, hogy minden olyan funkció, amely befolyásolja, hogy a WordPress szerepköröket hogyan kell tartalmazni egy bővítményben, nem pedig a témájában. Néhány példa a plugin funkcionalitására:

1. 1. • egyéni bejegyzéstípusok
      • Oldalépítők
      • közösségi média megosztása
      • Keresőoptimalizálás (SEO)

bár kényelmesnek (és esetleg értékesítési pontnak) tűnhet a SEO vezérlők beépítése egy témába, valójában hosszú távon fáj a felhasználónak. A jövőben meg kell változtatniuk a témájukat, de nem tudják, mert minden SEO konfigurációjuk szorosan kapcsolódik az aktuális témához. Ezzel szemben, ha a konfigurációkat egy pluginben tárolnák, aggódás nélkül megváltoztathatják a témát.

5) Előtag (konfliktusok megelőzése)

az ütközések elkerülése érdekében a téma által létrehozott összes függvényt, osztályt és globális változót előtaggal kell ellátni. Ez azért fontos, mert lehetetlen tudni, hogy milyen más kód fut a felhasználó webhelyén. Az előtag megakadályozza a névütközéseket és a végzetes hibákat.

a téma neve kötőjellel vagy aláhúzással elválasztva legtöbbször előtagként fog működni. Ha a téma neve nagyon hosszú, akkor a kezdőbetűk működhetnek.

Theme Name: Scaffoldclass Scaffold_Class {}function scaffold_function() {}global $scaffold_globalTheme Name: My Long Theme Nameclass MLTN_Class {}function mltn_function() {}global $mltn_global

6) használja az alapvető funkciókat

ahol létezik, mindig az alapvető funkciókat kell használnia, szemben a kerék újbóli feltalálásával. Ez magában foglalja, de nem korlátozódik az Oldalsávokra, a navigációs menükre, a bélyegképekre, az egyéni fejlécekre és az egyéni hátterekre. Ezeket a funkciókat több millió felhasználó tesztelte, és aktívan karbantartják és fejlesztik.

ha meg kell változtatnia egy alapfunkció funkcionalitását vagy kimenetét, akkor ez lehetséges a WordPress által kínált számos Kampó és szűrő egyikével. Például a wp_nav_menu() rendelkezik’ walker ‘ paraméterrel, így teljes mértékben vezérelheti a kimenetet.

7) adatok mentése és fertőtlenítése

témafejlesztőként ismernie kell az adatok menekülését és fertőtlenítését, hogy megvédje felhasználóit a lehetséges kihasználásoktól.

menekülés

a menekülés az adatok ellenőrzése biztonságos a kimenet előtt, a fertőtlenítés pedig az adatok ellenőrzése az adatbázisba történő mentés előtt.

a WordPress rendelkezik segítő funkciókkal, amelyek segítségével elkerülheti az adatokat, így nem kell ezeket saját maga elkészítenie. az esc_html egy példa a menekülési funkcióra. Így néz ki egy el nem látott kimenet:

echo get_theme_mod( 'error_page_title' );

a kimenet elkerülése érdekében ezt tesszük:

echo esc_html( get_theme_mod( 'error_page_title' ) );

néhány más menekülési funkciók tisztában kell lenniük a esc_attr(), absint (), esc_url ().

az is lehetséges, hogy lefordítani és menekülni egy string segítségével Egyetlen függvény:

echo esc_html( __( '404 Not Found', 'my-custom-theme' ) );

válik:

echo esc_html__( '404 Not Found', 'my-custom-theme' );// oresc_html_e( '404 Not Found', 'my-custom-theme' );

tipp: bárhol a témában, ahol echo $ van, ellenőrizze, hogy el kell-e menekülni, Általában igen.

fertőtlenítés

ha beállításokat ad hozzá a témához, akkor az adatbázisba való belépés előtt meg kell győződnie arról, hogy a felhasználók által megadott adatok biztonságosak-e. A WordPress számos funkcióval rendelkezik, amelyek segítenek a bemenet fertőtlenítésében.

amikor a Customizer API használatával hozzáad egy beállítást a témához, rendelkezik egy ‘sanitize_callback’ nevű paraméterrel, amely elfogadja a sanitization függvény nevét. A beállítás minden bemenetét a ‘sanitize_callback’ funkció ellenőrzi, mielőtt belépne az adatbázisba.

kiemeli a fertőtlenítés fontosságát, hogy ha még az egyik beállításodból hiányzik a sanitize_callback, akkor azt nem fogadják el a WordPress téma könyvtárába.

$wp_customize->add_setting( 'my_custom_theme_setting', array( 'sanitize_callback' => 'sanitize_text_field' // A core sanitization function. ));

a fertőtlenítési és menekülési funkciók hivatalos listája itt látható: Adatfertőtlenítés/menekülés

9.lépés: a WordPress téma terjesztése

a témák különböző csatornákon keresztül terjeszthetők az elérni kívánt eredménytől függően. Ha az eredmény az, hogy egyszerűen hozzájárul a nyílt forráskódú közösséghez, akkor erre nincs jobb módszer, mint feltölteni a témát a WordPress könyvtárba. Ha ehelyett a témát szeretné eladni és közvetlenül pénzt keresni, akkor erre is van mód.

itt vannak a Vezető Weboldalak téma forgalmazás:

1) WordPress.org (a legjobb hely a letöltések és a felhasználók számára)

a téma WordPress-en történő tárolásának elsődleges előnye, hogy láthatósági lendületet kap, ha a témája nem csak a wordpress-en látható.org honlapján, de a wp-admin irányítópulton is.

a téma WordPress használatával történő tárolásának másik előnye a beépített frissítési rendszer. Ha frissíti a témát, minden felhasználó értesítést kap a wp-admin irányítópultján belül, és könnyű utat kap a legújabb verzióra való frissítéshez.

WordPress.org csak ingyenes témákat fogad el, de ez nem azt jelenti, hogy nem lehet pénzt keresni. Az ingyenes téma nagyszerű csatorna lehet A prémium téma, plugin vagy szolgáltatás népszerűsítésére.

2) WordPress.com

WordPress.com mind ingyenes, mind prémium témákat tárol. Néhány éve azonban nem nyitottak új szerzői beadványokra.

3) ThemeForest

a ThemeForest a prémium témák vezető piaca. A legkeresettebb téma (Avada) értékesítése meghaladja az 5 000 000 dollárt.

Általánosságban elmondható, hogy a Theme Forest vásárlói teljes funkcionalitású “többcélú” témákat várnak. Az összes top téma oldalkészítő funkcióval rendelkezik, és fejlesztői csapatok támogatják őket. Ez egy nagyon nehéz piac betörni az új szerzők.

4) a Creative Market és a Mojo Marketplace

a Creative Market és a Mojo Marketplace kis szereplők a prémium témák piacán, ezért csoportosítottuk őket. Mindkettő hatékonyan ugyanazt a szolgáltatást kínálja, mint a ThemeForest, de kisebb léptékben.

5) Github

Github a legegyszerűbb módja annak, hogy a szabad téma nyilvános. Nincs felülvizsgálati eljárás és nincs követendő irányelv. Azonban nem fog profitálni a láthatóság wordpress.org és meg kell építeni a saját frissítési mechanizmus a felhasználók számára, hogy a legújabb verzió.

10. lépés: Tesztelje és javítsa a kódot

1) A téma tesztelése

Theme Unit Test

a Theme Unit Test egy szabványos WordPress tartalomimportáló fájl, amely a tartalomtípusok és az edge esetek széles skáláját tartalmazza. Könnyen feltölthető a fejlesztői környezetbe, és sok olyan forgatókönyvet emel ki, amelyeket esetleg figyelmen kívül hagyott.

WP_DEBUG

témafejlesztőként a téma tesztelése a wp_debug engedélyezve van a minimális, amit meg kell tennie. A téma nem adhat vissza hibákat vagy figyelmeztetéseket, ha a WP_DEBUG értéke true.

az is fontos, hogy ismételje meg a tesztet a különböző PHP verziók a téma támogatja. Minden fontosabb PHP kiadásnál vannak új változások, figyelmeztetések és értékcsökkenés. Nem ritka, hogy egy téma hibamentes a PHP5.6-on, de hibákat mutat a PHP7-en.

a WP_DEBUG engedélyezéséhez adja hozzá a következő kódot a wp-config-hez.php:

DEFINE( 'WP_DEBUG', true );

Monster Widget

Monster Widget egy hasznos plugin, amely lehetővé teszi, hogy adjunk 13 alapvető kütyü a sidebar egyszerre. Az alapvető widgetek különféle HTML elemeket használnak, amelyek tökéletessé teszik őket a téma teszteléséhez.

Theme Sniffer

a Theme Sniffer egy plugin által létrehozott Theme Review Team (TRT). Sok (de nem az összes) menekülési és lokalizációs hibát fog el. Ezenkívül ellenőrzi a témáját a WordPress kódolási szabványaival szemben.

2) A téma benyújtása WordPress.org

az útmutató elején azt mondtuk, hogy mire elérte a végét, lesz egy témája, amelyet benyújthat wordpress.org. nézzük meg ezt a folyamatot.

feltöltési folyamat

a feltöltési folyamat egyszerű. Hozzon létre vagy jelentkezzen be WordPress-fiókjába, majd keresse meg ezt az oldalt– https://wordpress.org/themes/upload/

lehet zip a témát, és töltse fel most, de itt van néhány dolog, amit érdemes tudni először.

követelmények

a Theme Review Team (TRT) szigorú követelményekkel rendelkezik. A téma nem fogadható el a könyvtárba, amíg nem felel meg az összes követelménynek.

felülvizsgálati folyamat

amikor feltölt egy témát, van egy kétlépcsős felülvizsgálati folyamat, amelyet át kell mennie, mielőtt elfogadná a könyvtárba.

először automatikus ellenőrzés történik, amint megnyomja a Feltöltés gombot. A színfalak mögött az automatizált ellenőrző nagyon hasonló módon működik, mint a Theme Sniffer plugin. Ha hibát talál, elutasítja a témát, és a feltöltési folyamat véget ér.

ha a téma átmegy az automatikus ellenőrzésen, akkor csatlakozik a témák sorához, amely emberi felülvizsgálatra vár. Az emberi felülvizsgálatot a TRT önkéntesei töltik ki. A sorban lévő témák száma messze meghaladja az értékelők számát, ami azt jelenti, hogy gyakran 2-3 hónapba telhet, amíg a téma eléri a sor elejét.

elengedhetetlen, hogy a téma hibamentes legyen, és megfeleljen az összes követelménynek, mire eléri az emberi felülvizsgálati szakaszt, mintha több mint 3 jelentős hibája lenne, amit el lehet utasítani. Ha egy témát elutasítanak az emberi felülvizsgálat szakaszában, akkor újra csatlakoznia kell a hátsó sorhoz, ami azt jelenti, hogy ismét 2-3 hónapot kell várni egy újabb emberi felülvizsgálatra.

Hasznos Forrás: A leggyakoribb WordPress Témafejlesztési hibák (és azok kijavításának módja)

érdemes megjegyezni, hogy a TRT mindig új értékelőket keres, az önkéntesség nagyszerű tanulási élmény lehet, és hozzájárulhat a nyílt forráskódú közösséghez.

3) A téma felsorolása

gratulálunk, a téma jóváhagyásra került! Most már megvan a saját listája, amely így néz ki.

íme egy áttekintés arról, hogy mit várhat ezen az oldalon:

1. 1. • Screenshot-a screenshot az első dolog, amit a potenciális felhasználók látnak, így a lehető legvonzóbbá teszik. De ne feledje, hogy ennek továbbra is a téma pontos ábrázolásának kell lennie, nem pedig photoshop-megjelenítésnek. Merítsen ihletet a legnépszerűbb témákból.
      • Description – a stílusból kihúzott leírás.a css ideális hely a téma és a legfontosabb jellemzők leírására. Ez segít az ajánlott vagy szükséges bővítmények felsorolásában is. A leírás nem támogat semmilyen formázást (félkövér, dőlt, hiperhivatkozások) vagy akár sortöréseket.
      • címkék – ez a stílusosan felsorolt címkék ábrázolása.css. Csak ezeket a címkéket fogadják el.
      • Preview gomb-az előnézet által generált wordpress.org témafejlesztőként pedig nincs ellenőrzésünk a kimenet felett. Sajnos, mivel az előnézet alapvető tartalmat használ, konfiguráció nélkül, gyakran kevesebb, mint tökéletes előnézetet eredményez.
      • Theme Homepage Link – az előnézet gomb URL-je a stílusodban a ‘Theme URI’ mezőből származik.css. Szigorú követelmények vonatkoznak arra, hogy ezt az URL-t csak a témával kapcsolatos információkat megjelenítő oldal megjelenítésére szabad használni.
      • aktív telepítések – ez a témát aktívan használó webhelyek száma. A számot a legközelebbi tízre, százra vagy ezerre kerekítik. Pontos számot nem lehet lekérni.
      • Letöltések naponta – ez hányszor töltötte le a témát. A ‘Letöltés’ lehet új letöltés vagy témafrissítés.
      • vélemények – ahhoz, hogy egy felhasználó véleményt hagyjon, be kell jelentkeznie a wordpress.org számla. Általánosságban elmondható, hogy az értékeléseket nehéz megszerezni, hacsak nem kéri kifejezetten a felhasználókat, hogy nyújtsák be őket.
      • támogatás – a beépített támogatási platform kiválóan alkalmas a témával kapcsolatos problémák kezelésére és megoldására. A felhasználónak be kell jelentkeznie egy támogatási szál létrehozásához.
      • fordítások – a fordítási platform fantasztikus forrás. Ha az útmutatóban a téma lokalizálására vonatkozó tanácsokat követte, akkor a felhasználók képesek lesznek lefordítani más nyelvekre, és bővíteni a potenciális felhasználói bázist csak az angol nyelvű felhasználókon túl.

4) A téma frissítése

amikor a jövőben módosítja a témát, és frissítenie kell a WordPress-en tárolt verziót, a folyamat egyszerű.

először frissítse a ‘Version:’ mezőt és a changelog-ot a readme-ben.txt. Ezután csomagolja be a fájlt, majd töltse fel újra ugyanazon a feltöltési oldalon, mint korábban.

a rendszer frissítésként ismeri fel, és automatikusan jóváhagyja, így nincs szükség újabb emberi felülvizsgálatra.