WordPress vlastní téma Tutorial

WordPress vlastní téma Tutorial

naučit se vytvářet vlastní WordPress témata otevírá zcela nový svět pro vás prozkoumat. To vám umožní vytvářet vlastní návrhy pro sebe, své klienty a dokonce přispět zpět do open-source komunity.

v této příručce vás zavedeme od nuly k plně funkčnímu tématu, které lze odeslat WordPress.org adresář motivů.

Chcete-li sledovat, budete potřebovat základní znalosti HTML, CSS, PHP a jak funguje WordPress.

veškerý kód použitý v této příručce bude k dispozici pro referenci v tomto úložišti Github.

Krok #1: vytváření základních souborů pro vaše vlastní téma

funkční téma WordPress se může skládat pouze ze dvou souborů: styl.css a index.Linux. To je možné díky hierarchii šablon WordPress.

když WordPress odešle webovou stránku, vyhledá nejkonkrétnější dostupnou šablonu, pokud šablona neexistuje, bude se pohybovat dolů v hierarchii, dokud nenajde tu, která Ano. Zde je praktický příklad:

uživatel je na https://example.com/practical-example, což je stránka. WordPress se pokusí najít šablonu v tomto pořadí:

1. 1. • strana – {slimák}.php-stránka slug je / praktický-příklad, WordPress bude vypadat, že použije váš-téma / stránka-praktický-příklad.php
      • strana – {id}.php – ID stránky je 42, WordPress bude vypadat používat vaše-theme / page-42.Linux.
      • strana.php-WordPress se bude snažit univerzální vaše-téma / stránky.php šablony.
      • singulární.php-singulární šablona může vykreslit příspěvky a stránky, takže je vyzkoušena po konkrétnější stránce.php
      • index.php-konečně vaše-téma / index.php se používá, pokud není nalezena žádná jiná šablona.

Začněme tím, že budujeme téma pouze se základními soubory a pak můžeme vrstvit další funkce, když zkoumáme, jak fungují.

v /wp-content/themes/ vytvořte složku s názvem my-custom-theme a vytvořte tyto dva následující soubory:

styl.css

aby WordPress rozpoznal naše téma a správně jej vyvedl do seznamu Vzhled → Témata, musíme umístit nějaký kód specifický pro WordPress v horní části stylu.css, vypadá to takto:

/*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*/

technicky není vyžadováno žádné pole, ale pokud chcete, aby vaše téma vypadalo dobře v wp-admin, jsou velmi podporovány. Jsou také vyžadovány, pokud distribuujete své téma na WordPress.

1. 1. • název motivu-vždy byste měli zadat název motivu. Pokud tak neučiníte, použije se název složky, my-custom-theme v našem příkladu.
      • Theme URI – pokud je použito, téma URI by mělo poskytnout odkaz na stránku, kde se návštěvníci mohou dozvědět více o tématu.
      • Autor-vaše jméno je zde.
      • Autor URI-odkaz na vaše osobní nebo firemní webové stránky lze umístit zde.
      • Popis-popis je uveden v modálním motivu wp-admin a také v seznamu motivů WordPress.
      • verze – čísla verzí pomáhají vývojářům sledovat změny a informovat uživatele, pokud používají nejnovější verzi. Sledujeme systém číslování SemVer, abychom označili závažnost změn v aktualizaci.
      • Licence-jak licencujete svůj motiv, je na vás,ale pokud zvolíte licenci nekompatibilní s GPL, nebudete moci své téma distribuovat na WordPress.
      • Licence URI – jedná se jednoduše o odkaz na výše uvedenou licenci.
      • Text Domain-textová doména se používá při překladu motivu do jiných jazyků. Nebojte se, prozkoumáme to do hloubky později. Prozatím stačí vědět, že je dobrým zvykem, aby složka motivu a textová doména byly název motivu oddělený spojovníky místo mezer.
      • tagy-tagy se používají pouze v případě, že nahráváte motiv do WordPress.org adresář motivů. Jsou základem mechanismu „filtru funkcí“.

zkopírujte a vložte výše uvedené do stylu.css a budete mít něco takového:

Poznámka: V tuto chvíli vypadá trochu prázdně, protože zatím nemáme Snímek obrazovky. Přidáme to později.

index.php

index.php je jediný další přísně požadovaný soubor. Jeho úkolem je vykreslit veškerý front-end výstup pro naše téma.

