Od początku naszego projektu chcieliśmy, aby miał on nasz własny charakter, dlatego też drugi szablon, którego używamy w DesdeLinux, został stworzony w 100% przez nas.
Potem pojawiły się inne wersje i chociaż możemy kupić lub zatrudnić pewne usługi sieciowe do tworzenia naszych projektów, takie jak te z EstudioDWeb.com , lub kupić gotowe szablony z ThemeForest.net , zawsze chcieliśmy mieć nasze własne, dostosowane do naszych potrzeb, a odwiedzenie DesarrolloWeb.com może być pomocne
Tak czy inaczej, jestem pasjonatem projektowania i tworzenia stron internetowych i już pracuję nad nowym motywem dla DesdeLinux. Pokażę wam kilka zrzutów ekranu, które pokażą, jak to wygląda.
Chodzi o to, aby nie wydostać się z tego, do czego już jesteśmy przystosowani, więc wiele elementów pozostaje takich samych lub w podobny sposób. Zaczynam od strony głównej
A tak wyglądałyby artykuły:
Jak widać, wszystko idzie zgodnie z planem i dodaliśmy nowe krótkie kody do tworzenia artykułów.
Dlatego pomyślałem, że podzielę się z Wami, jak utworzyć jeden z nich (informacyjny), na wypadek gdybyście chcieli go uwzględnić w swoich motywach WordPress . Coś takiego:
Nie jestem ekspertem w programowaniu z tym CMS, więc nie będę się starał wyjaśniać dlaczego i jak to działa, tylko pokażę jak to zrobić, kropka.
Aby tego dokonać, wykorzystujemy „szwajcarski scyzoryk” WordPressa – mam na myśli plik functions.php , który zazwyczaj znajduje się w większości motywów.
W tym pliku dodamy strukturę naszego ShortCode i oczywiście etykietę, która to pokazuje. Więc przejdźmy do tego.
Wewnątrz pliku Function.php
W naszym pliku function.php umieścimy strukturę HTML ShortCode, ale nie wystarczy po prostu umieścić znaczniki HTML w ten sposób. Mielibyśmy coś takiego:
// Info funkcji infobox ($ atts, $ content = null, $ code = "") {$ return = ' '; $ powrót. = $ zawartość; $ powrót. = ' '; return $ return; } // ShortCode add_shortcode ('info', 'infobox');
Stąd wyjaśniamy kilka rzeczy. Po pierwsze, używając dwóch ukośników, oznaczamy linię komentarzem, więc // Info jest po prostu komentarzem.
Nazwę funkcji, w tym przypadku infobox, możemy zmienić na dowolną, ale musi ona odpowiadać nazwie użytej w ostatnim wierszu.
przykład:
$ powrót. = $ zawartość;
Zmienna $content , do której trafia treść umieszczana w kodzie ShortCode, zwróci wartość null, jeśli nic nie umieścimy.
Teraz nazwę ShortCode ustawiliśmy za pomocą:
add_shortcode( 'info', 'infobox' );
Gdzie możesz zmienić informacje na dowolne. Teraz, aby wyglądało to jak w przykładzie, musimy wpisać:
[ info ]Este será el ShortCode de ejemplo[ /info ]
Chociaż oczywiście bez spacji, które wstawiłem, bo oczywiście ShortCode byłby aktywowany.
Styl ShortCode
Jeśli spojrzysz na powyższą linię, bez kodu PHP i zmiennych, ShortCode w czystym HTML wyglądałby mniej więcej tak:
<div class="alert-info"></div>
Musimy więc tylko zastosować styl CSS.
.alert.alert-info {background: # d9edf7 url (info.png) no-repeat 7px 50%; border-radius: 4px; obramowanie: 1px solid # bce8f1; kolor: # 3a87ad; rozmiar czcionki: 14px; margines: 15px 15px; dopełnienie: 15px 15px 15px 50px text-align: left}
I to wszystko... Powtarzam, nie jestem programistą ani nic w tym stylu, a wyjaśnienie, które podałem, jest takie, jak rozumiem działanie ShortCode