Dodajemy własny shortcode (Facebook LikeBox) do motywu WordPressa.
Shortcodes są bardzo przydatnym narzędziem dającym dodatkowe możliwości przy redagowaniu wpisów, mogą służyć do dodawania niestandardowych elementów, generowania danej struktury HTML bez wpisywania ręcznie znaczników za każdym razem. Na przykład chcemy mieć w naszym wpisie fajny przycisk, dodajemy więc do treści wpisu shortcode:
[przycisk]
I to wszystko, odpowiednia struktura (oczywiście przygotowana wcześniej przez programistę) zostaje dodana do naszego wpisu, a style CSS dbają o wygląd naszego przycisku, bardzo proste i przydatne rozwiązanie.
Można również dodać taką strukturę ręcznie za każdym razem ale nie jest to wygodne rozwiązanie a co najważniejsze nie jest zbyt bezpieczne, jeśli nie do końca jesteśmy świadomi tego co robimy. Zawsze możemy zapomnieć o domknięciu znacznika, przez to zepsuć wygląd naszej strony itd.
Shortcodes są także przydatne do umieszczania we wpisach powtarzających się fragmentów, np. tekstu lub grafiki – logo, nazwa firmy itd. Jeśli używamy danego shortcodu w wielu wpisach, na pewno docenimy jeszcze jedną zaletę, gdy chcemy zmienić treść nazwy firmy, nie musimy edytować ręcznie wszystkich wpisów z tą nazwą, wystarczy zmienić funkcję odpowiedzialną za dany shortcode i zmiany są automatycznie widoczne we wszystkich wpisach.
Atrybuty
Do większości shortcodów możemy dodać dodatkowe atrybuty, które mają wpływ na wyświetlanie treści, zmieniają działanie shortcodu.
Atrybuty dodajemy do shortcodów podobnie jak atrybuty w języku HTML, w postaci atrybut=”wartość”.
W treści atrybutów mogą występować jedynie litery i znak podkreślenia.
Text powyżej na żółtym tle, także jest tworzony za pomocą shortcode.
Własny Shortcode – Facebook Likebox
Czas na stworzenie w naszym szablonie prostego shortcode, który będzie służył do wyświetlania likeboxa z Facebooka.
Tak jak zwykle, jako bazę wykorzystam szablon TwentyThirteen. Standardowy kod wyświetlający likebox z kilkoma parametrami wygląda tak:
<div class="fb-like-box" data-href="https://www.facebook.com/wpinfopl" data-colorscheme="light" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false"></div>
prócz tego do poprawnego działania, niezbędne jest umieszczenie skryptu (facebook zaleca dodać go zaraz za otwierającym znacznikiem <body>), otwieramy więc plik header.php i dodajemy ten kod:
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/pl_PL/sdk.js#xfbml=1&version=v2.0";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
Teraz musimy utworzyć funkcję, wyświetlającą nasz shortcode, otwieramy plik functions.php i dodajemy do niego następujący kod:
if(!function_exists('my_likebox')) {
function my_likebox($atts) {
// atrybuty shortcodu
extract(
shortcode_atts(
array(
"width" => 235,
"height" => 268,
"url" => 'https://www.facebook.com/wpinfopl',
"color" => 'light',
"faces" => 'true',
"border" => 'false',
"show_header" => 'false'
),
$atts
)
);
$output = '';
$output .= '<div class="fb-like-box" data-href="'. $url .'" data-colorscheme="'. $color .'" data-height="'. $height .'" data-width="'. $width .'" data-show-faces="'. $faces .'" data-header="'. $show_header .'" data-show-border="'. $border .'"></div>';
return $output;
}
add_shortcode('fb_like_box', 'my_likebox');
}
Na początku dałem warunek sprawdzający, czy przypadkiem nie ma już funkcji o takim samej nazwie, jeśli nie, tworzymy funkcję my_likebox, nastepnie za pomocą funkcji shortcode_atts, dodajemy domyślne wartości dla naszych atrybutów. Kolejny krok to zdefiniowanie zmiennej output oraz przypisanie do niej struktury HTML ze standardowego kodu wyświetlającego likeboxa – ale używamy zmiennych z naszego shortcodu. Zwracamy treść shortcodue oraz za pomocą add_shortcode dodajemy nasz shortcode.
Teraz wpisując w treści wpisu kod, nie nadajemy żadnych atrybutów, zostaną użyte domyślne wartości (w nawiasach kwadratowych)
fb_like_box
efekt jest następujący:
możemy też dodać kilka atrybutów, np:
fb_like_box border="true" width="320"
wtedy zobaczymy taki efekt:
Wyświetlanie wpisów WordPressa w dwóch lub trzech kolumnach. Komentarze w WordPressie – Problem z Disqus
