Miałem dodać trochę obszerniejszy wpis zupełnie na inny temat… Z uwagi na lekki brak czasu, to będzie bardzo krótki wpisik o WordPressowym sposobie na zapisanie skrótów do kodów, których często używamy w treści naszych wpisów – mowa o WordPress shortcodes.

Wyobraźmy sobie, że mamy już gotowy zupełnie nowy szablon do WordPressa, powymyślaliśmy różne ładne piękne ozdóbki i style do elementów treści. Mamy piękny “oddzielacz” treści wpisu od sekcji z autorem, datą, komentarzami itp. albo utworzyliśmy specjalną klasę dla komunikatów, które szczególnie, albo w jakiś inny sposób, chcieliśmy wyróżnić, albo jeszcze lepszy przykład – kod bloku reklamy – czy nie lepiej wstawiać krótkie jednowyrazowe odwołanie, które wstawi za nas cały długi kod JavaScript?

Ważne tutaj jest to, że utworzyliśmy jakąś ilość dodatkowych klas, lub mamy fragment kodu, którego często używamy. Wiadome jest, że częste przełączanie w edytorze między trybem wizualnym a tekstowym jest uciążliwe i zawsze trochę zajmuje. Najczęściej musimy oderwać ręce od klawiatury, sięgnąć po mysz i przełączyć się na drugą zakładkę, następnie znaleźć odpowiednią linijkę tekstu, wpisać HTMLowski tag, dodać do niego odpowiednią klasę, zakończyć owy tag, znów sięgnąć po mysz, przełączyć się z powrotem na tryb tekstowy. Teraz wystarczy już tylko wrócić do poprzedniej myśli i wznowić pisanie… 😀

WordPress shortcode, jak podaje Kodeks WP, zostały wprowadzone wraz z wersją 2.5 i pozwalają na zapisywanie makr, które później można wykorzystać w treści postu (co będzie naszym lekarstwem na problemy poprzedniego akapitu).

WordPress Shortcode – co to takiego

Shortcode (nie wiem czy mamy na to jakiś polski odpowiednik) to prosta funkcja dzięki której możemy zdefiniować często powtarzającą się czynność podczas edytowania tekstu.  Np. ‘zamknięcie’ cytatu w odpowiednim bloku z klasą CSS, aby nadać mu ładne formatowanie. Shortcode  może przyjmować parametry i zwraca wartość, więcej do poczytania znajdziecie w kodeksie WP.

Po tym zacnym wstępie kilka przykładów z życia.

Fancy dividerZałóżmy że mamy zdefiniowany jakiś piękny, oddzielający nagłówek od treści, paseczek (na obrazku obok, podkreślenie tuż pod głównym tytułem). Wspomniany “oddzielacz” składa się z dwóch pustych bloków div i kilku reguł CSS:

 

<div class="fancy-divider"><div></div</div>

Reguły CSS:

.fancy-divider{
    background: #ebebeb;
    margin-bottom:10px;
}
.fancy-divider div{
    width:40px;
    border-top: solid #601f17 1px;
}

WordPress keyboard shortcutPo wstawieniu w trybie tekstowym dwóch pustych divów i przełączeniu się z powrotem edytor zawsze usuwa mi wewnętrzny pusty blok bez klasy. Może nie jest to najlepszy przykład i rozwiązanie na ‘znikające bloki’ z edytora, może więc przedstawię problem w innym świetle. Załóżmy, że nie chce mi się pisać pod każdym nagłówkiem H1 całego kodu HTML, więc prościej będzie jeżeli pod nagłówkiem, bez żadnego przełączania się, napiszę tak:

<h1>To jest nagłówek</h1>
[fancy_divider]

 

Po opublikowaniu wpisu, albo w podglądzie, shortcode zostanie zastąpiony zdefiniowanym przeze mnie fragmentem kodu HTML. Jest to chyba najprostszy przykład shortcode, bez przekazywania żadnych parametrów, prosta podmiana shortcode za kod HTML. Nazwa może być praktycznie dowolna więc i krótsza niż ta którą podałem w przykładzie. 🙂

Jak to zrobić?

Otwieramy w edytorze plik motywu functions.php. Musimy do niego dodać funkcję, która “obsłuży” shortcode i powie WordPressowi co z nim zrobić, a następnie ją ‘zarejestrować’.

function css_fancy_divider(){
  return '<div class="fancy-divider"><div></div></div>';
}

add_shortcode('fancy_divider', 'css_fancy_divider');

Funkcja css_fancy_divider(), obsługuje mój najprostszy shortcode, po wywołaniu funkcji, jej jedynym zadaniem jest zwrócenie fragmentu kodu HTML, który wyświetli mi mój pasek.

Natomiast druga funkcja add_shortcode(), ‘uwidacznia’ shortcode dla WP. Pierwszy argument to nazwa shortocode, której będziemy używać w treści wpisów, drugi to nazwa funkcji, która obsłuży shortcode.

Zapisujemy i testujemy! U mnie działa, jak to mawiają najstarsi informatycy… 😀

Teraz coś trudniejszego. Powiedzmy, że chcemy wstawić jakiś fragment tekstu w blok z wybraną klasą. – ot jakiś komunikat, albo ważna notka, którą chcemy wyróżnić. Ja mam aktualnie w szablonie zdefiniowaną klasę, której czasem używam w moich wpisach. Wygląda to mniej więcej następująco:

Przykładowy komunikat w wyróżnionym bloku

HTML:

<div class="y_note">Przykładowy komunikat w wyróżnionym bloku</div>

