Unyson Foremwork to kolejne ułatwienie w stronę użytkowników i developerów WordPressa – to nie tylko edytor wizualny, ale też system backupu czy możliwości tworzenia własnych demo data dla pisanych przez nas motywów.

Jakiś czas temu dostałem projekt, który wymagał, aby jedna z sekcji była podzielona na 7 kolumn, a więc zaczęły się poszukiwania.

Dodanie wsparcia dla 7 kolumn w Unyson Foremwork 

Podczas poszukiwania rozwiązania tego problemu spotkałem się z bardzo dużą ilością dziwnych porad np. modyfikacji plików CSS we wtyczce jak i samych plików konfiguracyjnych. Wiele porad dotyczyło motywów konkretnej firmy co utrudniało znalezienie rozwiązania uniwersalnego dla każdej ze stron, która chciałaby to rozwiązanie wdrożyć.

Dodanie funkcji do motywu potomnego 

W pierwszej kolejności do pliku functions.php (najlepiej motywu potomnego) dodaj poniższy kod:

add_filter(
    'fw_builder_item_widths:page-builder',
    '_filter_theme_custom_page_builder_columns'
);

function _filter_theme_custom_page_builder_columns($columns) {
    $columns['1_7'] = array(
        'title' => '1/7',
        'backend_class' => 'fw-col-sm-7col', 
        'frontend_class' => 'fw-col-xs-12 fw-col-sm-7col', 
    );

    return $columns;
}

Kod jest tutaj dość jasny – Dodaj nazwę dla układu, określ styl dla użytkowników (frontend), określ styl dla admina i edytora (backend). Pamiętaj, że style mogą różnić się nazwą w każdym motywie!

Dodaj style nowego układu w style.css motywu

Tutaj operacja też dość prosta – wystarczy skopiować style odpowiedzialne za 1/6 i zmienić wielkość % kolumny oraz nazwę, w naszym przypadku musimy ustalić szerokość na 14.285714% (100/7)

.fw-col-sm-7col {
		width: 14.285714%;
	}

.fw-col-sm-7col {
	position: relative;
	min-height: 1px;
	padding-left: 15px;
	padding-right: 15px;
	box-sizing: border-box;
}

@media (min-width: 768px) {
	.fw-col-sm-7col {
		float: left;
	}
}

Dodaj style CSS do kokpitu WordPress

Tutaj musimy wykorzystać kolejną funkcję, akcję którą dopisujesz do functions.php, a mianowicie admin_head 

add_action('admin_head', 'unyson_7col');

function unyson_7col() {
  echo '<style>
    @media (min-width: 783px) {
	.fw-col-sm-7col {
		float: left;
	}
  }
  .fw-col-sm-7col {
		width: 14.285714%;
	}
  .fw-col-sm-7col {
	position: relative;
	min-height: 1px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
  </style>';
}

Tym sposobem uzyskujesz niestandardową wielkość kolumn – w zasadzie możesz tak zrobić z każdą wielkością powtarzając instrukcję zmieniając jej parametry.

Foremwork pobierzesz stąd: Unyson Foremwork for WordPress