Slik bruker du egendefinerte sidefelt på innlegg og sider

I dag vil jeg gjerne vise deg hvordan du enkelt legger til tilpassede sidebjelker for bruk i innlegg og sider. Det kan være nyttig å vise forskjellige widgets i henhold til siden din eller innleggets emne.

Vi ser hvordan du bruker WordPress-metakasser til å lagre og hente et valgt sidefelt for et bestemt innlegg. Tilpassede sidefelt vil bli lagt til i temaalternativer-delen.


Introduksjon

Jeg pleide å håndtere den store widgetlogikkpluggen for å vise forskjellige widgets på forskjellige sider, men widgetsiden ble svært uklar og vanskelig å vedlikeholde. Så hvorfor ikke bruke flere sidebjelker og velg hvilken som skal vises på et bestemt innlegg? Det er det jeg skal dekke i denne opplæringen.


Trinn 1 Legge til sidefelt i Theme Options Page (Twenty Eleven)

I denne opplæringen bruker jeg det store WordPress-standardtemaet tjue elleve for å demonstrere hvordan du bruker tilpassede sidebjelker i temaet ditt.

Først skal vi legge til en ny innstilling i Utseende -> Temaalternativer. Du kan se denne flotte opplæringen for å se hvordan du legger til innstillinger.

Åpne tema-options.php fil, lokalisert i twentyeleven / inc og legg til denne koden på slutten av twentyeleven_theme_options_init () funksjon:

 add_settings_field ('custom_sidebar', __ ('Custom sidebars', 'twentyeleven'), 'twentyelev_settings_field_custom_sidebar', 'theme_options', 'general');

Deretter legger du til en standardverdi (et tomt utvalg) til standardverdier for temaalternativer, på slutten av twentyeleven_get_default_theme_options () funksjon:

 $ default_theme_options = array ('color_scheme' => 'light', 'link_color' => twentyeleven_get_default_link_color ('light'), 'theme_layout' => 'content-sidebar', 'custom_sidebar' => array ());

Nå skal vi lage tilbakeringingsfunksjonen som håndterer innstillingene.

La oss legge til noe jQuery for å håndtere samhandlinger som å legge til og fjerne sidebjelker, som i utgangspunktet er noen listelementer som inneholder en skjult inngang. Vi genererer også de listelementene fra allerede lagrede sidebjelker.

 funksjon twentyeleven_settings_field_custom_sidebar () // Hent temaalternativer $ opts = twentyeleven_get_theme_options (); // Litt jQuery for å håndtere samhandlinger (legg til / fjern sidebjelker) $ output = ""; $ output. ="
"; $ output. ="

"; $ output. ="
    "; // Vis alle tilpassede sidebar hvis (isset ($ opts ['custom_sidebar'])) $ i = 0; foreach ($ opts ['custom_sidebar'] som $ sidebar) $ output. ="
  • "$ Sidebar." ".__ (" delete ", $ themename)."
  • "; $ i ++; $ output. ="
"; $ output. ="
"; ekko $ output;

Til slutt legger du til denne koden i twentyeleven_theme_options_validate () Fungerer for å desinfisere og validere skjemainngang:

 hvis (isset ($ input ['custom_sidebar'])) $ output ['custom_sidebar'] = $ input ['custom_sidebar']; 

På dette tidspunktet bør du kunne administrere og lagre egendefinerte sidebjelker i temaet ditt. For eksempel, la oss lage et nytt tilpasset sidebar kalt "Min tilpassede sidebar". Din temaalternativer-side skal se slik ut:


Trinn 2 Registrer egendefinerte sidefelt

Nå kan vi legge til tilpassede sidefelt, vi må registrere dem slik at de kan vises på administrasjonssiden for widgets.

