Bruk en egendefinert innleggstype for innholdet på sidefeltet ditt

Jeg bruker ofte tekstdisplayet til å legge til tilpasset innhold i sidebjelker på nettstedene jeg utvikler. Disse er nyttige widgets som de aksepterer både tekst og HTML, så hvis du kan skrive HTML, kan du bruke dem til å legge til alle slags innhold.

Men hvis klientene mine vil redigere sidelinjen og ikke er kjent med HTML, er det veldig enkelt for dem å bryte ting, spesielt hvis jeg har tatt med bilder eller lenker.

En enkel måte rundt dette er å erstatte widgetområdene i temaet ditt med en egendefinert innleggstype, ved hjelp av WP_Query å skrive ut innlegg av den egendefinerte innleggstypen i sidefeltet.

Du gjør dette i to trinn:

1. Registrer en egendefinert innleggstype for sidebjørene dine.
2. Lag en funksjon for å utdata innholdet i sidebjørene dine og legg til det i sidebar.php fil i temaet ditt.

Vi lager også noen sidebjelker i WordPress-administrasjonen, sjekker hvordan de ser ut, og legger til noen styling for dem.

Hva du trenger

For å arbeide gjennom denne opplæringen må du:

• en utviklingsinstallasjon av WordPress
• en kodeditor

Jeg skal lage et barnemne på tjuefemteen for å gjøre dette, men du kan legge til koden i ditt eget tema, eller du kan foretrekke å bruke et plugin for å registrere posttypen og opprette funksjonen, og deretter legge til funksjonen til temaet ditt sidebar.php fil.

Opprette et barn tema

Hvis du jobber med ditt eget tema, kan du hoppe over denne delen, men hvis du starter fra scratch, er det enklest å prøve denne teknikken, ved å bruke et barnemne. Jeg skal lage et barn av tjuefemte temaet.

I din tema mappe i wp-innhold, lag en mappe og gi den et navn som er relevant for temaet ditt. Jeg ringer til min tutsplus-sidebar-custom-post-type.

I den mappen, opprett to tomme filer: style.css og functions.php. Lag en kopi av sidebar.php fil fra tjue femten i ditt barn tema også. Du vil redigere dette senere, og WordPress vil bruke malfilen fra barnet ditt til å vise sidebjelken, i stedet for den fra tjue femten.

I det nye stilarket legger du til følgende:

/ * Tema Navn: Tuts + Bruk en Cusotm Post Type for Sidebar Content Theme URI: http://rachelmccollin.co.uk/tutsplus-use-custom-post-type-for-sidebars/ Beskrivelse: Tema for å støtte tutter + veiledning om bruk av en CPT for sidebjelker. Barn tema for Twenty Fifteen tema. Forfatter: Rachel McCollin Forfatter URI: http://rachelmccollin.co.uk/ Mal: ​​twentyfifteen Versjon: 1.0 * / @import url ("... /twentyfifteen/style.css");

Du må redigere tema og forfatter-detaljer som det er ditt tema, ikke min, men dette gir deg ideen.

Aktiver nå ditt nye tema for nettstedet ditt, via temaer skjerm i WordPress admin.

Registrering av egendefinert innleggstype

Det neste trinnet er å registrere den egendefinerte innleggstypen for sidebjelker. Du gjør dette i temaets funksjonsfil (eller hvis du lager et plugin for dette, opprett en ny fil i plugin-mappen din i wp-innhold).

Åpne functions.php fil i temaet ditt og legg til denne koden:

funksjon tutsplus_create_sidebar_post_type () $ labels = array ('navn' => __ ('Sidebars'), 'singular_name' => __ ('Sidebar'), 'add_new' => __ ('Ny sidefelt'), 'add_new_item' => __ ('Legg til ny sidefelt'), 'edit_item' => __ ('Rediger sidebjelke'), 'new_item' => __ ('Ny sidefelt'), 'view_item' => __ ('Vis sidefelt') 'search_items' => __ ('Søk sidefelt'), 'not_found' => __ ('Ingen sidebars funnet'), 'not_found_in_trash' => __ ('Ingen sidebjelmer funnet i søppel')); $ args = array ('labels' => $ etiketter, 'has_archive' => false, 'public' => true, 'hierarchical' => false, 'supports' => utdrag ',' egendefinerte felt ',' miniatyrbilde ',' sideattributter ')); register_post_type ('sidebar_post', $ args);  add_action ('init', 'tutsplus_create_sidebar_post_type');

Dette registrerer sidebar_post egendefinert innleggstype. Legg merke til at jeg bevisst har ringt det sidebar_post og ikke sidebar. Dette skyldes at mange temaer allerede bruker .sidebar klasse for deres sidebar, noe som kan føre til en konflikt med CSS-klassene som utføres av post_class () mal tag når vi kommer til å lage en loop senere.

Nå, hvis du oppdaterer adminskjermbildene dine, ser du den egendefinerte innleggstypen som vises:

Legg nå noen sidebjelker på samme måte som du vil legge til et vanlig innlegg. Her er min:

Et av mine sidebjelker består av ingenting annet enn et kjennetegnet bilde. Dette er bevisst, etter hvert som sløyfen jeg lager, vil snart vise utganger med kjente bilder.

Opprette en funksjon for å vise sidefeltene

For øyeblikket vil ikke sidebjørene dukke opp på nettstedet ditt fordi du ikke har lagt dem til temaet ditt. Så det neste trinnet er å skrive en funksjon som bruker WP_Query for å utføre sidebarstolpene.

Opprette funksjonen

Igjen i funksjonsfilen din, legg til følgende:

funksjon tutsplus_sidebars () $ args = array ('post_type' => 'sidebar_post'); $ query = ny WP_query ($ args); hvis ($ query-> have_posts ()) ?> have_posts ()): $ query-> the_post (); / * Start loop * /?>   
La oss ta en titt gjennom denne koden for å identifisere hva den gjør:
 
