Razvoj WordPress Tema Upotrebom Responsive Frameworka

Framework je standardizovani skup koncepata, kriterijuma i praktičnih pravila za rešavanje uopštenog tipa problema, koji se može koristiti za lakši pristup i rešavanje problema slične prirode.

Kada je u pitanju web dizajn, framework se može definisati kao paket koji se sastoji od strukture fajlova i foldera standardizovanog koda (npr. HTML, CSS, JavaScript dokumenti itd.) koji mogu biti korišćeni kao polazna osnova u razvoju web sajtova.

Smisao framework-a je da pruži uopštenu strukturu za sajt da developeri ne bi morali raditi sve od početka i da mogu iskoristiti postojeći kod, što doprinosi velikoj uštedi vremena.

U osnovi postoje dve vrste framework-a za razvoj web sajtova:

  • Front-end Framework (CSS framework okruženja – Bootstrap, Foundation, Grid, Less…)
  • Back-end Framework (Symphony, Ruby On Rails, Spring, Django…)

CSS framework se obično sastoji od paketa fajlova i foldera (HTML, CSS, JavaScript) standardizovanog koda.

Kako odabrati pravi framework?

Odabir pravog framework-a zavisi od konkretnog projekta i zahteva sajta. Kriterijumi za odabir framework-a su:
– brzina instalacije
– lakoća korišćenja
– broj opcija koje nude
– mogućnost integracije sa drugim sistemima
– podrška

Kako integrisati responsive CSS framework u WordPress?

Ukoliko želite da samostalno razvijate novu WordPress temu uz pomoć CSS framework-a potrebno je da se on integriše u postojeću strukturu teme. Objasnićemo kompletan postupak uz upotrebu Foundation framework-a, a na sličan način možete pozvati Bootstrap ili neki drugi framework sa razlikom u nazivima fajlova i strukturi foldera.

Ceo proces se sastoji iz tri koraka:

  1. preuzimanje i integracija frameworka
  2. dodavanje uslova za Internet explorer
  3. rad sa framework-om

Najpre je potrebno preuzeti Foundation framework sa oficijalnog web sajta i dodati preuzete CSS i JS fajlove u direktorijum teme. Sledeći korak je pozivanje pomenutih fajlova u functions.php fajlu.

Najlakši način za poziv Foundation CSS i JavaScript fajlova u temi je upotrebom  wp_enqueue_script  i wp_enqueue_style funkcija.

Kod za poziv CSS fajla

[php]
function responsive_style ()
{
//registrovanje stilova za vašu temu
wp_register_style( ‘foundation-style’, get_template_directory_uri() . ‘/css/foundation.css’, array(), ‘all’ );
wp_register_style( ‘foundation-appstyle’, get_template_directory_uri() . ‘/css/app.css’, array(), ‘all’);
wp_enqueue_style( ‘foundation-style’ );
wp_enqueue_style( ‘foundation-appstyle’ );
}
add_action( ‘wp_enqueue_scripts’, ‘responsive_style’ );
[/php]

Kod za pozivanje JavaScript fajla

[php]
function responsive_script ()
{
//registrovanje skripti za vašu temu
wp_register_script(‘foundation-mod’, get_template_directory_uri() . ‘/js/modernizr.foundation.js’, array( ‘jquery’ ), true );
wp_register_script(‘foundation-main’, get_template_directory_uri() . ‘/js/foundation.js’, true );
wp_register_script(‘foundation-app’, get_template_directory_uri() . ‘/js/app.js’, true );
wp_enqueue_script( ‘foundation-mod’ );
wp_enqueue_script( ‘foundation-main’ );
wp_enqueue_script( ‘foundation-app’ );
}
add_action( ‘wp_enqueue_scripts’, ‘responsive_script’, 5 );
[/php]

Napomena: struktura i nazivi fajlova zavise od verzije framework-a, pa ukoliko imate drugačiju strukturu i nazive samo zamenite parametre sa odgovarajućim.

Sačuvajte i postavite novi functions.php u direktorijum teme, a zatim uradite proveru u kodu stranice da bi videli da li su svi stilovi i skripte paravilno pozvani (koristite kombinaciju tastera CTRL+U u browser-u za proveru izvornog koda stranice).

Dodavanje uslova za IE

Da bi se Foundation stilovi pravilno prikazali u Internet Exploreru u header.php fajl teme dodajte sledeće uslove:

[html]
<!–[if lt IE 9]>
<link rel=“stylesheet“ href=“/css/ie.css“>
<![endif]–>

<!–IE rešenje za HTML5 tagove–>
<!–[if lt IE 9]>
<script src=“http://html5shiv.googlecode.com/svn/trunk/html5.js“></script>
<![endif]–>
[/html]

Rad sa Foundation framework-om

Sada kada je Foundation pozvan u temi možete da radite na dizajnu upotrebom standardnog grid sistema. Kao i druga responsive okruženja, Foundation se sastoji od 12 kolona sa predefinisanim setovima različitih elemenata za web stranice, poput dugmića, tabova, tabela i još mnogo toga. Za detaljnija  upustva za rad sa ovim framework-om pogledajte Foundation dokumentaciju.

Gotova rešenja

Ukoliko želite da preskočite ovaj korak, možete započeti za temama koje već u sebi imaju ugrađen CSS responsive framework. Evo nekih odličnih tema koje u sebi sadrže Foundation i Bootstrap.

Cherry Framework

cherry-framework

Foundation for WordPress

foundation-for-wordpress

Reverie

reverie

WP Bootstrap

wp-bootstrap

Zaključak

Kombinacija front-end responsive web framework-a sa WordPress-om je dobro rešenje kada želite da izgradite temu unikatnog dizajna on nule. Kao što ste videli na primeru Foundation framework-a sama integracija na WordPress nije komplikovana i sličan postupak važi i za ostala okruženja (Bootstrap, Grid..).

Responsive dizajn je trend koji je sve više popularan i ukoliko ga implementirate na svom budućem sajtu to može biti ključno za uspeh.

Takođe pogledajte i 12 najboljih framework-a WordPress teme.

Jovan Ivezic

E-business and internet marketing specialist.