WordPress Tilpasset Tema Tutorial

WordPress Tilpasset Tema Tutorial

Lære å lage tilpassede WordPress temaer åpner opp en helt ny verden for deg å utforske. Den lar deg bygge tilpassede design for deg selv, dine kunder og selv bidra tilbake til åpen kildekode-fellesskapet.

i denne veiledningen skal vi ta deg fra null til å ha et fullt funksjonelt tema som kan sendes til WordPress.org theme directory.

for å følge med trenger du en grunnleggende forståelse AV HTML, CSS, PHP og Hvordan WordPress fungerer.

all koden som brukes i denne veiledningen vil være tilgjengelig for referanse i Dette Github-depotet.

Trinn # 1: Opprette Viktige Filer For Ditt Egendefinerte Tema

et Fungerende WordPress-tema kan bestå av bare to filer: stil. css og indeks.php. Dette er mulig på Grunn Av WordPress malhierarki.

Når WordPress sender ut en nettside, søker Den etter den mest spesifikke malen som er tilgjengelig, hvis en mal ikke eksisterer, vil den bevege seg ned i hierarkiet til den finner en som gjør det. Her er et praktisk eksempel:

brukeren er på https://example.com/practical-example, som er en side. WordPress vil prøve å finne en mal i denne rekkefølgen:

1. 1. • side – {slug}.php-siden slug er / praktisk-eksempel, WordPress vil se for å bruke ditt-tema / side-praktisk-eksempel.php
      • side-{id}.php-siden ID er 42, WordPress vil se for å bruke-tema / side-42.php.
      • side.php-WordPress vil prøve det generelle formålet ditt-tema / side.php template.
      • entall.php-singular mal kan gjengi Innlegg og Sider, så det er prøvd etter den mer spesifikke siden.php
      • indeks.php-Til Slutt din-tema / indeks.php brukes hvis ingen annen mal er funnet.

La oss starte med å bygge et tema med bare de essensielle filene, og så kan vi lagre flere funksjoner når vi undersøker hvordan de fungerer.

i /wp-content/themes/ oppretter du en mappe med navnet my-custom-theme og oppretter disse to følgende filene:

stil.css

For WordPress å gjenkjenne temaet vårt og skrive det riktig ut i Listen Over Utseendemessige Temaer, må vi plassere Noen WordPress-spesifikk kode øverst i stilen.css, det ser slik ut:

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

Teknisk er Ingen av feltene påkrevd, Men hvis du vil at temaet ditt skal se bra ut i wp-admin, blir de sterkt oppmuntret. De er også påkrevd hvis du distribuerer temaet ditt På WordPress.

1. 1. • Theme Name – du bør alltid oppgi et tema navn. Hvis du ikke gjør det, vil mappenavnet bli brukt, my-custom-theme i vårt eksempel.
      • Theme URI – hvis brukt, temaet URI bør gi en link til en side der besøkende kan lære mer om temaet.
      • Forfatter-ditt navn går her.
      • Forfatter URI – en link til din personlige eller forretningsmessige nettside kan plasseres her.
      • Beskrivelse-beskrivelsen er vist på wp-admin tema modal og også På WordPress tema oppføring.
      • Versjonsnumre hjelper utviklere med å holde oversikt over endringer og gi brukerne beskjed hvis de bruker den nyeste versjonen. Vi følger SemVer nummereringssystemet for å angi alvorlighetsgraden av endringer i en oppdatering.
      • Lisens – hvordan du lisensierer temaet ditt er opp til deg, men hvis du velger en ikke-GPL-kompatibel lisens, vil du ikke kunne distribuere temaet ditt På WordPress.
      • Lisensuri – Dette er bare en lenke til lisensen som er oppført ovenfor.
      • Tekstdomene-tekstdomenet brukes når du oversetter temaet til andre språk. Ikke bekymre deg, vi vil utforske dette i dybden senere. For nå er det nok å vite at det er en god praksis for temamappen og tekstdomenet å være temanavnet skilt av bindestreker i stedet for mellomrom.
      • Tags – Tags brukes bare hvis du laster opp temaet til WordPress.org theme directory. De er grunnlaget For Funksjonen Filter mekanisme.

Kopier og lim inn ovenstående i stil.css og du vil ha noe sånt som dette:

Merk: det ser litt tomt i øyeblikket som vi ikke har et skjermbilde ennå. Vi vil legge til det senere.

indeks.php