od indexu.php bude vykreslovat všechny naše stránky (Domov, příspěvky, kategorie, archivy), bude to dělat hodně práce. Pro začátek potřebujeme hlavovou část, která bude pokrývat základy HTML.

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

toto je standardní HTML s jednou výjimkou, (<https://developer.wordpress.org/reference/hooks/wp_head/>). wp_head je základní funkce, která umožňuje WordPress a pluginy třetích stran vložit kód do záhlaví bez úpravy souborů šablon. Tomu se říká akční háček.

pokud jste obeznámeni s HTML, můžete si všimnout, že není<název > značka pro výstup názvu stránky. Je to proto, že WordPress může pomocí háčku wp_head dynamicky vložit název.

další použití wp_head je enqueue styly (.css) a skripty (.js). Existují velmi dobré důvody, proč to udělat místo jejich pevného kódování, na které se podíváme později.

dále máme tělo stránky:

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

body_class () je pomocná funkce poskytovaná WordPress, která zobrazí seznam užitečných tříd CSS, které popisují zobrazovanou stránku, jako například:

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

body_class(); také přijímá parametr, takže můžete přidat své vlastní třídy, například:

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

dále máme záhlaví šablony.

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

zde používáme vestavěné funkce šablon WordPress pro výstup názvu a popisu webu. Také jsme použili pomocnou funkci, home_url (), k propojení názvu webu zpět na domovskou stránku.

další na řadě je tělo stránky:

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

to je místo, kde to bude zajímavé (a trochu složitější). Zde používáme nejdůležitější funkci WordPress, smyčku. Smyčka dělá těžkou práci při zjišťování, na které stránce je uživatel a co by mělo být zobrazeno. Poté vrátí seznam jednoho nebo více „příspěvků“, které můžeme procházet, a výstup dat pomocí funkcí šablony.

pokud smyčka nevrátí žádné výsledky, například na stránce 404 nebo smazaném příspěvku, použijeme k zobrazení předdefinované zprávy jiný operátor.

bez jakéhokoli okolního kódu vypadá Zjednodušená smyčka takto:

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

poznámka: protože WordPress má svůj původ v blogování, mnoho funkcí používá terminologii „post“, i když mohou vracet a vydávat jakýkoli typ obsahu(příspěvky ,stránky, Vlastní typy příspěvků).

konečně máme zápatí, vše, co musíme udělat, je zavřít HTML tagy, které jsme otevřeli dříve. Je tu další akční háček, wp_footer (), který je aktivně používán WordPress a pluginy zahrnout skripty v zápatí potřebné k vykreslení stránky.

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

pokud jste dosud sledovali, budete mít plně funkční téma WordPress, které vypadá takto:

naše téma nevyhraje žádné ocenění za design (nemá CSS) a chybí mu mnoho funkcí, které uživatelé považují za nezbytné (postranní panely, navigace, metadata, miniatury, stránkování atd.) ale je to skvělý začátek!

pojďme pokračovat a uvidíme, jak to můžeme zlepšit.

Krok č. 2: Vytvoření funkcí.php

funkce.php není striktně požadovaný soubor, ale poskytuje tolik výhod, že ho má 99,99% témat. Ve funkcích.php můžete využít vestavěné funkce motivu WordPress a také přidat svůj vlastní kód PHP.

Vytvořte funkce.php ve složce motivu nyní, jak budeme přidávat kód do něj v dalších částech.

přidání navigačního Menu

většina, ne-li všechny webové stránky využívají navigační menu, ale až dosud naše téma nepodporuje jeden. Chcete-li říct WordPress, že naše téma obsahuje navigační nabídku, musíme ji zaregistrovat ve funkcích.php takhle:

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

Poznámka: register_nav_menus () přijímá pole, takže v případě potřeby můžete zaregistrovat více než jednu nabídku.

WordPress nyní ví o našem menu, ale stále ho musíme vydat v našem tématu. Děláme to přidáním následujícího kódu pod popis webu v indexu.php:

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

nyní máme (nestylované) navigační menu:

přidání postranního panelu

naše téma nemá postranní panel (oblast widgetu), opravme to teď.

nejprve musíme zaregistrovat postranní panel ve funkcích.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' );

nyní vytvořte postranní panel.php ve složce motivu a přidejte následující kód:

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

zde používáme příkaz if ke kontrole, zda je postranní panel „aktivní“ před výstupem kódu. Aktivní postranní panel je ten, který uživatel přidal alespoň jeden widget.

posledním krokem je zahrnutí postranního panelu do indexu.php, nad wp_footer () přidat get_sidebar () volání.

přidání doporučených obrázků

stejně jako postranní panely a navigační nabídky nemůžeme v našem tématu pouze výstupovat doporučené obrázky a očekávat, že budou fungovat, musíme nejprve říct WordPress, že tuto funkci podporujeme. Ve funkcích.php přidat:

add_theme_support( 'post-thumbnails' );

Nyní můžeme přidat the_post_thumbnail(); v naší smyčce a miniatury budou fungovat. Jediným problémem je, že budou vystupovat na maximální velikosti WordPress 1920px x 2560px, což je pro většinu použití příliš velké. Naštěstí WordPress má další pomocnou funkci: add_image_size ();

když uživatel nahraje obrázek a pokud je definována velikost obrázku, WordPress vygeneruje verzi nahraného obrázku v této velikosti(při zachování originálu). Pokud je obrázek uživatele menší než rozměry, které jste nastavili, WordPress neudělá nic, protože nemůže vytvořit obrázek větší než originál.

Chcete-li použít optimalizovaný obrázek funkce spíše než originál, vložte do funkcí následující kód.php:

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

prvním parametrem je rukojeť, druhá je šířka obrazu a třetí je výška. Výška i šířka jsou volitelné v případě, že chcete omezit pouze jednu dimenzi.

v rejstříku.php:

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

Enqueueing styly a skripty

dříve jsme uvedli, že je lepší, aby enqueue styly a skripty spíše než hardcoding je přímo do souborů šablon. To proto, že enqueuing umožňuje mnohem větší flexibilitu.

při správném provedení enqueuing také řekne WordPress, které zdroje jsou načteny. Když WordPress ví, které zdroje jsou potřebné, může se ujistit, že stejný zdroj není načten více než jednou. To je zvláště důležité, když máte velmi populární knihovnu, jako je jQuery nebo FontAwesome, která bude využívat více témat a pluginů.

další výhodou enqueuing je, že zdroj, který je enqueued může být dequeued pomocí pluginu, vyhnout se nutnosti upravovat soubory šablon.

i když naše téma má styl.css soubor to ještě nepoužívá, pojďme to teď zjistit:

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() je pomocná funkce, která načte URI šablony stylů aktuálního tématu. Kdybychom byli enqueueing jakýkoli jiný soubor bychom museli udělat místo toho:

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

naše téma nemá žádné skripty, pokud ano, tak bychom je takto dotazovali:

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

výjimkou z výše uvedeného jsou skripty, které byly předběžně zaregistrovány WordPress, v těchto případech stačí zadat první parametr ($handle):

wp_enqueue_script( 'jquery' );

přidání stylu pomocí CSS

naše téma má silné základy, ale postrádá jakýkoli design a přidává do stylu některé základní CSS.css bude mít obrovský rozdíl. Přidali jsme kolem ~100 řádků CSS do našeho ukázkového tématu jako demonstraci a výsledek vypadá takto:

Title Tag

všechna témata by měla využívat vestavěnou funkci WordPress pro generování názvu značky, která je povolena přidáním tohoto kódu do vašich funkcí.php soubor: add_theme_support( 'title-tag' ); to je vše, co je k tomu, WordPress zvládne výstup stránky <název> a v případě potřeby pluginy mohou upravit výstup pomocí filtrů. SEO pluginy to často dělají ve snaze dále optimalizovat tituly.

Krok # 3: Přidat části šablony

právě teď je 80% našeho kódu šablony v indexu.Linux.

i když to funguje, bude to mít za následek mnoho opakování kódu, když máme jiné soubory šablon, jako je singular.php, vyhledávání.php, a archiv.Linux. Části šablon usnadňují vývoj motivů tím, že nám umožňují znovu použít kód napříč šablonami. Protože naše záhlaví a zápatí budou na každé stránce stejné, jsou perfektním kandidátem pro použití částí šablon. Nejprve vytvořte záhlaví.php a přesunout následující kód z indexu.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 – >

v indexu.php nahraďte výše uvedený kód:

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

Poznámka: při získávání část šablony, musíte vynechat .php z rukojeti části šablony.

dále vytvořte část šablony zápatí přesunutím tohoto kódu do zápatí.php a opakování výše uvedeného procesu:

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

nakonec přesuneme kód „bez výsledků“ také do části šablony, protože je pravděpodobné, že bude použit ve více šablonách. Vytvořit obsah-Žádný.php a přesuňte tento kód do nového souboru.

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

váš index by nyní měl vypadat takto:

<?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' );

zatímco výše uvedené bude fungovat perfektně, můžeme dosáhnout mírného zlepšení. WordPress má pomocné funkce pro zahrnutí částí šablony záhlaví, zápatí a postranního panelu. Protože je to nejlepší praxe používat základní funkce, pokud je to možné, měli bychom je místo toho použít.

nahraďte get_template_part( 'header' ); get_header(); a get_template_part( 'footer' ); get_footer();

Krok # 4: Přidat singulární.php, archiv.php, vyhledávání.php a 404.php

základy, které jsme dokončili s částmi šablon, budou vyplácet dividendy, když do našeho tématu přidáme nové soubory šablon. Níže uvádíme nejběžnější. Abychom vás nepřekvapili příklady kódu, propojili jsme místo toho zdrojový kód na Githubu.

singulární.php

příspěvky a stránky, pokud jsou zobrazeny na vlastních adresách URL, jsou považovány za „singulární“, protože rozvržení bude většinou stejné pro oba tyto typy stránek. Ale v případě, že to není, můžete použít konkrétnější stránku.php a single.místo toho php (post).

příklad kódu-singulární.php

archiv.php

archivní šablony se obvykle liší od singulárních šablon dvěma způsoby: zobrazují výňatky spíše než celý obsah a obsahují záhlaví archivu vysvětlující obsah.

podívejte se zpět do hierarchie šablon a uvidíte, že šablona archivu pokrývá všechny typy archivů (autor, kategorie, značka, taxonomie, Datum), pokud to pro váš případ použití nefunguje, můžete stále používat konkrétnější šablony:

1. 1. • autor.php
      • Kategorie.php
      • tag.php
      • taxonomie.php
      • Datum.php

příklad kódu-archiv.php

vyhledávání.php

WordPress webové stránky lze vyhledávat pomocí ?s = URL parametr, například yourwebsite.com?s=test. Vyhledávání.php šablona výstupy výsledky těchto vyhledávání.

příklad vyhledávání kódu.php

404.php

příkaz else jsme přidali do indexu.php zachytí chyby“ stránka nebyla nalezena“, ale možná budete chtít tuto funkci oddělit do vlastního souboru šablony, abyste měli větší kontrolu nad výstupem. To je případ 404.soubor šablony php.

Příklad Kód-404.php

Krok #5: pomocné soubory

pokud distribuujete své téma veřejnosti, jsou nezbytné následující soubory. Bez nich bude vaše téma odmítnuto z úložišť témat a tržišť.

screenshot.png

Snímek obrazovky se zobrazí v seznamu témat wp-admin, když uživatel vybírá nové téma. Zde je několik osvědčených postupů, které byste měli dodržovat:

1. 1. • screenshoty by měly být 1200px x 900px
      • screenshoty by měly být v.png nebo .jpg formát
      • snímky obrazovky by měly být přesné znázornění motivu
      • snímky obrazovky by měly být optimalizovány (použití tinypng.com nebo podobné)

čti mě.txt

WordPress nepoužívá žádné informace z readme.txt, vytáhne vše, co potřebuje, ze stylu.element. Na druhou stranu adresář motivů WordPress vytáhne důležité informace ze souboru readme a považuje jej za požadovaný soubor.

většina vývojářů používá readme.txt jako centrální umístění pro uložení všech informací o jejich tématu. Jednoduché čtení.txt vypadá takto:

=== 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. • vyžaduje alespoň-toto je minimální verze WordPress, se kterou je vaše téma kompatibilní.
      • Testováno až – Toto pole označuje nejnovější verzi WordPress, se kterou bylo vaše téma testováno.
      • vyžaduje PHP-toto pole označuje minimální verzi PHP, na které bude vaše téma fungovat.
      • Popis-Toto pole popisu se momentálně nikde nezobrazuje.
      • Changelog-changelog se nikde nepoužívá, ale vývojáři a někteří uživatelé budou odkazovat na tento soubor, aby zjistili, jaké změny byly provedeny.
      • zdroje-většina zdrojů třetích stran vyžaduje nějaké přiřazení. Sekce zdrojů je široce přijímaným místem, kde je lze umístit. I pro zdroje, které výslovně nevyžadují přiřazení, je stále dobrým zvykem uvést je zde, aby si uživatelé byli vědomi licencí zdrojů, které používají.

Krok č. 6: Vytvořit šablony stránek

šablony stránek umožňují vývojářům vytvářet vlastní šablony, které lze použít pro jednotlivé příspěvky a stránky. Například většina motivů má rozložení ve dvou sloupcích (obsah-postranní panel), ale na některých stránkách se uživatel může chtít soustředit pouze na obsah a nezobrazovat postranní panel. To je místo, kde šablona stránky může pomoci.

jak se vytvářejí „šablony stránek“?

v naší složce motivu vytvořte novou složku s názvem „šablony stránek“ a v této složce vytvořte soubor s názvem single-column.Linux. Chcete-li věci urychlit, zkopírujte celý kód z singular.php to page-templates / single-column.php a odeberte volání get_sidebar (), protože tato šablona to nebude potřebovat.

nyní musíme přidat speciální záhlaví, které říká WordPress toto je šablona stránky, vypadá to takto:

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

kód je samovysvětlující, jednoduše říkáme WordPress název šablony a jaké typy příspěvků lze použít.

to je vše, co k tomu je, naše nová šablona stránky je nyní k dispozici v editoru pod „atributy stránky“.

Krok #7: Udělej si svůj motiv kompatibilní s RTL.css

ne všechny jazyky číst zleva doprava. Například arabština a hebrejština se čtou zprava doleva (RTL). Existuje jednoduchý způsob, jak vytvořit motiv kompatibilní s jazyky RTL.

vytvořte nový soubor ve složce motivů s názvem rtl.css, poté zkopírujte a vložte následující kód:

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

pokud je jazyk RTL aktivním jazykem na webu WordPress, WordPress ví, že tento soubor CSS načte automaticky.

Jedná se o velmi základní implementaci funkcí RTL, abyste mohli začít. Máte-li zájem dozvědět se více zde jsou dva fantastické zdroje:

zprava doleva jazyková podpora dokumentace

dvacet dvacet RTL kód

Krok #8: Vždy dodržujte osvědčené postupy

osvědčené postupy se v průběhu času vyvíjely, aby se usnadnilo vytváření a udržování témat WordPress. Nejen, že dodržování těchto zásad vám pomůže, ale také usnadní ostatním vývojářům, když potřebují pracovat s vaším kódem.

1) Použijte startovací témata

