Responsive Web Design tehnike u WordPress-u

19
Responsive Web Design tehnike u WordPressu Igor Benić WP Meetup Zagreb 19.09

Transcript of Responsive Web Design tehnike u WordPress-u

Page 1: Responsive Web Design tehnike u WordPress-u

Responsive Web Design

tehnike u WordPressu

Igor Benić WP Meetup Zagreb 19.09

Page 2: Responsive Web Design tehnike u WordPress-u

Sadržaj

• O meni • Što je RWD? • Izrada RWD-a • Slike u RWD-u • WordPress i RWD • Slike u WordPress-u • WordPress Mobile • Pitanja

Page 3: Responsive Web Design tehnike u WordPress-u

O meni

• Front End Developer @ Multilink

• Co-founder – www.lakotuts.com

• PSD -> PHP

• Autor knjige: WordPress na Bootstrap-u 3.x

Page 4: Responsive Web Design tehnike u WordPress-u

O meni

• Bootstrap 3

• Izrada osnovne i naprednih tema

• Customizer API

• Settings API

• AJAX

http://leanpub.com/wpb3

Page 5: Responsive Web Design tehnike u WordPress-u

Što je RWD?

• Stranica (sadržaj) se prilagođava ekranu – Točke izmjene

• Vrste RWD-a – Responsive

– Adaptive

• Sadržaj

• Brzina

Page 6: Responsive Web Design tehnike u WordPress-u

Izrada RWD-a

• Mobile First

• Desktop First

• Korištenje Alata

• CSS od nule

• Korištenje Frameworka

Page 7: Responsive Web Design tehnike u WordPress-u

Načini izrade - Framework

• Bootstrap 3

• Foundation

• Skeleton

• Gumby

• Mnogi drugi

Page 8: Responsive Web Design tehnike u WordPress-u

Slike u RWD-u

• Nisu jednostavne

– Servirati samo potrebnu sliku

– Paziti i na Retina ekrane

• Moguća rješenja

– Picturefill 2.0

– BttrLazyLoading

Page 9: Responsive Web Design tehnike u WordPress-u

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/[email protected]" 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>

Page 10: Responsive Web Design tehnike u WordPress-u

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" />

Page 11: Responsive Web Design tehnike u WordPress-u

WordPress i RWD

RESS Pružanje sadržaja ovisno o uređaju

Prilagodba sadržaja na serveru

Page 12: Responsive Web Design tehnike u WordPress-u

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);

Page 13: Responsive Web Design tehnike u WordPress-u

Slike u WordPress-u - Thumbnailovi function 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);

Page 14: Responsive Web Design tehnike u WordPress-u

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( '#(<img\s[^>]*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\" "; }

Page 15: Responsive Web Design tehnike u WordPress-u

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] .'\'); }}';

Page 16: Responsive Web Design tehnike u WordPress-u

WordPress Mobile • wp_mobile()

• WURFL baza podataka

• github.com/jcasabona/wp-ress/

Page 17: Responsive Web Design tehnike u WordPress-u

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());

Page 18: Responsive Web Design tehnike u WordPress-u

WordPress Mobile • Izbornici za Desktop i Mobitele/Tablete

– Izbjegnut dvostruki HTML sadržaj

• Prikaz pojedinog sadržaja samo na zahtjev – Komentari

– Sidebar

Page 19: Responsive Web Design tehnike u WordPress-u

Pitanja

?