Sablon átalakítása a WooCommerce támogatására

A múltkori (nyílt) bejegyzés végén írtam arról, hogy elméletileg valamennyi WooThemes sablon együtt tud működni a webáruházzal, de egyes esetekben a WooThemes sablon hibaüzenetet írhat ki, miszerint nem támogatja a WooCommerce saját megjelenítéseit (“Your theme does not declare WooCommerce support”), és ezzel mindenképpen foglalkozni kell. A jó hír az, hogy van rá megoldás, sőt, rögtön kettő is.

Ahogyan azt már írtam, az első dolog, hogy mindenképpen frissítsd a sablont, hiszen mostanra valamennyi WooThemes sablont upgrade-elték (szép magyar szó) a WooCommerce 2.0-hoz. Ha ez nem segít, akkor ott lehet a gond, hogy a sablon alapértelmezett content területe (a wrapper, azaz a “vászon”) nem egyezik a webáruházéval.

Ez a probléma a termékbemutató oldalt, a termékek saját oldalát, valamint a termékindex-oldalakat (termékkategóriák, termékcímkék, termékkeresések eredménye) érinti, mert a WooCommerce ezekben az esetekben a sablon alapértelmezett oldalsablonját (bocs, magyarul ugyanez a szó van mindkettőre…), tehát a sablon alapértelmezett page template-jét használja. A kosár és a fizetés oldalak rendben lesznek így is, hiszen ott a webáruház külön page-template-et alkalmaz.

Ez eddig szerepelt a múltkori bejegyzésben is; most lássuk a megoldást.

Ha haladó felhasználó, esetleg fejlesztő vagy, akkor “hook”-okat, azaz “horgokat” kell elhelyezned a sablonod fájljaiban; aki ennyire nem ért a php-hoz, az pedig felhasználhatja a sablonja fájljaiban a WooCommerce fejlesztői által írt, teljeskörű megoldást nyújtó woocommerce_content() függvényt. Ennek a segítségével gyakorlatilag egy új oldalsablont (page template-et) készítesz, és ezt használod majd az érintett WooCommerce szerviz-oldalaknál.

 

Nézzük először az egyszerűbb megoldást. Hogyan kell elkészíteni az új page template-et?

1) Másold le a page.php fájlt.

Készíts egy másolatot a page.php fájlról, és nevezd át woocommerce.php -nak.

2) Nyisd meg a woocommerce.php fájlt egy szerkesztővel.

Ne Worddel!!! A Jegyzettömb egy fokkal jobb, de a rendes megoldás a PSPad Editor vagy más hasonló szerkesztő.

3) Írd át a megjelenítési ciklust.

Ez általában a következő sorral kezdődik:

<?php if ( have_posts() ) :

és ezzel végződik:

<?php endif; ?>

Ez sablononként változó. Amikor megtaláltad, töröld ki az egészet, és írd be helyette ezt:

<?php woocommerce_content(); ?>

Ezzel a sablonod az eredeti megjelenítési mód helyett a WooCommerce-ét fogja használni.

4) Mentsd el a fájlt és töltsd fel a sablonod könyvtárába.

www.domainneved.hu/wp-content/themes/sablonodneve/woocommerce.php lesz a linkje.

Ezzel készen is vagy.

 

A profi megoldás pedig: a hook-ok használata

Ehhez több tapasztalat kell, viszont az eredmény szempontjából rugalmasabb megoldás. A WooThemes fejlesztői is ezt használták a sablonjaiknál, illetve így tudták összekötni a WooCommerce-et a WordPress alapértelmezett sablonjaival (a TwentyTennel és társaival).

Először is helyezz el néhány sort a sablonod functions.php fájljában; egyrészt, hogy hatástalanítsd a WooCommerce wrappert:

remove_action( 'woocommerce_before_main_content', 'woocommerce_output_content_wrapper', 10);

remove_action( 'woocommerce_after_main_content', 'woocommerce_output_content_wrapper_end', 10);

azután bekapcsolod a sablonod wrapperét:

add_action('woocommerce_before_main_content', 'sablonod_wrapper_eleje', 10);

add_action('woocommerce_after_main_content', 'sablonod_wrapper_vege', 10);

function sablonod_wrapper_eleje() { echo '<section id="main">'; }

function sablonod_wrapper_vege() { echo '</section>'; }

Figyelj rá, hogy a sablonod milyen class-okat vagy ID-ket használ (a page.php segít meghatározni).

 

Végül a hibaüzenet eltüntetéséhez add hozzá ezeket a sorokat:

add_action( 'after_setup_theme', 'woocommerce_support' );

function woocommerce_support() {

   add_theme_support( 'woocommerce' );

}

 

Ha semmi nem segít…

Ha nem boldogulsz a fentiek közül egyikkel sem, és nincs segítséged, akkor a legjobb, ha mégiscsak egy olyan sablont választasz, amely alapból támogatja a WooCommerce-et.

A cikk eredetijét ide kattintva olvashatod el.

 

Szerző:

Iratkozz fel hírlevelünkre!

Javasolt eszközök:

Banner250x250.png
Elementor Pro
Generatepress Logo White Asset
GeneratePress
Divi 4.0
Divihello
Prémium támogatás és ajándék Divi licence
Adatvedelem.png
ADATVÉDELEM minta
Aszf.png
Webshop ÁSZF minta

Elkészült az ingyenes alapozó tanfolyamunk és elérhető a YouTube csatornánkon amíg az új weboldal készül.