startovací témata poskytují pevný základ pro sestavení motivu. Obvykle jsou lehké, obsahují málo až žádný styl a žádné možnosti konfigurace. Postupem času si můžete vytvořit vlastní startovací téma, na kterém můžete založit všechny své projekty, ale prozatím zde jsou některé oblíbené možnosti:

1. 1. • podtržítka
      • lešení
      • HTML5 Blank

2) Seznamte se s kódovacími standardy WordPress

kódovací standardy jsou způsob, jak formátovat kód konzistentním způsobem v celé kódové základně. WordPress má kódovací standardy pro HTML, CSS, Javascript a PHP. Při použití standardu kódování nemá žádný vliv na zážitek koncového uživatele, dělá váš kód mnohem čitelnějším. I když nepoužíváte standardy kódování WordPress, vždy doporučujeme použít standard.

1. 1. • WordPress.org kódovací standardy
      • WPCS
      • PHP kódovací standardy

3) Použijte lokalizaci

díky tvrdé práci dobrovolníků je WordPress k dispozici ve stovkách jazyků. Pokud bude vaše téma zveřejněno veřejně, musí být postaveno tak, aby bylo možné jej také přeložit.

nebojte se, je to super snadné. Vše, co musíme udělat, je ujistit se, že všechny řetězce procházejí „lokalizační funkcí“, nikoli přímo.

