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.

 

Oszd meg Te is:

Share on email
Share on facebook
Share on twitter
Share on whatsapp
Share on linkedin

Szerző:

Ezek is érdekesek lehetnek számodra: 

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

Szólj hozzá!

Ez a weboldal az Akismet szolgáltatását használja a spam kiszűrésére. Tudjunk meg többet arról, hogyan dolgozzák fel a hozzászólásunk adatait..