indeks.php er den eneste andre strengt nødvendige filen. Dens jobb er å gjengi alle front-end utgang for vårt tema.

Siden indeksen.php kommer til å gjengi alle våre sider (hjem, innlegg, kategorier, arkiver) det kommer til å gjøre mye arbeid. For å starte trenger vi et hode seksjon som vil dekke HTML grunnleggende.

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

dette er standard HTML med ett unntak, (<https://developer.wordpress.org/reference/hooks/wp_head/>). wp_head er en kjernefunksjon som gjør Det Mulig For WordPress og tredjeparts plugins å sette inn kode i overskriften uten å endre malfilene dine. Dette kalles en handlingskrok.

hvis DU er kjent MED HTML, kan du merke at det ikke er en<tittel > – tag for å skrive ut sidetittelen. Det er Fordi WordPress kan bruke wp_head-kroken til å dynamisk sette inn tittelen.

En annen bruk av wp_head er å enqueue stiler (.css) og skript (.js). Det er veldig gode grunner til å gjøre dette i stedet for hardcoding dem, som vi vil se på senere.

Deretter har vi kroppen på siden:

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

body_class () er en hjelpefunksjon levert Av WordPress som vil sende ut en liste over nyttige CSS klasser som beskriver siden som vises som:

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

body_class (); aksepterer også en parameter slik at du kan legge til dine egne klasser, for eksempel:

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

Deretter har vi maloverskriften.

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

Her bruker Vi WordPress ‘ innebygde malfunksjoner for å sende Ut Nettstedets Tittel og Beskrivelse. Vi har også brukt en hjelpefunksjon, home_url(), for å koble Nettstedets Tittel tilbake til hjemmesiden.

neste opp, kroppen på siden:

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

Det er her det blir interessant (og litt mer komplisert). Her bruker Vi Den viktigste Funksjonen I WordPress, Loop. Sløyfen gjør det harde arbeidet med å finne ut hvilken side brukeren er på og hva som skal vises. Den returnerer deretter en liste over ett eller flere ‘innlegg’ som vi kan sløyfe gjennom og utdata ved hjelp av malfunksjoner.

hvis Sløyfen ikke returnerer noen resultater, for eksempel på en 404-side eller slettet innlegg, bruker vi en annen operatør til å vise en forhåndsdefinert melding.

uten noen av den omkringliggende koden ser en forenklet sløyfe slik ut:

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

Merk: Fordi WordPress har sin opprinnelse i blogging, bruker Mange funksjoner ‘post’ – terminologien, selv om De kan returnere og sende ut alle typer innhold (innlegg, sider, tilpassede innleggstyper).

Til Slutt har vi bunnteksten, alt vi trenger å gjøre her er å lukke HTML-kodene vi åpnet tidligere. Det er en annen handlingskrok, wp_footer(), som aktivt brukes Av WordPress og plugins for å inkludere skript i bunnteksten som trengs for å gjengi siden.

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

hvis du har fulgt med så langt vil du ha en fullt funksjonell WordPress tema som ser slik ut:

vårt tema kommer ikke til å vinne noen designpriser (det har INGEN CSS) og det mangler mange funksjoner som brukerne anser som viktige (sidefelt, navigasjon, metadata, miniatyrbilder, paginering, etc.) men det er en god start !

La oss fortsette og se hvordan vi kan forbedre det.

Trinn # 2: Opprett funksjoner.php

Funksjoner.php er strengt tatt ikke en nødvendig fil, men det gir så mange fordeler at 99,99% av temaene har det. I funksjoner.php du kan bruke WordPress ‘ innebygd tema funksjonalitet og også legge TIL din egen PHP-kode.

Opprett a-funksjoner.php i temamappen din nå som vi skal legge til kode i den i de neste avsnittene.

Legge Til En Navigasjonsmeny

De fleste, om ikke alle nettsteder, bruker en navigasjonsmeny, men frem til nå støtter ikke temaet vårt en. For Å fortelle WordPress vårt tema har en navigasjonsmeny, må vi registrere det i funksjoner.php liker dette:

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

merk: register_nav_menus () aksepterer en matrise slik at du kan registrere mer enn en meny om nødvendig.

WordPress vet nå om menyen vår, men vi må fortsatt sende den ut i temaet vårt. Vi gjør det ved å legge til følgende kode under nettstedbeskrivelsen i indeksen.php:

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

Nå har vi en (unstyled) navigasjonsmeny:

Legge Til En Sidebar

vårt tema har heller ikke et sidebar (widgetområde), la oss fikse det nå.

først må vi registrere sidepanelet i funksjoner.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' );

nå opprette sidebar.php i temamappen din og legg til følgende kode:

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

her bruker vi en if-setning for å sjekke om sidepanelet er ‘aktivt’ før vi sender ut koden. En aktiv sidebar er en som brukeren har lagt til minst en widget til.

det siste trinnet er å inkludere sidepanelet i indeksen.php, over wp_footer () legg til et get_sidebar () anrop.

Legge Til Utvalgte Bilder

Som sidefelt og navigasjonsmenyer, kan vi ikke bare sende ut utvalgte bilder i temaet vårt og forvente at De skal fungere, vi må fortelle WordPress vi støtter den funksjonen først. I funksjoner.php legg til:

add_theme_support( 'post-thumbnails' );

Nå kan vi legge til the_post_thumbnail(); innenfor vår loop og miniatyrbildene vil fungere. Det eneste problemet er At De vil sende Ut På WordPress maksimale størrelse på 1920px x 2560px, som er for stor for de fleste bruksområder. Heldigvis Har WordPress en annen hjelpefunksjon: add_image_size();

når en bruker laster opp et bilde, og Hvis bildestørrelsen er definert, Vil WordPress generere en versjon av det opplastede bildet i den størrelsen (mens du beholder originalen). Hvis brukerens bilde er mindre enn dimensjonene Du har satt WordPress, vil Det ikke gjøre noe som det ikke kan gjøre et bilde større enn originalen.

hvis du vil bruke et optimalisert funksjonsbilde i stedet for originalen, plasserer du følgende kode i funksjoner.php:

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

Den første parameteren er håndtaket, den andre er bildebredden og den tredje er høyden. Både høyde og bredde er valgfrie hvis du bare vil begrense en dimensjon.

I indeks.php:

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

Enqueueing Stiler Og Skript

Tidligere vi uttalt At Det er bedre å enqueue stiler og skript i stedet for hardcoding dem direkte inn i malfilene. Det er fordi enqueuing gir mye mer fleksibilitet.

når det gjøres riktig, forteller enqueuing Også WordPress hvilke ressurser som lastes inn. Når WordPress vet hvilke ressurser som trengs, kan Det sørge for at samme ressurs ikke lastes mer enn en gang. Dette er spesielt viktig når du har et ekstremt populært bibliotek som jQuery eller FontAwesome at flere temaer og plugins vil benytte.

En annen fordel med enqueuing er at en ressurs som er enqueued kan dequeued av en plugin, unngå behovet for å endre malfiler.

selv om temaet vårt har en stil.css-fil det ikke bruker det ennå, la oss enqueue det nå:

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() er en hjelpefunksjon som henter URI av gjeldende tema stilark. Hvis vi var enqueueing noen annen fil vi trenger å gjøre dette i stedet:

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

vårt tema har ikke noen skript, hvis det gjorde vi ville enqueue dem som dette:

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

et unntak fra ovenstående er skript som er forhåndsregistrert Av WordPress, i de tilfellene trenger du bare å levere den første parameteren ($handle):

wp_enqueue_script( 'jquery' );

Legge Til Stil MED CSS

vårt tema har sterke grunnlag, men mangler noe design, og legger til noen grunnleggende CSS til stil.css vil gjøre en stor forskjell. Vi har lagt rundt ~100 LINJER MED CSS til vår prøve tema som en demonstrasjon og resultatet ser slik ut:

Tittel Tag

Alle temaer bør benytte WordPress innebygde funksjonalitet for å generere tittelen tag, som er aktivert ved å legge denne koden til dine funksjoner.php-fil: add_theme_support( 'title-tag' ); Det er alt som skal til, WordPress vil håndtere utdataene på siden < tittel > og om nødvendig kan plugins endre utdataene ved hjelp av filtre. SEO plugins gjør ofte dette i et forsøk på å optimalisere titlene ytterligere.

Trinn #3: Legg Til Maldeler

akkurat nå er 80% av vår malkode i indeks.php.

mens dette fungerer, vil det resultere i mye koderepetisjon når vi har andre malfiler som singular.php, søk.php og arkiv.php. Mal Deler gjør tema utvikling enklere ved å tillate oss å gjenbruke kode på tvers av maler. Som vår topptekst og bunntekst vil være den samme på hver side de er en perfekt kandidat for å bruke mal deler. Først oppretter du topptekst.php og flytte følgende kode fra indeksen.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 – >

i indeksen.php erstatter koden ovenfor med:

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

Merk: Når du får en maldel, må du utelate den .php fra malen del håndtaket.

opprett deretter en bunntekstmaldel ved å flytte denne koden til bunntekst.php og gjenta prosessen ovenfor:

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

Til Slutt flytter vi koden’ no-results ‘ til en maldel også, da den sannsynligvis vil bli brukt i flere maler. Lag innhold-ingen.php og flytt denne koden til den nye filen.

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

indeksen din skal nå se slik ut:

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

mens ovennevnte vil fungere perfekt, er det en liten forbedring vi kan gjøre. WordPress har hjelpefunksjoner for å inkludere header, footer og sidebar mal deler. Som det er en god praksis å bruke kjernefunksjonalitet der det er mulig, bør vi bruke dem i stedet.

Erstatt get_template_part( 'header' ); med get_header(); og get_template_part( 'footer' ); med get_footer();

Trinn #4: Legg til entall.php, arkiv.php, søk.php og 404.php

grunnlaget vi fullførte med maldeler, vil betale utbytte når vi legger til nye malfiler i temaet vårt. Nedenfor har vi listet opp de vanligste. For å unngå å overvelde deg med kodeeksempler har vi koblet til kildekoden på Github i stedet.

entall.php

Innlegg og Sider, når de vises på Sine Egne Nettadresser, regnes Som ‘Entall’ som mesteparten av tiden oppsettet vil være den samme for begge disse sidetypene. Men hvis det ikke er det, kan du bruke den mer spesifikke siden.php og single.php (post) i stedet.

Eksempelkode-entall.php

arkiv.php

Arkivmaler skiller seg vanligvis fra enkeltmaler på to måter: de viser utdrag i stedet for hele innholdet og har en arkivoverskrift som forklarer innholdet.

Se tilbake til malhierarkiet, og du vil se at arkivmalen dekker alle typer arkiver (forfatter, kategori, tag, taksonomi, dato) hvis dette ikke fungerer for ditt brukstilfelle, kan du fortsatt bruke de mer spesifikke malene:

1. 1. • forfatter.php
      • kategori.php
      • kode.php
      • taksonomi.php
      • dato.php

Eksempel Kode-arkiv.php

søk.php

WordPress nettsteder kan søkes ved hjelp av ?s= url-parameter, for eksempel yourwebsite.com?s=test. Søk.php mal utganger resultatene av disse søkene.

Eksempelkode-søk.php

404.php

den andre setningen vi la til i indeksen.php fanger» side ikke funnet » feil, men det kan være lurt å avkoble denne funksjonaliteten til sin egen malfil for å få mer kontroll over utdataene. Det er bruken av 404.php mal fil.

Eksempelkode-404.php

Trinn # 5: Hjelpefiler

hvis du distribuerer temaet ditt til publikum, er følgende filer avgjørende. Uten disse, vil temaet bli avvist fra tema repositories og markedsplasser.

skjermbilde.png

skjermbildet vises i listen wp-admin temaer når brukeren velger et nytt tema. Her er noen beste praksis du bør følge:

1. 1. • Skjermbilder bør være 1200px x 900px
      • Skjermbilder bør være i .png eller .jpg-format
      • Skjermbilder bør være en nøyaktig gjengivelse av temaet
      • Skjermbilder bør optimaliseres (bruk tinypng.com eller lignende)

readme.txt

WordPress bruker ingen informasjon fra readme.txt, det trekker alt det trenger fra stil.css. På Den annen side trekker WordPress-temakatalogen viktig informasjon fra readme-filen og anser det som en nødvendig fil.

De fleste utviklere bruker readme.txt som den sentrale plasseringen for å lagre all informasjon om temaet deres. En enkel readme.txt ser slik ut:

=== 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. • Krever minst-Dette er den minste versjonen Av WordPress som temaet ditt er kompatibelt med.
      • Testet opp til – dette feltet angir den nyeste versjonen Av WordPress temaet ditt har blitt testet med.
      • Krever PHP – dette feltet angir minimumsversjonen AV PHP temaet ditt vil fungere på.
      • Beskrivelse – dette beskrivelsesfeltet vises ikke noe sted.
      • Changelog – changelog brukes ikke hvor som helst, men utviklere og noen brukere vil referere til denne filen for å se hvilke endringer som er gjort.
      • Ressurser – de fleste tredjepartsressurser krever attribusjon av noe slag. Ressursseksjonen er et allment akseptert sted å sette dem. Selv for ressurser som ikke eksplisitt krever attribusjon, er det fortsatt en god praksis å liste dem her, slik at brukerne er klar over lisensene til ressursene de bruker.

Trinn # 6: Opprett Sidemaler

Sidemaler lar utviklere lage egendefinerte maler som kan brukes til individuelle innlegg og sider. For eksempel har de fleste temaer en to-kolonne (innhold – sidebar) layout, men på noen sider vil brukeren kanskje bare fokusere på innholdet og ikke vise et sidebar. Det er der en sidemal kan hjelpe.

hvordan opprettes» Sidemaler»?

i temamappen vår oppretter du en ny mappe med navnet ‘page-templates’ og i den mappen oppretter du en fil som heter single-column.php. For å få fart på ting, kopier all koden fra singular.php til side-maler / enkelt-kolonne.php og fjern kallet til get_sidebar () da denne malen ikke trenger det.

nå må vi legge til en spesiell header som forteller WordPress dette er en sidemal, det ser slik ut:

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

koden er selvforklarende, Vi forteller Bare WordPress navnet på malen og hvilke innleggstyper den kan brukes med.

det er alt som skal til, vår nye sidemal er nå tilgjengelig i redigeringsprogrammet under ‘Sideattributter’.

Trinn #7: Gjør Temaet Kompatibelt MED RTL.css

Ikke alle språk leses fra venstre til høyre. Arabisk og hebraisk, for eksempel, leses Fra Høyre Til Venstre (RTL). Det er en enkel måte å gjøre temaet ditt kompatibelt med RTL-språk.

Opprett en ny fil i temamappen kalt rtl.css, deretter kopiere og lime inn følgende kode:

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

HVIS ET RTL-språk er det aktive språket På Et WordPress-nettsted, Vet WordPress å laste DENNE CSS-filen automatisk.

DETTE er en veldig grunnleggende implementering AV RTL-funksjonalitet for å komme i gang. Hvis du er interessert i å lære mer her er to fantastiske ressurser:

Høyre Til Venstre Språk Støttedokumentasjon

Tjue Tjue RTL-kode

Trinn # 8: Følg Alltid Beste Praksis

Beste praksis har utviklet seg over tid for å gjøre det enklere å bygge Og vedlikeholde WordPress-temaer. Ikke bare vil følge disse prinsippene hjelpe deg, men de vil også gjøre det enklere for andre utviklere når de trenger å jobbe med koden din.

1) Bruk Starter Temaer

