WordPress Custom Theme Tutorial

WordPress Custom Theme Tutorial

oppiminen luoda mukautettuja WordPress teemoja avaa kokonaan uuden maailman voit tutkia. Sen avulla voit rakentaa mukautettuja malleja itsellesi, asiakkaillesi ja jopa osallistua takaisin avoimen lähdekoodin yhteisöön.

tässä oppaassa viemme sinut nollasta täysin toimivaksi teemaksi, joka voidaan toimittaa WordPress.org teemahakemisto.

seurataksesi mukana tarvitset peruskäsityksen HTML: stä, CSS: stä, PHP: stä ja siitä, miten WordPress toimii.

kaikki tässä oppaassa käytetyt koodit ovat käytettävissä viitteenä tässä Github-arkistossa.

Vaihe #1: luoda olennaisia tiedostoja mukautetun teema

toimiva WordPress teema voi koostua vain kaksi tiedostoa: tyyli.css ja index.php. Tämä on mahdollista, koska WordPress mallin hierarkia.

kun WordPress lähettää verkkosivun, se etsii tarkimman käytettävissä olevan mallin, jos mallia ei ole olemassa, se siirtyy hierarkiassa alaspäin, kunnes löytää sellaisen, joka tekee. Tässä käytännön esimerkki:

käyttäjä on https://example.com/practical-example, joka on sivu. WordPress yrittää paikantaa mallin tässä järjestyksessä:

1. 1. • sivu – {etana}.php-sivu etana on / practical-esimerkki, WordPress näyttää käyttää-teema / page-practical-esimerkki.php
      • page – {id}.php-sivun tunnus on 42, WordPress näyttää käyttää-teema / sivu-42.php.
      • sivu.php-WordPress yrittää yleiskäyttöinen your-teema / sivu.php malli.
      • yksikkö.php-yksikössä malli voi tehdä viestejä ja sivuja, joten se on kokeillut jälkeen tarkempi sivu.php
      • index.php-lopuksi sinun-teema / Hakemisto.php: tä käytetään, jos muuta mallia ei löydy.

aloitetaan rakentamalla teema vain olennaiset tiedostot ja sitten voimme kerros enemmän ominaisuuksia kuin tutkimme, miten ne toimivat.

/wp-content/themes/ luo kansio nimeltä my-custom-theme ja luo nämä kaksi seuraavaa tiedostoa:

style.css

jotta WordPress tunnistaa meidän teema ja tulostaa sen kunnolla ulkonäkö → teemat lista meidän täytyy sijoittaa joitakin WordPress – erityinen koodi yläosassa tyyli.CSS, se näyttää tältä:

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

teknisesti mikään kentistä ei ole pakollinen, mutta jos haluat teemasi näyttävän hyvältä wp-Adminissa, niin ne ovat erittäin kannustavia. Ne ovat myös tarpeen, jos olet jakamassa teema WordPress.

1. 1. • teeman nimi-sinun pitäisi aina toimittaa teeman nimi. Jos et sitten Kansion nimi käytetään, oma-custom-teema esimerkissämme.
      • teema URI – jos sitä käytetään, teeman URI tulisi tarjota linkki sivulle, jossa kävijät voivat tutustua aiheeseen tarkemmin.
      • Author – your name goes here.
      • Author URI-linkin omaan tai yrityksen verkkosivuun voi laittaa tähän.
      • kuvaus-kuvaus näkyy wp-admin teema modaali ja myös WordPress teema listaus.
      • versionumerot auttavat kehittäjiä seuraamaan muutoksia ja kertomaan käyttäjille, käyttävätkö he uusinta versiota. Seuraamme SemVer-numerointijärjestelmää, joka ilmaisee muutosten vakavuuden päivityksessä.
      • lisenssi – miten lisensoit teemasi on sinusta kiinni, mutta jos valitset ei-GPL-yhteensopivan lisenssin, et voi jakaa teemaasi WordPress-palvelussa.
      • lisenssin URI – tämä on yksinkertaisesti linkki yllä lueteltuun lisenssiin.
      • Text Domain – text domainia käytetään käännettäessä teemaa muille kielille. Älä huoli, tutkimme tätä myöhemmin. Nyt, se riittää tietää, että se on hyvä käytäntö teema kansio ja teksti-domain olla teeman nimi erotettu väliviivalla sijaan välilyöntejä.
      • tageja – tageja käytetään vain, jos lataat teemasi WordPress.org teemahakemisto. Ne ovat ”ominaisuussuodattimen” mekanismin perusta.

kopioi ja liitä yllä oleva tyyliin.css ja sinulla on jotain tällaista:

Huom: se näyttää hieman tyhjältä tällä hetkellä, koska meillä ei ole vielä kuvakaappausta. Lisäämme sen myöhemmin.

indeksi.php

index.php on ainoa muu tiukasti vaadittu tiedosto. Sen tehtävänä on tehdä kaikki front-end tuotos meidän teema.

