Cum afisezi reclama in functie de device - mobile-desktop-tableta

AlexH

Merg pe strada catre Mine...
Membru personal
Administrative
Freelancer
SEO Expert
Un tutorial care multi il asteptati si o sa va bucurati in special pentru update de astazi la google pentru versiunea mobila la site-uri.

Majoritatea dintre voi nu aveti theme worspress responsive si reclamele care sunt pentru desktop deformeaza aspectul pe mobil.
Asa ca dupa multe cautari am gasit solutia pentru voi. @yepuras imi va multumi mult pentru acest tutorial. Stie ea de ce. :D

Chiar daca aveti teme responsive care include si versiunea mobil, reclamele normale sunt afisate ca pe desktop.
Exemplu acest forum care este responsiv si afiseaza orice reclama bine pe orice device, indiferent daca bannerul are 1024/800.

Metoda de mai jos va ajuta site-ul sa se incarce mai repede si sa afiati reclame in functie de device.

De ce aveti nevoie si ce trebuie sa faceti pentru a afisa reclama in functie de device pe wordpress.

1. login in wp-admin si instalati pluginul jetpack.
2. din meniul din partea stanga sus click pe jetpak si apoi setari si mai jos aveti Mobile Theme. Click pe activare si apoi configurare.
axllvRw.png

3. instalati si activati pluginul ZigWidgetClass. O puteti face direct din admin panel sau descaracti pluginul de aici:
https://wordpress.org/plugins/zigwidgetclass/
4. La widget cand adaugati reclame o sa aveti un camp in plus CSS Classes.
Folositi unul din short codurile de mai jos.



    • hide_on_standard – Hide on standard resolutions.
    • hide_on_standard_and_tablet – Hide on standard resolutions and tablets.
    • hide_on_standard_and_mobile – Hide on standard resolutions and mobile.
    • hide_on_tablet – Hide on tablets.
    • hide_on_tablet_and_mobile – Hide on tablets and mobile.
    • hide_on_mobile – Hide on mobile.
Exemplu de folosire:
Sa spunem ca aveti un banner 728/90 care vreti sa fie afisat pe desktop dar nu pe mobile. Pentru asta folosim codul de la punctul 6.

Acum avem un alt banner care vreti sa fie afisat pe mobil dar nu pe restul device. Exoclick ofera reclame special pentru mobil dar nu vreti sa fie afisate pe desktop.
Pentru asa adaugati un widget si la campul CSS Classes puneti short codul de la punctul 1.



Varianta 2.
Wordpress are default sistem pentru detectarea device-ului pe care este utilizatorul wp_is_mobile.
Putem sa ne folosim de asta cu ajutorul codului de mai jos.
Cod:
<?php

// [desktoponly] shortcode
add_shortcode('desktoponly', 'shailan_desktop_only_shortcode');
function shailan_desktop_only_shortcode($atts, $content = null){
    if( !wp_is_mobile() ){
        return wpautop( do_shortcode( $content ) );
    } else {
        return null;
    }
}
// [mobileonly] shortcode
add_shortcode('mobileonly', 'shailan_mobile_only_shortcode');
function shailan_mobile_only_shortcode($atts, $content = null){
    if( wp_is_mobile() ){
        return  wpautop( do_shortcode( $content ) );
    } else {
        return null;
    }
}

?>

Acest code se insereaza in function.php de la thema si nu de la wordpress.
Apoi can adaugati un banner sau continut puteti folosi short codurile de mai jos. Avantajul la aceasta metoda este ca puteti afisa/ascunde continut in functie de device care este utilizatorul.

Short code:
Cod:
[desktoponly]  pentru desktop
[mobileonly]  pentru mobile

Cum le folosim?

Daca vrem ca un banner sau continut sa fie afisat doar pe desktop folosim formatul de mai jos:
[desktoponly]codul de reclama aici sau continutul care vrei sa fie afisat pe desktop[/desktoponly]

Daca vrei ca bannerul sau continutul sa fie afisat doar pe mobil folosim formatul de mai jos:
[mobileonly]codul de reclama aici sau continutul care vrei sa fie afisat pe mobil[/mobileonly]

Cele doau coduri se pot folosi simultan intr-un articol sau reclame.

Daca aveti adsense pe site nu aveti nevoie de nimic, doar de jetpack. Pentru asta cand faceti codurile de reclame din contul vostru adsense, alegeti Automatic size.
Acest code il puneti oriunde vreti voi, pentru ca va lua singur forma la sectiunea unde este pus. Asa ca nu trebuie sa mai faceti 100 coduri ads ci doar unul. Puteti face mai multe doar daca vreti sa urmariti conversia pe block. Asa se poate face prin canal special creat.
lMUN6S6.png


Metoda 3
Mai puteti folosi acest plugin https://wordpress.org/plugins/advanced-ads/
Nu uitati de jetpack.

Sper sa va fie de ajutor si daca aveti intrebari postati mai jos.


Nu ezitati sa dati un share pe retelele sociale daca acest topic va fost de ajutor.

Pentru mai multe info sau developeri legat de update-ul google pentru versiunea mobil gasiti aici https://developers.google.com/webmasters/mobile-sites/website-software/wordpress
 
Ultima editare:
Multumesc de tutorial Alex chiar aveam nevoie mai ales de a doua varianta.
 
Loading...
Back
Sus