místo toho:

<?php echo 'Previous Post'; ?>

děláme to místo toho:

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

__() je lokalizační funkce, která přijímá řetězec a textovou doménu. Funkce vrátí překlad poskytnutého řetězce nebo původní řetězec, pokud překlad není k dispozici.

4) Vyhněte se funkčnosti pluginu

když uživatel změní motiv, měla by se změnit pouze prezentační vrstva. Obsah a funkčnost by měly zůstat většinou stejné. To znamená, že jakákoli funkce, která ovlivňuje, jak by měly být role WordPress obsaženy v pluginu, nikoli ve vašem tématu. Některé příklady funkcí pluginu zahrnují:

1. 1. • vlastní typy příspěvků
      • stavitelé stránek
      • sdílení sociálních médií
      • optimalizace pro vyhledávače (SEO)

i když se může zdát vhodné (a možná prodejní místo) zahrnout SEO ovládací prvky do tématu, ve skutečnosti to uživatele dlouhodobě bolí. V budoucnu budou muset změnit své téma, ale nemohou, protože všechny jejich konfigurace SEO jsou pevně spojeny s aktuálním tématem. Na rozdíl od toho, pokud byly konfigurace uloženy v pluginu, mohly by změnit téma bez obav.

5) předpona (předcházet konfliktům)