Since index.php tulee olemaan tekee kaikki sivumme (koti, viestit, luokat, arkisto) se tulee tekemään paljon työtä. Aloittaa tarvitsemme pään osio, joka kattaa HTML perusteet.

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

tämä on standard HTML yhtä poikkeusta lukuun ottamatta, (<https://developer.wordpress.org/reference/hooks/wp_head/>). wp_head on ydintoiminto, jonka avulla WordPress ja kolmannen osapuolen liitännäiset voivat lisätä koodia otsikkoon muokkaamatta mallitiedostojasi. Tätä kutsutaan toimintakoukuksi.

jos tunnet HTML: n, saatat huomata, ettei ole <otsikkoa> tagia, jolla sivun otsikko tulostetaan. Tämä johtuu siitä, WordPress voi käyttää wp_head koukku dynaamisesti lisätä otsikko.

toinen wp_headin käyttö on tiedustelutyylien (.css) ja skriptejä (.js). On erittäin hyviä syitä tehdä tämä sen sijaan, että koodataan niitä, joita tarkastelemme myöhemmin.

seuraavaksi meillä on sivun runko:

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

body_class() on WordPressin tarjoama helper-toiminto, joka tulostaa luettelon hyödyllisistä CSS-luokista, jotka kuvaavat näytettävää sivua, kuten:

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

body_class (); hyväksyy myös parametrin, jotta voit lisätä omia luokkia, esimerkiksi:

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

seuraavaksi meillä on mallin otsikko.

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

tässä käytämme WordPressin sisäänrakennettuja template-funktioita sivuston otsikon ja kuvauksen tulostamiseen. Olemme myös käyttäneet helper-toimintoa, home_url(), linkittääksemme sivuston otsikon takaisin kotisivulle.

seuraavaksi sivun runko:

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

tämä on, jos se saa mielenkiintoinen (ja hieman monimutkaisempi). Täällä käytämme tärkein ominaisuus WordPress, Silmukka. Silmukka tekee kovan työn selvittääkseen, millä sivulla käyttäjä on ja mitä pitäisi näyttää. Sitten se palauttaa luettelon yhdestä tai useammasta ’virasta’, jonka voimme silmukoida ja tulostaa tietoja käyttäen mallitoimintoja.

jos silmukka ei palauta mitään tuloksia, esimerkiksi 404 sivulla tai poistetussa viestissä, käytämme else-operaattoria näyttämään ennalta määritetyn viestin.

ilman mitään ympäröivää koodia yksinkertaistettu silmukka näyttää tältä:

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

huomautus: koska WordPress on peräisin bloggaaminen, paljon toimintoja käyttää ”post” terminologiaa, vaikka ne voivat palata ja tulostaa tahansa sisältöä (viestit, sivut, custom post tyypit).

lopuksi, meillä on alatunniste, meidän tarvitsee vain sulkea aiemmin avaamamme HTML-tagit. On olemassa toinen toimintokoukku, wp_footer(), jota WordPress ja plugins käyttävät aktiivisesti sisältämään skriptejä alatunnisteessa, jota tarvitaan sivun esittämiseen.

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

jos olet seurannut pitkin tähän mennessä sinulla on täysin toimiva WordPress teema, joka näyttää tältä:

teemamme ei tule voittamaan suunnittelupalkintoja (sillä ei ole CSS: ää) ja siitä puuttuu paljon ominaisuuksia, joita käyttäjät pitävät olennaisina (sivupalkit, navigointi, metatiedot, näytekuvat, sivutus jne. mutta se on loistava alku!

jatketaan ja katsotaan, miten sitä voidaan parantaa.

Vaihe #2: Luo funktioita.php

funktiot.php ei ole ehdottomasti pakollinen tiedosto, mutta se tarjoaa niin monia etuja, että 99.99% teemoista on se. Funktioissa.php voit hyödyntää WordPress ’ sisäänrakennettu teema toiminnallisuutta ja myös lisätä oman mukautetun PHP-koodi.

luo funktio.php teema kansio nyt me lisäämme koodia sitä seuraavissa kohdissa.

navigointivalikon lisääminen

useimmat, elleivät kaikki verkkosivut, käyttävät navigointivalikkoa, mutta tähän asti teemamme ei tue sellaista. Kertoa WordPress meidän teema on navigointivalikko, meidän on rekisteröitävä se toimintoja.php näin:

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

Huomautus: register_nav_menus () hyväksyy array joten voit rekisteröidä enemmän kuin yhden valikon tarvittaessa.

WordPress tietää nyt meidän valikosta, mutta meidän täytyy vielä tulostaa se meidän teema. Teemme sen lisäämällä seuraavan koodin alla Sivuston kuvaus indeksissä.php:

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

nyt meillä on (unstyled) navigointivalikko:

Adding a Sidebar

our theme doesn ’t have a sidebar (widget area) sekään, Let’ s fix that now.

ensin on rekisteröitävä sivupalkki funktioihin.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' );

luo nyt sivupalkki.php teema kansio ja lisää seuraava koodi:

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

tässä käytämme if-lauseketta tarkistaaksemme, onko sivupalkki ”aktiivinen” ennen koodin tulostamista. Aktiivinen sivupalkki on sellainen, johon käyttäjä on lisännyt vähintään yhden widgetin.

viimeinen vaihe on sivupalkin sisällyttäminen indeksiin.php, yllä wp_footer() lisää get_sidebar () – kutsu.

Featured Images

Like sidebars and navigation menu, We can ’ t just output featured images in our theme and expect them to work, we must tell WordPress we support that feature first. Funktioissa.php lisää:

add_theme_support( 'post-thumbnails' );

nyt voimme lisätä the_post_thumbnail(); meidän silmukassamme ja näytekuvat toimivat. Ainoa ongelma on, että ne ulostulo WordPress enimmäiskoko 1920px x 2560px, joka on liian suuri useimpiin käyttötarkoituksiin. Onneksi WordPress on toinen helper toiminto: add_image_size ();

kun käyttäjä lataa kuvan, ja jos kuvan koko on määritelty, WordPress luo version ladatusta kuvasta tämän kokoinen (säilyttäen alkuperäisen). Jos käyttäjän kuva on pienempi kuin mitat olet asettanut WordPress ei tee mitään, koska se ei voi tehdä kuvan isompi kuin alkuperäinen.

jos haluat käyttää optimoitua ominaisuuskuvaa alkuperäisen sijasta, aseta funktioihin seuraava koodi.php:

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

ensimmäinen parametri on kahva, toinen on kuvan leveys ja kolmas on korkeus. Sekä korkeus että leveys ovat valinnaisia, jos haluat rajoittaa vain yhden ulottuvuuden.

indeksissä.php:

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

Tiedustelutyylit ja skriptit

aiemmin totesimme, että on parempi tiedustella tyylejä ja skriptejä kuin koodata ne suoraan mallitiedostoihin. Se johtuu siitä, että tiedustelu mahdollistaa paljon enemmän joustavuutta.

oikein tehtynä enqueuing kertoo myös WordPressille, mitä resursseja Ladataan. Kun WordPress tietää, mitä resursseja tarvitaan, se voi varmistaa, että samaa resurssia ei ladata useammin kuin kerran. Tämä on erityisen tärkeää, kun sinulla on erittäin suosittu kirjasto, kuten jQuery tai FontAwesome, että useita teemoja ja plugins käytetään.

toinen enqueuingin etu on se, että liitännäinen voi dequeued-resurssin, jolloin ei tarvitse muokata mallitiedostoja.

vaikka teemalla on tyylinsä.CSS-tiedosto se ei käytä sitä vielä, katsotaanpa tiedustella, että nyt:

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() on avustajatoiminto, joka hakee nykyisen teeman tyylisivun URI: n. Jos tutkisimme jotain muuta tiedostoa, meidän pitäisi tehdä tämä sen sijaan.:

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

meidän teema ei ole mitään skriptejä, jos se olisi olisimme tiedustella niitä näin:

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

poikkeus edellä on skriptit, jotka on ennakkoon rekisteröity WordPress, näissä tapauksissa sinun tarvitsee vain toimittaa ensimmäinen parametri ($kahva):

wp_enqueue_script( 'jquery' );

tyylin lisääminen CSS: llä

teemallamme on vahvat perusteet, mutta siitä puuttuu design, lisäämällä tyyliin jotain perus-CSS: ää.css tekee valtavan eron. Olemme lisänneet noin ~100 riviä CSS meidän näyte teema esittelynä ja tulos näyttää tältä:

Title Tag

kaikissa teemoissa tulisi käyttää WordPress sisäänrakennettua toiminnallisuutta luomaan title tag, joka on otettu käyttöön lisäämällä tämä koodi toimintoja.php-tiedosto: add_theme_support( 'title-tag' ); that ’ s all there is it, WordPress hoitaa sivun <otsikon> tuotoksen ja tarvittaessa liitännäiset voivat muokata tuotosta suodattimilla. SEO plugins usein tehdä tämän pyrkimyksenä edelleen optimoida otsikot.

Vaihe #3: Lisää mallipohjan osat

juuri nyt 80% mallikoodistamme on indeksissä.php.

vaikka tämä toimii se johtaa paljon koodin toistoa, kun meillä on muita mallitiedostoja, kuten yksikkö.php, etsi.php, ja arkisto.php. Template-osat helpottavat teeman kehittämistä antamalla meille mahdollisuuden käyttää koodia uudelleen mallipohjien välillä. Koska meidän otsikko ja alatunniste on sama jokaisella sivulla ne ovat täydellinen ehdokas käyttää mallin osia. Luo ensin otsikko.php ja siirrä seuraava koodi indeksistä.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 – >

sisällysluettelossa.PHP korvaa yllä olevan koodin:

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

Huomautus :Kun saat mallin osa, sinun täytyy jättää.PHP mallista osan kahva.

luo seuraavaksi alatunnistemallin osa siirtämällä tämä koodi alatunnisteeseen.php ja yllä olevan prosessin toistaminen:

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

lopuksi, siirrämme ’no-results’ koodi malli osa liian, koska se on todennäköisesti käyttää useita malleja. Luo sisältöä-ei mitään.php ja siirrä tämä koodi uuteen tiedostoon.

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

indeksisi pitäisi nyt näyttää tältä:

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

vaikka edellä toimii täydellisesti, on pieni parannus voimme tehdä. WordPress on helper toimintoja myös otsikon, alatunnisteen ja sivupalkin mallin osat. Koska se on paras käytäntö käyttää ydintoimintoja mahdollisuuksien mukaan, meidän pitäisi käyttää niitä sen sijaan.

korvaa get_template_part( 'header' ); get_header(); ja get_template_part( 'footer' ); get_footer();

Vaihe #4: Lisää yksikkö.php, arkisto.php, etsi.php, ja 404.php

pohjatyö, jonka saimme valmiiksi template partsilla, maksaa osinkoa, kun lisäämme uusia template-tiedostoja teemaamme. Alla listasimme yleisimmät. Välttääksemme ylitsepääsemättömyyden koodiesimerkeillä, olemme linkittäneet lähdekoodiin GitHubissa sen sijaan.

yksikkö.php

viestit ja sivut, kun ne näkyvät omissa URL-osoitteissaan, katsotaan ”yksiköiksi”, koska suurimman osan ajasta ulkoasu on sama molemmille sivutyypeille. Mutta siinä tapauksessa, että se ei ole voit käyttää tarkempaa sivua.php ja single.PHP (post) sen sijaan.

esimerkkikoodi-yksikkö.php

archive.php

Arkistopohjat eroavat yksikömalleista yleensä kahdella tavalla: ne näyttävät otteita koko sisällön sijaan ja niissä on arkiston otsake, joka selittää sisällön.

palaa mallipohjahierarkiaan ja näet, että arkistomalli kattaa kaikki arkistot (tekijä, Luokka, tag, taksonomia, päivämäärä) Jos tämä ei toimi käyttöösi-tapauksessa voit silti käyttää tarkempia malleja:

1. 1. • kirjailija.php
      • kategoria.php
      • tag.php
      • taksonomia.php
      • date.php

esimerkki koodi-arkisto.php

haku.php

WordPress-verkkosivuja voi etsiä käyttämällä ?s= URL-parametri, esimerkiksi yourwebsite.com?s=test. Haku.php-malli tuottaa näiden hakujen tulokset.

Esimerkkikoodihaku.php

404.php

the else statement We added in index.php saaliit ”page not found” virheitä, mutta saatat haluta irrottaa että toiminnallisuus omaan mallitiedostoon on enemmän valvoa lähtöä. Se on 404: n käyttötapaus.php mallitiedosto.

Esimerkkikoodi-404.php

Step #5: Oheistiedostot

If you are distributing your theme to the public then the following files are imperative. Ilman näitä, teema saa hylätään teema arkistot ja markkinapaikat.

kuvakaappaus.png

kuvakaappaus näkyy wp-admin teemojen luettelossa, kun käyttäjä on valitsemassa uutta teemaa. Tässä muutamia parhaita käytäntöjä, joita kannattaa noudattaa:

1. 1. • kuvakaappausten tulisi olla 1200px x 900px
      • kuvakaappauksia pitäisi olla.png tai .jpg-formaatti
      • ruutukaappausten tulee olla tarkka esitys teemasta
      • ruutukaappaukset tulisi optimoida (käytä tinypng.com tai vastaava)

readme.txt

WordPress ei käytä readmen tietoja.txt, se vetää kaiken tarvitsemansa tyylistä.css. Toisaalta, WordPress teema hakemisto ei vedä tärkeitä tietoja readme tiedosto ja pitää sitä vaadittu tiedosto.

useimmat kehittäjät käyttävät readmea.txt keskeinen sijainti tallentaa kaikki tiedot niiden teema. Yksinkertainen readme.txt näyttää tältä:

=== 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. • vaatii ainakin – tämä on pienin versio WordPress että teema on yhteensopiva.
      • testattu – tämä kenttä tarkoittaa uusimman version WordPress teema on testattu.
      • vaatii PHP: n – tämä kenttä tarkoittaa sitä PHP: n vähimmäisversiota, jolla teemasi toimii.
      • Kuvaus – Tämä kuvauskenttä ei näy tällä hetkellä missään.
      • Changelog – changelogia ei käytetä missään, mutta kehittäjät ja jotkut käyttäjät viittaavat tähän tiedostoon nähdäkseen, mitä muutoksia on tehty.
      • resurssit-useimmat kolmannen osapuolen resurssit edellyttävät jonkinlaista kohdentamista. Resurssit-osio on laajalti hyväksytty paikka laittaa ne. Jopa resursseille, jotka eivät nimenomaisesti vaadi nimeämistä, on silti hyvä käytäntö luetella ne täällä, jotta käyttäjät ovat tietoisia käyttämiensä resurssien lisensseistä.

Vaihe # 6: Luo sivupohjia

sivupohjien avulla kehittäjät voivat luoda mukautettuja malleja, joita voidaan käyttää yksittäisille julkaisuille ja sivuille. Esimerkiksi useimmissa teemoissa on kahden sarakkeen (content-sidebar) asettelu, mutta joillakin sivuilla käyttäjä saattaa haluta vain keskittyä sisältöön eikä näyttää sivupalkkia. Siinä sivumalli voi auttaa.

miten ”sivupohjia” luodaan?

luo teemakansioomme uusi kansio nimeltä ”page-templates” ja kyseisen kansion sisälle tiedosto nimeltä single-column.php. Nopeuttaa asioita kopioida kaikki koodi yksikössä.php to page-templates / single-column.php ja poista puhelu get_sidebar () koska tämä malli ei tarvitse sitä.

nyt meidän täytyy lisätä erityinen otsikko, joka kertoo WordPress tämä on sivun malli, se näyttää tältä:

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

koodi on itsestään selvä, me yksinkertaisesti kertoa WordPress nimi mallin ja mitä post tyypit sitä voidaan käyttää.

that ’s all there is to it, Uusi sivumalli on nyt saatavilla editorissa kohdassa ’Page Attributes’.

Step #7: Tee teemasi yhteensopivaksi RTL: n kanssa.css

kaikkia kieliä ei lueta vasemmalta oikealle. Esimerkiksi arabiaa ja hepreaa luetaan oikealta vasemmalle (RTL). On yksinkertainen tapa tehdä teema yhteensopiva RTL kielet.

luo teemakansioosi uusi tiedosto nimeltä rtl.CSS, kopioi ja liitä seuraava koodi:

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

jos RTL kieli on aktiivinen kieli WordPress verkkosivuilla, WordPress tietää ladata tämän CSS-tiedoston automaattisesti.

tämä on hyvin yksinkertainen RTL-toiminnallisuuden toteutus, jolla pääset alkuun. Jos olet kiinnostunut oppimaan lisää täällä on kaksi fantastinen resursseja:

Right to Left Language Support Documentation

Twenty Twenty RTL code

Step #8: Always Follow Best Practices

Best practices have evolved by time to make building and maintenance WordPress themes easily. Näiden periaatteiden noudattaminen ei ainoastaan auta sinua, vaan ne helpottavat myös muita kehittäjiä, kun heidän on työskenneltävä koodisi kanssa.

1) Käytä Aloitusteemoja

Aloitusteemat tarjoavat vankan pohjan, jolle voit rakentaa teemasi. Tyypillisesti ne ovat kevyitä, sisältävät vähän tai ei muotoilua eikä kokoonpanovaihtoehtoja. Ajan mittaan saatat rakentaa oman starter teema, johon voit perustaa kaikki projektit, mutta nyt tässä on joitakin suosittuja vaihtoehtoja:

1. 1. • alaviiva
      • teline
      • HTML5 tyhjä

2) Tutustu WordPress-Koodausstandardeihin

