Utwórz skróty do naszego motywu WordPress

Odkąd zaczynaliśmy ten projekt, zawsze chcieliśmy, aby miał on naszą własną etykietę i dlatego użyliśmy drugiego szablonu DesdeLinux, został stworzony przez nas w 100%.

Potem pojawiły się inne wersje i chociaż możemy kupować lub wynajmować niektóre usługi internetowe, aby tworzyć nasze projekty, takie jak te z StudioDWeb.comlub kup szablony już utworzone w ThemeForest.net, zawsze chcieliśmy mieć własne, dostosowane do naszych potrzeb i wpadać WebDevelopment.com może pomóc

W każdym razie jestem pasjonatem projektowania i programowania stron internetowych i już pracuję nad nowym tematem dla DesdeLinux i pokażę wam kilka zrzutów ekranu, 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ć, pasuje do naszej miary i dodaliśmy nowy ShortCodes do opracowania artykułów.

Dlatego przyszło mi do głowy, aby podzielić się z Wami tym, jak stworzyć jeden z nich (informacyjny) na wypadek, gdybyście chcieli uwzględnić je w swoich tematach WordPress. Mam na myśli 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.

W tym celu używamy „szwajcarskiego scyzoryka” WordPress, Mam na myśli plik function.php które zwykle znajdujemy w prawie wszystkich tematach.

Przykład Function.php z ShortCodes DesdeLinux

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');

W tym miejscu wyjaśniamy kilka rzeczy. Po pierwsze, kiedy używamy dwóch słupków, zakomentowujemy linię, dlatego też // Informacje to tylko komentarz.

W tym przypadku nazwa funkcji skrzynka informacyjna Można go zmienić na cokolwiek chcemy, ale musi pasować do nazwy, której używamy w ostatnim wierszu.

przykład:

$ powrót. = $ zawartość;

Niech zmienna $ treści czyli tam, gdzie zawartość, którą umieściliśmy w ShortCode, trafia domyślnie, zwróci wartość null, jeśli nic nie wstawimy.

Teraz nazwę ShortCode ustawiliśmy za pomocą:

add_shortcode( 'info', 'infobox' );

Gdzie możesz się zmienić Informacje za co chcemy. Teraz, aby wyglądało to jak na przykładzie, musimy umieścić:

[ 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, że ShortCode działa 😛