Robimy responsywne elementy w treści

[ SEOWind.io - pisz treści które rankują się w TOPach ]

Zainspirowany wczorajszym tematem szablonów WP dobrze zoptymalizowanych pod SEO napisanym przez wszystkich nam znanego Zgreda – link – i podjętym przez Niego międzyinnymi tematem ich responsywności postanowiłem zająć się tym samym tematem jednak od strony contentu.

Zacznijmy może od najprostszych i najczęściej używanych elementów czyli obrazków i video:

1. Obrazki

Plik .css:

img {
max-width: 100%;
}

2. Video HTML5

Plik .css:

video {
max-width: 100%;
height: auto;
}

3. Video Youtube i Vimeo

Do wyświetlania używamy:

<div class="video-container"><iframe src="https://www.youtube.com/watch?v=Kt6jb00PIt8" frameborder="0" width="560" height="315"></iframe></div>

A do pliku .css dodajemy:

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

4. Google Maps

<div class="google-maps"><iframe src="https://www.google.com/maps/embed?pb=kod" width="600" height="450" frameborder="0" style="border:0"></iframe></div>

Plik .css:

 .google-maps {
 position: relative;
 padding-bottom: 90%; // (450 ÷ 500 = 0.9 = 90%)
 height: 0;
 overflow: hidden;
 }
 .google-maps iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 }

5. Ukrywanie i zastępowanie treści na mobile

Poniższy kod współpracuje z wtyczką o nazwie WP Mobile Detect

Po instalacji i konfiguracji kod wklejamy do pliku functions.php

function adaptive_content( $content ) {
if ( !in_the_loop() ) return $content;
if ( wpmd_is_phone() ){
$custom_field = str_replace( 'the_' , 'short_' , current_filter() );
$short_content = get_field($custom_field);
if ( $short_content ) return $short_content;
}
return $content;
}
add_filter( 'the_excerpt', 'adaptive_content' );
add_filter( 'the_title', 'adaptive_content' );

Kod podmienia pełen title oraz zajawkę na skrócone wersje podane w polach stworzonych przez plugin gdy treść zostanie wyświetlona na telefonie.

• Artykuły

O Wojciech Władziński

Branżą SEO zajmuję się od 2008 roku. Na co dzień starszy specjalista ds. SEO w firmie Seogroup. Tworzę i optymalizuję duże serwisy jak i mniejsze strony internetowe. Szczególnie upodobałem sobie środowisko WordPressa, który mimo powszechnej opinii nie jest tylko platformą blogową.

• Wordcamp 2014 Warszawa – dzień pierwszy - 4 stycznia 2020
• TYPES czyli taxonomies, custom fields i post types w jednym miejscu - 4 stycznia 2020
• Modyfikacje standardowego RSS’a WP - 4 stycznia 2020
• Jak precyzyjniej szukać w Google? [infografika] - 4 stycznia 2020
• Zestawienie blogów o SEO i WordPressie - 4 stycznia 2020
• Funkcje w panelu admina, o których nie warto zapominać - 4 stycznia 2020
• Jak z głową wybrać szablon do WordPressa? - 4 stycznia 2020
• Wtyczki do WP, których nie znasz a powinieneś cz.4 - 4 stycznia 2020
• Kilka ciekawych kawałków kodu cz.1 - 4 stycznia 2020
• Wyświetlanie ilości zasobów WordPressa - 4 stycznia 2020