koodausstandardit ovat tapa muotoilla koodisi yhdenmukaisesti koko codebase. WordPressissä on koodausstandardit HTML: lle, CSS: lle, JavaScriptille ja PHP: lle. Vaikka koodausstandardin käyttäminen ei vaikuta loppukäyttäjäkokemukseen, se tekee koodistasi paljon luettavamman. Vaikka et käytä WordPress koodausstandardeja, suosittelemme aina standardin käyttöä.

1. 1. • WordPress.org koodausstandardit
      • WPCS
      • PHP koodausstandardit

3) Käytä lokalisointia

vapaaehtoisten kovan työn ansiosta WordPress on saatavilla sadoilla kielillä. Jos teemasi aiotaan julkaista julkisesti, se on rakennettava siten, että se voidaan kääntää myös.

Don ’t worry, it’ s super easy to do. Kaikki mitä meidän tarvitsee tehdä, on varmistaa, että kaikki jouset ovat läpi ”lokalisointi toiminto” sen sijaan, että lähtö suoraan.

tämän sijaan:

<?php echo 'Previous Post'; ?>

teemme tämän sen sijaan:

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

__() on lokalisointifunktio, joka hyväksyy merkkijonon ja teksti-verkkotunnuksen. Funktio palauttaa tarjotun merkkijonon käännöksen tai alkuperäisen merkkijonon, jos käännöstä ei ole saatavilla.

