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
3 komentarze do wpisu “Unyson Framework – Dodanie 1/7 kolumny do edytora wizualnego”
Janunsz Kamiński
Rozumiem, że chodzi o tym rozwiązaniu – unyson.io? Bo nie znalazłem linku na stronie.
Mateusz Jaworowicz[ Autor Artykułu ]
Jest na końcu artykułu, nad reakcjami.
Janunsz Kamiński
Hehe, to tak patrzyłem :)