Starter temaer gir en solid base for deg å bygge ditt tema på. Vanligvis er de lette, inneholder lite eller ingen styling og ingen konfigurasjonsalternativer. Over tid kan du bygge ditt eget starttema som du kan basere alle prosjektene dine på, men for nå er det noen populære alternativer:

1. 1. • Understreker
      • Stillas
      • HTML5 Blank

2) Bli Kjent Med WordPress Kodingsstandarder

Kodingsstandarder er en måte å formatere koden din på en konsistent måte over hele kodebasen. WordPress har kodingsstandarder FOR HTML, CSS, Javascript og PHP. Mens du bruker en kodingsstandard, har det ingen effekt på sluttbrukeropplevelsen, det gjør koden din mye mer lesbar. Selv om Du ikke bruker WordPress-kodingsstandardene, anbefaler vi alltid å bruke en standard.

1. 1. • WordPress.org Koding Standarder
      • WPCS
      • PHP Koding Standarder

3) Bruk Lokalisering

Takket være det harde arbeidet til frivillige, Er WordPress tilgjengelig på hundrevis av språk. Hvis temaet ditt skal bli utgitt offentlig, må det bygges på en måte som gjør at det også kan oversettes.

ikke bekymre deg, det er super enkelt å gjøre. Alt vi trenger å gjøre er å sørge for at alle strenger sendes gjennom en lokaliseringsfunksjon i stedet for å bli utdata direkte.

