Přeskočit na obsah

Neve hacky

  • Neve

Úprava chování tématu

Šablona Neve neumožňuje nastavit blok Skupina tak, aby její obsah nepřevzal nastavení plné šířky, pokud je tak blok Skupina nastaven. Jak to vyřešit?

  1. Přidat soubor theme.json do rootu child theme.
{
  "$schema": "https://schemas.wp.org/trunk/theme.json",
  "version": 2,
  "settings": {
    "layout": {
      "contentSize": "1170px",
      "wideSize": "1170px"
    }
  }
}
Živá ukázka
Nastavení bloku

2. Pokud chybí child theme, je možné toto nahradit snippetem do WPCode.

/**
 * DD - Vynucení constrained layoutu (šířka obsahu) pro Gutenberg bloky
 * na klasickém tématu Neve bez theme.json souboru.
 *
 * PROBLÉM:
 * Neve je klasické (ne block/FSE) téma a neobsahuje soubor theme.json.
 * Bez něj WordPress nezná hodnoty "contentSize" / "wideSize", takže:
 *   - v editoru chybí panel Layout u bloků Skupina/Sloupce,
 *   - na frontendu se negeneruje CSS s max-width, takže se vnitřní
 *     bloky (např. Sloupce) uvnitř fullwidth Skupiny roztáhnou na 100 %
 *     místo na šířku stránky.
 *
 * ŘEŠENÍ:
 * Soubor theme.json nelze umístit přímo do rodičovského tématu (Neve),
 * protože by se smazal při každé aktualizaci tématu, a web nemá
 * child theme. Proto tuto funkčnost simulujeme třemi filtry, které
 * dohromady nahrazují to, co by jinak dělal fyzický theme.json.
 *
 * DŮLEŽITÉ: Všechny tři filtry jsou potřeba současně - řeší tři
 * oddělené interní kontroly WordPressu (data / editor UI / render).
 * Odebrání kteréhokoli z nich funkčnost částečně nebo úplně rozbije.
 */

// Centrální nastavení šířky - stačí měnit jen tady.
define( 'DD_LAYOUT_CONTENT_SIZE', '1170px' );


/**
 * 1) DATA: Doplní contentSize/wideSize do sloučených theme.json dat.
 *
 * Filtr wp_theme_json_data_theme se aplikuje přesně na vrstvu, kterou
 * by jinak WordPress načetl ze souboru theme.json v tématu. I když
 * soubor neexistuje, tahle vrstva jde filtrem doplnit - výsledek se
 * pak sloučí s výchozími hodnotami jádra (core defaults).
 *
 * Bez tohoto filtru by WordPress vůbec nevěděl, jakou šířku má použít.
 */
add_filter( 'wp_theme_json_data_theme', function( $theme_json ) {
    return $theme_json->update_with( array(
        'version'  => 2,
        'settings' => array(
            'layout' => array(
                'contentSize' => DD_LAYOUT_CONTENT_SIZE,
                'wideSize'    => DD_LAYOUT_CONTENT_SIZE,
            ),
        ),
    ) );
}, 20 );


/**
 * 2) EDITOR UI: Zapne zobrazení panelu Layout v Gutenbergu.
 *
 * WordPress interně kontroluje, jestli aktivní téma "podporuje layout",
 * pomocí funkce, která se ptá na FYZICKOU EXISTENCI souboru theme.json
 * na disku - ne na to, jestli jsou layout data dostupná (což jsme
 * zajistili filtrem výše). Bez tohoto filtru se v editoru panel Layout
 * u bloků Skupina/Sloupce vůbec nezobrazí, i když data v pozadí
 * správně existují.
 */
add_filter( 'block_editor_settings_all', function( $settings ) {
    $settings['supportsLayout'] = true;
    return $settings;
}, 20 );


/**
 * 3) FRONTEND RENDER: Doplní contentSize přímo do atributů bloku.
 *
 * I s filtry 1) a 2) se u klasických témat bez theme.json nespoléhavě
 * generuje CSS pravidlo s max-width pro bloky, které nemají vlastní
 * contentSize explicitně nastavený (tzn. uživatel v editoru nechal
 * pole "Šířka obsahu" prázdné a spoléhá na globální výchozí hodnotu).
 *
 * Tento filtr běží při renderu každého bloku, a pokud najde blok typu
 * Skupina/Sloupce s layoutem "constrained" bez vlastní contentSize,
 * hodnotu mu tam sám doplní - čímž donutí WordPress vygenerovat
 * potřebné CSS (max-width + centrování) i na frontendu.
 */
add_filter( 'render_block_data', function( $parsed_block ) {

    // Bloky, u kterých má smysl vynucovat šířku obsahu.
    $constrained_blocks = array( 'core/group', 'core/columns', 'core/column' );

    if (
        in_array( $parsed_block['blockName'], $constrained_blocks, true )
        && isset( $parsed_block['attrs']['layout']['type'] )
        && 'constrained' === $parsed_block['attrs']['layout']['type']
        && empty( $parsed_block['attrs']['layout']['contentSize'] )
    ) {
        $parsed_block['attrs']['layout']['contentSize'] = DD_LAYOUT_CONTENT_SIZE;
        $parsed_block['attrs']['layout']['wideSize']    = DD_LAYOUT_CONTENT_SIZE;
    }

    return $parsed_block;
} );
  1. WPCode → Add Snippet → Add Your Custom Code (New Snippet)
  2. Code Type: PHP Snippet
  3. Vložte kód výše (bez <?php tagu, WPCode ho přidává sám)
  4. Insertion: Auto Insert / Run Everywhere
  5. Uložte a aktivujte

Živá ukázka

Daniel Danielčák

Daniel Danielčák

Chorý mozek, pachatel tratí. Ve volném čase se kromě cyklistiky věnuji programování internetových aplikací v jazyce HTML, CSS, PHP, MySQL a Javascript. Pracuji jako designér a modelér porcelánu.