I Twenty Eleven-temaet gjøres dette innen twentyeleven_widgets_init () funksjon. Så legg til i slutten av denne funksjonen:

 $ options = twentyeleven_get_theme_options (); hvis (isset ($ options ['custom_sidebar']) og& sizeof ($ options ['custom_sidebar'])> 0) foreach ($ options ['custom_sidebar'] som $ sidebar) register_sidebar (array ('name' => __ ($ sidebar, 'twentyeleven'), 'id' => generateSlug ($ sidebar, 45), 'before_widget' => '"," before_title '=>'

',' after_title '=>'

',));

Vi henter temaalternativer, kontroller at det er minst ett tilpasset sidebar og registrer det. Vi bruker en rask funksjon til generere en slug ut av sidelinjenavnet som skal brukes som sidebjeld-ID.

 funksjon generateSlug ($ setning, $ maxLength) $ result = strtolower ($ setning); $ result = preg_replace ("/ [^ a-z0-9 \ s -] /", "", $ resultat); $ result = trim (preg_replace ("/ [\ s -] + /", "", $ resultat)); $ result = trim (substr ($ resultat, 0, $ maxLength)); $ result = preg_replace ("/ \ s /", "-", $ resultat); returnere $ resultat; 

Nå, gå til Utseende -> Widgets og du bør se vår nye tilpassede sidefelt.


Trinn 3 Legge til en Meta Box

Nå er våre tilpassede sidebjelger tilgjengelig, vi legger til en metakasse for å vise en liste over alle sidebjelger som er tilgjengelige i postredigeringsskjemaet.

Hvis du ikke er kjent med metakasser, kan du se på disse linkene:

  • add_meta_box på WordPress-kodeksen
  • Hvordan lage egendefinerte WordPress Write / Meta-bokser
  • Gjenbrukbar tilpasset meta-boks serie

La oss nå grave inn i koden.

Legg til Meta Bokser

Først vil vi ganske enkelt legge til våre metakasser. Vi må deklarere to metakasser, en for innlegg og en for sider. Vi må også registrere to kroker, en for å legge til metakasser og den andre for å lagre dem.

Så åpne din functions.php fil og legg til dette:

 / * Definer egendefinert boks * / add_action ('add_meta_boxes', 'add_sidebar_metabox'); add_action ('save_post', 'save_sidebar_postdata'); / * Legger til en boks i sidekolonnen på skjermbildet Post og side redigering * / funksjon add_sidebar_metabox () add_meta_box ('custom_sidebar', __ ('Custom Sidebar', 'twentyeleven'), 'custom_sidebar_callback', 'post' side '); add_meta_box ('custom_sidebar', __ ('Custom Sidebar', 'twentyeleven'), 'custom_sidebar_callback', 'side', 'side'); 

Opprett tilbakeringingsfunksjonen

La oss nå lage custom_sidebar_callback funksjonen, som vil skrive ut meta-boksene.

Det er flere viktige skritt i denne funksjonen:

  • Hent alle registrerte sidebjørker (inkludert standard standard sidebjelker) med den globale $ wp_registered_sidebars variabel.
  • Få postmetoder
  • Opprett nonce-sikkerhet
  • Legg til et valgelement med alle sidebjelker pluss en standard som er definert direkte i malfilen.
 / * Skriver ut innholdet i boksen * / funksjon custom_sidebar_callback ($ post) global $ wp_registered_sidebars; $ custom = get_post_custom ($ post-> ID); hvis (isset ($ custom ['custom_sidebar'])) $ val = $ tilpasset ['custom_sidebar'] [0]; ellers $ val = "standard"; // Bruk nonce for verifisering wp_nonce_field (plugin_basename (__FILE__), 'custom_sidebar_nonce'); // De egentlige feltene for dataregistrering $ output = '

'; $ output. = ""; ekko $ output;

Lagre Meta Box

La oss nå lagre vår postmeta. Igjen flere trinn her:

  • Kontroller at WordPress ikke lagrer automatisk
  • Kontroller nonce og autorisasjoner
  • Lagre post_meta
 / * Når posten er lagret, lagrer vi våre egendefinerte data * / funksjon save_sidebar_postdata ($ post_id) // verifiser om dette er en automatisk lagringsrutine. // Hvis det er vårt skjema ikke er sendt inn, så vil vi ikke gjøre noe hvis (definert ('DOING_AUTOSAVE') && DOING_AUTOSAVE) returnere; // bekreft dette kom fra skjermen vår og med riktig autorisasjon, // fordi save_post kan utløses andre ganger hvis (! wp_verify_nonce ($ _POST ['custom_sidebar_nonce'], plugin_basename (__FILE__)) returnerer; hvis (! current_user_can ('edit_page', $ post_id)) returnere; $ data = $ _POST ['custom_sidebar']; update_post_meta ($ post_id, "custom_sidebar", $ data); 

Nå bør du nå se denne boksen på postredigeringssiden, i den høyre kolonnen. Hvis ikke, kontroller at den egendefinerte sidebar-boksen vises i toppskjermens valgpanel.


Trinn 4 Juster malfiler

Nå er alt riktig satt opp, hva som igjen er å gjøre er å oppdatere våre templerende filer slik at de kan vise egendefinerte sidebjelker.

La oss lage en ny side basert på sidebar mal (tilgjengelig i sideattributter-boksen). Denne malen er avhengig av sidebar-page.php fil. Rediger denne filen og legg til disse linjene øverst (under malerens kommenterte overskrift):

 $ options = get_post_custom (get_the_ID ()); hvis (isset ($ options ['custom_sidebar'])) $ sidebar_choice = $ alternativer ['custom_sidebar'] [0];  ellers $ sidebar_choice = "default"; 

Vi henter nåværende post-metadata for å få valgt sidefelt.

Til bytte om mellom et egendefinert sidefelt og standard en, endre get_sidebar () ring på bunnen av denne samme filen til dette:

 hvis ($ sidebar_choice && $ sidebar_choice! = "default") get_sidebar ("custom");  ellers get_sidebar (); 

De get_sidebar ($ slug) krever sidebar-slug.php. Så det vi må gjøre er å lage en fil som heter sidebar-custom.php og legg til dette innvendig:

 $ options = get_post_custom ($ post-> ID); $ sidebar_choice = $ alternativer ['custom_sidebar'] [0]; ?> 

Nå skal siden vise sidebjelken du valgte. For eksempel har jeg lagt til to widgets i min tilpassede sidefelt:

Jeg vil ikke dekke hvordan du bruker dette på innlegg, da det er akkurat den samme oppførselen, du må bare oppdatere innholds single.php fil for å administrere egendefinerte sidebjelker.


Konklusjon

Det var alt folkens! Nå kan du bruke ubegrenset sidebjelker for sidene og innleggene dine. Dette er bare en løsning blant andre, men det er en fort og lett måte å implementere egendefinerte sidebjørter, så ikke nøl med å legge igjen en kommentar, dele ideene dine og gi tilbakemelding!