I Stedet for dette:

<?php echo 'Previous Post'; ?>

Vi gjør dette i stedet:

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

__() er en lokaliseringsfunksjon som godtar en streng og et tekstdomene. Funksjonen returnerer en oversettelse av den angitte strengen, eller den opprinnelige strengen hvis en oversettelse ikke er tilgjengelig.

4) Unngå Plugin-Funksjonalitet

når en bruker endrer temaet, bør bare presentasjonslaget endres. Innhold og funksjonalitet bør forbli stort sett det samme. Hva dette betyr er at enhver funksjon som påvirker Hvordan WordPress-roller skal være inneholdt i et plugin, ikke temaet ditt. Noen eksempler på plugin-funksjonalitet inkluderer:

1. 1. • Tilpassede Innleggstyper
      • Sidebyggere
      • Deling Av Sosiale Medier
      • Søkemotoroptimalisering (SEO)

selv om DET kan virke praktisk (og muligens et salgsargument) å inkludere SEO-kontroller i et tema, gjør det faktisk vondt for brukeren på lang sikt. I fremtiden må de endre temaet, men kan ikke fordi ALLE DERES SEO-konfigurasjoner er tett koblet til det nåværende temaet. I kontrast, hvis konfigurasjonene ble lagret i et plugin, kunne de endre tema uten å bekymre seg.