Chcete-li zabránit konfliktům, všechny funkce, třídy a globální proměnné vytvořené motivem by měly být předpony. To je důležité, protože není možné vědět, jaký jiný kód běží na webu vašeho uživatele. Předpona zabraňuje střetům jmen a fatálním chybám.

název motivu oddělený pomlčkami nebo podtržítky bude po většinu času fungovat jako předpona. Pokud je název motivu velmi dlouhý, mohou místo toho fungovat Iniciály.

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) použijte základní funkce

tam, kde existuje, měli byste vždy používat základní funkce na rozdíl od znovuobjevení kola. To zahrnuje mimo jiné postranní panely, navigační nabídky, miniatury příspěvků, vlastní záhlaví a vlastní pozadí. Tyto funkce byly testovány miliony uživatelů a jsou aktivně udržovány a vylepšovány.

pokud potřebujete změnit funkčnost nebo výstup základní funkce, je možné použít jeden z mnoha háčků a filtrů, které WordPress nabízí. Například wp_nav_menu() má parametr „walker“, takže můžete mít úplnou kontrolu nad výstupem.

7) únik a dezinfekce dat

jako vývojář motivů musíte být obeznámeni s únikem a dezinfekcí dat, abyste chránili své uživatele před potenciálními exploity.

Escaping

