Utnytte WordPress-kortkoder og egendefinerte felt for fotnoter

Når det gjelder webdesign og utvikling, er de tingene du kan gjøre med WordPress, i nærheten av ubegrensede. Du kan kjøre en nyhetsaggregat, lage en crowdfunding-plattform, selg billetter til bandet ditt første konsert, vis din kunst i et virtuelt galleri og så videre.

Du kan også lage en Wikipedia-klon og etterligne dens funksjoner som en "innholdsfortegnelse" -del eller koblede kryssreferanser. I denne opplæringen skal vi bruke kortnummer og tilpassede felt for å skape en fungerende "Fotnoter" -avdeling.

Innføring av fotnoter

Jeg ble kontaktet av en universitetsprofessor som ønsket å publisere noen av artiklene sine online. Han hadde denne lille ... edu.tr/~hisname/ hjemmeside og bestemte at det var på tide å flytte innholdet til et "ekte" nettsted, og han hørte WordPress ville være det riktige valget å bruke som et innholdsadministrasjonssystem.

Som du vet kan vitenskapelige artikler inneholde mange kommentarer, sitater og eksterne referanser som vi generelt refererer til som fotnoter. Da han sa at han ville at artiklene hans skulle være mer interaktive, tenkte jeg umiddelbart på lignende funksjonalitet i Wikipedia og begynte å lete etter plugins som tilbyr denne typen tjeneste. 

Selv om jeg fant en blant mange, trodde jeg det ville være en fin øvelse hvis jeg forsøkte å lage mitt eget plugin for å legge til fotnoter. Til det formål gjorde jeg nettopp det og vil gå gjennom prosessen gjennom resten av denne artikkelen.

Å bygge vår fotnoter Plugin

Prosessen med å lage pluginet vårt vil være relativt enkelt, selv for nybegynnere. Vi vil:

• lag vår pluginfil
• bygge vår shortcode,
• kode vår footer-funksjon
• skriv en annen funksjon som legger fotnoter til innleggets innhold ved å hekte til innholdet.

Stykke kake, høyre? 

Hvis du er en nybegynner ivrig etter å lære grunnleggende om WordPress plugin utvikling, har denne opplæringen akkurat den riktige mengden informasjon for å komme i gang. Og hvis du er litt mer avansert, kan denne opplæringen gi deg gode ideer.

1. Opprett pluginfilen

Hvis du er kjent med plugins (som i å bygge en eller til og med se kildekoden til en), vet du at vi må starte hovedfilene til plugin-modulen med følgende headerinformasjon:

Linjene er alle selvforklarende, så jeg vil ikke gå i detalj ved å fortelle deg at versjonen representerer versionsnummeret til pluginet ditt. 

Selv om det er noen tips jeg kan gi:

• Den eneste nødvendige linjen er "Plugin Name" -linjen; Resten er valgfri (men veldig hjelpsom).
• Du kan bruke noen enkle HTML-koden i "Beskrivelse" -linjen.
• Det er noen andre "header names" som du finner på "File Header" siden i Codex.

Nå er vi ferdige med overskriftene, la oss gå videre til trinnet der vi bygger vår shortcode!

2. Lag kortnummeret

Hvis du leser mine eldre opplæringsprogrammer, vil du huske at jeg kjærlighet Shortcode API. Som sådan er dette min favoritt del.

Som tidligere nevnt vil formålet med vår kortkode være å vise nummeret til vår fotnote, som du kan spesifisere som en parameter. Siden det er bare noen få enkle linjer med kode, la oss skrive koden nå og se etter:

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

Som du ser, er koden virkelig veldig enkel. Her er hva det gjør:

• Vi opprettet en funksjon som heter footnotes_sc,
• Vi opprettet bare én parameter som heter id (med en standardverdi på "1") og slått den inn i en variabel med ekstrakt() funksjon,
• Vi komme tilbake en enkel streng med en lenke til den tilsvarende fotnoten,
• Og til slutt angir vi en kodenavn som heter [Ref] og hekta vår footnotes_sc () funksjon til det.

Fra nå av; hver gang vi bruker [Ref] shortcode (hvor X er fotnote-ID), vil WordPress skrive ut referansenummeret som ^[1].

 $ get_post_meta);  // hvis $ footnotes_array er IKKE tomt ... hvis (telle ($ footnotes_array)> 0) // ... start $ utgangsvariabelen med en DIV ... $ output = '
'; // ... bruk standardverdiene for funksjonens argumenter $ output. = '<' . $titletag . '>'. $ tittel. ''; $ output. = '<' . $listtag . '>'; // oppgi fotnoter med tilhørende referanse-ID foreach ($ footnotes_array som $ fotnote) foreach ($ fotnote som $ ref_id => $ footnote_content) $ output. = '
'. $ footnote_content. '
';  // lukk HTML-kodene $ output. = ''; $ output. = '
';  // og returnere $ output variabelen hvis det er et enkelt innlegg eller en side hvis (is_singular ()) return $ output;  

 
Dette er trolig den enkleste delen av koden vår siden vi bare kaller vår forrige funksjon for å legge til produksjonen etter innleggets innhold, og deretter koble denne nye funksjonen til innholdet filter.
 
Hvis du ikke vil legge til "Fotnoter" -delen automatisk under innholdet, fortsett og fjern disse linjene. I stedet må du bruke en liten bit av kode i temaet ditt som  På stedet vil du vise artikkelens fotnoter. Du kan også endre standardargumentene til funksjonen.
 
Konklusjon
 
I siste instans likte professoren virkelig det jeg gjorde med "fotnoter" -funksjonaliteten, og jeg tror at han fortsatt bruker nettstedet jeg bygget - han brukte hjemmesiden sin i over 10 år, og han vil nok bruke WordPress lenger. Jeg håper du likte det også. Hvis du vil ha tilgang til hele koden, kan du finne den her.
 
Har du noe å legge til? Vennligst del dine tanker med oss ​​ved å kommentere nedenfor. Og hvis du likte denne opplæringen, ikke glem å dele den med vennene dine!



		
			
	   
	




Kode