5) Prefixing (Prevent Conflicts)

for å forhindre konflikter, bør alle funksjoner, klasser og globale variabler som er opprettet av temaet ditt, være prefixed. Dette er viktig fordi det er umulig å vite hvilken annen kode som kjører på brukerens nettsted. Prefiks hindrer navn sammenstøt og fatale feil.

temaets navn atskilt med streker eller understrek vil fungere som prefiks mesteparten av tiden. Hvis temanavnet er veldig langt, kan initialene fungere i stedet.

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) Bruk Kjernefunksjonalitet

der den finnes, bør du alltid bruke kjernefunksjonalitet i motsetning til å gjenoppfinne hjulet. Dette inkluderer, Men er ikke begrenset Til, Sidefelt, Navigasjonsmenyer, Postminiatyrbilder, Egendefinerte Overskrifter og Egendefinerte Bakgrunner. Disse funksjonene har blitt kjempet-testet av millioner av brukere og er aktivt vedlikeholdt og forbedret.

hvis du trenger å endre funksjonaliteten eller utgangen av en kjernefunksjon, er Det mulig å bruke En Av De mange krokene Og filtrene WordPress tilbyr. For eksempel wp_nav_menu() har en ‘walker’ parameter slik at du kan ha full kontroll over utgangen.

7) Rømmer Og Desinfiserer Data