Escaping je proces kontroly dat je Bezpečný před výstupem a dezinfekce kontroluje data před uložením do databáze.

WordPress má pomocné funkce, které můžete použít k úniku dat, takže je nemusíte vytvářet sami. esc_html je jedním z příkladů escapující funkce. Takto vypadá nevyřízený výstup:

echo get_theme_mod( 'error_page_title' );

abychom unikli výstupu, děláme to:

echo esc_html( get_theme_mod( 'error_page_title' ) );

některé další únikové funkce, které byste měli znát, jsou esc_attr (), absint (), esc_url ().

je také možné přeložit a uniknout řetězec pomocí jediné funkce:

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

stává se:

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

Tip: kdekoli ve vašem tématu, kde máte echo $, měli byste zkontrolovat, zda je třeba uniknout, obvykle to dělá.

dezinfekce

pokud do motivu přidáte nastavení, musíte se ujistit, že data, která uživatelé zadávají do těchto nastavení, jsou bezpečná před vstupem do databáze. WordPress má řadu funkcí, které pomáhají s dezinfekcí vstupu.

při přidávání nastavení do motivu pomocí rozhraní Customizer API má parametr nazvaný „sanitize_callback“, který přijímá název dezinfekční funkce. Jakýkoli vstup, který nastavení vyžaduje, je zkontrolován funkcí, kterou poskytnete „sanitize_callback“ před vstupem do databáze.

zdůrazňuje důležitost dezinfekce, že pokud i jedno z vašich nastavení chybí sanitize_callback, nebude přijato do adresáře motivů WordPress.

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

oficiální seznam funkcí dezinfekce a úniku lze vidět zde: dezinfekce/únik dat

Krok # 9: distribuujte své téma WordPress

témata mohou být distribuována různými kanály v závislosti na výsledku, kterého chcete dosáhnout. Pokud je vaším výsledkem jednoduše přispět do komunity s otevřeným zdrojovým kódem, neexistuje lepší způsob, jak to udělat, než nahrát motiv do adresáře WordPress. Pokud místo toho hledáte prodat své téma a vydělat peníze přímo, existují způsoby, jak to udělat taky.

