Skep kortkodes vir ons WordPress-tema

Sedert ons met hierdie projek begin het, wou ons altyd hê dat dit ons eie etiket moes hê, en daarom is die tweede sjabloon waarin ons gebruik Van Linux, dit is 100% deur ons geskep.

Daarna het ander weergawes gevolg, en hoewel ons sekere webdienste kan koop of huur om ons ontwerpe soos dié van te skep StudioDWeb.com, of koop sjablone wat reeds in ThemeForest.net, ons wou nog altyd ons eie hê, aangepas by ons behoeftes en kom inloer WebDevelopment.com kan van hulp wees 😀

In elk geval, ek is passievol oor webontwerp en -ontwikkeling, en ek werk reeds aan die nuwe onderwerp vir Van Linux en ek sal u 'n paar kiekies wys van hoe dit lyk.

Die idee is nie om uit te kom waaraan ons reeds aangepas is nie, so baie elemente bly dieselfde of op 'n soortgelyke manier. Ek begin met die tuisblad

En so sal die artikels daar uitsien:

Soos u kan sien, pas dit ons maatstaf en het ons nuut ingesluit short vir die uitwerking van die artikels.

Dit is waarom ek by my opgekom het om met u te deel hoe u een daarvan (die inligting een) kan skep in geval u dit by u onderwerpe van WordPress. Ek bedoel, so iets:

Ek is nie 'n kenner van programmering met hierdie CMS nie, dus sal ek nie probeer verduidelik waarom en hoe dit op hierdie manier werk nie; ek sal jou net wys hoe om dit te doen, punt.

Hiervoor maak ons ​​gebruik van «die Switserse leërmes» van WordPress, Ek bedoel die lêer funksie.php wat ons normaalweg in byna alle onderwerpe vind.

Voorbeeld van die Function.php met die ShortCodes van DesdeLinux

Wat ons in hierdie lêer sal doen, is om die struktuur van ons ShortCode by te voeg en natuurlik die etiket waarop dit verskyn. Laat ons dus daarby kom.

Binne die Function.php

Ons sal die HTML-struktuur van die ShortCode in ons funksie.php-lêer sit, maar dit is nie bloot om die HTML-tags so te sit nie. Ons sou so iets hê:

// Info-funksie infoboks ($ atts, $ content = null, $ code = "") {$ return = ' '; $ terugkeer. = $ inhoud; $ return. = ' '; return $ return; } // Die ShortCode add_shortcode ('info', 'infobox');

Hiervandaan verduidelik ons ​​'n paar dinge. Eerstens, as ons twee mate gebruik, lewer ons 'n opmerking oor die reël // Inligting dis net 'n opmerking.

Die naam van die funksie, in hierdie geval infoboks Dit kan verander word na wat ons wil, maar dit moet ooreenstem met die naam wat ons in die laaste reël gebruik.

Voorbeeld:

$ terugkeer. = $ inhoud;

veranderlike $ inhoud dit is waar die inhoud wat ons in die ShortCode plaas, standaard gaan, dit sal 'n nulwaarde gee as ons niks plaas nie.

Nou, die naam van die ShortCode is waarmee ons dit stel:

add_shortcode( 'info', 'infobox' );

Waar jy kan verander inligting vir wat ons wil hê. Om dit nou te laat lyk soos die voorbeeld wat ons moet stel:

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

Alhoewel natuurlik, sonder die spasies, wat ek sit, want natuurlik sal die ShortCode geaktiveer word.

Kortkode-styl

As u na die lyn hierbo kyk, sonder die PHP-kode en veranderlikes, sal die ShortCode in suiwer HTML so lyk:

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

Ons hoef dus slegs die CSS-styl toe te pas.

.alert.alert-info {agtergrond: # d9edf7 url (info.png) no-repeat 7px 50%; grensradius: 4px; rand: 1px solied # bce8f1; kleur: # 3a87ad; lettergrootte: 14 px; marge: 15px 15px; opvulling: 15px 15px 15px 50px teksbelyning: links}

En dit is dit .. Ek herhaal, ek is nie 'n programmeerder of iets dergeliks nie, en die verduideliking wat ek gegee het, is hoe ek verstaan ​​dat die ShortCode werk 😛