Share
Unul dintre motivele principale pentru care WordPress este cea mai populară platformă CMS disponibilă este nivelul absolut de personalizare pe care îl aduce la masă. Astăzi, vom examina procesul de integrare a uneia dintre acele caracteristici populare, shortcodes, într-un mod cât mai ușor de utilizat, în tema noastră.
Chiar dacă există câteva miliarde de opțiuni de alegere, WordPress a făcut confortabil coroana ca rege al CMS-urilor și a platformelor de blogging cu incredibilă flexibilitate. Un cod scurt este una din caracteristicile care scot în evidenta caracterul prietenos al sistemului.
Cu toate acestea, majoritatea implementărilor necesită în continuare să vă amintiți codul scurt în sine. Când ați creat o capodoperă a unei teme, utilizabilitatea nu ar trebui să rămână în urmă. Vă voi arăta cum să creați coduri scurte și apoi să le integrați cu editorul propriu-zis, astfel încât utilizatorul să nu treacă prin documentele dvs. doar pentru a vă aminti sintaxa corectă pentru a încorpora un buton. Intrigat? Să începem imediat!
Se numește a cod scurt și a făcut parte din instalarea WordPress de bază, deoarece a lovit versiunea 2.5. În principiu, acestea sunt similare cu bbcodes folosit pe software-ul populare de mesaje: marcaje ușoare folosite pentru a formata conținutul.
Aici puteți defini propriile coduri pentru a fi utilizate în cadrul temei dvs. Spre deosebire de BBCodes, insa, codurile scurte sunt folosite in primul rand pentru a proteja utilizatorul de marcari plictisitoare si posibile erori. Folosind un scurtcod, de exemplu un buton, utilizatorul nu trebuie să-și amintească marcajul complicat care trebuie introdus pentru a crea butonul. În ansamblu, este un stimulent destul de mare pentru folosirea unei teme și, eventual, pentru o noob prietenie.
Dacă nu sunteți familiarizați cu conceptul de BBCode și, prin extensie, codul scurt, acesta este modul în care arată cea mai simplă versiune:
[Mi-galeria]
Dacă ați încorporat vreodată o galerie cu WordPress, ați folosit deja un scurtcod!
Există încă două variante pe care ar trebui să le cunoașteți.
[buton] Conținut [/ button] [link to = "www.net.tutsplus.com"] NetTuts + [/ link]
Vom implementa fiecare dintre aceste variante înainte de a trece la alte lucruri mai aglomerate.
Fiecare implementare de coduri scurte necesită un proces în două etape:
Indiferent de complexitatea codului scurt, pașii de bază rămân aceiași.
Vom învăța mai întâi cum să punem în aplicare cel mai simplu scurt cod posibil. Ca caz de utilizare, să presupunem că încheiați fiecare post cu un text obișnuit de semnătură. Copierea și lipirea ar putea fi o abordare simplă, dar s-ar putea să vă simțiți ca un luddit care o face. Să rezolvăm acest lucru cu o anumită capacitate de lucru!
Dacă nu se specifică altfel, tot codul de mai jos intră functions.php
Funcția primară are grijă de logica de bază a codului dvs. scurt. Va trebui să creăm acest lucru înainte de a continua.
function signOffText () return 'Va multumesc mult pentru citit! Și nu uitați să vă abonați la RSS feed-ul nostru. „;
Următorul pas, după cum puteți presupune, este să vă conectați la sistemul WordPress pentru a asocia codul scurt cu acest text. Acest lucru se face folosind add_shortcode metodă.
Accentsconagua
add_shortcode ("signoff", "signOffText"); Da, este nevoie doar de un singur strat. Primul parametru definește codul scurt pe care îl veți folosi în editor, în timp ce al doilea indică funcția pe care am creat-o cu un moment în urmă.
Notă: add_shortcode metoda vine întotdeauna după metoda manipulatorului.
Ar trebui să o facă. Doar tastați [ieșire] în editorul dvs. și WordPress va înlocui dinamic textul după cum este necesar.
În continuare, vom examina o altă variantă: împachetarea unui anumit conținut cu un anumit markup. Va trebui să o utilizați așa:
[citat] Un text [/ quote]
Funcția primară trebuie modificată puțin aici. Observăm că funcția noastră primește doi parametri: atribute prin intermediul ATTS variabilă și conținutul în sine prin conţinut variabil.
Următorul pas este pur și simplu să întoarceți marcajul înfășurat în jurul textului selectat.
funcția citată ($ atts, $ content = null) return '" 'Conținut de $.'"„;
Acest pas rămâne același:
add_shortcode ("citat", "citat"); Îmi place să-mi numesc codurile scurte exact la fel ca și funcțiile primare, cu excepția cazului în care denumirea devine greoaie. Poate aveți propriile stiluri, deci nu ezitați să schimbați schema de numire. Nu există o bună practică acceptată.
În cele din urmă, vom examina adăugarea atributelor la mix. Va trebui să o utilizați așa:
[link către = "www.net.tutsplus.com"] NetTuts + [/ link]
Funcția primară trebuie să fie refactată pentru a face față tuturor noilor funcționalități pe care le aducem. În primul rând, fuzionăm atributele transmise cu codul scurt și atributele pe care le așteptăm. Puteți citi mai multe despre acest proces aici.
Ultimul pas, ca întotdeauna, este pur și simplu să întoarcem marcajul pe care îl dorim după ce îl umplem corespunzător. Aici am folosit datele trimise cu codul scurt pentru a completa ancora href atributul, precum și conținutul.
($ atts, $ content = null) extract (shortcode_atts (array ("to" => "http://net.tutsplus.com"), $ atts)); returnați ''. $ content. ''; Acest pas rămâne neschimbat, dar esențial. Amintiți-vă, fără aceasta, WordPress nu are ce face cu codul scurt.
add_shortcode ("link", "link"); Aici vă așteptați ca acest tutorial să se încheie, dar nu, ați ghicit greșit. Așa cum am menționat mai devreme, codurile scurte iau o mulțime de durere, dar există câteva puști. Pentru unul, utilizatorul trebuie să-și amintească codurile scurte pe care le are la dispoziție pentru a le folosi în mod semnificativ.
Dacă aveți doar un cuplu, totul este bun, dar cu teme caracteristice încărcate, amintirea fiecăruia devine o corvoadă. Pentru a rectifica acest lucru, vom adăuga butoane direct la interfața TinyMCE, astfel încât utilizatorul poate face clic pur și simplu pe buton pentru a obține totul făcut.
De exemplu, o să vă învăț cum să adăugați cea de-a doua variantă editorului. Sper că puteți extrapola aceste informații pentru funcționalitatea specifică pe care o aveți în vedere.
Primul pas în acest proces este de a se încadra în WordPress și de a adăuga codul nostru de inițializare. Fragmentul următor are grijă de asta. Amintiți-vă, toate acestea trebuie să fie în dvs. functions.php fişier.
add_action ('init', 'add_button'); Cerem WordPress să ruleze funcția numită add_button când pagina este încărcată inițial. ADD_ACTION este cârligul nostru în interiorul WordPress.
funcția add_button () if (current_user_can ('edit_posts') && current_user_can ('edit_pages')) add_filter ('mce_external_plugins', 'add_plugin'); add_filter ('mce_buttons', 'register_button'); Acest mic fragment de cod va fi executat când pagina se încarcă. Mai sus, verificăm dacă utilizatorul are autorizarea necesară pentru a edita o pagină sau o postare înainte de a continua.
Odată ce sa terminat, am conectat două dintre funcțiile noastre [care urmează să fie scrise] la anumite filtre. Ambele se conectează, de fapt, în arhitectura frontului TinyMCE prin WordPress. Primul este executat atunci când editorul încarcă pluginurile în timp ce al doilea este rulat atunci când butoanele urmează să fie încărcate.
În exemplul de mai sus, continuăm indiferent de modul în care se află editorul. Dacă doriți să îl afișați numai atunci când editorul este în modul, de exemplu, modul vizual, va trebui să efectuați o verificare rapidă. Dacă get_user_option ( 'rich_editing') evaluează pentru Adevărat, esti in modul vizual. În caz contrar, modul HTML. De obicei, am tendința de a adăuga aceste butoane numai în modul vizual, dar nu ezitați să le amestecați și să le potriviți aici.
funcția register_button ($ butoane) array_push ($ butoane, "quote"); returnați butoanele $;
Funcția doar adaugă codul nostru scurt la seria de butoane. De asemenea, puteți adăuga un separator între noul dvs. buton și butoanele anterioare prin trecerea unui | inainte de.
funcția add_plugin ($ plugin_array) $ plugin_array ['quote'] = get_bloginfo ('template_url'). '/ js / customcodes.js'; retur $ plugin_array; Fragmentul de mai sus permite TinyMCE și WordPress să știe cum să se ocupe de acest buton. Aici, ne-am hărțuit citat cod scurt la un anumit fișier JavaScript. Noi folosim get_bloginfo pentru a obține calea către șablonul curent. De dragul organizării, păstrez pluginul TinyMCE împreună cu celelalte fișiere JS.
Acum, pe porțiunea finală a efortului nostru. Rețineți că următorul cod merge într-un fișier numit customcodes.js plasat în directorul JS al temei. Dacă credeai că a intrat functions.php ca tot codul de mai sus, nici un cookie pentru tine!
(funcția () tinymce.create ('tinymce.plugins.quote', init: function (ed, url) ed.addButton ('quote', title: 'Add a Quote', image: url + '/ image .png ', onclick: functie () ed.selection.setContent (' [quote] '+ ed.selection.getContent () +' [/ quote] cm) return null;,); tinymce.PluginManager.add ('quote', tinymce.plugins.quote);) (); Pare puțin complex, dar vă asigur că nu este altceva decât. Să o descompunem în secțiuni mai mici pentru a ne face mai ușor să analizăm.
Primul ordinea zilei este o închidere rapidă pentru a împiedica poluarea spațiilor de nume globale. Înăuntru, numim crea pentru a crea un nou plugin care să treacă prin nume și alte atribute asortate. Din motive de cointeresare, o să-mi spun pluginul citat.
Odată intrat, definim init funcția care este executată la inițializare. ed indică instanța editorului în timp ce URL-ul indică adresa URL a codului pluginului.
Majoritatea atributelor ar trebui să fie destul de explicative. Rețineți că imaginea pe care o transmiteți este relativă la dosarul părinte al fișierului JS care deține codul. Aici ar fi director temă / js.
Următor → up, vom crea un handler de evenimente pentru acest buton prin onclick funcţie. Linia unică pe care o conține conține, în esență, textul selectat, dacă există, și îl împachetează fără codul scurt. setContent și getContent sunt metode de ajutor oferite de tinyMCE pentru a manipula textul selectat.
In cele din urma, în ultima linie, adăugăm pluginul creat proaspăt la managerul de pluginuri al tinyMCE. Fiți atenți la numele pe care îl utilizați în fiecare pas. Este o eroare predispusă dacă nu acordați atenție. Și asta e vorba de asta! Au fost efectuate! Încărcați editorul și asigurați-vă că butonul dvs. nou spiffy funcționează.
Și acolo aveți. Am integrat cu succes codurile scurte într-o temă WordPress într-un mod foarte ușor de utilizat. Sperăm că ați găsit acest tutorial pentru a vă ajuta. Simțiți-vă liber să reutilizați acest cod în altă parte în proiectele dvs. și să faceți clic în cadrul comentariilor dacă aveți nevoie de asistență.
Întrebări? Ce lucruri frumoase de spus? Critici? Activați secțiunea de comentarii și lasă-mă un comentariu. Codificare fericită și vă mulțumesc foarte mult pentru citire!