zde jsou přední webové stránky pro distribuci témat:

1) WordPress.org (nejlepší místo pro stahování a uživatele)

hlavní výhodou hostování vašeho tématu na WordPress je to, že získáte zvýšení viditelnosti z vašeho tématu, které je vidět nejen na wordpress.org webové stránky, ale také v řídicím panelu wp-admin.

další výhodou hostování vašeho tématu pomocí WordPress je vestavěný aktualizační systém. Pokud aktualizujete své téma, budou všichni uživatelé upozorněni uvnitř svých řídicích panelů wp-admin a budou mít snadnou cestu k aktualizaci na nejnovější verzi.

WordPress.org přijímá pouze témata zdarma, ale to neznamená, že nemůžete vydělat peníze. Téma zdarma může být skvělým kanálem pro propagaci prémiového tématu, pluginu nebo služby.

2) WordPress.com

WordPress.com hostuje bezplatná I prémiová témata. Už několik let však nejsou otevřeny novým autorským příspěvkům.

3) ThemeForest

ThemeForest je předním trhem prémiových témat. Nejprodávanější téma (Avada) má tržby přesahující 5 000 000 USD.

obecně řečeno kupující na téma Forest očekávají plnohodnotná“ víceúčelová “ témata. Všechna hlavní témata mají funkci tvůrce stránek a jsou podporována týmy vývojářů. Pro nové autory je velmi těžké proniknout na trh.

4) Creative Market a Mojo Marketplace

Creative Marketplace jsou malí hráči na trhu prémiových témat, a proto jsme je seskupili dohromady. Oba efektivně nabízejí stejnou službu jako ThemeForest, ale v menším měřítku.

5) Github

Github je nejjednodušší způsob, jak zveřejnit své bezplatné téma. Neexistuje žádný proces kontroly a žádné pokyny, které je třeba dodržovat. Z viditelnosti však nebudete mít prospěch wordpress.org a bude muset vytvořit svůj vlastní aktualizační mechanismus pro uživatele získat nejnovější verze.

Krok # 10: Test a zlepšení kódu

1) testování motivu

test jednotky motivu

test jednotky motivu je standardní Soubor pro import obsahu WordPress, který obsahuje širokou škálu typů obsahu a okrajových případů. Je snadné nahrát do vývojového prostředí a zvýrazní mnoho scénářů, které jste možná přehlédli.

WP_DEBUG

jako vývojář motivů je testování motivu pomocí WP_DEBUG povoleno minimum, které byste měli dělat. Váš motiv by měl vrátit žádné chyby nebo varování, když WP_DEBUG je nastavena na hodnotu true.

je také důležité opakovat test s různými verzemi PHP, které vaše téma podporuje. S každou hlavní verzí PHP, existují nové změny, varování, a odpisy. Není neobvyklé, že téma bude bezchybné na PHP5. 6, ale zobrazí chyby na PHP7.

Chcete-li povolit WP_DEBUG, přidejte do wp-config následující kód.php:

DEFINE( 'WP_DEBUG', true );

Monster Widget

Monster Widget je užitečný plugin, který vám umožní přidat 13 základních widgetů do postranního panelu najednou. Základní widgety používají různé prvky HTML, díky nimž jsou ideální pro testování vašeho motivu.

téma Sniffer

téma Sniffer je plugin vytvořený Theme Review Team (TRT). Zachycuje mnoho (ale ne všechny) únikových a lokalizačních chyb. Kontroluje také vaše téma proti standardům kódování WordPress.

2) odeslání motivu na WordPress.org

na začátku této příručky jsme řekli, že v době, kdy dosáhnete konce, budete mít téma, kterému byste se mohli podrobit wordpress.org, podívejme se na tento proces.

proces nahrávání

proces nahrávání je jednoduchý. Vytvořte nebo se přihlaste ke svému účtu WordPress a poté přejděte na tuto stránku– https://wordpress.org/themes/upload/

dalo by se zip téma a nahrát ji právě teď, ale zde jsou některé věci, které byste mohli chtít vědět jako první.

požadavky

tým pro kontrolu témat (TRT) má přísný soubor požadavků. Vaše téma nebude přijato do adresáře, dokud nesplní všechny požadavky.

proces kontroly

když nahrajete motiv, existuje dvoufázový proces kontroly, který musí projít, než bude přijat do adresáře.