For det første oppretter det en funksjon som kalles tutsplus_sidebars (), som vi senere legger til i sidebar.php fil.
 
Innenfor den funksjonen definerer den argumentene for WP_Query, nemlig at posttypen er sidebar_post.
 
Det kontrollerer at spørringen returnerer innlegg og i så fall starter en loop.
 
Den åpner en side element ved hjelp av the_ID () og post_class () å generere en ID og klasser i CSS.
 
Det legger til en h3 element med posttittelen i den.
 
Det kontrollerer om innlegget har et utvalgt bilde og i så fall utdataer det.
 
Det gir innholdet i innlegget inne i a seksjon element.
 
Den lukker side element, avslutter sløyfen og bruker rewind_posts () for å tilbakestille spørringen.
 
Lagre nå din funksjonsfil.
Legge til funksjonen i sidefeltet
Funksjonen du nettopp har skrevet er ikke festet til noen kroker, så WordPress har ingen måte å kjøre den. I stedet må du ringe det i din sidebar.php fil.
Åpne sidebar.php fil i temaet ditt. Hvis du jobber med et barn i tjuefemte temaet, blir dette kopien du laget tidligere.
Hvis du vil at sidebaret ditt skal bestå bare av disse sidebjeldspostene og ingen widgets, slett du noe kode for å utføre widgets. Hvis du vil beholde widgets, la du det inn.
I mitt tilfelle skal jeg slette widgets fra den femti femten sidebarfilen, så jeg sletter disse linjene:
  
Legg nå til funksjonen din for å utføre sidebjelker. I tjuefemteen legger jeg det på slutten av sidebar.php fil, etter slutt om; linje. I temaet ditt kan du legge til det uansett hvor du vil ha sidebarene:
Ta en titt på nettstedet ditt. Sidebjelker vil bli vist:
De trenger fortsatt litt styling, som vi kommer til kort tid. Men først la oss rydde opp widgetområdene.
Avregistrering av widgetområdet
Hvis du jobber med et barntema, og du ikke vil bruke widgets i sidelinjen i det hele tatt, vil det forhindre forvirring hvis du fjerner widgetområdene i barnet ditt. Dette betyr at de ikke vises i Widgets admin skjermbildet. Hvis du lar et widget-område registreres, kan brukerne legge til widgets til det og bli forvirret når de ikke vises på nettstedet.
Hvis du jobber med ditt eget tema, er alt du trenger å gjøre, å slette koden som registrerte disse widgets i utgangspunktet (eller ikke legge til noen widgetområder som begynner med). Men hvis du bruker et barntema, kan du ikke redigere overordnet temaet, så du må bruke unregister_sidebar () funksjonen for å fjerne widget-området (e) i sidebjelken.
I barnetemaet ditt functions.php fil, legg til dette:
funksjon tutsplus_unregister_sidebar_widget_area () unregister_sidebar ('sidebar-1');  add_action ('widgets_init', 'tutsplus_unregister_sidebar_widget_area', 15);
Dette avregistrerer sidefelt-1 widget-området, som er IDen til widgetområdet jeg fjernet fra sidebar.php fil. Legg merke til at når du legger funksjonen til widgets_init action hook, jeg har lagt til en prioritet av 15 for å sikre at denne funksjonen kjøres etter at man registrerer sidebjelken i utgangspunktet, som har standardprioriteten til 10.
Nå viser skjermbildet min Widgets admin ingen widget områder:
Styling Sidebarene
For øyeblikket justerer ikke sidebjørene seg pent med det andre sidebarinnholdet, slik det er utformet av de femti femten stilarkene. Hvis du bruker ditt eget tema, har du kanskje ikke dette problemet, eller kan ha forskjellige problemer som du må fikse med styling.
For å fikse problemet med tjue femten må du bare legge til en linje med CSS. Åpne ditt barntema stilark og legg til dette:
.sidebar-innlegg margin: 0 20%; 
Lagre stilarket ditt og se på nettstedet ditt på nytt:
Det er bedre! Nå viser sidebjørene riktig.
Sammendrag
Ved å bruke en egendefinert innleggstype for sidebarinnholdet ditt, kan livet bli mye lettere hvis folkene som redigerer nettstedet ikke oppleves med kode. Bruk av innlegg på denne måten betyr at de kan bruke de vanlige WordPress admin skjermbildene for å lage sidebjelker og deretter sende dem ut på nettstedet.
Hvis du liker, kan du legge til denne teknikken ved å legge til ekstra argumenter i WP_Query. Kanskje du kan opprette en taksonomi for sidebjeldspostene dine og utdatere innlegg etter taksonomi, eller skrive ut annet innhold (for eksempel å inkludere eller utelate posttittelen eller det kjente bildet) avhengig av taksonomien (eller enda bedre, legge til metadata). Eller du kan legge til et argument for innlegg som skal sorteres etter menu_order og legg til det når du registrerer posttypen din.



		
			
	   
	




Kode