CSS:

 .y_note{
    margin-top: 10px;
    background: #fdfccc;
    border:solid #ffdb55 1px;
    padding:10px;
    color: #2c2c2c;
    text-align:justify;
    line-height:18px;
}

Funkcje w pliku functions.php

 function css_y_note( $atts, $content = null ){
  return '<div>'.$content.'</div>';
}
add_shortcode('y_note', 'css_y_note');

I użycie:

[y_note]Przykładowy komunikat w wyróżnionym bloku[/y_note]

I na koniec przykład o którym wspominałem we wstępie – jak zrobić shortcode do reklam i jak umieszczać je w treści wpisu. W przykładzie wykorzystam reklamy Google AdSense, oraz zakładam, że już wiesz jak wygląda umieszczanie reklam na zwykłych stronach – rejestrujesz konto, tworzysz nową jednostkę reklamową, generujesz kod, który potem wklejasz do kodu strony. Tutaj również moglibyśmy dodać reklamy do któregoś z plików motywu, ale nie o to nam tutaj chodzi. Planowany efekt, to wplatanie małych reklam w treść wpisu, aby użytkownik zawsze, albo prawie zawsze je zauważył czytając, lub przeglądając treść wpisu.

Do przykładu wybrałem dwa typy reklam

  • Mały kwadrat (200 x 200)
  • Kwadrat (250 x 250)

Więc będę chciał uzyskać shortcode z możliwością wybrania rozmiaru reklamy (możliwością bo domyślnie chcę, aby pokazywał mi większy Kwadrat 250×250).

W tym miejscu należy zaznaczyć, że będziemy przekazywać parametr(y) do funkcji shortcode w taki sposób (przykład pochodzi z WP Codex):

[myshortcode foo="bar" bar="bing"]

Oraz, że zostaną przekonwertowane do postaci tablicy asocjacyjnej, do takiej postaci:

array( 'foo' => 'bar', 'bar' => 'bing' )

Wracając do tematu. Wygenerowałem sobie gotowe snippety do wstawienia na stronę, otwieram plik functions.php i zaczynam od napisania funkcji:

function post_content_adsense( $atts ){
    $ads_mkwadrat = '<script type="text/javascript"><!--
    google_ad_client = "ca-pub-6983738891419313";
    /* NewDivide m kwadrat */
    google_ad_slot = "2267220148";
    google_ad_width = 200;
    google_ad_height = 200;
    //-->
    </script>
    <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>';
    $ads_kwadrat = '<script type="text/javascript"><!--
    google_ad_client = "ca-pub-6983738891419313";
    /* NewDivide kwadrat */
    google_ad_slot = "3743953344";
    google_ad_width = 250;
    google_ad_height = 250;
    //-->
    </script>
    <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>';

    extract(shortcode_atts(array(
    'format' => 'kwadrat',
    ), $atts));

    switch($format)
    {
        case 'kwadrat':
        return $ads_kwadrat;
        case 'mkwadrat':
        return $ads_mkwadrat;
        default:
        return $ads_kwadrat;
    }
}

Rejestrujemy shortcode:

add_shortcode('adsense', 'post_content_adsense');

I tym sposobem stworzyliśmy bardzo fajną funkcjonalność do motywu, do funkcji można łatwo dodać inne rodzaje reklam – wystarczy dodać kolejny kod reklamy, i kolejnego CASEa w SWITCHu… 😀

Przykłady użycia w edytorze:

[adsense]
[adsense format=kwadrat]
[adsense format=mkwadrat]

Opcjonalnie, kod reklamy można zamknąć w bloku i dodać do niego jakieś klasy CSS, np opływanie, aby treść wpisu ładnie opływała blok reklamy. Można to zrobić na “sztywno” tj z góry nadać klasę, której zawsze będziemy się trzymać, lub przekazywać kolejny parametr do funkcji shortcode, który będzie “doklejał” klasę CSS. Ja zrobiłem to na sztywno, i dodałem tą samą klasę, którą wykorzystuje przy np obrazkach, bo reklama z prawej strony wpisu raczej kiepsko się tutaj prezentuje. Kody reklam poprawiłem w następujący sposób:

    $ads_mkwadrat = '<div class="alignleft"><script type="text/javascript"><!--
    google_ad_client = "ca-pub-6983738891419313";
    /* NewDivide m kwadrat */
    google_ad_slot = "2267220148";
    google_ad_width = 200;
    google_ad_height = 200;
    //-->
    </script>
    <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script></div>';

Na koniec ciekawostka:

Jeżeli nie chcesz, aby shortcode był interpretowany przez WordPress, a jedynie wyświetlony jego prawidłowy kod w poście, np.:

[moj_shortcode]

Wystarczy umieścić nazwę shortcode-u w podwójnych nawiasach kwadratowych, o tak:

[[moj_shortcode]]

Albo ‘zamknąć’ nazwę shortcode-u w dodatkowym tagu (w edytorze tekstowym), np. tak:

[<span>moj_shortcode</span>]

Jeżeli shortcode składa się z dwóch części – otwierającej i zamykającej, a chcemy wyświetlić przykładowy kod pokazujący jego użycie, możemy to zrobić tak:

[[moj_shortcode]Przykładowy komunikat w wyróżnionym bloku[/moj_shortcode]]

Czyli wystarczy umieścić kwadratowy nawias otwierający przed pierwszym shortcode-m, oraz dodatkowy, zamykający nawias kwadratowy za tagiem zamykającym shortcode.

 

I to na dzisiaj wszystko, miało być krótko… 🙂

 

Wpis otagowano:

Pomogłem? Dodaj coś od siebie! Skomentuj ten wpis:

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *