Creați coduri scurte pentru tema noastră WordPress

De când am început cu acest proiect, am dorit întotdeauna să aibă propria noastră etichetă și de aceea al doilea șablon îl folosim DesdeLinux, a fost creat de noi 100%.

Apoi au urmat și alte versiuni și, deși putem cumpăra sau angaja anumite servicii web pentru a crea desenele noastre precum cele ale StudioDWeb.com, sau cumpărați șabloane deja create în ThemeForest.net, am dorit întotdeauna să avem propriile noastre, adaptate nevoilor noastre și să ne oprim WebDevelopment.com poate fi de ajutor 😀

Oricum, sunt pasionat de Web Design și Dezvoltare și lucrez deja la noul subiect pentru DesdeLinux și vă voi arăta câteva capturi de ecran despre cum arată.

Ideea nu este să ieșim din ceea ce suntem deja adaptați, așa că multe elemente rămân aceleași sau într-un mod similar. Încep cu pagina de pornire

Și așa ar arăta articolele:

După cum puteți vedea, este potrivit măsurii noastre și am inclus noi coduri scurte pentru elaborarea articolelor.

De aceea mi-a venit în minte să vă împărtășesc cum să creați una dintre ele (cea cu informații) în cazul în care doriți să le includeți în subiectele dvs. de WordPress. Adică, așa ceva:

Nu sunt un expert în programare cu acest CMS, așa că nu voi încerca să explic de ce și cum funcționează în acest fel, vă voi arăta doar cum să o faceți, punct.

Pentru aceasta folosim „cuțitul elvețian” al WordPress, Mă refer la dosar function.php pe care le găsim în mod normal în aproape toate subiectele.

Exemplu de Function.php cu ShortCodes DesdeLinux

Ceea ce vom face în acest fișier este să adăugăm structura ShortCode-ului nostru și, bineînțeles, eticheta care îl arată. Așadar, să ajungem la el.

În interiorul funcției.php

În fișierul nostru function.php ceea ce vom pune va fi structura HTML a ShortCode-ului, dar nu este pur și simplu să punem etichetele HTML exact așa. Am avea așa ceva:

// Informații despre funcția Info ($ atts, $ content = null, $ code = "") {$ return = ' '; $ return. = $ content; $ return. = ' '; return $ return; } // ShortCode add_shortcode ('info', 'infobox');

De aici clarificăm câteva lucruri. În primul rând, atunci când folosim două bare, comentăm linia, prin urmare // Informații este doar un comentariu.

Numele funcției, în acest caz caseta de informații Poate fi schimbat cu orice ne dorim, dar trebuie să se potrivească cu numele pe care îl folosim în ultima linie.

Exemplu:

$ return. = $ content;

variabil conținut $ care este locul în care conținutul pe care îl punem în ShortCode merge în mod implicit, va returna o valoare nulă dacă nu punem nimic.

Acum numele ShortCode este ceea ce am setat cu:

add_shortcode( 'info', 'infobox' );

Unde te poți schimba info pentru ceea ce vrem. Acum, pentru a face să semene cu exemplul, trebuie să punem:

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

Deși, desigur, fără spații, pe care le-am pus pentru că, evident, ShortCode-ul ar fi activat.

Stilul ShortCode

Dacă te uiți la linia de mai sus, fără codul și variabilele PHP, ShortCode în HTML pur ar arăta cam așa:

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

Deci, trebuie doar să aplicăm stilul CSS.

.alert.alert-info {background: # d9edf7 url (info.png) no-repeat 7px 50%; raza chenarului: 4px; chenar: 1px solid # bce8f1; culoare: # 3a87ad; dimensiunea fontului: 14px; margine: 15px 15px; umplutură: 15px 15px 15px 50px text-align: left}

Și atât. Repet, nu sunt programator sau ceva de genul acesta, iar explicația pe care am dat-o este modul în care înțeleg că funcționează ShortCode 😛