4) Vältä liitännäisen toiminnallisuutta

kun käyttäjä vaihtaa teemaa, vain esitystason tulisi muuttua. Sisällön ja toiminnallisuuden pitäisi pysyä pääosin samana. Mitä tämä tarkoittaa, että jokin toiminto, joka vaikuttaa siihen, miten WordPress roolit olisi sisällyttävä plugin, ei teema. Joitakin esimerkkejä plugin toiminnallisuutta ovat:

1. 1. • Custom Post Types
      • Page Builders
      • sosiaalisen median jakaminen
      • Hakukoneoptimointi (SEO)

vaikka se voi tuntua kätevä (ja mahdollisesti myyntivaltti) sisällyttää SEO valvontaa teema, se todella satuttaa käyttäjää pitkällä aikavälillä. Tulevaisuudessa heidän on muutettava teemaansa, mutta ei voi, koska kaikki heidän SEO-kokoonpanonsa ovat tiukasti kytkettyinä nykyiseen teemaan. Sen sijaan, jos kokoonpanot tallennettiin plugin he voisivat muuttaa teemaa ilman huolta.

5) Prefixing (Prevent Conflicts)

konfliktien estämiseksi kaikki teemasi luomat funktiot, luokat ja globaalit muuttujat tulee prefektoida. Tämä on tärkeää, koska on mahdotonta tietää, mitä muuta koodia on käynnissä käyttäjän verkkosivuilla. Prefixing estää nimien yhteentörmäykset ja kohtalokkaat virheet.

