Създайте къси кодове за нашата тема WordPress

Откакто започнахме с този проект, винаги сме искали той да има наш собствен етикет и затова вторият шаблон, който използваме DesdeLinux, е създаден от нас на 100%.

След това последваха други версии и въпреки че можем да закупим или наемем определени уеб услуги, за да създадем наши проекти като тези на StudioDWeb.comили купете вече създадени шаблони в ThemeForest.net, ние винаги сме искали да имаме това, което е наше, адаптирано към нашите нужди и да преминем WebDevelopment.com може да бъде от помощ 😀

Както и да е, аз съм запален по уеб дизайна и разработката и вече работя по новата тема за DesdeLinux и ще ви покажа няколко снимки на екрана за това как изглежда.

Идеята не е да излезем от това, към което вече сме приспособени, затова много елементи остават същите или по подобен начин. Започвам с началната страница

И ето как биха изглеждали статиите:

Както можете да видите, той отговаря на нашата мярка и ние включихме нови кратките за разработването на статиите.

Ето защо ми хрумна да споделя с вас как да създам един от тях (информационния), в случай че искате да ги включите във вашите теми на WordPress. Искам да кажа, нещо подобно:

Не съм специалист по програмиране с тази CMS, така че няма да се опитвам да обяснявам защо и как работи по този начин, а само ще ви покажа как да го направите, точка.

За това използваме «швейцарския армейски нож» от WordPress, Имам предвид файла function.php които обикновено намираме в почти всички теми.

Пример за Function.php с ShortCodes DesdeLinux

Това, което ще направим в този файл, е да добавим структурата на нашия ShortCode и, разбира се, етикета, който го показва. Така че нека стигнем до него.

Вътре във функцията.php

Вътре в нашия файл function.php това, което ще поставим, ще бъде HTML структурата на ShortCode, но не е просто да поставим HTML маркерите просто така. Бихме имали нещо подобно:

// Информационно поле за информационна функция ($ atts, $ content = null, $ code = "") {$ return = ' '; $ return. = $ съдържание; $ return. = ' '; return $ return; } // ShortCode add_shortcode ('info', 'infobox');

Оттук изясняваме няколко неща. Първо, когато използваме две ленти, ние коментираме реда, следователно // Информация това е просто коментар.

Името на функцията, в този случай Infobox Тя може да бъде променена на каквото искаме, но трябва да съвпада с името, което използваме в последния ред.

Пример:

$ return. = $ съдържание;

променлив съдържание $ където съдържанието, което поставяме в ShortCode, отива по подразбиране, ще върне нулева стойност, ако не поставим нищо.

Сега името на ShortCode е това, което зададохме с:

add_shortcode( 'info', 'infobox' );

Къде можете да се промените инфо за това, което искаме. Сега, за да изглежда като примера, трябва да дадем:

[ info ]Este será el ShortCode de ejemplo[ /info ]

Макар разбира се, без интервалите, които сложих, защото очевидно ShortCode ще бъде активиран.

Стил ShortCode

Ако погледнете горния ред, без PHP кода и променливите, ShortCode в чист HTML ще бъде нещо подобно:

<div class="alert-info"></div>

Така че трябва само да приложим CSS стила.

.alert.alert-info {background: # d9edf7 url (info.png) без повторение 7px 50%; граница-радиус: 4px; граница: 1px плътно # bce8f1; цвят: # 3a87ad; размер на шрифта: 14px; марж: 15px 15px; подложка: 15px 15px 15px 50px изравняване на текст: вляво}

И това е .. Повтарям, аз не съм програмист или нещо подобно и обяснението, което дадох, е как разбирам, че ShortCode работи 😛