Responsive Web Design tehnike u WordPress-u
0 likes446 views
The document discusses responsive web design (RWD) techniques in WordPress, highlighting the importance of content adaptation to various screen sizes. It covers the creation of RWD using frameworks like Bootstrap, handling images effectively for different devices, and implementing WordPress functionalities for mobile responsiveness. Key topics include the use of lazy loading for images, server-side content adaptation, and filtering images in WordPress to ensure proper display on mobile devices.
![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>](https://image.slidesharecdn.com/responsivewebdesigntehnikeuwordpressu-150325041619-conversion-gate01/85/Responsive-Web-Design-tehnike-u-WordPress-u-9-320.jpg)
![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);](https://image.slidesharecdn.com/responsivewebdesigntehnikeuwordpressu-150325041619-conversion-gate01/85/Responsive-Web-Design-tehnike-u-WordPress-u-12-320.jpg)
![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);](https://image.slidesharecdn.com/responsivewebdesigntehnikeuwordpressu-150325041619-conversion-gate01/85/Responsive-Web-Design-tehnike-u-WordPress-u-13-320.jpg)
![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" ";
}](https://image.slidesharecdn.com/responsivewebdesigntehnikeuwordpressu-150325041619-conversion-gate01/85/Responsive-Web-Design-tehnike-u-WordPress-u-14-320.jpg)
![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] .''); }}';](https://image.slidesharecdn.com/responsivewebdesigntehnikeuwordpressu-150325041619-conversion-gate01/85/Responsive-Web-Design-tehnike-u-WordPress-u-15-320.jpg)
Responsive Web Design tehnike u WordPress-u
- 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 ?