som temautvikler må du være kjent med rømmer og desinfiserer data for å beskytte brukerne mot potensielle utnyttelser.

Escaping

Escaping Er prosessen med å sjekke data er trygt før det er utgang og sanitizing sjekker data før det er lagret i databasen.

WordPress har hjelpefunksjoner som du kan bruke til å unnslippe data, slik at du ikke trenger å bygge dem selv. esc_html er et eksempel på en rømningsfunksjon. Dette er hva en unescaped utgang ser ut som:

echo get_theme_mod( 'error_page_title' );

for å unnslippe utgangen gjør vi dette:

echo esc_html( get_theme_mod( 'error_page_title' ) );

Noen andre rømmer funksjoner du bør være klar over er esc_attr (), absint (), esc_url ().

det er også mulig å oversette og unnslippe en streng ved hjelp av en enkelt funksjon:

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

Blir:

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

Tips: Hvor som helst i temaet ditt der du har echo $, bør du sjekke om det må rømmes, det gjør det vanligvis.

Desinfisering

hvis du legger til innstillinger i temaet, må du sørge for at dataene som brukerne legger inn i disse innstillingene, er trygge før de går inn i databasen. WordPress har en rekke funksjoner for å hjelpe med sanitizing input.

når du legger til en innstilling til temaet ditt ved Hjelp Av Customizer API, har den en parameter for kalt ‘sanitize_callback’ som godtar navnet på en sanitization-funksjon. Enhver inngang innstillingen tar kontrolleres av funksjonen du gir til ‘sanitize_callback’ før den går inn i databasen.

det fremhever viktigheten av sanitization at hvis en av innstillingene dine mangler sanitize_callback, vil den ikke bli akseptert i WordPress-temakatalogen.

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

en offisiell liste over sanitization og escaping funksjoner kan sees her: Data Sanitization / Escaping

Trinn #9: Distribuere WordPress Tema

Temaer kan distribueres via ulike kanaler avhengig av utfallet du ønsker å oppnå. Hvis resultatet ditt bare er å bidra til åpen kildekode-fellesskapet, er det ingen bedre måte å gjøre det enn å laste opp temaet ditt Til WordPress-katalogen. Hvis du i stedet ønsker å selge temaet ditt og tjene penger direkte, finnes det måter å gjøre det også.

