30
07
09

Dodajemy reklamy na początek wpisu

Jak wynika z moich badań czyli z obserwacji kanałów spersonalizowanych na moim koncie AdSense, jednym z najlepszych miejsc do umieszczenia reklamy AdSense jest początek wpisu. W dzisiejszym wpisie krótki tutorial jak wkleić w to miejsce kod reklamy. Nie jest to nic trudnego, wystarczy w odpowiednim miejscu w szablonie wstawić kod jednostki reklamowej. Ten fragment kodu, który ja tu pokażę, jest tylko troszkę bardziej skomplikowany, ale za to znacznie bardziej uniwersalny. Na tym blogu reklama wstawiona jest również w początek pierwszego wpisu na stronie głównej, w każdej stronie archiwum i na stronie z listą wpisów z danego tagu (z kategorii na tym blogu nie korzystam).

Aby wstawić reklamę gdziekolwiek do szablonu, musisz udać się w tę część panel administracyjnego WordPressa, w której można edytować poszczególne pliki wybranego szablonu. Oczywiście pliki muszą mieć nadane odpowiednie prawa dostępu, by WordPress mógł je zapisywać po wprowadzeniu przez Ciebie zmian.

Do którego pliku wkleić kod?

Wszystko wydaje się proste…

  • Jeśli chcesz, by reklamy pojawiały się w pojedynczym wpisie, musisz zmienić plik single.php.
  • Jeśli reklamy mają się pojawiać na stronie głównej bloga, musisz zmienić plik index.php.
  • Jeśli chcesz wstawić reklamy do archiwum, trzeba zmienić plik archive.php.
  • Jeśli reklamy chcesz mieć w kategoriach, musisz edytować plik category.php.
  • Jeśli reklamy mają znaleźć się w podstronach z wpisami przypisanymi do danego taga, musisz edytować plik tag.php.

Tylko jest jeden istotny kłopot — nie zawsze wszystkie pliki zostały wykorzystane przez autora szablonu. WordPress ma bowiem taką cudowną właściwość zwaną hierarchią szablonów. Działa to w następujący sposób:

  1. WordPress ustala, z jaką stroną ma do czynienia — np. listą wpisów z danej kategorii,
  2. następnie szuka w katalogu z szablonem odpowiedniego pliku, odpowiedzialnego za wyświetlanie kategorii — category.php,
  3. jeśli go nie znajduje, szuka nadrzędnego pliku, który też może być wykorzystywany do wyświetlania kategorii — archive.php,
  4. jeśli nie ma i tego pliku, szuka tego będącego jeszcze wyżej — index.php.

Podobnie dzieje się z pozostałymi plikami według hierarchii:

  • single.php → index.php,
  • tag.php → archive.php → index.php,
  • archive.php → index.php,
  • home.php → index.php.

Pełną listę tych zależności znajdziesz tutaj, w dokumentacji WordPressa. Korzystając z tego przedstawionego tu schematu odszukaj plik (lub pliki), które musisz pozmieniać. W moim przypadku był to tylko jeden plik index.php — pozostałych w moim szablonie nie ma. Zaproponowany przeze mnie kod jest uniwersalny i należy go wkleić w tej samej formie do każdego z plików.

Co wkleić (i gdzie)?

Zanim cokolwiek zaczniesz wklejać, zrób kopię zapasową swojego szablonu. KONIECZNIE! Nie jestem ekspertem od WordPressa ani PHP i mogłem się gdzieś tu pomylić…

Kod składa się z dwóch części.

Aby wkleić pierwszą, zajrzyj na początek edytowanego pliku i poszukaj fragmentu kodu przypominającego ten:

<?php get_header(); ?>

i zamień go na

<?php get_header();
$licznik=0; ?>

Drugą część należy wkleić w środek tzw. pętli, która odpowiada w WordPressie za wyświetlanie treści danego wpisu ale i za wyświetlanie kolejnych wpisów (zajawek) na stronie głównej i archiwum. Pętla zaczyna się zazwyczaj czymś podobnym do:

<?php if(have_posts()) : while(have_posts()) : the_post();

i ten właśnie fragment odszukaj a następnie nieco niżej, pod nim, znajdź coś podobnego do:

<h1><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>

