Slik legger du til WooCommerce-kompatibilitet til WordPress Theme

I denne nybegynnerens veiledning vil jeg vise deg den riktige måten å legge til WooCommerce-kompatibilitet med WordPress-temaet ditt. Du lærer også å utvide den på en diskret måte uten å redigere pluginens kjernefiler. Vi dekker disse logiske trinnene:

1. Starter
2. Bruke kroker og handlinger
3. WooCommerce Extensions

1. Erklære WooCommerce Support

La oss forestille oss at vi utvikler et WordPress-tema. Vi vil gjerne utnytte noen av WooCommerce's ypperlige funksjonalitet, og vi vil også tilpasse noen av den funksjonaliteten også. Det er to måter vi kan utvide WooCommerce uten å redigere plugin-kjernefilene:

1. Bruke kroker (for mellomliggende temautviklere)
2. Bruk av catch-all woocommerce_content () fungere innenfor vårt tema

Jeg finner ut at en kombinasjon av disse alternativene fungerer best for å produsere pålitelige resultater. Så først, la oss erklære WooCommerce-støtte i vårt temas "functions.php" -fil og deaktivere WooCommerces standard styling; Vi vil style WooCommerce med vår egen tema design.

add_action ('after_setup_theme', 'woocommerce_support'); funksjon woocommerce_support () add_theme_support ('woocommerce'); 

Dette vil gjemme meldingen "Ditt tema erklærer ikke WooCommerce-støtte".

For å deaktivere WooCommerces standard styling, legger vi til følgende:

hvis (class_exists ('Woocommerce')) add_filter ('woocommerce_enqueue_styles', '__return_empty_array'); 

Med class_exists () funksjon, kontrollerer vi om WooCommerce-pluginet er installert og aktivt. En gang det er aktiv, vi deaktiverer standard styling. Senere i opplæringen legger vi til noen handlinger og kroker konfigurasjoner innenfor dette hvis uttalelse.

2. Opprett en ny side mal

For øyeblikket dupliserer temaets "page.php" -fil, og heter det "woocommerce.php". Denne filen skal være som følger: wp-innhold / temaer / YOURTHEME / woocommerce.php.

Åpne den nyopprettede filen i et tekstredigeringsprogram eller kodeseditoren du ønsker. Deretter må du finne løkken, som vanligvis starter med:

og slutter vanligvis med:
Dette varierer mellom temaer. Når du har funnet løkken, slett den. I stedet legger du:
Vår woocommerce.php-mal bruker nå WooCommerce-loopen i stedet. woocommerce_content () laster produktlisten på butikkens hovedside, produktkategori sider, produktsøkeside og enkeltproduktinnhold når du ser på enkeltproduktsiden.
En nybegynners guide til WordPress Loop
The Loop er utrolig grunnleggende for WordPress. Det er den første (og muligens den enkleste) tingen som de fleste nye temaer vil prøve å endre ... og du kan ...  
 3. legge ting til woocommerce.php
Som woocommerce.php er nå en del av temaet ditt, kan du tilpasse det sammen med dine andre filer. For eksempel legger jeg alltid til sidetittel-delen og breadcrumbs, siden mine vanlige sider vanligvis inneholder disse tingene. Ingen av disse tingene påvirker woocommerce_content (). På dette stadiet kan du også legge til andre ting ved hjelp av betingede koder fra WooCommerce og WordPress.
 
WordPress betingede etiketter
 
WooCommerce betingede etiketter
 
For eksempel, la oss legge til paginasjonsfunksjonen for enkeltprodukt, slik:
 // navigasjonsfunksjonen din går her. 
 4. Bruk WooCommerce kroker og handlinger
Den komplette listen over WooCommerce-handlinger, kroker og filtre finnes i WooCommerce-dokumentasjonen.
Hvis du er ny på WordPress-handlinger, kroker og filtre, anbefaler jeg på det sterkeste å sjekke ut disse ressursene:
 
Begynnerhåndboken til WordPress-handlinger og -filtre
Når det gjelder profesjonell WordPress-utvikling, er det viktig at utviklere forstår både handlinger og filtre - det er det viktig å ...  
 
WordPress-handlinger og -filtre: Hva er forskjellen?
Det er lett å bli forvirret mellom handlingskroker og filterkroker i WordPress: Her er en veiledning for å hjelpe deg med å bruke begge. 
 
For bedre forståelse av kroksteder anbefaler jeg at du leser Business Bloomer's Visual Hook Series.
For en litt mer komplisert, men enda dypere forståelse av hvordan WooCommerce logikk fungerer, anbefaler jeg at du undersøker plugin-kjernefiler (woocommerce> maler).
For eksempel, la oss se hva vi kan gjøre i butikksiden. For å endre utformingen av butiksiden med kroker, har du to alternativer:
 
Utvid den eksisterende handlingen uten å fjerne den.
 
Fjern / fjerner den eksisterende handlingen, og erstatt den med din egendefinerte.
 