teeman nimi erotettuna viivoilla tai alaviivoilla toimii etuliitteenä suurimman osan ajasta. Jos teeman nimi on hyvin pitkä, nimikirjaimet voivat toimia sen sijaan.

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) Käytä ydintoimintoa

jos se on olemassa, käytä aina ydintoimintoa pyörän uudelleen keksimisen sijaan. Tämä sisältää, mutta ei rajoitu sivupalkit, Navigointivalikot, Post pikkukuvat, mukautettuja otsikoita, ja mukautettuja taustoja. Näitä ominaisuuksia on testattu miljoonilla käyttäjillä, ja niitä ylläpidetään ja parannetaan aktiivisesti.

jos haluat muuttaa ydintoiminnon toiminnallisuutta tai ulostuloa, on mahdollista käyttää yhtä monista koukuista ja suodattimista, joita WordPress tarjoaa. Esimerkiksi wp_nav_menu() : ssä on ”walker” – parametri, joten voit hallita ulostuloa täysin.

7) tietojen pakeneminen ja puhdistaminen

teeman kehittäjänä sinun on tunnettava tietojen pakeneminen ja puhdistaminen suojellaksesi käyttäjiäsi mahdollisilta hyväksikäytöiltä.

pakeneminen

pakeneminen on prosessi, jossa tieto tarkistetaan turvalliseksi ennen sen ulostuloa ja puhdistus on tietojen tarkistamista ennen kuin se tallennetaan tietokantaan.

