Sukurkite „WordPress“ temos trumpuosius kodus

Kadangi pradėjome nuo šio projekto, visada norėjome, kad jis turėtų savo etiketę, todėl ir antrasis šablonas, kurį naudojame Nuo „Linux“, jį sukūrėme mes 100%.

Tada sekė kitos versijos ir, nors mes galime nusipirkti ar samdyti tam tikras žiniatinklio paslaugas, kad sukurtume savo dizainą, panašų į StudioDWeb.comarba nusipirkite jau sukurtus šablonus ThemeForest.net, mes visada norėjome turėti savo, pritaikytą savo poreikiams ir užsukti WebDevelopment.com gali būti pagalba 😀

Bet kokiu atveju, aš esu aistringas interneto dizainui ir plėtrai, ir jau dirbu prie naujos temos Nuo „Linux“ ir aš jums parodysiu keletą ekrano kopijų, kaip ji atrodo.

Idėja nėra išeiti iš to, prie ko mes jau esame prisitaikę, todėl daugelis elementų išlieka tokie patys arba panašiai. Pradedu nuo pagrindinio puslapio

Straipsniai atrodytų taip:

Kaip matote, tai tinka mūsų matui ir įtraukėme naują Trumpieji kodai straipsniams parengti.

Štai kodėl man kilo mintis pasidalinti su jumis, kaip sukurti vieną iš jų (informacinę), jei norite įtraukti juos į savo temas. WordPress. Aš turiu galvoje kažką panašaus į šį:

Nesu šios CMS programavimo ekspertas, todėl nebandysiu paaiškinti, kodėl ir kaip tai veikia tokiu būdu, aš tik parodysiu, kaip tai padaryti, taškas.

Tam mes naudojame „Šveicarijos armijos peilį“ WordPress, Turiu omenyje bylą function.php kad paprastai randame beveik visose temose.

„Function.php“ pavyzdys su „DesdeLinux“ trumpaisiais kodais

Ką darysime šiame faile, tai pridėsime savo „ShortCode“ struktūrą ir, žinoma, etiketę, kuri ją parodo. Taigi eikime į tai.

Funkcijos viduje.php

Mūsų faile function.php tai, ką įdėsime, bus „ShortCode“ HTML struktūra, tačiau tai nėra paprasčiausias HTML žymių įdėjimas. Mes turėtume kažką tokio:

// Informacijos funkcijos laukelis ($ atts, $ content = null, $ code = "") {$ return = ' "; $ return. = $ content; $ grąža. = ' "; return $ return; } // „ShortCode add_shortcode“ („info“, „infobox“);

Iš čia mes paaiškiname keletą dalykų. Pirma, kai mes naudojame dvi juostas, mes komentuojame eilutę, todėl // Informacija tai tik komentaras.

Šiuo atveju funkcijos pavadinimas informacijos dėžutė Jį galima pakeisti į viską, ko norime, tačiau jis turi atitikti vardą, kurį naudojame paskutinėje eilutėje.

pavyzdys:

$ return. = $ content;

Kintamas $ turinys Kuris turinys, kurį įdėjome į „ShortCode“, pagal numatytuosius nustatymus grąžins nulinę vertę, jei nieko nepadėsime.

Dabar trumpojo kodo pavadinimą nustatėme:

add_shortcode( 'info', 'infobox' );

Kur galite pasikeisti informacijos tam, ko mes norime. Kad tai atrodytų kaip pavyzdys, kurį turime pateikti:

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

Nors, žinoma, be tarpų, kuriuos įdėjau, nes akivaizdu, kad „ShortCode“ būtų suaktyvintas.

„ShortCode“ stilius

Jei pažvelgsite į aukščiau esančią eilutę be PHP kodo ir kintamųjų, grynojo HTML trumpasis kodas atrodytų maždaug taip:

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

Taigi mes turime taikyti tik CSS stilių.

.alert.alert-info {background: # d9edf7 url (info.png) no-repeat 7px 50%; krašto spindulys: 4px; kraštas: 1px solid # bce8f1; spalva: # 3a87ad; šrifto dydis: 14 taškų; paraštė: 15 taškų 15 taškų; užpildas: 15 taškų 15 taškų, 15 taškų 50 taškų teksto lygiuotė: kairė}

Ir viskas. Aš kartoju, kad aš nesu programuotojas ar panašiai, ir mano paaiškinimas yra toks, kaip aš suprantu, kad veikia „ShortCode“