her er de ledende nettstedene for temadistribusjon:

1) WordPress.org (Beste stedet å få nedlastinger og brukere)

den primære fordelen med å være vert for temaet Ditt På WordPress er at du får en synlighetsboost fra temaet ditt ikke bare på wordpress.org nettsted, men også i wp-admin dashbordet.

En annen fordel med å være vert for temaet Ditt Med WordPress er det innebygde oppdateringssystemet. Hvis du oppdaterer temaet, vil alle brukere bli varslet i sine wp-admin dashboards og gitt en enkel vei for å oppdatere til den nyeste versjonen.

WordPress.org godtar bare gratis temaer, men det betyr ikke at du ikke kan tjene penger. Et gratis tema kan være en flott kanal for å fremme ditt premium tema, plugin eller tjeneste.

2) WordPress.com

WordPress.com verter både gratis og premium temaer. De har imidlertid ikke vært åpne for nye forfatterinnlegg i noen år nå.

3) ThemeForest

ThemeForest er den ledende markedsplassen for premium-temaer. Den mest solgte tema (Avada) har salg i overkant av $5,000,000.

Generelt sett kjøpere På Theme Forest forvente fullverdig» multi-purpose » temaer. Alle de beste temaene har sidebygger funksjonalitet og støttes av team av utviklere. Det er et veldig vanskelig marked å bryte inn for nye forfattere.

4) Creative Market Og Mojo Marketplace

Creative Market og Mojo Marketplace er små aktører i premium temaer markedet som er grunnen til at vi gruppert dem sammen. De tilbyr begge effektivt samme tjeneste Som ThemeForest, men i mindre skala.

5) Github

Github er den enkleste måten å gjøre ditt gratis tema offentlig. Det er ingen gjennomgangsprosess og ingen retningslinjer å følge. Du vil imidlertid ikke dra nytte av synligheten til wordpress.org og må bygge din egen oppdateringsmekanisme for brukere å få de nyeste versjonene.

Trinn # 10: Test Og Forbedre Kode

1) Teste Temaet Ditt

Temaenhetstest

Temaenhetstesten er en standard WordPress-innholdsimportfil som inneholder et bredt spekter av innholdstyper og kantsaker. Det er enkelt å laste opp til utviklingsmiljøet ditt og vil markere mange scenarier du kanskje har oversett.

WP_DEBUG

som temautvikler er det bare minimum du bør gjøre å teste temaet DITT MED WP_DEBUG aktivert. Temaet skal returnere ingen feil eller advarsler NÅR WP_DEBUG er satt til true.

det er også viktig å gjenta testen med DE forskjellige PHP-versjonene temaet ditt støtter. Med hver større PHP-utgivelse er det nye endringer, advarsler og avskrivninger. Det er ikke uvanlig at et tema er feilfritt PÅ PHP5. 6, men viser feil PÅ PHP7.

for å aktivere WP_DEBUG, legg til følgende kode i wp-config.php:

DEFINE( 'WP_DEBUG', true );

Monster Widget

Monster Widget er en nyttig plugin som lar deg legge til 13 kjerne widgets til sidepanelet på en gang. Kjernen widgets bruker en rekke HTML-elementer som gjør dem perfekte for å teste temaet ditt.

Theme Sniffer

Temaet Sniffer er en plugin laget Av Theme Review Team (TRT). Det fanger mye (men ikke alle) rømmer og lokaliseringsfeil. Det sjekker også temaet ditt mot WordPress-kodingsstandardene.

2) Sende Inn Ditt Tema til WordPress.org

i begynnelsen av denne veiledningen sa vi at når du nådde slutten, ville du ha et tema du kunne sende til wordpress.org. La oss se på den prosessen.

Opplastingsprosess

opplastingsprosessen er enkel. Opprett Eller logg Inn På Din WordPress-konto og naviger deretter til denne siden– https://wordpress.org/themes/upload/

du kan zip temaet ditt og laste det opp akkurat nå, men her er noen ting du kanskje vil vite først.

Krav

Theme Review Team (TRT) har et strengt sett med krav. Temaet ditt vil ikke bli akseptert i katalogen før det oppfyller alle kravene.

Gjennomgangsprosess

når du laster opp et tema, er det en to-trinns gjennomgangsprosess det må passere før det kan aksepteres i katalogen.