. Ten drugi fragment kodu wyświetla tytuł wpisu. Czasem zamiast znacznika <h1> pojawia się tam <h2> albo inny znacznik. Poniżej trzeba wkleić następujący kod odpowiadający za wyświetlanie wybranej przez Ciebie reklamy — niekoniecznie AdSense:

<?php if((is_single()||is_home()||is_archive())&&$licznik==0) { ?>
<div style="float:left;width:220px;height:220px;padding: 20px 10px 10px 0px;">
TU WSTAW KOD REKLAMY
</div>
<?php $licznik++; } ?>

I teraz kilka słów wyjaśnienia.

Pierwszy fragment kodu inicjuje licznik. Ten licznik będzie potem wykorzystywany do sprawdzenia, czy wyświetlany jest właśnie pierwszy, czy kolejny post.

Druga część kodu odpowiada za samo wyświetlenie reklamy. Pierwsza linia sprawdza następujące warunki:
czy (jesteśmy na podstronie z pojedynczym wpisem albo na stronie archiwum albo na stronie głównej) oraz wartość licznika wynosi zero.

Jeśli te warunki są spełnione (np. wyświetlana jest strona archiwum a licznik wynosi zero), na stronę wstawiany jest kod reklamy, otoczony niezbyt zmyślnie skonstruowanym znacznikiem <div>. Jeśli nie — nic nie jest wstawiane. Tak czy siak, za chwilę wartość licznika jest zwiększana o jeden. Dzięki temu w kolejnym wpisie warunek zerowej wartości licznika nie będzie już spełniony i reklama nie pojawi się po raz drugi. Widoczny w kodzie znacznik <div> odpowiada za to, że reklama wyświetla się przy lewym marginesie i z prawej strony jest oblana tekstem.

W niektórych przypadkach konieczne będzie przesunięcie drugiego fragmentu kodu nieco niżej w pliku szablonu. Czasem trzeba wsunąć go do jednego lub więcej otwierających się znaczników <div>, otaczających treść wpisu.

Zapraszam do dyskusji — bo ten przedstawiony przeze mnie kod na pewno nadaje się do poprawek. 🙂

Autor:Krzysztof Lis | Tagi: ,
Wpisy powiązane tematycznie:

