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.

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

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. O meni
• Front End Developer @ Multilink
• Co-founder – www.lakotuts.com
• PSD -> PHP
• Autor knjige: WordPress na Bootstrap-u 3.x

4. O meni
• Bootstrap 3
• Izrada osnovne i naprednih tema
• Customizer API
• Settings API
• AJAX
http://leanpub.com/wpb3

5. Što je RWD?
• Stranica (sadržaj) se prilagođava ekranu
– Točke izmjene
• Vrste RWD-a
– Responsive
– Adaptive
• Sadržaj
• Brzina

6. Izrada RWD-a
• Mobile First
• Desktop First
• Korištenje Alata
• CSS od nule
• Korištenje Frameworka

7. Načini izrade - Framework
• Bootstrap 3
• Foundation
• Skeleton
• Gumby
• Mnogi drugi

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. 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. 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. WordPress i RWD
RESS
Pružanje sadržaja ovisno o uređaju
Prilagodba sadržaja na serveru

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. 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. 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. 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. WordPress Mobile
• wp_mobile()
• WURFL baza podataka
• github.com/jcasabona/wp-ress/

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. WordPress Mobile
• Izbornici za Desktop i Mobitele/Tablete
– Izbjegnut dvostruki HTML sadržaj
• Prikaz pojedinog sadržaja samo na zahtjev
– Komentari
– Sidebar

19. Pitanja
?