WordPressissä on helper-toimintoja, joiden avulla voit paeta tietoja, joten sinun ei tarvitse rakentaa niitä itse. esc_html on yksi esimerkki pakofunktiosta. Tältä näyttää kuvaamaton tuotos:

echo get_theme_mod( 'error_page_title' );

paetaksemme ulostuloa teemme näin:

echo esc_html( get_theme_mod( 'error_page_title' ) );

muita pakofunktioita ovat esc_attr(), absint (), esc_url ().

on myös mahdollista kääntää ja paeta merkkijonoa yhdellä funktiolla:

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

Becomes:

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

vinkki: missä tahansa teemassa, jossa on echo $, kannattaa tarkistaa, tarvitseeko sitä karata, se yleensä tekee.

Puhdistus

jos lisäät asetuksia teemaasi, sinun on varmistettava, että käyttäjien näihin asetuksiin syöttämät tiedot ovat turvassa ennen kuin ne tulevat tietokantaan. WordPressissä on useita toimintoja, jotka auttavat puhdistamaan syötteitä.

lisättäessä asetusta teemaan Customizer API: n avulla siinä on parametri ”sanitize_callback”, joka hyväksyy sanitointifunktion nimen. Kaikki syöte, jonka asetus ottaa, tarkistetaan toiminnolla, jonka annat ’sanitize_callbackille’, ennen kuin se tulee tietokantaan.

siinä korostetaan, että jos edes yksi asetuksistasi puuttuu sanitize_callback, sitä ei hyväksytä WordPress theme-hakemistoon.

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

virallinen lista puhdistus-ja pakofunktioista on nähtävissä täällä: Data Sanitation/Escaping

Step #9: jaa WordPress-teemasi

teemoja voidaan jakaa eri kanavia pitkin riippuen siitä, mihin lopputulokseen haluat päästä. Jos tulos on yksinkertaisesti edistää avoimen lähdekoodin yhteisö niin ei ole parempaa tapaa tehdä, että kuin ladata teeman WordPress hakemistoon. Jos sen sijaan, etsit myydä teema ja tehdä rahaa suoraan, on olemassa tapoja tehdä, että liian.