først utføres en automatisk sjekk så snart Du trykker På Upload. Bak kulissene, den automatiserte kontrolløren fungerer på en svært lik måte Til Temaet Sniffer plugin. Hvis den finner noen feil, vil den avvise temaet og opplastingsprosessen slutter der.

hvis temaet ditt passerer den automatiske sjekken, blir det en kø av temaer som venter på en menneskelig anmeldelse. Den menneskelige gjennomgangen er fullført av frivillige FRA TRT. Antall temaer i køen overstiger langt antall anmeldere, noe som betyr at det ofte kan ta 2-3 måneder for temaet ditt å nå forsiden av køen.

det er viktig at temaet ditt er feilfritt og oppfyller alle kravene etter hvert som det når det menneskelige gjennomgangsstadiet som om det har mer enn 3 signifikante feil det kan avvises. Hvis et tema blir avvist på det menneskelige gjennomgangsstadiet, må det bli igjen i køen på baksiden, noe som betyr at du venter 2-3 måneder igjen for en annen menneskelig gjennomgang.

Nyttig Ressurs: De Vanligste WordPress-Temautviklingsfeilene (Og Hvordan Å Fikse Dem)

DET er verdt å merke SEG AT TRT alltid er på utkikk etter nye anmeldere, frivillig arbeid kan være en god læringsopplevelse og en måte å bidra til åpen kildekode-samfunnet.

3) Din Temaoppføring

Gratulerer, temaet ditt er godkjent! Du har nå din egen liste som ser slik ut.

her er en oversikt over hva du kan forvente å se på denne siden:

1. 1. • Skjermbilde-skjermbildet er det første potensielle brukere ser, så gjør det så tiltalende som mulig. Men husk det må fortsatt være en nøyaktig representasjon av temaet og ikke en photoshop gjengi. Ta inspirasjon fra de mest populære temaene.
      • Beskrivelse-beskrivelsen som er trukket fra stil.css er et ideelt sted å beskrive temaet ditt og det er viktige funksjoner. Det hjelper også å liste anbefalte eller nødvendige plugins her. Beskrivelsen støtter ikke formatering (fet, kursiv, hyperkoblinger) eller til og med linjeskift.
      • Tags – Dette er en representasjon av kodene du oppført i stil.css. Bare disse kodene her er akseptert.
      • Forhåndsvisningsknapp-forhåndsvisningen genereres av wordpress.org og som temautviklere har vi ingen kontroll over produksjonen. Dessverre, som forhåndsviseren bruker grunnleggende innhold og ingen konfigurasjon, resulterer det ofte i en mindre enn perfekt forhåndsvisning.
      • Tema Hjemmeside Link-URL For Forhåndsvisning knappen er trukket fra ‘Tema URI’ felt i din stil.css. Det er strenge krav om at DENNE NETTADRESSEN bare skal brukes til å vise en side som viser informasjon om temaet ditt.
      • Aktive Installasjoner-dette er antall nettsteder som aktivt bruker temaet. Tallet er avrundet til nærmeste ti, hundre eller tusen. Det er ikke mulig å hente et eksakt nummer.
      • Nedlastinger Per Dag – dette er hvor mange ganger temaet har blitt lastet ned. En ‘Nedlasting’ kan være en ny nedlasting eller en temaoppdatering.
      • Anmeldelser-for at en bruker skal kunne legge igjen en anmeldelse må de være logget på en wordpress.org konto. Generelt sett, vurderinger er vanskelig å få med mindre du eksplisitt be brukerne å sende dem.
      • Støtte-den innebygde støtteplattformen er flott for å håndtere og løse problemer med temaet ditt. Brukeren må være logget inn for å opprette en støttetråd.
      • Oversettelser-oversettelsesplattformen er en fantastisk ressurs. Hvis du har fulgt rådene gjennom denne veiledningen for å lokalisere temaet ditt, vil brukerne dine kunne oversette det til andre språk og utvide din potensielle brukerbase utover bare engelsktalende brukere.

4) Oppdatere Temaet

Når du gjør endringer i temaet ditt i fremtiden og trenger å oppdatere versjonen som er vert På WordPress, er prosessen enkel.

oppdater Først ‘Versjon:’ – feltet og endringsloggen i readme.txt. Deretter zip filen og re-laste den opp med samme opplastingssiden som før.

systemet vil gjenkjenne det som en oppdatering og vil automatisk godkjenne det slik at det ikke krever en annen menneskelig gjennomgang.