Gebruik maken van WordPress Shortcodes en Aangepaste velden voor voetnoten

Op het gebied van webontwerp en -ontwikkeling zijn de dingen die u met WordPress kunt doen bijna onbegrensd. Je kunt een nieuwsaggregator draaien, een crowdfundingplatform maken, tickets verkopen voor het eerste concert van je band, je kunst weergeven in een virtuele galerij, enzovoort.

U kunt ook een kloon Wikipedia maken en de functies ervan nabootsen, zoals een "inhoudsopgave" -sectie of gekoppelde verwijzingen. In deze zelfstudie gebruiken we shortcodes en aangepaste velden om een ​​werkende sectie 'Voetnoten' te maken.

Introductie van voetnoten

Ik werd benaderd door een professor aan de universiteit die sommige van zijn artikelen online wilde publiceren. Hij had dit beetje ... edu.tr/~hisname/ startpagina en besloot dat het tijd was om de inhoud naar een "echte" website te verplaatsen en hij hoorde dat WordPress de juiste keuze zou zijn om te gebruiken als een inhoudbeheersysteem.

Zoals u weet, kunnen wetenschappelijke artikelen vele opmerkingen, citaten en externe referenties bevatten, die we in het algemeen als voetnoten noemen. Toen hij zei dat hij wilde dat zijn artikelen interactiever waren, dacht ik meteen aan een vergelijkbare functionaliteit op Wikipedia en ben ik op zoek gegaan naar plug-ins die dit soort service bieden. 

Hoewel ik er een vond, vond ik het een leuke oefening als ik probeerde mijn eigen plug-in te maken voor het toevoegen van voetnoten. Daartoe heb ik precies dat gedaan en zal door het proces lopen gedurende de rest van dit artikel.

Onze voetnoten-plug-in bouwen

Het proces van het maken van onze plug-in is relatief eenvoudig, zelfs voor beginnende ontwikkelaars. Wij zullen:

• maak ons ​​plugin-bestand aan
• bouw onze shortcode,
• codeer onze voettekstfunctie
• schrijf een andere functie die de voetnoten aan de berichtinhoud toevoegt door deze aan te haken de inhoud.

Fluitje van een cent, toch?? 

Als u een beginner bent die graag de basisprincipes van de ontwikkeling van WordPress-plug-ins leert, heeft deze zelfstudie de juiste hoeveelheid informatie om u op weg te helpen. En als u wat meer geavanceerd bent, kan deze tutorial u goede ideeën opleveren.

1. Maak het plug-inbestand

Als u bekend bent met plug-ins (zoals bij het bouwen ervan of zelfs het bekijken van de broncode van één), weet u dat we de hoofdbestanden van onze plug-in moeten starten met de volgende header-informatie:

De regels spreken voor zich, dus ik zal niet in detail treden door u te vertellen dat de versie het versienummer van uw plug-in vertegenwoordigt. 

Hoewel, er zijn een paar tips die ik kan geven:

• De enige vereiste regel is de regel "Plugin Name"; de rest is optioneel (maar zeer nuttig).
• U kunt enkele eenvoudige HTML-code gebruiken in de regel "Beschrijving".
• Er zijn enkele andere "header-namen" die u kunt vinden op de "File Header" -pagina in de Codex.

Nu zijn we klaar met de headers, laten we doorgaan naar de stap waar we onze shortcode bouwen!

2. Maak de shortcode

Als je mijn oudere tutorials leest, zul je je herinneren dat ik liefde de Shortcode API. Als zodanig is dit mijn favoriete onderdeel.

Zoals eerder vermeld, is het doel van onze shortcode om het nummer van onze voetnoot weer te geven, die u als parameter kunt opgeven. Omdat het slechts een paar eenvoudige coderegels zijn, laten we de code nu schrijven en meteen beoordelen:

 '1',), $ atts)); terug '['. $ id. ']';  add_shortcode ('ref', 'footnotes_sc'); ?>

Zoals je kunt zien, is de code echt heel eenvoudig. Dit is wat het doet:

• We hebben een functie gemaakt met de naam footnotes_sc,
• We hebben slechts één parameter met de naam gemaakt ID kaart (met een standaardwaarde van "1") en veranderde het in een variabele met de extract() functie,
• Wij terugkeer een eenvoudige string met een link naar de bijbehorende voetnoot,
• En tot slot hebben we een verkorte shortcode ingesteld [Ref] en verslaafd onze footnotes_sc () functie ernaar.

Van nu af aan; elke keer dat we de [Ref] shortcode (waarbij X de voetnoot ID is), WordPress zal het referentienummer zoals afdrukken ^[1].

 $ get_post_meta);  // als de $ footnotes_array NIET leeg is ... if (count ($ footnotes_array)> 0) // ... start de $ output variabele met een DIV ... $ output = '
'; // ... gebruik de standaardwaarden van de argumenten $ output. = 'Van onze functie<' . $titletag . '>'. $ titel. ''; $ output. = '<' . $listtag . '>'; // noteer de voetnoten met bijbehorende referentie-ID's voor elk ($ footnotes_array als $ footnote) foreach ($ footnote as $ ref_id => $ footnote_content) $ output. = '
'. $ footnote_content. '
';  // sluit de HTML-tags $ output. = ''; $ output. = '
';  // en retourneer de $ -uitvoervariabele als het een enkele bericht of pagina is als (is_singular ()) return $ output;  

 
Dit is waarschijnlijk het gemakkelijkste onderdeel van onze code, omdat we alleen onze vorige functie bellen om de uitvoer na de inhoud van de post toe te voegen en deze nieuwe functie vervolgens aan de de inhoud filter.
 
Als u niet automatisch het gedeelte 'Voetnoten' onder de inhoud wilt toevoegen, kunt u deze regels verwijderen. In plaats daarvan moet je een klein beetje code in je thema gebruiken  op de plaats waar u de voetnoten van het artikel wilt laten zien. U kunt ook de standaardargumenten van de functie wijzigen.
 
Conclusie
 
Uiteindelijk vond de professor het echt leuk wat ik deed met de "voetnoten" -functionaliteit en ik denk dat hij nog steeds de website die ik heb gebouwd gebruikt - hij gebruikte zijn homepage al meer dan 10 jaar en hij zal waarschijnlijk WordPress langer gebruiken. Ik hoop dat je het ook leuk vond. Als u toegang wilt tot de volledige code, kunt u deze hier vinden.
 
Heb je iets toe te voegen? Deel uw mening met ons door hieronder te reageren. En als je deze tutorial leuk vond, vergeet dan niet om het met je vrienden te delen!



		
			
	   
	




Code