tässä ovat teemajakelun kärkisivustot:

1) WordPress.org (paras paikka saada lataukset ja käyttäjät)

ensisijainen etu hosting teema WordPress on, että saat näkyvyyttä boost teema nähdään paitsi wordpress.org verkkosivuilla, mutta myös wp-admin kojelauta.

toinen etu hosting teema WordPress on sisäänrakennettu päivitysjärjestelmä. Jos päivität teeman kaikille käyttäjille ilmoitetaan sisällä wp-admin kojelaudat ja annetaan helppo polku päivittää uusimpaan versioon.

WordPress.org hyväksyy vain ilmaisia teemoja, mutta se ei tarkoita, ettet voisi tehdä rahaa. Ilmainen teema voi olla hyvä kanava edistää premium teema, plugin tai palvelun.

2) WordPress.com

WordPress.com hosts sekä ilmainen ja premium teemoja. Kuitenkin, ne eivät ole olleet avoimia uusia kirjailija huomautuksia muutaman vuoden ajan.

3) ThemeForest

ThemeForest on johtava premium-teemojen markkinapaikka. Myydyimmän teeman (Avada) myynti on yli 5 000 000 dollaria.

yleisesti ottaen Teemametsän ostajat odottavat täysiä ”monikäyttöisiä” teemoja. Kaikilla kärkiteemoilla on page builder-toiminnallisuus, ja niitä tukevat kehittäjäryhmät. Uusille tekijöille on vaikea murtautua markkinoille.

4) Creative Market ja Mojo Marketplace

Creative Market ja Mojo Marketplace ovat pieniä toimijoita premium-teemamarkkinoilla, minkä vuoksi ryhmitimme ne yhteen. Molemmat tarjoavat käytännössä samaa palvelua kuin ThemeForest, mutta pienemmässä mittakaavassa.

5) Github

Github on helpoin tapa tuoda vapaa teema julki. Ei ole tarkistusprosessia eikä ohjeita noudatettavaksi. Et kuitenkaan hyödy näkyvyydestä wordpress.org ja täytyy rakentaa oma päivitysmekanismi käyttäjille saada uusimmat versiot.

vaihe #10: Test and Improve Code

1) Testing your Theme

Theme Unit Test

the Theme Unit Test on tavallinen WordPress content import-tiedosto, joka sisältää laajan valikoiman sisältötyyppejä ja reunatapauksia. Se on helppo ladata kehitysympäristöön ja tuo esiin paljon skenaarioita, jotka olet saattanut unohtaa.

wp_debug

teeman kehittäjänä teeman testaaminen wp_debug käytössä on vähimmäisvaatimus, joka sinun pitäisi tehdä. Teeman pitäisi palauttaa virheitä tai varoituksia, kun WP_DEBUG on asetettu true.

on myös tärkeää toistaa testi teemasi tukemilla eri PHP-versioilla. Jokaisen suuren PHP julkaisu, on uusia muutoksia, varoitukset, ja poistot. Ei ole harvinaista, että teema on virheetön php5.6: ssa, mutta näytä virheet PHP7: ssä.

jos haluat ottaa WP_DEBUGIN käyttöön, lisää seuraava koodi WP-configiin.php:

DEFINE( 'WP_DEBUG', true );

Monster Widget

Monster Widget on hyödyllinen plugin, jonka avulla voit lisätä 13 ydin widgetit sivupalkissa kerralla. Ydin widgetit käyttää erilaisia HTML-elementtejä, mikä tekee niistä täydellisiä testaamiseen teema.

Theme Sniffer

the Theme Sniffer on Theme Review Teamin (TRT) luoma lisäosa. Se saalistaa paljon (mutta ei kaikkia) karkaamista ja lokalisointivirheitä. Se myös tarkistaa teeman vastaan WordPress koodaus standardeja.

2) teeman lähettäminen WordPress.org

tämän oppaan alussa totesimme, että loppuun mennessä sinulla olisi teema, johon voisit esittää wordpress.org Katsotaanpa sitä prosessia.

Upload Process

the upload process is simple. Luo tai kirjaudu WordPress-tilillesi ja siirry sitten tälle sivulle– https://wordpress.org/themes/upload/

voisit zip teema ja ladata sen juuri nyt, mutta tässä on joitakin asioita haluat ehkä tietää ensin.

vaatimukset

teeman Arviointiryhmällä (TRT) on tiukat vaatimukset. Teemaasi ei hyväksytä hakemistoon ennen kuin se täyttää kaikki vaatimukset.

tarkistusprosessi

kun lataat teeman, on kaksivaiheinen tarkistusprosessi, jonka on läpäistävä ennen kuin se voidaan hyväksyä hakemistoon.