Hvilken metode er bedre avhenger av oppgaven din. For eksempel, tenk deg at du vil fjerne bestillingsalternativet fra din butikkside:
remove_action ('woocommerce_before_shop_loop', 'woocommerce_catalog_ordering', 30);
Dette er alt du trenger for å legge til din functions.php-fil inne i hvis klassen eksisterer uttalelse. WooCommerce forstår nå at du ikke trenger den funksjonaliteten.
Og forestill deg at vi vil legge til en søke-widget i stedet for produktbestilling. Når du fjerner handlingen, legger du til denne koden:
add_action ('woocommerce_before_shop_loop', 'custom_woocommerce_product_search', 30); fungere custom_woocommerce_product_search () the_widget ('WC_Widget_Product_Search', ",");
Videre, forestill deg at du vil fjerne karakteren fra produkter på butikksiden. Lim inn følgende kode i din functions.php-fil:
remove_action ('woocommerce_after_shop_loop_item_title', 'woocommerce_template_loop_rating', 5);
Endre utførelsesprioritet
Du har lagt merke til at hver handling har et nummer som den siste parameteren. Dette er prioritet som brukes til å angi rekkefølgen der funksjonene knyttet til en bestemt handling utføres. Lavere tall fører til tidligere utførelse, og funksjoner med samme prioritet utføres i den rekkefølgen de ble lagt til i handlingen.
Dette er svært viktig i situasjoner der flere funksjoner blir brukt på samme handlingskrok. For eksempel vil jeg kanskje legge inn produktdetaljer (tittel, rangering, pris, legg til i handlekurven) med div.
Først legger vi til åpningspakken div-taggen:
add_action ('woocommerce_shop_loop_item_title', 'custom_woocommerce_loop_product_content_wrapper_start', 2); fungere custom_woocommerce_loop_product_content_wrapper_start '() ?>
Deretter legger vi til en lukkekode:
add_action ('woocommerce_after_shop_loop_item', 'custom_woocommerce_loop_product_content_wrapper_end', 50); funksjon custom_woocommerce_loop_product_content_wrapper_end '() ?>
Å spille med action hook-prioriteten kan gjøre arbeidet vårt mye enklere.
Det samme prinsippet gjelder for en enkelt produktside. Og her bør du være veldig forsiktig, da endringer du lager med handlekrok for produkter i loop / arkiv / butikkside, blir ignorert for den enkelte produktsiden. Her bør du endre enkeltproduktoppsettet separat, men hovedprinsippet er det samme.
Å vite hvordan du arbeider med WooCommerce-handlinger, utvider temaet ditt til neste nivå. Her er noen eksempler på hva jeg gjør i temaene mine når det gjelder WooCommerce-kompatibilitet:
 
Tilpasset bildeinnlasting for produkter
 
Egendefinert bildeplassholder for produkter
 
Egendefinert bildegalleri for produkter
 
Tilpasset label system display for produkter (Like Hot !, Mest populære! Anbefalt!)
 
AJAX Quick Look
 
Tilpasset legg til handlekurv tekst og knapp
 
Tilpasset salgslabel
 
Tilpasset bildeglass og lysboksseffekt for enkeltproduktside
 
AJAX Ønskeliste
 
Enkel produkt tilpassede faner
 
Enkelt produktanmeldelser 
 
Gravatar tilpasset størrelse
 
Tilpassede relaterte / kryss-selger / opp-selger produkter
 
Tilpasset AJAX-navigasjon for produkter
 
 5. WooCommerce Extensions
Hvis du vil legge til temaet ditt med WooCommerce-utvidelser, er prinsippet nesten det samme. Støtt alltid av høy kvalitet, offisielle utvidelser, da de vil ha integrasjonsretningslinjer og et støtteteam. For eksempel strekker jeg ut temaene mine med disse to plugins:
 
YITH WooCommerce Quick View
 
YITH WooCommerce ønskeliste
 
Siden de er WooCommerce-utvidelser, må du først sørge for at WooCommerce er installert og aktiv, så alle kroker, handlinger eller filtre i utvidelsen du skal bruke, skal plasseres i hvis (class_exists ()) uttalelse som vi skrev i begynnelsen. Og selvfølgelig bør du sørge for at utvidelsene dine også er installert og aktive ved å sjekke plugin-klassen, funksjonen eller det faste navnet. Som et eksempel fra temakoden min:
hvis (class_exists ('Woocommerce')) if (class_exists ('YITH_WCQV')) remove_action ('yith_wcqv_product_image', 'woocommerce_show_product_sale_flash', 10); remove_action ('yith_wcqv_product_image', 'woocommerce_show_product_images', 20); add_action ('yith_wcqv_product_image', 'infinitum_ninzio_woocommerce_show_product_images', 20); funksjon infinitum_ninzio_woocommerce_show_product_images () ?> ... 
For å finne ut hvilken klasse, funksjon eller konstant å sjekke, undersøk hovedfilen.php for utvidelsen.
Konklusjon
WooCommerce er en fantastisk eCommerce-plugin, og for å være helt ærlig, bør ethvert nytt premietema støtte det. Følg alltid WooCommerce integrasjonsveiledninger. Å gjøre det vil garantere at temaet ditt gjennomgår gjennomgangsprosessen og ikke vil bryte strukturen og logikken til WooCommerce. 
Etter noe utviklingsarbeid av denne typen, bør du alltid teste både WordPress og WooCommerce. Aktiver WordPress WP_DEBUG, og test temaet ditt ved hjelp av WordPress Theme Unitest og WooCommerce's dummy innholdstest. 
Nyttige ressurser





		
			
	   
	




Webdesign