Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

Responsive Web Design tehnike u WordPress-u

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Chargement dans…3
×

Consultez-les par la suite

1 sur 19 Publicité

Responsive Web Design tehnike u WordPress-u

Télécharger pour lire hors ligne

Responsive Web Design tehnike koje se mogu primijeniti i na WordPress te kako poboljšati sam responsive dio Vaše web stranice putem WordPress-a!

Predavanje sa WordPress Meetup-a.

Responsive Web Design tehnike koje se mogu primijeniti i na WordPress te kako poboljšati sam responsive dio Vaše web stranice putem WordPress-a!

Predavanje sa WordPress Meetup-a.

Publicité
Publicité

Plus De Contenu Connexe

Diaporamas pour vous (20)

Publicité

Similaire à Responsive Web Design tehnike u WordPress-u (20)

Plus récents (20)

Publicité

Responsive Web Design tehnike u WordPress-u

  1. 1. Responsive Web Design tehnike u WordPressu Igor Benić WP Meetup Zagreb 19.09
  2. 2. Sadržaj • O meni • Što je RWD? • Izrada RWD-a • Slike u RWD-u • WordPress i RWD • Slike u WordPress-u • WordPress Mobile • Pitanja
  3. 3. O meni • Front End Developer @ Multilink • Co-founder – www.lakotuts.com • PSD -> PHP • Autor knjige: WordPress na Bootstrap-u 3.x
  4. 4. O meni • Bootstrap 3 • Izrada osnovne i naprednih tema • Customizer API • Settings API • AJAX http://leanpub.com/wpb3
  5. 5. Što je RWD? • Stranica (sadržaj) se prilagođava ekranu – Točke izmjene • Vrste RWD-a – Responsive – Adaptive • Sadržaj • Brzina
  6. 6. Izrada RWD-a • Mobile First • Desktop First • Korištenje Alata • CSS od nule • Korištenje Frameworka
  7. 7. Načini izrade - Framework • Bootstrap 3 • Foundation • Skeleton • Gumby • Mnogi drugi
  8. 8. Slike u RWD-u • Nisu jednostavne – Servirati samo potrebnu sliku – Paziti i na Retina ekrane • Moguća rješenja – Picturefill 2.0 – BttrLazyLoading
  9. 9. Slike u RWD-u – PictureFill 2.0 <picture> <!--[if IE 9]><video style="display: none;"><![endif]--> <source srcset="examples/images/extralarge.jpg" media="(min- width: 1000px)"> <source srcset="examples/images/large.jpg" media="(min-width: 800px)"> <source srcset="examples/images/large@2.jpg" media="(min- width: 800px) and (-webkit-min-device-pixel-ratio: 2)"> <!--[if IE 9]></video><![endif]--> <img srcset="examples/images/medium.jpg" alt="A giant stone face at The Bayon temple in Angkor Thom, Cambodia"> </picture>
  10. 10. Slike u RWD-u – BttrLazyLoading <img id="yourImageId" class="bttrlazyloading" data-bttrlazyloading-xs-src="img/768x200.gif" data-bttrlazyloading-xs-width="768" data-bttrlazyloading-xs-height="200" data-bttrlazyloading-sm-src="img/345x250.gif" data-bttrlazyloading-sm-width="345" data-bttrlazyloading-sm-height="250" data-bttrlazyloading-md-src="img/455x350.gif" data-bttrlazyloading-md-width="455" data-bttrlazyloading-md-height="350" d data-bttrlazyloading-lg-src="img/360x300.gif" data-bttrlazyloading-lg-width="360" data-bttrlazyloading-lg-height="300" />
  11. 11. WordPress i RWD RESS Pružanje sadržaja ovisno o uređaju Prilagodba sadržaja na serveru
  12. 12. Slike u WordPress-u • Različite verzije za istu sliku – add_image_size(“verzija”, širina, visina, [true | false]); • add_filter(“post_thumbnail”, funkcija_za_promjenu);
  13. 13. Slike u WordPress-u - Thumbnailovifunction wpb3_thumbnail_html($html, $post_id, $aid, $sizeThumb, $attr){ if($sizeThumb == "slika-clanka"){ $sizes = array('slika-clanka‘, 'slika-clanka-md‘, 'slika-clanka-sm‘, 'slika-clanka-xs’); $img = "<img class='bttrLazyLoading img-responsive' alt='".get_the_title()."'"; $sizeBttr = ""; $width = ""; $height = ""; $aid = (!$aid) ? get_post_thumbnail_id() : $aid; foreach ( $sizes as $size ) { $url = wp_get_attachment_image_src( $aid, $size ); switch ($size) { case 'slika-clanka': $sizeBttr = "lg"; $width = "750"; $height= "353"; break; ... } $img .= " data-bttrlazyloading-".$sizeBttr."-src='". $url[0] ."' "; $img .= " data-bttrlazyloading-".$sizeBttr."-width='". $width ."' "; $img .= " data-bttrlazyloading-".$sizeBttr."-height='". $height ."' "; } $img .= " />"; return $img; } return $html; } add_filter( 'post_thumbnail_html', 'wpb3_thumbnail_html', 10, 5);
  14. 14. Slike u WordPress-u - Content • Filtrirati slike prilikom ispisa ili obrisati (na mobitelima) – add_filter(‘the_content’, ‘funkcija za filtriranje slika’) • CSS: – .post img {max-width:100%;height:auto;} function slike_u_content() { global $post; $html = preg_replace_callback( '#(<imgs[^>]*src)="([^"]+)"#', "callback_img", get_the_content($post->ID) ); return $html; } function callback_img($match) { list(, $img, $src) = $match; $url = get_stylesheet_directory_uri().'/img_placeholder.gif'; return "$img="$url" data-href="$src" "; }
  15. 15. Slike u WordPress-u - LakoTuts • Filtrirati slike prilikom ispisa – add_filter(‘the_content’, ‘funkcija za filtriranje slika’) • CSS: – .post img {max-width:100%;height:auto;} $attachment_id = lakotuts_get_attachment_id_from_url($header_image); $image480 = wp_get_attachment_image_src( $attachment_id, 'image480' ); $image768 = wp_get_attachment_image_src( $attachment_id, 'image768' ); $image1024 = wp_get_attachment_image_src( $attachment_id, 'image1024' ); $image1920 = wp_get_attachment_image_src( $attachment_id, 'image1920' ); echo ‘ #masthead { background-image: url(''. $image768[0] .''); } '; echo '@media (min-width:768px) { #masthead { background-image: url(''. $image768[0] .''); }}'; echo '@media (min-width:1024px) { #masthead { background-image: url(''. $image1024[0] .''); }}'; echo '@media (min-width:1200px) { #masthead { background-image: url(''. $image1920[0] .''); }}';
  16. 16. WordPress Mobile • wp_mobile() • WURFL baza podataka • github.com/jcasabona/wp-ress/
  17. 17. WordPress Mobile function wpr_detect_mobile_device(){ try{ $config = new WurflCloud_Client_Config(); $config->api_key = WPR_API_KEY; $client = new WurflCloud_Client_Client($config); $client->detectDevice(); return $client->getDeviceCapability('is_wireless_device'); } catch (Exception $e){ return wp_is_mobile(); } } define('WPR_IS_MOBILE', wpr_detect_mobile_device());
  18. 18. WordPress Mobile • Izbornici za Desktop i Mobitele/Tablete – Izbjegnut dvostruki HTML sadržaj • Prikaz pojedinog sadržaja samo na zahtjev – Komentari – Sidebar
  19. 19. Pitanja ?

×