V predchádzajúcom článku sme sa zoznámili s tým, čo je odvodená téma a na čo slúži. Teraz prišiel čas rozobrať odvodenú tému Xtrodinary na drobné, čo obsahuje a na čo to slúži.
Počas toho ako vytváram stránky sa opakovane stretávam stále s rovnakými požiadavkami, ktoré je buď nepraktické, ťažkopádne alebo nemožné riešiť pluginmi. Vypracoval som teda svoju vlastnú Child tému pre Divi a zahrnul do nej načastejšie používané kódy.
Ďalej sa budeme venovať vysvetleniu, na čo jednotlivé kódy slúžia. Keďže odvodenú (child) tému je možné ľubovoľne upravovať, môžete nepotrebné kódy zmazať alebo pridať svoje vlastné. Ak nájdete alebo máte kód, ktorý si myslíte, že je potrebný alebo priam nutný, pokojne ma kontaktujte a pošlite mi ho 🙂
Ešte nemáš child tému Xtrodinary? Zadaj svoj e-mail a pošleme ti ju 🙂
Základná definícia a vlastná prihlasovacia stránka
## Pridanie moznosti vlastneho loga na prihlasovaciu stranku WordPress
## Zakladne nastavenie Odvodenej temy, nacitanie stylov
if (!defined('ABSPATH')) die();
function ds_ct_enqueue_parent() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); }
function ds_ct_loadjs() {
wp_enqueue_script( 'ds-theme-script', get_stylesheet_directory_uri() . '/ds-script.js',
array( 'jquery' )
);
}
add_action( 'wp_enqueue_scripts', 'ds_ct_enqueue_parent' );
add_action( 'wp_enqueue_scripts', 'ds_ct_loadjs' );
include('login-editor.php');Tento kód obsahuje základnú definíciu odvodenej témy a načítanie štýlov. Okrem toho je do neho implementovaná možnosť upravovať prihlasovaciu stránku WordPress (/wp-admin) pomocou „Vzhľad -> Prispôsobiť“. Môžete zmeniť logo, upraviť farby a veľkosti textu. Vhodné ak stránku odovzdávate klientovi – môžete tam umiestniť svoje logo alebo naopak logo klienta.
Povolenie SVG:
## Podpora nahravania SVG suborov do WordPress
function povolit_svg($mimes) {
$mimes['svg'] = 'image/svg+xml';
return $mimes;
}
add_filter('upload_mimes', 'povolit_svg');SVG – Scalable Vector Graphics je vektorový formát obrázkov, ktoré sa dajú používať na webe. Do WordPressu sa nehrávať bez pluginu alebo vlastného kódu nedá. Povolenie SVG je isté bezpečnostné riziko a mali by ste ho zvážiť. Avšak je vhodné napríklad na logá. Nepovoľujte nahrávanie SVG na stránkach, kde má prístup a možnosť tvoriť obsah hocikto. Overené a vami vytvorené SVG je v poriadku, ale do tohto formátu sa dajú zakódovať aj škodlivé kódy a preto nie je vhodné aby hocikto pridával hociaké SVG na web.
NOREFERRER
## Odstranenie NOREFERER z odkazov (tento kod plati pre NOVE clanky)
function odstran_noreferer_nove_clanky($rel_values) {
return 'noopener';
}
add_filter('wp_targeted_link_rel', 'odstran_noreferer_nove_clanky',999);
## Odstranenie NOREFERER z odkazov (tento kod plati pre EXISTUJUCE clanky)
function odstran_noreferer_povodne_clanky($content) {
$replace = array("" => "" ,"" => "");
$new_content = strtr($content, $replace);
return $new_content;
}
add_filter('the_content', 'odstran_noreferer_povodne_clanky', 999);Od WordPress 4.7.4 systém automaticky pridáva na odkzy, ktoré sa majú otvoriť v novom (target=“_blank“) okne NOOPENER a NOREFERRER atribút. V krátkosti to znamená, že keď sa niekto preklikne z vašej stránky na inú, tak cieľová stránka nezistí odkiaľ prišiel. Na čo všetko sú tieto atribúty dobré sa niekedy v budúcnosti bude venovať samostatný článok. Avšak, prečo potrebujeme dať niekedy NOREFERRER preč?
Ide hlavne o stránky, ktoré obsahujú affiliate (partnerské odkazy) – niektoré partnerské systémy, ktoré majú zaznamenať predaj a odkiaľ návštevník prišiel si vyžadujú túto informáciu získať. Ak sa nedozvedia, kto návštevníka odporučil, nemusia vám pripísať províziu z predaja.
Podotýkam, že niektorým partnerským programom to nevadí, ale niektorým to vadí. Preverte si ten váš a podľa tohto budete alebo nebudete tento kód potrebovať.
Projekty
## Premenovanie CELEJ SEKCIE "Projekty" na vlastny nazov aj s vlastnou URL
function premenuj_cpt_projekty() {
register_post_type( 'project',
array(
'labels' => array(
'name' => __( 'Projekty', 'divi' ), # Nazov pre mnozne cislo
'singular_name' => __( 'Projekt', 'divi' ), # Nazov pre jednotne cislo
),
'has_archive' => true,
'hierarchical' => true,
'menu_icon' => 'dashicons-palmtree', # Pouzitie vlastnej ikonky DASH ICONS
'public' => true,
'rewrite' => array( 'slug' => 'projekt', 'with_front' => false ), # Zmena URL adresy projektu
'supports' => array(),
));
}
add_action( 'init', 'premenuj_cpt_projekty' );Je super, že tvorcovia Divi integrovali do svojej témy možnosť pridávať okrem článkov aj nejaké portfólio, ktoré nazvali „Projekty“. Nemusí to byť každému po chuti, že sa to volá práve „Projekty“ a už vôbec nemusí každému vyhovovať, že URL adresa je v tvare www.web.sk/project/nieco a preto som pridal spôsob ako túto sekciu kompletne premenovať a zmeniť jej ikonku v administrátorskom paneli.
Je potrebné použiť ikonku DASH ICONS a zadať jej názov, ktorý si vykopírujete na tejto stránke potom, ako si vyberiete ikonku: WordPress Dash Icons.
Popiska k menu
## Pridanie moznosti zobrazovat popis v hlavnom menu stranky.
# Je potrebne v administracii aktivovat pridavanie popisov
# Je potrebne nastylovat SPAN tag, v ktorom bude zobrazeny popis menu. Ma class ".popiska-menu"
function nav_menu_description( $item_output, $item, $depth, $args ) {
if ( !empty( $item->description ) ) {
$item_output = str_replace( $args->link_after . '</a>', '<span class="popiska-menu">' . $item->description . '</span>' . $args->link_after . '</a>', $item_output );
}
return $item_output;
}
add_filter( 'walker_nav_menu_start_el', 'nav_menu_description', 10, 4 );Viac-menej nepotrebná hračka a zatiaľ som ju použil iba 2x, ale nakoniec som si ju nechal. Je to možnosť pridať pod hlavné menu Divi ešte druhý, vysvetľujúci riadok. Pre niekoho to môže byť nutnosť a pre iného možno dizajnový prvok. Je však potrebné si naštýlovať túto popisku podľa seba cez CSS.
Popiska k menu môže vyzerať takto, ako je na obrázku nižšie. Zelené sú klasické položky menu, šedé sú popisky k nim. Na druhom obrázku je zobrazené administrátorské rozhranie a miesto, kam sa popiska pridáva.
Loader Divi FilterGrid
## Pridanie moznosti vlastneho preloadera pre plugin Divi Filter Grid
function dpdfg_custom_loader() {
ob_start();
?>
<div class="dp-dfg-loader"><div class="my_custom_loader"></div></div>
<style>
.dp-dfg-loader {
position: absolute;
top: 50%;
left: 50%;
margin-top: -30px;
margin-left: -30px;
}
.my_custom_loader {
border: 8px solid #f3f3f3;
border-top: 8px solid #82b541;
border-radius: 50%;
width: 60px;
height: 60px;
animation: spin 2s linear infinite;
margin: 0 auto;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
</style>
<?php
return ob_get_clean();
}
add_filter('dpdfg_custom_loader', 'dpdfg_custom_loader');Kód je relevantný iba pre tých, čo majú na svojom webe Divi FilterGrid. Ak ho nemáte, môžete tento kód pokojne vymazať. Čo je Divi FilterGrid som písal v samostatnom článku.
Tento plugin má možnosť načítavať obsah pomocou rolovania stránky smerom dole alebo zobrazovať obsah v POP UP okne. Pri oboch načítavaniach používa základný loader od Divi, teda tie farebné guličky, ktoré sa však nemusia hodiť do každého dizajnu a preto veľmi často používam možnosť zmeny tohto loadera na vlastný a s vlastnou farbou. Farbu je potrebné si prispôsobiť v CSS štýloch, ktoré sa nachádzajú v kóde.
Presmerovanie "Pokračovať v nákupe"
## Zmena odkazu tlacitka Pokracovat v nakupe v kosiku WooCommerce
function presmeruj_pokracovat_v_nakupe ( $url ) {
$url = "https://WWW.MOJA_ADRESA.SK";
return $url;
}
add_filter('woocommerce_continue_shopping_redirect', 'presmeruj_pokracovat_v_nakupe');WooCommerce štandardne presmeruje návštevníka, ktorý chce pokračovať v nákupe opäť na ten istý produkt, ktorý si už pridal do košíka a toto niekedy nie je vyhovujúce, keďže daný produkt už kúpil a preto ho chcete zrejme presmerovať niekam inam, napríklad na stránku všetkých produktov. Pomocou tohto kódu to môžete urobiť.
Štítok "Zľava" - WooCommerce
## Uprava ikoniek o zlave pri produktoch - zobrazenie percent
add_filter('woocommerce_sale_flash', 'zmena_systemu_zlavy');
function zmena_systemu_zlavy() {
global $product;
if ( ! $product->is_on_sale() ) return;
if ( $product->is_type( 'simple' ) ) {
$max_percentage = ( ( $product->get_regular_price() - $product->get_sale_price() ) / $product->get_regular_price() ) * 100;
} elseif ( $product->is_type( 'variable' ) ) {
$max_percentage = 0;
foreach ( $product->get_children() as $child_id ) {
$variation = wc_get_product( $child_id );
$price = $variation->get_regular_price();
$sale = $variation->get_sale_price();
if ( $price != 0 && ! empty( $sale ) ) $percentage = ( $price - $sale ) / $price * 100;
if ( $percentage > $max_percentage ) {
$max_percentage = $percentage;
}
}
}
return '<span class="onsale">Zľava: ' . round($max_percentage) . ' %</span>';
}Divi štandardne pri produktoch v zľave používa iba štítok „Zľava!“ a nič viac. Toto tiež väčšinou majiteľom e-shopov nevyhovuje a uprednostnia radšej niečo iné. Existujú pluginy, na komplexnú správu štítkov pre WooCommerce, avšak nie vždy sú nutnosťou. Tento kód zabezpečí to, že sa okrem slova „Zľava“ (ktoré si môžete zmeniť) zobrazí aj počet percent o koľko je produkt zlacnený.
Pridanie SKU do košíka a pokladne WooCommerce
## Pridanie SKU do kosika a pokladne WooCommerce
add_filter( 'woocommerce_cart_item_name', 'pridaj_sku_do_kosika', 99, 3 );
function pridaj_sku_do_kosika( $item_name, $cart_item, $cart_item_key ) {
$product = $cart_item['data'];
$sku = $product->get_sku();
if(empty($sku)) return $item_name;
$item_name .= '<br><small class="product-sku">' . __( "<strong>Katalógové číslo: </strong> ", "woocommerce") . $sku . '</small>';
return $item_name;
}Pri rozsiahlejších e-shopoch som sa stretol s požiadavkou, že WooCommerce nedáva do košíka pokladne katalógové číslo – SKU a majitelia e-shopov si práve túto vec vyžadovali. Pomocou tohto kódu je možné pridať práve tento atribút do Košíka a Pokladne.
Upozorňujem, že je možné, že budete potrebovať ešte aj CSS na to, aby ste upravili tento vizuál prípadne zobrazovanie na niektorých miestach.
Príloha do mailov WooCommerce
## Pridanie moznosti pridavat lubovolnu prilohu do e-mailov WooCommerce.
# Subor musi byt umiestneny na serveri a zadefinuje sa jeho nazov alebo URL adresa
add_filter( 'woocommerce_email_attachments', 'vop_do_woocommerce_mailu', 10, 3);
function vop_do_woocommerce_mailu ( $attachments , $id, $object ) {
$url_suboru = get_template_directory() . '/terms.pdf';
$attachments[] = $url_suboru;
return $attachments;
}Ak sa nemýlim, je aj v zákone, že zákazník e-shopu musí dostať k objednávke aj Všeobecné obchodné podmienky v PDF. WooCommerce toto urobiť nevie. Podobný efekt je možné dosiahnuť pluginmi a úpravou WooCommerce e-mailov. Pokiaľ však nepotrebujete rozsiahlejšie úpravy či nechcete inštalovať ďalší plugin, toto je jednoduchá cesta ako pridať VOP do WooCommerce e-mailov.
Zobrazovanie s DPH a bez DPH cien vo WooCommerce
##Pridanie moznosti zobrazovania obidvoch cien vo WooCommerce
# Zdroj kodu: https://tomjesch.com/display-woocommerce-products-with-and-without-tax/
function edit_price_display() {
global $product;
$price = $product->price;
$price_incl_tax = $price + round($price * ( 20 / 100 ), 2);
$price_incl_tax = number_format($price_incl_tax, 2, ",", ".");
$price = number_format($price, 2, ",", ".");
$display_price = '<span class="price">';
$display_price .= '<span class="amount s-dph">€ ' . $price_incl_tax .'<small class="woocommerce-price-suffix"> s DPH</small></span>';
$display_price .= '<br>';
$display_price .= '<span class="amount bez-dph">€ ' . $price .'<small class="woocommerce-price-suffix"> bez DPH</small></span>';
$display_price .= '</span>';
echo $display_price;
}
add_filter('woocommerce_get_price_html', 'edit_price_display', 10, 2);
add_filter('woocommerce_get_variable_price_html', 'edit_price_display', 10, 2);
function edit_selected_variation_price( $data, $product, $variation ) {
$price = $variation->price;
$price_incl_tax = $price + round($price * ( 21 / 100 ), 2);
$price_incl_tax = number_format($price_incl_tax, 2, ",", ".");
$price = number_format($price, 2, ",", ".");
$display_price = '<span class="price">';
$display_price .= '<span class="amount bez-dph">€ ' . $price .'</span>';
$display_price .= '<br>';
$display_price .= '<span class="amount s-dph">€ ' . $price_incl_tax .'<small class="woocommerce-price-suffix"> s DPH</small></span>';
$display_price .= '</span>';
$data['price_html'] = $display_price;
return $data;
}
add_filter( 'woocommerce_available_variation', 'edit_selected_variation_price', 10, 3);Na teraz posledným kódom je zobrazovanie dvojitej ceny pri produktoch a v katalógu produktov. Kód umožní zobraziť cenu s DPH aj bez DPH a zároveň štýlovať tieto ceny podľa svojho uváženia.
Zobraziť obe ceny je možné aj pomocou nastavenia WooCommerce „Price suffix“, ale je problematické ich potom oddelene štýlovať prípadne zobraziť pod sebou, nakoľko Woo ich dá do jedného riadku.
Tieto kódy som pridal do svojej témy Xtrodinary a sú aktuálne k dňu 21.02.2021. Podľa potreby ich možno v budúcnosti budem meniť, upravovať, odstraňovať či pridávať nové. Pre aktuálny zoznam kódov integrovaných do odvodenej témy Xtrodinary pre Divi je potrebné si vždy stiahnuť aktuálnu verziu témy.
Tieo kódy si môžete skopírovať a použiť ich vo svojej vlastnej odvodenej téme. Môžete si stiahnuť tému Xtrodinary a upraviť kódy v nej podľa seba. Je to len na vás.