ensin suoritetaan automaattinen tarkistus heti, kun painat Uploadia. Kulissien takana, Automaattinen tarkistin toimii hyvin samalla tavalla kuin teema Sniffer plugin. Jos se löytää virheitä, se hylkää teeman ja latausprosessi päättyy siihen.

jos teemasi läpäisee automaattisen tarkistuksen, se liittyy jonoon teemoja, jotka odottavat ihmisarviota. Ihmisarvioinnin suorittavat TRT: n vapaaehtoiset. Teemojen määrä jonossa ylittää huomattavasti arvostelijoiden määrän, mikä tarkoittaa, että teemasi pääseminen jonon kärkeen voi usein kestää 2-3 kuukautta.

on välttämätöntä, että teemasi on virheetön ja täyttää kaikki vaatimukset, kun se saavuttaa ihmisen arviointivaiheen ikään kuin siinä olisi enemmän kuin 3 merkittävää virhettä, jotka se voidaan hylätä. Jos teema hylätään ihmisarviovaiheessa, sen on liityttävä takaisin jonoon, mikä tarkoittaa 2-3 kuukauden odottamista uudelleen toista ihmisarviota varten.

Hyödyllinen Resurssi: Yleisin WordPress teema kehityksen virheitä (ja miten korjata ne)

on syytä huomata, että TRT etsii aina uusia arvostelijoita, vapaaehtoistyö voi olla suuri oppimiskokemus ja tapa edistää avoimen lähdekoodin yhteisö.

3) Aihelistauksesi

Onneksi olkoon, teemasi on hyväksytty! Sinulla on nyt oma listasi, joka näyttää tältä.

tässä yleiskatsaus siitä, mitä voit odottaa näkeväsi tällä sivulla:

1. 1. • kuvakaappaus-kuvakaappaus on ensimmäinen asia, jonka potentiaaliset käyttäjät näkevät, joten tee siitä mahdollisimman houkutteleva. Mutta muista, että sen on silti oltava tarkka esitys teeman eikä photoshop renderöidä. Ota inspiraatiota suosituimmista teemoista.
      • kuvaus-tyylistä vedetty kuvaus.css on ihanteellinen paikka kuvata teema ja se on keskeisiä ominaisuuksia. Se auttaa myös luetella suositeltuja tai vaadittuja plugins täällä. Kuvaus ei tue mitään muotoilua (lihavoitu, kursivoitu, Hyperlinkit) tai edes rivikatkoksia.
      • tagit-tämä on edustus tyyliin listaamistasi tägeistä.css. Vain nämä tägit hyväksytään.
      • Esikatselunappi – esikatselun luo wordpress.org ja teeman kehittäjinä meillä ei ole kontrollia ulostuloon. Valitettavasti, koska esikatselija käyttää perussisältöä eikä asetuksia, se johtaa usein vähemmän kuin täydelliseen esikatseluun.
      • teema Homepage Link-Esikatselunapin URL-osoite on vedetty ”teema URI” – kentästä omalla tyylilläsi.css. On olemassa tiukat vaatimukset, että tätä URL-osoitetta saa käyttää vain sivun näyttämiseen, joka näyttää tietoja teemastasi.
      • Active Installations – tämä on teemaa aktiivisesti käyttävien verkkosivustojen lukumäärä. Luku pyöristetään lähimpään kymmeneen, sataan tai tuhanteen. Tarkkaa lukua ei ole mahdollista saada selville.
      • Latauksia päivässä – näin monta kertaa teemasi on ladattu ’Lataa’ voi olla Uusi lataus tai teema päivitys.
      • arvostelut-jotta käyttäjä voi jättää arvostelun, hänen on kirjauduttava sisään wordpress.org tili. Yleisesti ottaen arvosteluja on vaikea saada, ellet nimenomaisesti pyydä käyttäjiäsi lähettämään niitä.
      • tuki-sisäänrakennettu tukialusta sopii erinomaisesti teeman ongelmien hallintaan ja ratkaisemiseen. Käyttäjän on oltava kirjautunut sisään luodakseen tukilangan.
      • käännökset-käännösalusta on loistava voimavara. Jos olet noudattanut neuvoja koko tämän oppaan lokalisointi teema sitten käyttäjät voivat kääntää sen muille kielille ja laajentaa potentiaalinen käyttäjäkunta kuin vain Englanti puhuvat käyttäjät.

4) päivittäminen teema

kun teet muutoksia teema tulevaisuudessa ja täytyy päivittää versio isännöi WordPress prosessi on yksinkertainen.

Päivitä ensin ”Version:” – kenttä ja muutosloki readmessa.txt. Sitten zip tiedosto ja uudelleen ladata sen käyttämällä samaa lataa sivu kuin ennen.

järjestelmä tunnistaa sen päivitykseksi ja hyväksyy sen automaattisesti niin, ettei se vaadi toista ihmisarvostelua.