Jeśli nie jesteś wielkim fanem pracy z edytorem HTML w WordPress lub chcesz zapewnić fajne ulepszenia motywów premium, skróty są doskonałym rozwiązaniem do rozszerzenia możliwości edytora postów przy jednoczesnym utrzymaniu prostoty.


Pomyślałem, że fajnie byłoby dodać jakiś przycisk do mojej witryny, gdy udostępniam linki do darmowych plików lub innych stron (oczywiście przy użyciu skrótów), więc po dodaniu krótkiego kodu do mojego motywu pomyślałem, że podzielę się kodem tutaj blog, aby inne osoby zainteresowane dodaniem skrótów przycisków do swojej witryny mogły po prostu skopiować i wkleić mój kod do motywu i nie musiały poświęcać zbyt wiele czasu na tworzenie skrótu i ​​stylizowanie przycisku.

Jakie są skróty?

Skróty zostały wprowadzone ponownie w WordPress 2.5 i umożliwiają tworzenie kodów makr do użytku w treści postu. Prosty shortcode wyglądałby mniej więcej tak:

[krótki kod]

Które po dodaniu do edytora postów zwrócą wartość krótkiego kodu zdefiniowanego w plikach motywu. Pokażę ci, jak utworzyć krótki kod, który pozwoli Ci łatwo dodawać przyciski do edytora postów bez dotykania żadnego kodu.

Dodanie niestandardowego skrótu „przycisku”

Pierwszą rzeczą, którą musisz zrobić, to dodać kod php dla swojego shortcode do motywu. Poniższego kodu można użyć, aby dodać prosty przycisk do swojej witryny. Ten kod można umieścić w pliku functions.php. Jeśli używasz motywu innej firmy, najlepiej zrobić to za pomocą motywu podrzędnego WordPress.

funkcja myprefix_button_shortcode ($ atts, $ content = null) {

// Wyodrębnij atrybuty shortcode
wyciąg (shortcode_atts (tablica (
„url” => ”,
„title” => ”,
„target” => ”,
„text” => ”,
„kolor” => „zielony”,
), $ atts));

// Użyj wartości tekstowej dla elementów bez zawartości
$ content = $ text? $ text: $ content;

// Przycisk powrotu z linkiem
if ($ url) {

$ link_attr = tablica (
'href' => esc_url ($ url),
'title' => esc_attr ($ title),
„target” => („blank” == $ target)? „_blank”: „”,
„class” => „myprefix-button color-”. esc_attr ($ color),
);

$ link_attrs_str = '';

foreach ($ link_attr as $ key => $ val) {

if ($ val) {

$ link_attrs_str. = ''. klucz $. '= "'. $ val. '"';

}

}


powrót '„. do_shortcode (zawartość $). „„;

}

// Brak zdefiniowanego linku, dlatego zwróć przycisk jako zakres
jeszcze {

powrót '„. do_shortcode (zawartość $). „„;

}

}
add_shortcode („przycisk”, „myprefix_button_shortcode”);

Używanie krótkiego kodu w edytorze postów

Teraz, gdy masz krótki kod, możesz dodać nowy „przycisk” (który wygląda teraz jak zwykły link, ponieważ nie nadaliśmy mu stylu) do edytora postów.

// Przykładowe użycie 1
[button href = "YOUR LINK" target = "self"] Tekst przycisku [/ przycisk]

// Przykładowe użycie 2
[button href = "YOUR LINK" target = "self" text = "Button Text"]

Stylizacja przycisku

Po co tworzyć krótki kod, jeśli będzie on wyglądał jak zwykły link? Nic. Dlatego pokażę ci, jak dodać fajny CSS3, aby stylizować przycisk pobierania i sprawić, by wyglądał seksownie.

Jak zauważyłeś w krótkim kodzie, dodałem klasę „myprefix-button”, abyś mógł łatwo stylizować go za pomocą pliku style.css. Wstaw następujący kod do swojego arkusza stylów, aby stworzyć ładny niebieski przycisk, taki jak ten na obrazie.

/ * Styl przycisku głównego * /
.myprefix-button {background: # 65A343; cień tekstu: 1px 1px 1px # 000; -webkit-border-radius: 5px; -moz-border-radius: 5px; promień obramowania: 5px; -webkit-box-shadow: 1px 2px 1px rgba (0, 0, 0, 0,1); -moz-box-shadow: 1px 2px 1px rgba (0, 0, 0, 0,1); box-shadow: 1px 2px 1px rgba (0, 0, 0, 0,1); kursor: wskaźnik; display: blok wbudowany; przelew: ukryty; wypełnienie: 1px; wyrównanie w pionie: środek; }

.myprefix-button span {border-top: 1px solid rgba (255, 255, 255, 0.25); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; kolor: #fff; Blok wyświetlacza; font-weight: pogrubiony; rozmiar czcionki: 1em; wypełnienie: 6px 12px; cień tekstu: 1px 1px 1px rgba (0, 0, 0, 0,25); }

/* Unosić się */
.przycisk myprefix: hover {background: # 558938; dekoracja tekstu: brak; }

/ * Aktywny * /
.przycisk myprefix: aktywny {background: # 446F2D; }

Zielony przycisk skrótu

Obsługa wielu kolorów

Jeśli zauważyłeś, że shortcode ma parametr koloru, którego możesz użyć do dodania stylów CSS dla różnych kolorów przycisków. Na przykład, jeśli możesz dodać opcję koloru niebieskiego, dodając ten dodatkowy CSS:

/ * Niebieski przycisk * /
.myprefix-button.color-blue {background: # 2981e4}

/ * Niebieski przycisk najechania * /
.myprefix-button.color-blue: hover {background: # 2575cf}

/ * Aktywny niebieski przycisk * /
.myprefix-button.color-blue: active {background: # 0760AD}

Teraz wystarczy użyć parametru koloru w skrócie:

[button href = "YOUR LINK" target = "self" color = "blue"] Tekst przycisku [/ przycisk]

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me