Cambiare breakpoint in Storefront

[milazzo87]

Cambiare breakpoint in Storefront

Ciao a tutti. Ho realizzato un e-commerce utilizzando WooCommerce e un tema child di Storefront creato da me.

Mi trovo però davanti ad un problema: il breakpoint del menu mobile è fissato su Storefront a 768px. Risultato, aprendo il sito in modalità landscape con il mio Galaxy A71 (smartphone non minuscolo ma nemmeno tra i più grandi in circolazione) mi viene mostrato il menu desktop.

Ho provato, senza risultato, a cambiare il breakpoint prendendo la parte interessata dallo style.css di Storefront, copiandola nello style.css del tema child e cambiando la min-width da 768px a 991px.

Sono riuscito momentaneamente a risolvere il problema modificando la min-width direttamente dallo style.css del tema genitore. Ora il breakpoint va bene, ma in questo modo perderò la modifica al primo aggiornamento di Storefront.

Leggendo vari articoli online, ho letto che bisognerebbe modificare il breakpoint in SASS e poi ricompilare il tema, cosa che non sono in grado di fare.

Concludendo, esiste un modo per modificare il breakpoint agendo unicamente sul mio tema child, in modo da non perdere la modifica fatta al primo aggiornamento di Storefront?

Grazie in anticipo.

[overclokk]

Ciao @milazzo87
la best practice da usare sempre quando si crea un child theme è quella di deregistrare completamente lo stile dal tema genitore e gestire tutto nel tema figlio, così puoi decidere se usare un compilatore come SASS o andare di CSS.

[milazzo87]

Grazie per la risposta, @overclokk

Scusa se la domanda è banale (non sono un professionista), ma cosa intendi con "deregistrare completamente lo stile dal tema genitore e gestire tutto nel tema figlio"?

[overclokk]

@milazzo87 allora qui puoi trovare la documentazione sui child theme https://developer.wordpress.org/themes/advanced-topics/child-themes/

E per deregistrare lo stile si usa la funzione wp_deregister_style( $handle ) https://developer.wordpress.org/reference/functions/wp_deregister_style/ dove $handle è il nome dello stile usato nel parent.

Quindi nel tuo tema child, puoi creare un nuovo file per esempio assets.php, che andrai a includere nel file functions.php del tema child usando require nome-file.php dove nome file usi il nome del file che hai creato, se lo hai creato in una directory allora devi specificare il percorso esatto qui la documentazione a require https://www.php.net/manual/en/function.require.php

Nei due link sopra ci sono degli esempi di come registrare e deregistrare gli assets, vedi se riesci a risolvere se no posta qui il codice che hai scritto che non ti funziona e vediamo di sistemarlo.

[milazzo87]

Scusa, ma non mi ci raccapezzo.

Per capirci, nel tema genitore ho un pezzo di CSS del genere:

@media (min-width:768px) {
	table.shop_table_responsive tbody tr td,
	table.shop_table_responsive tbody tr th {
		text-align: left
	}
	.site-header {
		padding-top: 2.617924em;
		padding-bottom: 0
	}
	.site-header .site-branding {
		display: block;
		width: 100%;
		float: left;
		margin-left: 0;
		margin-right: 0;
		clear: both
	}
	.site-header .site-branding img {
		height: auto;
		max-width: 230px;
		max-height: none
	}
	.woocommerce-active .site-header .site-branding {
		width: 73.9130434783%;
		float: left;
		margin-right: 4.347826087%
	}
	.woocommerce-active .site-header .site-search {
		width: 21.7391304348%;
		float: right;
		margin-right: 0;
		clear: none
	}
	[... Mancano molte altre righe che ho tagliato per comodità] 
}

Io dovrei riuscire a trasformare quel min-width:781px in min-width:991px. Come faccio a deregistrare quella parte del CSS originale?

[overclokk]

@milazzo87 Il concetto è che devi fare in modo di non caricare il css del tema genitore, per farlo devi deregistrarlo con la funzione dedicata che ti ho indicato sopra e questo si fa in php, quando è deregistrato quello del tema genitore dopo ti carichi il tuo css dal tema figlio (che sarà il css del genitore che hai modificato) come stai facendo ora.

Come lo carichi il css dal tema figlio?

[milazzo87]

Grazie mille overclock. Il tema child è stato creato così (copio dal functions.php, ho fatto tutto tramite un plugin):