nejprve se provede automatická kontrola, jakmile stisknete tlačítko Nahrát. V zákulisí funguje automatizovaná kontrola velmi podobným způsobem jako plugin theme Sniffer. Pokud zjistí nějaké chyby, odmítne téma a proces nahrávání zde končí.

pokud vaše téma projde automatickou kontrolou, připojí se k frontě témat čekajících na lidskou recenzi. Lidský přehled je doplněn dobrovolníky z TRT. Počet témat ve frontě daleko převyšuje počet recenzentů, což znamená, že může často trvat 2-3 měsíce, než se vaše téma dostane na přední stranu fronty.

je nezbytné, aby vaše téma bylo bezchybné a splňovalo všechny požadavky v době, kdy dosáhne fáze kontroly člověka, jako by mělo více než 3 významné chyby, které lze odmítnout. Pokud je téma odmítnuto ve fázi human review, musí se vrátit do fronty vzadu, což znamená čekat 2-3 měsíce znovu na další lidskou recenzi.

Užitečný Zdroj: Nejčastější chyby ve vývoji témat WordPress (a jak je opravit)

stojí za zmínku, že TRT vždy hledá nové recenzenty, dobrovolnictví může být skvělým zážitkem z učení a způsobem, jak přispět k open-source komunitě.

3) Váš seznam motivů

Gratulujeme, vaše téma bylo schváleno! Nyní máte svůj vlastní seznam, který vypadá takto.

zde je přehled toho, co můžete očekávat na této stránce:

1. 1. • Screenshot-Snímek obrazovky je první věc, kterou potenciální uživatelé vidí, aby byl co nejpřitažlivější. Nezapomeňte však, že to musí být stále přesné znázornění tématu a ne vykreslení Photoshopu. Inspirujte se nejoblíbenějšími tématy.
      • Popis-popis, který je vytažen ze stylu.css je ideálním místem pro popis vašeho tématu a jeho klíčových funkcí. Pomáhá také seznam doporučených nebo požadovaných pluginů zde. Popis nepodporuje žádné formátování (tučné, kurzíva, hypertextové odkazy) nebo dokonce konce řádků.
      • tagy-toto je reprezentace značek, které jste uvedli ve velkém stylu.element. Přijímány jsou pouze tyto značky.
      • tlačítko náhledu-náhled je generován wordpress.org a jako vývojáři témat nemáme žádnou kontrolu nad výstupem. Bohužel, protože prohlížeč používá základní obsah a žádnou konfiguraci, často vede k méně než dokonalému náhledu.
      • odkaz na domovskou stránku motivu – URL pro tlačítko náhledu je vytaženo z pole „Téma URI“ ve vašem stylu.element. Existují přísné požadavky, že tato adresa URL musí být použita pouze k zobrazení stránky zobrazující informace o vašem motivu.
      • aktivní instalace-To je počet webových stránek aktivně využívajících téma. Číslo je zaokrouhleno na nejbližší deset, sto nebo tisíc. Není možné získat přesné číslo.
      • stahování za den-to je to, kolikrát bylo vaše téma staženo. „Stahování“ může být nové stahování nebo aktualizace motivu.
      • recenze-aby uživatel mohl zanechat recenzi, musí být přihlášen do wordpress.org účet. Obecně řečeno, recenze je těžké získat, pokud výslovně nepožádáte uživatele o jejich odeslání.
      • podpora-vestavěná platforma podpory je skvělá pro správu a řešení problémů s vaším tématem. Uživatel musí být přihlášen k vytvoření podprocesu podpory.
      • překlady-překladová platforma je fantastický zdroj. Pokud jste v této příručce postupovali podle pokynů k lokalizaci motivu, budou jej uživatelé moci přeložit do jiných jazyků a rozšířit svou potenciální uživatelskou základnu nad rámec pouze anglicky mluvících uživatelů.

4) Aktualizace motivu

když v budoucnu provedete změny motivu a potřebujete aktualizovat verzi hostovanou na WordPress, proces je jednoduchý.

nejprve aktualizujte pole “ verze:“ a seznam změn v readme.txt. Poté soubor zipujte a znovu jej nahrajte pomocí stejné stránky pro nahrávání jako dříve.

systém ji rozpozná jako aktualizaci a automaticky ji schválí, takže nevyžaduje další lidskou kontrolu.