Foundation 6 i WordPress

Foundation określany jest przez swoich twórców jako najbardziej zaawansowany framework do tworzenia responsywnych witryn, posiadający całą masę przydatnych wtyczek, które na pewno zostaną wykorzystane w niejednym projekcie. Jak mam porównywać Bootstrapa do FF, to FF zyskał odrazu moje uznanie, nie umniejszając temu pierwszemu 😉 O samym FF6 rozpisywać się nie będę, wszystkie informacje można znaleść na stronie autorów.

Ok, czas połączyć Foundation 6 z WordPressem. Po skonfigurowaniu i pobraniu FF6 umieszczamy fragment kodu w header.php

 <link type="text/css" rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/foundation.min.css">
 <link type="text/css" rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/custom.css">
 <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/vendor/jquery.js"></script>
 <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/vendor/foundation.min.js"></script>

Aby FF6 zadziałał w footer.php dodajmy tylko

W paczce, którą pobraliśmy nie ma pliku custom.css jest to plik, który musimy stworzyć i w nim będziemy nadpisywać i tworzyć kod css.

<script>
    $(document).foundation();
</script>

W ten sposób FF6 został zaimplementowany do naszego szablonu WordPress.