function orbisius_ct_riu_theme_child_theme_enqueue_styles() {
    $parent_style = 'orbisius_ct_riu_theme_parent_style';
    $parent_base_dir = 'storefront';

    wp_enqueue_style( $parent_style,
        get_template_directory_uri() . '/style.css',
        array(),
        wp_get_theme( $parent_base_dir ) ? wp_get_theme( $parent_base_dir )->get('Version') : ''
    );

    wp_enqueue_style( $parent_style . '_child_style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );
}

add_action( 'wp_enqueue_scripts', 'orbisius_ct_riu_theme_child_theme_enqueue_styles' );

[overclokk]

In quello snippet quello che viene fatto è caricare il CSS del tema genitore e poi caricare il CSS del tema figlio, quindi la parte che carica il CSS del tema genitore va tolta (il primo wp_enqueue_style()), poi devi mettere un array vuoto nel terzo parametro della funzione wp_enqueue_style(), dove c'è ora array( $parent_style ) per esempio puoi mettere [] (che è un array vuoto), nel tuo CSS poi incolli tutto il contenuto del CSS del tema genitore e modifichi quello.

Poi ti devi assicurare che non venga caricato nessun CSS dal tema genitore, con i tasti CTRL U puoi guardare nel sorgente della pagina e nel caso toglierlo come ho detto sopra.

[milazzo87]

Grazie mille @overclokk ! Ho provato tutto in locale e funziona perfettamente.

Una sola domanda, visto che ho praticamente sostituito tutto il CSS del tema genitore, potrei avere qualche problema in caso di aggiornamenti di Storefront?

[milazzo87]

EDIT: Mi tocca correggermi, alcuni elementi vengono ancora presi dal CSS del tema genitore. Copio e incollo la parte del mio functions.php relativa al tema child. Dove sbaglio?

function orbisius_ct_riu_theme_child_theme_enqueue_styles() {
    $parent_style = 'orbisius_ct_riu_theme_parent_style';
    $parent_base_dir = 'storefront';


    wp_enqueue_style( $parent_style . '_child_style',
        get_stylesheet_directory_uri() . '/style.css',
        array( [] ),
        wp_get_theme()->get('Version')
    );
}

add_action( 'wp_enqueue_scripts', 'orbisius_ct_riu_theme_child_theme_enqueue_styles' );

[overclokk]

@milazzo87 prima ti faccio solo una correzione, nel terzo parametro della funzione che ti ho detto ci va solo [] e non array( [] ).

Poi installa Query Monitor (lo trovi sulla repo), poi quando è attivato nel front-end del sito sulla barra nera in alto dovresti vedere una nuova voce di menù, se ci passi sopra col mouse si apre una tendina, clicca su "Fogli di syle" o "Stylesheet", guarda nella lista se viene caricato anche il css dal genitore, se si scrivi la "handle" qui.

[milazzo87]

Innanzitutto grazie per la pazienza infinita.

Ora il mio functions.php è come di seguito, inoltre ho copiato tutto lo style.css del file genitore in style.css del mio tema child (correggendo il parametro che mi interessa, naturalmente.

function orbisius_ct_theme_child_theme_enqueue_styles() {
    $parent_style = 'orbisius_ct_riu_theme_parent_style';
    $parent_base_dir = 'storefront';


    wp_enqueue_style( $parent_style . '_child_style',
        get_stylesheet_directory_uri() . '/style.css',
        [],
        wp_get_theme()->get('Version')
    );
}

add_action( 'wp_enqueue_scripts', 'orbisius_ct_riu_theme_child_theme_enqueue_styles' );

Però, purtroppo, continuo ad avere elementi presi dal CSS genitore e, infatti, su Query monitor vedo il CSS di Storefront (Handle: storefront-style, Sorgente: wp-content/themes/storefront/style.css).

Non so se ho fatto una cavolata, comunque ho provato anche a sostituire la riga [] con array(), ma il risultato non cambia.

[milazzo87]

Forse ho risolto aggiungendo a functions.php

add_action( 'wp_enqueue_scripts', 'remove_default_stylesheet', 20 );
 function remove_default_stylesheet() {
     wp_deregister_style( 'storefront-style' );
}

Corretto? Ho copiato dalla pagina che mi hai linkato qualche messaggio fa.

[overclokk]

@milazzo87 ha detto in Cambiare breakpoint in Storefront:

Non so se ho fatto una cavolata, comunque ho provato anche a sostituire la riga [] con array(), ma il risultato non cambia.

Questa è una correzione perché com'era scritto era sbagliato.

@milazzo87 ha detto in Cambiare breakpoint in Storefront:

Corretto? Ho copiato dalla pagina che mi hai linkato qualche messaggio fa.

Se ora lo stile non te lo carica più va bene.

[milazzo87]

Lo stile non me lo carica, ma non mi caricava più neanche lo stile dei prodotti Woocommerce. Credo di aver risolto copianto del css del tema child anche tutto il contenuto /assets/css/woocommerce/woocommerce.css e ora sembra funzionare tutto (lo sto ancora testando in locale).

Il problema che però mi pongo è il seguente: potrei avere problemi con eventuali aggiornamenti di Storefront, visto che ho tolto di mezzo due dei file css originali?

[overclokk]

Se non ti caricava più lo stile di WC è un problema diverso.

In quel caso eviterei di mettere tutto nello stesso css, quanto pesa ora il file?

@milazzo87 ha detto in Cambiare breakpoint in Storefront:

Il problema che però mi pongo è il seguente: potrei avere problemi con eventuali aggiornamenti di Storefront, visto che ho tolto di mezzo due dei file css originali?

Al massimo solo qualche elemento che potrebbe cambiare lo stile se dal genitore cambiano qualche classe css, risolvibile riapplicando lo stile mancante.

[milazzo87]

Lo stile di Woocommerce non me lo caricava più una volta inserito wp_deregister_style( 'storefront-style' ) nel functions.php. Ora il file style.css pesa 122kb rispetto ai circa 40kb prima delle modifiche.

Dici che avevo sbagliato qualcosa nel deregister? Cosa mi consigli di fare?

[overclokk]

Dovresti cercare nel tema genitore lo snippet che registra lo stile, che lo voglio vedere, mi sembra strano.

[milazzo87]

Onestamente non saprei dove guardare, ti copio il functions.php di Storefront (sperando di aver quanto meno azzeccato il file giusto).

<?php
/**
 * Storefront engine room
 *
 * @package storefront
 */

/**
 * Assign the Storefront version to a var
 */
$theme              = wp_get_theme( 'storefront' );
$storefront_version = $theme['Version'];

/**
 * Set the content width based on the theme's design and stylesheet.
 */
if ( ! isset( $content_width ) ) {
	$content_width = 980; /* pixels */
}

$storefront = (object) array(
	'version'    => $storefront_version,

	/**
	 * Initialize all the things.
	 */
	'main'       => require 'inc/class-storefront.php',
	'customizer' => require 'inc/customizer/class-storefront-customizer.php',
);

require 'inc/storefront-functions.php';
require 'inc/storefront-template-hooks.php';
require 'inc/storefront-template-functions.php';
require 'inc/wordpress-shims.php';

if ( class_exists( 'Jetpack' ) ) {
	$storefront->jetpack = require 'inc/jetpack/class-storefront-jetpack.php';
}

if ( storefront_is_woocommerce_activated() ) {
	$storefront->woocommerce            = require 'inc/woocommerce/class-storefront-woocommerce.php';
	$storefront->woocommerce_customizer = require 'inc/woocommerce/class-storefront-woocommerce-customizer.php';

	require 'inc/woocommerce/class-storefront-woocommerce-adjacent-products.php';

	require 'inc/woocommerce/storefront-woocommerce-template-hooks.php';
	require 'inc/woocommerce/storefront-woocommerce-template-functions.php';
	require 'inc/woocommerce/storefront-woocommerce-functions.php';
}

if ( is_admin() ) {
	$storefront->admin = require 'inc/admin/class-storefront-admin.php';

	require 'inc/admin/class-storefront-plugin-install.php';
}

/**
 * NUX
 * Only load if wp version is 4.7.3 or above because of this issue;
 * https://core.trac.wordpress.org/ticket/39610?cversion=1&cnum_hist=2
 */
if ( version_compare( get_bloginfo( 'version' ), '4.7.3', '>=' ) && ( is_admin() || is_customize_preview() ) ) {
	require 'inc/nux/class-storefront-nux-admin.php';
	require 'inc/nux/class-storefront-nux-guided-tour.php';
	require 'inc/nux/class-storefront-nux-starter-content.php';
}

/**
 * Note: Do not add any custom code here. Please use a custom plugin so that your customizations aren't lost during updates.
 * https://github.com/woocommerce/theme-customisations
 */

[overclokk]

Così mi dice poco, appena ho un attimo me lo installo e ci guardo