Share
En av de främsta anledningarna till att WordPress är den mest populära CMS-plattformen är den rena anpassningsbarheten som den tar med sig till bordet. Idag granskar vi processen för att integrera en av de populära funktionerna, kortnummer, på det mest användarvänliga sättet, i vårt tema.
Även om det finns några trillionalternativ att välja mellan, har WordPress bekvämt tagit kronan som kungen av CMS och bloggar med sin otroliga flexibilitet. En kortnummer är en av de funktioner som gör det lättare att använda systemet.
Men de flesta implementeringar kräver fortfarande att du kommer ihåg kortkoden själv. När du har skapat ett mästerverk av ett tema, bör användbarheten inte riktigt ligga bakom. Jag ska visa dig hur du skapar kortkoder och integrerar det med redaktören själv, så användaren behöver inte poring genom dina dokument för att bara komma ihåg den korrekta syntaxen för att bädda in en knapp. Fascinerad? Låt oss börja omedelbart!
Det heter a kortkod och det har varit en del av den grundläggande WordPress-installationen eftersom den slog version 2.5. I grund och botten liknar dessa bb-koder Används på populära meddelandekort programvara: lättvikt markup används för att formatera innehåll.
Här kan du definiera dina egna koder för att använda inom ditt tema. Till skillnad från BBCodes är kortkod i första hand avsedda att skydda användaren från tråkiga uppslag och möjliga fel. Genom att använda en kortnummer, till exempel en knapp, behöver användaren inte komma ihåg den komplicerade markeringen som måste ingå för att skapa knappen. Sammantaget är det ganska bra för ett tema användbarhet och möjligen ingen vänlighet.
Om du inte är bekant med begreppet BBCode, och i förlängning, shortcode, så ser den enklaste versionen ut:
[My-galleri]
Om du någonsin har inbäddat ett galleri med WordPress har du redan använt en kortnummer!
Det finns ytterligare två variationer som du också bör känna till.
[knapp] Innehåll [/ knapp] [länk till = "www.net.tutsplus.com"] NetTuts + [/ länk]
Vi implementerar var och en av dessa variationer först innan vi går vidare till andra, mer livliga saker.
Varje kortkodsimplementering kräver en tvåstegsprocess:
Oavsett kortkodens komplexitet förblir kärnstegen samma.
Vi lär oss först att implementera den enklaste kortkoden som är möjlig. Som ett användarfall, låt oss säga att du avslutar varje inlägg med lite vanligt att skriva ut text. Kopiering och klistra kan vara ett enkelt tillvägagångssätt, men du kan känna dig som en luddig gör det. Låt oss fixa detta med lite WP niftiness!
Om inget annat anges gäller all kod nedan functions.php
Den primära funktionen tar hand om kärnlogiken på din kortnummer. Vi måste skapa detta först innan vi fortsätter.
funktion signOffText () return Tack så mycket för att läsa! Och kom ihåg att prenumerera på vårt RSS-flöde. ';
Nästa steg, som du antar, är att koppla in i WordPress-systemet för att associera kortkoden med den här texten. Detta görs med hjälp av add_shortcode metod.
Accentsconagua
add_shortcode ('signoff', 'signOffText'); Ja, en enda en-liner är allt som krävs. Den första parametern definierar den kortnummer du ska använda i redigeraren, medan den andra pekar på den funktion vi skapade ett ögonblick eller så sen.
Notera: De add_shortcode Metoden kommer alltid efter hanteringsmetoden.
Det borde göra det. Bara Skriv [Signoff] i din redaktör och WordPress kommer att ersätta texten vid behov efter behov.
Därefter kommer vi ta en titt på en annan variant: Innehåller lite innehåll med viss markering. Du måste använda det som så:
[citat] En del text [/ quote]
Den primära funktionen måste ändras lite här. Vi noterar att vår funktion får två parametrar: attribut via ATTS variabel och innehållet själv genom innehåll variabel.
Nästa steg är helt enkelt att returnera markeringen som vikts runt den markerade texten.
funktion quote ($ atts, $ content = null) return ""'. Innehåll $."';
Detta steg förblir detsamma:
add_shortcode ("quote", "quote"); Jag gillar att namnge mina kortnummer exakt samma som de primära funktionerna om inte namngivningen blir otrygg. Du kanske har egna stilar så var det fritt att ändra namngivningssystemet. Det finns ingen godtagbar bästa praxis.
Slutligen ska vi ta en titt på att lägga till attribut till blandningen också. Du måste använda det som så:
[länk till = "www.net.tutsplus.com"] NetTuts + [/ länk]
Den primära funktionen måste refactored för att hantera alla nya funktioner som vi tar med. Först sammanfogar vi de attribut som skickats in med kortnummer och attribut som vi förväntar oss. Du kan läsa mer om processen här.
Det sista steget, som alltid, är helt enkelt att återställa markeringen vi vill ha efter att ha fyllt på det på lämpligt sätt. Här har jag använt de data som skickats med kortnummer för att fylla i ankarets href attribut samt innehåll.
funktionslänk ($ atts, $ content = null) extrakt (shortcode_atts (array ("to" => 'http://net.tutsplus.com'), $ atts)); returnera ''. $ content. ''; Detta steg förblir oförändrat, men nödvändigt. Kom ihåg, utan detta har WordPress inget att göra med kortnumret.
add_shortcode ("länk", "länk"); Det är här du förväntar dig att denna handledning slutar men nej, du har gissat fel. Som jag nämnde tidigare tar kortkods mycket smärta, men det finns få gotchas. För en måste användaren komma ihåg de kortnummer han har till sitt förfogande för att göra meningsfull användning av dem.
Om du bara har ett par, är det allt bra, men med funktionen laden teman, kommer ihåg att var och en blir en syssla. För att rätta till detta ska vi lägga till knappar direkt till TinyMCE-gränssnittet, så användaren kan helt enkelt klicka på knappen för att få allt gjort.
Som exempel kommer jag att lära dig hur man lägger till den andra variationen till redaktören. Jag hoppas att du kan extrapolera denna information för den specifika funktionaliteten du har i åtanke.
Det första steget i processen är att ansluta till WordPress och lägga till vår initialiseringskod. Det följande stycket tar hand om det. Kom ihåg att allt detta måste vara i ditt functions.php fil.
add_action ('init', 'add_button'); Vi ber WordPress att köra den funktion som heter add_button när sidan laddas in. add_action är vår krok till WordPress 'internals.
funktion 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'); Detta lilla kodstycke utförs när sidan laddas. Ovan kontrollerar vi om användaren har det nödvändiga tillståndet att redigera en sida eller ett inlägg innan du fortsätter.
När det är klart kopplar vi till två av våra [att vara skrivna] funktioner till specifika filter. Båda dessa krokar faktiskt i TinyMCEs främre ändarkitektur genom WordPress. Den första körs när redigeraren laddar in plugins medan den andra körs när knapparna håller på att laddas.
I exemplet ovan fortsätter vi oavsett vilket läge redaktören är i. Om du bara vill visa den när redigeraren är in, säg visuell funktion, måste du göra en snabb check. Om get_user_option ( 'rich_editing') utvärderar till Sann, du är i visuellt läge. Annars HTML-läge. Jag brukar bruka lägga till dessa knappar endast under visuellt läge, men gärna blanda och matcha här.
funktion register_button ($ knappar) array_push ($ knappar, "quote"); returnera $ knappar;
Funktionen lägger bara till vår kortnummer till mängden knappar. Du kan också lägga till en delare mellan din nya knapp och de föregående knapparna genom att passera i en | innan.
funktion add_plugin ($ plugin_array) $ plugin_array ['quote'] = get_bloginfo ('template_url'). '/ js / customcodes.js'; returnera $ plugin_array; I utgåvan ovan kan TinyMCE och WordPress veta hur man hanterar den här knappen. Här kartlägger vi vår Citat shortcode till en specifik JavaScript-fil. Vi använder get_bloginfo metod för att få vägen till den aktuella mallen. För organisations skull håller jag min TinyMCE-plugin tillsammans med mina andra JS-filer.
Nu på sista delen av vår strävan. Kom ihåg att följande kod går till en fil som heter customcodes.js placeras i JS-katalogen i ditt tema. Om du trodde det gick in functions.php Som all koden ovan, ingen cookie för dig!
(funktion () tinymce.create ('tinymce.plugins.quote', init: funktion (ed, url) ed.addButton ('quote', title: 'Lägg till ett citat', bild: url + '/ image .nog cm) return null;,); tinymce.PluginManager.add ('quote', tinymce.plugins.quote);) (); Ser lite komplex men jag försäkrar dig, det är allt annat än. Låt oss bryta ner det i mindre avsnitt för att underlätta för oss att analysera.
Först Dagens ordning är en snabb nedläggning för att förhindra att den globala namespace förorenas. Inuti kallar vi skapa Metod för att skapa ett nytt plugin som passerar i namnet och andra olika attribut. För korthetens skull kommer jag bara att ringa till min plugin Citat.
En gång inuti definierar vi i det funktion som utförs vid initialisering. ed pekar på förekomsten av redaktionen medan url pekar på webbadressen till plugin-koden.
De flesta av attributen borde vara ganska självförklarande. Observera att bilden du skickar ligger i förhållande till moderkartan i den JS-fil som innehåller koden. Här skulle det vara temakatalog / js.
Nästa up, vi skapar händelsehanteraren för den här knappen genom onclick fungera. Den enda liner som den innehåller innehåller i huvudsak den valda texten, och omsluter den med kortnummer. setContent och getContent hjälpar metoder tillhandahålls av tinyMCE för att manipulera den markerade texten.
Till sist, I den sista raden lägger vi till det nyskapade pluginet till tinyMCEs plugin manager. Var uppmärksam på de namn du använder i varje steg. Det är felaktigt om du inte uppmärksammar. Och det handlar om det! Var gjort! Ladda upp redaktören och se till att din spiffy nya knapp fungerar.
Och där har du det. Vi har framgångsrikt integrerat kortnummer i ett WordPress-tema på ett mycket användarvänligt sätt. Förhoppningsvis har du hittat denna handledning för att vara till hjälp. Känn dig fritt att använda denna kod på annat håll i dina projekt och chimera in i kommentarerna om du behöver hjälp.
Frågor? Trevliga saker att säga? Kritik? Klicka på kommentarfältet och lämna mig en kommentar. Glad kodning och tack så mycket för att läsa!