22 komentarze do artykułu “Dodajemy reklamy na początek wpisu”

  1. Nie warto męczyć się z kodem. Wszystko można osiągnąć w kilka sekund za pomocą wtyczki Easy AdSense (wcześniej Easy Adsenser). Automatycznie wkleja reklamy na początku wpisu, w środku, na końcu, w panelu bocznym w widgecie, jednostki graficzne i tekstowe czy linkowe, wyszukiwarkę połączoną z AdSense. Można wyłączać reklamy na stronach tagów, kategorii czy w archiwum a także w konkretnych wpisach. Wszystko jest łatwe do skonfigurowania.

  2. @Marcin: dzięki za wskazanie tej wtyczki. Zainstalowałem ją tu sobie na próbę, choć nie bez kłopotów, bo nie chciała się uaktywnić. Trochę przeraziła mnie też, bo na pierwszy rzut oka nie ma jak wyłączyć pojedynczych form reklamowych — czy da się to zrobić inaczej niż opróżniając odpowiednie pole?

  3. Jeżeli chcesz w konkretnym wpisie wyłączyć albo zmodyfikować konkretną reklamę to dodajesz własne pole (custom field) i wpisujesz: adsense-top, adsense-middle, adsense-bottom, adsense-widget, adsense-search. Wartości: left, right, center, no. W ustawieniach na podstronie z wtyczką masz „instructions” i tam jest to opisane.

  4. bolem moze byc fakt, ze ludzi czytajac pierwsze pare slow.. przerzuca sie na reklame klikna wyjda ze strony i juz nie wroca.

  5. Bartek: jeśli kogoś zainteresuje treść na blogu to w 95% przypadków wrócą na niego. A pozostałym, którzy przenieśli się na reklamowaną stroną można podziękować w duchu za kilka centów z adsense i życzyć „szerokiej drogi”.

    Po tym wpisie postanowiłem u siebie na blogu dodać drobny pasek google adsense na koniec każdego wpisu. Choć nie musiałem za bardzo edytować kodu to jakoś ten wpis mnie zachęcił 😛

    A o EasyAdsense kiedyś słyszałem, ale nigdy nie korzystałem. Zapewne w przyszłości wykorzystam, dzięki Marcin.

  6. Interesujące…. Fajnie że pojawił się ten wpis.

    U mnie chyba też pojawi się podobny. Ale odnośnie bloggera…

  7. @Bartek, Dawid: moje zdanie jest proste: niech klikają, nie muszą wcale wracać. 😉 Póki co blogi piszę po to, by zarabiały, a jeśli będą zarabiać więcej gdy ludzie nie będą do nich wracać, wcale nie będzie mi ich brakowało. 😉

  8. @bartek Jakąś opcją jest adkontekst zamiast adsense reklamę masz w nowym oknie.

  9. Widzę, że zaraz w pierwszym wpisie była wzmianka o Easy AdSense. Osobiście polecam również . Subiektywnie, jak dla mnie bardziej intuitywne ustawienia i trochę większe pole do popisu.

  10. Nareszcie wiem co zrobić żeby reklamy wyświetlały się tylko przy pierwszym wpisie 😀 Dziękuję 😉

  11. A ja mam problem:/ Zrobiłem wszystko jak napisałeś, ale reklamy pokazują się na wpisie, zasłaniając tekst. Przykład:
    http://www.udane-wesele.eu/niespodzianki-dla-druzbow/

    Jak to ugryźć?

  12. Myślę, że problem tkwi w div’ie w którym znajdują się reklamy. Nie wiem dlaczego ale reklamę 300×250 umieściłeś w div’ie 220×220 🙂 Spróbuj ustawić tylko float left i margin-right na kilka pixeli żeby reklama nie stykała się z tekstem.

  13. Dzięki wielkie! Zmieniłem rozmiar diva i wszystko jest ok.

  14. Cieszę się, że mogłem pomóc. Natomiast czy nie uważacie, że tak umiejscowione reklamy mogą odstraszać czytelników ? Przecież pierwsze co widzą na stronie to reklamy 😛

  15. @kubik: odczucia czytelników się nie liczą, liczą się tylko pieniądze! 😉

    Czyli — jeśli ta reklama zarabia lepiej, niż inne, niech sobie wisi na blogu, dopóki nie znajdziesz lepszej.

  16. Ale jeśli użytkownik ucieknie od razu po wejściu na stronę to raczej nic na nim nie zarobisz 😀

  17. @kubik: jeśli ucieknie przez kliknięcie w AdSense, zarobię na nim jak najbardziej. 🙂

  18. ktoś wspomniał bloggera – nic nie trzeba robić, jest taka opcja z automatu (tzn. pole na html/java script nad każdym postem)

  19. @nelson: o ile dobrze kojarzę, ta funkcja tylko pozwala wstawiać kod nad całym postem (włącznie z tytułem i datą), a tu chodzi o to, by wstawić go pod tytuł, w pierwszy akapit tekstu.

    Postaram się to opisać w najbliższej przyszłości. 🙂

  20. ja mam problem gdyż we wpisie reklama jest po jednej stronie a tekst po drugiej (i tak cały wpis) a jak się domyslam to miało być tak,że tekst powinien okrywać reklamę.

  21. A ja mam taki problem, z którym walczę już ponad tydzień. Podłączyłem Easy AdSense, ale chciałbym przetestować wyświetlanie reklam pod koniec wpisu. Jednak jednocześnie wyświetlają mi się reklamy domyślne na początku posta.

    Słowem – jak wyłączyć domyślne reklamy na górze wpisu?

  22. A w jaki sposób umieść takową reklamę pod pierwszym wpisem na stornie? Chodzi mi o ręczną edycję.

Pozostaw komentarz

Pamiętaj tylko proszę o polityce komentarzy! Komentarze służą do wyrażania opinii na temat opublikowanego tekstu, albo zadawania pytań jego dotyczących. Nie służą do reklamowania własnych stron ani zadawania pytań nie związanych z tematem wpisu. Jeśli masz pytanie, zadaj je na forum o zarabianiu na blogach albo napisz do mnie e-maila.

XHTML - możesz użyć tagów:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Jak zarabiam?

Na moich blogach i witrynach zarabiam między innymi sposobami podanymi poniżej.