Share
Een van de belangrijkste redenen waarom WordPress het populairste CMS-platform is, is de enorme mate van aanpasbaarheid die het naar de tafel brengt. Vandaag bespreken we het proces van het integreren van een van die populaire functies, shortcodes, op de meest gebruiksvriendelijke manier, in ons thema.
Hoewel er een paar biljoen opties zijn om uit te kiezen, heeft WordPress met zijn ongelooflijke flexibiliteit comfortabel de kroon van de koning van CMS's en blogplatforms veroverd. Een shortcode is een van die functies die de gebruiksvriendelijkheid van het systeem verhogen.
De meeste implementaties vereisen echter nog steeds dat u de shortcode zelf onthoudt. Wanneer je een meesterwerk van een thema hebt gemaakt, moet de bruikbaarheid niet echt achterblijven. Ik laat u zien hoe u shortcodes kunt maken en deze vervolgens kunt integreren met de editor zelf, zodat de gebruiker niet door uw documenten hoeft te porren om de juiste syntaxis te onthouden om een knop in te sluiten. Geïntrigeerd? Laten we meteen beginnen!
Het heet a Korte code en het heeft deel uitgemaakt van de basis WordPress-installatie sinds het bestand op versie 2.5. Kortom, deze zijn vergelijkbaar met de BBCodes gebruikt op populaire message board-software: lichtgewicht markup gebruikt om inhoud te formatteren.
Hier kunt u uw eigen codes definiëren die u binnen uw thema kunt gebruiken. In tegenstelling tot BBCodes worden shortcodes echter vooral gebruikt om de gebruiker te beschermen tegen vervelende markeringen en mogelijke fouten. Door een shortcode te gebruiken, bijvoorbeeld een knop, hoeft de gebruiker de ingewikkelde markup die moet worden ingevoerd om de knop te maken niet te onthouden. Over het algemeen is het een flinke opsteker voor de bruikbaarheid van een thema en mogelijk, noob vriendelijkheid.
Als u niet bekend bent met het concept van een BBCode en bij uitbreiding shortcode, ziet dit er zo uit als de eenvoudigste versie:
[mijn galerij]
Als je ooit een galerij hebt ingesloten met WordPress, heb je al een shortcode gebruikt!
Er zijn nog twee variaties waar je ook bekend mee moet zijn.
[knop] Inhoud [/ knop] [link to = "www.net.tutsplus.com"] NetTuts + [/ link]
We zullen elk van deze variaties eerst implementeren voordat we naar andere, drukkere dingen gaan.
Elke shortcode-implementatie vereist een tweestaps proces:
Ongeacht de complexiteit van de shortcode, blijven de kernstappen hetzelfde.
We zullen eerst leren hoe we de eenvoudigste shortcode kunnen implementeren. Laten we als use-case zeggen dat u elk bericht beëindigt met een aantal veel voorkomende aftekenteksten. Kopiëren en plakken kan een eenvoudige aanpak zijn, maar misschien voel je je een luddiet. Laten we dit oplossen met wat WP-niftiness!
Tenzij anders vermeld, gaat alle onderstaande code over functions.php
De primaire functie zorgt voor de kernlogica van uw shortcode. We moeten dit eerst maken voordat we verder gaan.
function signOffText () ga terug 'Heel erg bedankt voor het lezen! En vergeet niet om je te abonneren op onze RSS-feed. ';
De volgende stap is, zoals je misschien denkt, om je aan te sluiten bij het WordPress-systeem om de shortcode aan deze tekst te koppelen. Dit wordt gedaan met behulp van de add_shortcode methode.
Accentsconagua
add_shortcode ('signoff', 'signOffText'); Ja, een enkele one-liner is alles wat nodig is. De eerste parameter definieert de shortcode die u in de editor zult gebruiken, terwijl de tweede parameter verwijst naar de functie die we een moment geleden hebben gemaakt.
Notitie: De add_shortcode methode komt altijd na de methode van de handler.
Dat zou het moeten doen. Typ gewoon [afmelden] in je editor en WordPress zal de tekst dynamisch vervangen als dat nodig is.
Vervolgens gaan we naar een andere variant: inhoud verpakken met een paar markeringen. Je zou het zo moeten gebruiken:
[quote] Enkele tekst [/ quote]
De primaire functie moet hier een beetje worden aangepast. We merken dat onze functie twee parameters ontvangt: attributen via de atts variabele en de inhoud zelf via de inhoud veranderlijk.
De volgende stap is eenvoudigweg het retourneren van de opmaak die om de geselecteerde tekst is gewikkeld.
functie aanhalingsteken ($ atts, $ content = null) ga terug '" '$ Content.'"';
Deze stap blijft hetzelfde:
add_shortcode ("quote", "quote"); Ik noem graag mijn shortcodes exact hetzelfde als de primaire functies, tenzij de naamgeving onpraktisch wordt. Je hebt misschien je eigen stijlen, dus voel je vrij om het naamschema te wijzigen. Er is geen geaccepteerde beste praktijk.
Ten slotte gaan we ook attributen aan de mix toevoegen. Je zou het zo moeten gebruiken:
[link to = "www.net.tutsplus.com"] NetTuts + [/ link]
De primaire functie moet worden aangepast om alle nieuwe functionaliteiten te verwerken die we binnenhalen. Eerst voegen we de kenmerken samen die zijn doorgegeven met de shortcode en de attributen die we verwachten. U kunt hier meer over het proces lezen.
De laatste stap is, zoals altijd, simpelweg om de opmaak die we willen terug te geven nadat deze op de juiste manier is opgevuld. Hier heb ik de gegevens gebruikt die met de shortcode zijn verzonden om de ankers in te vullen href attribuut en inhoud.
functiekoppeling ($ atts, $ content = null) extract (shortcode_atts (array ("to" => 'http://net.tutsplus.com'), $ atts)); return ''. $ content. ''; Deze stap blijft ongewijzigd, maar essentieel. Onthoud dat zonder dit, WordPress niets te maken heeft met de shortcode.
add_shortcode ("link", "link"); Dit is waar je zou verwachten dat deze tutorial eindigt, maar nee, je hebt het verkeerd geraden. Zoals ik eerder al zei, halen shortcodes veel pijn weg, maar er zijn weinig valstrikken. Ten eerste moet de gebruiker de shortcodes onthouden die hij tot zijn beschikking heeft om er zinvol gebruik van te maken.
Als je slechts een paar hebt, is het allemaal goed, maar met feature-beladen thema's, wordt het herinneren van een ieder een hele klus. Om dit recht te zetten, zullen we knoppen rechtstreeks aan de TinyMCE-interface toevoegen, zodat de gebruiker eenvoudig op de knop kan klikken om alles gedaan te krijgen.
Ik ga u bijvoorbeeld leren hoe u de tweede variant aan de editor toevoegt. Ik hoop dat je deze informatie kunt extrapoleren voor de specifieke functionaliteit die je in gedachten hebt.
De eerste stap in het proces is aansluiten op WordPress en het toevoegen van onze initialisatiecode. Het volgende fragment zorgt voor dat. Vergeet niet dat dit allemaal in je moet zijn functions.php het dossier.
add_action ('init', 'add_button'); We vragen WordPress om de functie genaamd uit te voeren ADD_BUTTON wanneer de pagina voor het eerst wordt geladen. add_action is onze haak in de binnenkant van WordPress.
functie 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'); Dit kleine codefragment wordt uitgevoerd wanneer de pagina wordt geladen. Hierboven controleren we of de gebruiker de benodigde autorisatie heeft om een pagina of een bericht te bewerken voordat hij verder gaat.
Zodra dat is gebeurd, koppelen we twee van onze [te schrijven] functies aan specifieke filters. Beide maken via WordPress daadwerkelijk verbinding met de frontend-architectuur van TinyMCE. De eerste wordt uitgevoerd wanneer de editor de plug-ins laadt terwijl de tweede wordt uitgevoerd wanneer de knoppen worden geladen.
In het bovenstaande voorbeeld gaan we verder, ongeacht in welke modus de editor zich bevindt. Als u deze alleen wilt weergeven wanneer de editor zich in de visuele modus bevindt, moet u een snelle controle uitvoeren. Als get_user_option ( 'rich_editing') evalueert naar waar, je bevindt je in de visuele modus. Anders HTML-modus. Ik gebruik deze knoppen meestal alleen in de visuele modus, maar voel je vrij om hier te mixen en matchen.
function register_button ($ buttons) array_push ($ buttons, "quote"); terug $ -knoppen;
De functie voegt slechts onze shortcode toe aan de reeks knoppen. U kunt ook een scheidingslijn toevoegen tussen uw nieuwe knop en de vorige knoppen door een | voor.
function add_plugin ($ plugin_array) $ plugin_array ['quote'] = get_bloginfo ('template_url'). '/ js / customcodes.js'; return $ plugin_array; Met het bovenstaande fragment weten TinyMCE en WordPress hoe ze met deze knop moeten omgaan. Hier brengen we onze kaart in kaart citaat shortcode naar een specifiek JavaScript-bestand. Wij gebruiken de get_bloginfo methode om het pad naar de huidige sjabloon te krijgen. Omwille van de organisatie bewaar ik mijn tinyMCE-plug-in samen met mijn andere JS-bestanden.
Nu op het laatste deel van ons streven. Vergeet niet dat de volgende code in een bestand met de naam gaat customcodes.js geplaatst in de JS-directory van uw thema. Als je dacht dat het binnenkwam functions.php zoals alle bovenstaande code, geen cookie voor jou!
(functie () tinymce.create ('tinymce.plugins.quote', init: function (ed, url) ed.addButton ('quote', title: 'Voeg een citaat toe', afbeelding: url + '/ afbeelding .png ', onclick: function () ed.selection.setContent (' [quote] '+ ed.selection.getContent () +' [/ quote] '););, createControl: function (n, cm) return null;,); tinymce.PluginManager.add ('quote', tinymce.plugins.quote);) (); Ziet er een beetje ingewikkeld uit, maar ik verzeker je dat het allesbehalve. Laten we het opsplitsen in een kleiner gedeelte om het ons gemakkelijker te maken om te analyseren.
Eerste De volgorde van de dag is een snelle afsluiting om te voorkomen dat de algemene naamruimte wordt vervuild. Binnen noemen we de creëren methode om een nieuwe plug-in in de naam en andere gesorteerde attributen door te geven. Kortheidshalve, ik bel gewoon mijn plug-in citaat.
Eenmaal binnen definiëren we de in het functie die wordt uitgevoerd bij de initialisatie. ed verwijst naar de instantie van de editor terwijl url verwijst naar de URL van de plugin-code.
De meeste attributen moeten redelijk duidelijk zijn. Merk op dat de afbeelding die u doorgeeft relatief is ten opzichte van de bovenliggende map van het JS-bestand dat de code bevat. Hier zou het zijn themamap / js.
volgende omhoog maken we de gebeurtenishandler voor deze knop via de bij klikken functie. De one-liner bevat in wezen de geselecteerde tekst, indien aanwezig, en verpakt deze zonder shortcode. setContent en Inhoud krijgen zijn helper-methoden die door tinyMCE worden geboden om de geselecteerde tekst te manipuleren.
Tenslotte, in de laatste regel voegen we de pas aangemaakte plug-in toe aan de plugin-manager van tinyMCE. Besteed aandacht aan de namen die u in elke stap gebruikt. Het is foutgevoelig als je niet oplet. En dat is het zo'n beetje! Werden gedaan! Laad de editor en zorg ervoor dat je nieuwe knop werkt.
En daar heb je het. We hebben met succes snelcodes geïntegreerd in een WordPress-thema op een zeer gebruiksvriendelijke manier. Hopelijk heb je deze tutorial gevonden als hulp. Voel je vrij om deze code ergens anders in je projecten opnieuw te gebruiken en bel binnen de opmerkingen als je hulp nodig hebt.
Vragen? Leuke dingen om te zeggen? Kritiek? Klik op het gedeelte Opmerkingen en laat een opmerking achter. Fijne codering en heel erg bedankt voor het lezen!
