Responsive Web Design tehnike u WordPress-u
-
Upload
igor-benic -
Category
Technology
-
view
57 -
download
2
Transcript of Responsive Web Design tehnike u WordPress-u
Responsive Web Design
tehnike u WordPressu
Igor Benić WP Meetup Zagreb 19.09
Sadržaj
• O meni • Što je RWD? • Izrada RWD-a • Slike u RWD-u • WordPress i RWD • Slike u WordPress-u • WordPress Mobile • Pitanja
O meni
• Front End Developer @ Multilink
• Co-founder – www.lakotuts.com
• PSD -> PHP
• Autor knjige: WordPress na Bootstrap-u 3.x
O meni
• Bootstrap 3
• Izrada osnovne i naprednih tema
• Customizer API
• Settings API
• AJAX
http://leanpub.com/wpb3
Što je RWD?
• Stranica (sadržaj) se prilagođava ekranu – Točke izmjene
• Vrste RWD-a – Responsive
– Adaptive
• Sadržaj
• Brzina
Izrada RWD-a
• Mobile First
• Desktop First
• Korištenje Alata
• CSS od nule
• Korištenje Frameworka
Načini izrade - Framework
• Bootstrap 3
• Foundation
• Skeleton
• Gumby
• Mnogi drugi
Slike u RWD-u
• Nisu jednostavne
– Servirati samo potrebnu sliku
– Paziti i na Retina ekrane
• Moguća rješenja
– Picturefill 2.0
– BttrLazyLoading
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>
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" />
WordPress i RWD
RESS Pružanje sadržaja ovisno o uređaju
Prilagodba sadržaja na serveru
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);
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);
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\" "; }
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] .'\'); }}';
WordPress Mobile • wp_mobile()
• WURFL baza podataka
• github.com/jcasabona/wp-ress/
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());
WordPress Mobile • Izbornici za Desktop i Mobitele/Tablete
– Izbjegnut dvostruki HTML sadržaj
• Prikaz pojedinog sadržaja samo na zahtjev – Komentari
– Sidebar
Pitanja
?