Hur du visar dina anpassade inläggstyper i Elementor

I den här handledningen kommer vi att lära oss hur man skapar en anpassad posttyp i WordPress och framgångsrikt integrera det i Elementor. Historiskt sett har WordPress varit ett innehållshanteringssystem. Det började som en plattform för bloggning men utvecklades så småningom till ett komplext verktyg för att underhålla sofistikerade webbplatser. Numera har WordPress en 60.8% marknadsandel i CMS marknadsföra. Framgången med WordPress kan delvis tillskrivas den slumpmässiga implementeringen av anpassade inläggstyper.

Genom att använda Elementor Pro kan du hantera dessa anpassade inläggstyper och utveckla innehåll efter dina behov. Anpassade fält är en ovärderlig tillgång för att skapa anpassade inläggstyper. Dessa två, när de arbetar unisont, är avgörande för att bygga intrikata webbplatser. Låt oss ta en djupgående titt på anpassade fält, skapande av anpassade inläggstyper och deras relation till Elementor.

Anpassade fält och ACF

Vad är ett anpassat fält? I huvudsak är anpassade fält delar av ytterligare information som kan läggas till på din webbplats via plugin eller genom att använda kod. Vi kommer till kodningsdelen senare, men låt oss för närvarande diskutera de mest populära plugins för att skapa anpassade fält. Tre av de mest framträdande plugins är:

• Avancerade anpassade fält (ACF)
• Pods
• Verktygset

För den här handledningens skull kommer vi att använda ACF. I ett nötskal är ACF ett plugin som låter användaren lägga till anpassade metafält på WordPress sidor, inlägg, Anpassad Post Typer och kontrollera innehållsflödet relativt enkelt. I grund och botten använder den anpassad postmeta för att utöka ditt innehåll med anatomiskt strukturerad data. Anpassade fält kan göras till metaboxar i gengäld så att du kan bearbeta stora mängder information ganska enkelt.

Så varför diskuterar vi anpassade fält? Tja, om du skapar anpassade inläggstyper kommer du troligen att fylla dem med anpassade fält. För det mesta arbetar dessa två hand i hand. En enorm mängd innehåll kan göras dynamiskt med korrekt användning av anpassade fält och anpassade inläggstyper. Tack och lov har Elementor integrerat båda dessa funktioner i deras plugin för sidbyggare och nu kan användare skapa anpassade metadata utan att skriva en enda rad kod.

Vad är en anpassad posttyp?

Varje WordPress-användare är bekant med två av de vanligaste inläggstyperna: sidor och inlägg. Även om liknande, inlägg är kronometriska listor, men sidor är hierarkiska i sin struktur (förälder > barn, Etc.). inlägg använda taxonomier, till exempel, Tags och KategorierMedan sidor låt bli. Som vi kan se är varje inläggstyp skapad med ett specifikt mål i åtanke, för en viss typ av innehåll. Som standard stöder WordPress 8 olika inläggstyper:

• Inlägg
• Sida
• Attachment
• Revision
• navigationsmenyn
• Anpassad CSS
• Ändringar
• Användardataförfrågningar

Det finns en oändlig mängd inläggstyper som inte passar in i någon av dessa kategorier. Som en konsekvens låter WordPress sina användare skapa anpassade inläggstyper, så kallade CPTs. Både webbutvecklare och designers implementerar CPT på de flesta av sina webbplatser. Med smart användning och stor erfarenhet kan anpassade inläggstyper skräddarsys för att stödja och visa upp allt tänkbart innehåll. Med Elementor kan vi designa detta innehåll ytterligare och bestämma hur det ska tillämpas på vår webbplats.

Exempel på anpassad inläggstyp

För en nybörjare inom WordPress-utveckling är det absolut nödvändigt att känna igen vilken typ av innehåll som kan utgöras av en CPT. Särskilt nuförtiden, när mycket anpassad metadata (ofta med relativt liten indatainformation) kan läggas till utan implementering av anpassade inläggstyper. Till exempel finns det inget behov av att skapa anpassad metadata för ett litet antal portföljer när Elementors Portfölj widget kan göra exakt samma sak men mer effektivt. Naturligtvis, om mängden portföljer är enorm, är det lättare att skapa ett anpassat fält och anpassad posttyp för dem än att ständigt redigera widgeten manuellt.

Exempel

Låt oss ta en titt på vanliga anpassade inläggstyper och de element som är anpassningsbara:

• Portföljsajter
  • Kundens namn
  • Utfört arbete
  • Material och/eller teknik som används
  • Teammedlemmar inblandade
  • År
  • Projektbeskrivning
• E-handelssajter
  • Pris
  • Variationer
  • KVANTITET
  • Storlek
  • Färg
  • Betyg
• Granska webbplatser
  • Titel
  • Författare
  • Genre
  • Utgivningsdatum
  • Betyg
  • Poster
  • Beskrivning
• Personal- och teamsidor
  • Personal
  • Bilder
  • Arbetsroller
  • Respektive avdelning
  • År i företaget
• Receptsajter
  • Typ av mat
  • Tillagningstid
  • Förberedelsetid
  • Delar
  • Näringsvärden
  • Betyg
• Fastighetslistor
  • Storlek/kvadratmeter
  • Antal våningar
  • Antal sovrum
  • Bilder
  • Pris
  • Plats
  • Kontaktinformation
• Företagskataloger
  • Typ av företag
  • Plats
  • Öppettider
  • Kundomdömen
  • Kontaktinformation

Som du kan se kan nästan alla typer av data använda anpassade inläggstyper, men det är upp till dig att bestämma om det är värt det. Vi rekommenderar starkt att du använder anpassade inläggstyper för ovan nämnda webbplatser och liknande. Även om din webbplats bara började med ett fåtal anpassade fältelement, kan den växa i omfattning och den stora mängden element kan visa sig vara överväldigande att hantera manuellt. Låt oss nu ta en titt på hur anpassade inläggstyper kan skapas med hjälp av plugins.

Skapa anpassade inläggstyper med plugins

Först och främst behöver du lite skendata för att fylla i vår nya anpassade inläggstyp. Som vi tidigare nämnt kommer vi att använda ACF för detta ändamål. Du kan kolla in vår tidigare blogginlägg för en djupgående titt på skapandet av ACF-fält och deras integration inom Elementor.

Nu när du har skapat anpassade fält kan vi börja skapa anpassade inläggstyper. Först måste du hitta och installera CPT UI plugin. Efter aktivering kommer du att märka att det finns en ny panel i din WordPress-instrumentpanel som heter "CPT UI".

Om du klickar på "CPT UI”, då visas en rullgardinsmeny. Du kan hitta alla dessa menyalternativ i CPT UI-huvudpanelen, men som en bekväm funktion kan du få tillgång till dem via rullgardinsmenyn.

Nu när vi har hittat CPT UI-huvudpanelen kan vi ta en titt på olika möjligheter som CPT UI-pluginet erbjuder oss. Det första menyalternativet är "Lägg till/redigera inläggstyper”. Du kommer att se alternativ för att skapa nya anpassade inläggstyper, redigera befintliga eller importera och exportera anpassade inläggstyper. För närvarande är detta det enda avsnittet vi kommer att använda. Vi kommer att skölja över andra framtidsutsikter lite senare i den här artikeln. Klicka på "Lägg till ny inläggstyp" fönster. Många inställningar öppnas. Om du är ny på WordPress-webbutveckling kan det hela verka överväldigande. Men oroa dig inte, ärligt talat, det är mycket lättare än det ser ut. Låt oss ta en titt på grundläggande inställningar och vad de representerar.

Grundinställningar

Som du kan se är alla inmatningsfält obligatoriska, vilket noteras av den röda stjärnan. den "Posttyp Slug” är i princip namnet på din anpassade inläggstyp. Tänk på att snigeln används för olika frågor angående innehållet av inläggstyp, så därför bör den ha ett tydligt och kortfattat namn. Därefter kommer du att se "Plurala etiketter"Och"Singular Etiketter”. De används för att känna igen posttypsnamnet i din administratörspanel. Till exempel, om din nya anpassade inläggstyp handlar om filmer, bör den heta så.

Det finns ytterligare ett alternativ som heter "Fyll i etiketter automatiskt”. Nästa uppsättning inställningar- "Ytterligare etiketter”, använder den. Det här speciella alternativet fyller i ovannämnda "Ytterligare etiketter" inmatningsfält med data baserade på etiketterna som valts tidigare i "Grundinställningar" fönster. Det är en mycket uppskattad funktion bland webbdesigners och utvecklare som sparar mycket tid och resurser under utvecklingsprocessen.

Ytterligare etiketter

Den "Ytterligare etiketter" fälten har fyllts i och vi kan fortsätta till "Inställningar" fönster. Här kan du hitta allmänna inställningar om din anpassade inläggstyp, till exempel om ditt inlägg är offentligt, kan det visas i navigeringsmenyn, vilken typ av inläggsredigeringsfunktioner som stöds och så vidare. Som du kommer att märka finns det en hel handfull inställningar att välja mellan, men tack och lov har var och en av dem en beskrivning precis under inmatningsfälten. Du bör prova varje möjlighet för att förstå kärnkoncepten för att skapa anpassade inläggstyper och hur CPT:erna kan implementeras på din Elementor-byggda webbplats. Tänk på vilken typ av budskap ditt anpassade innehåll ska förmedla och hur det kan integreras på webbplatsen via CPT-användning.

Alla fält har fyllts i och du måste ha trippelkollat ​​indata! Vi kan äntligen klicka på "Lägg till inläggstyp”-knappen och skapa den anpassade inläggstypen. Om du går tillbaka till toppen av CPT UI-menyn kommer du att se "Visa inläggstyper" fönster. Här kan du se alla dina CPT:er och deras respektive inställningar, stöd, taxonomier, mallhierarki och etiketter. Det är ett lättillgängligt sätt att övervaka ditt tidigare arbete och samla in nödvändig information om eventuella ändringar om det behövs.

Efterbehandling

Du kanske har märkt att det finns ett tomt fönster under din CPT som heter "taxonomier”. CPT UI gör det möjligt att skapa anpassade taxonomier för våra CPTs också. Även om vi inte kommer att diskutera dem i den här artikeln, är det viktigt att notera att webbplatser med ett specifikt mål i åtanke kan behöva använda ganska knepiga taxonomier för att hålla data organiserade och strukturerade. Elementor har framgångsrikt integrerat både CPT och anpassade taxonomier i sin sidbyggare så att webbutvecklarna skulle ha lättare att lägga till alla dessa anpassade funktioner på sina webbplatser.

Ett nytt menyalternativ har dykt upp i din instrumentpanel och din första anpassade inläggstyp har skapats. Du kommer förmodligen att vilja designa det anpassade innehållet efter dina önskemål. Om du klickar på "Lägg till en ny”-knappen, så kommer du att presenteras med en vanlig WordPress-sidredigerare. Ärligt talat kanske du undrar - var har "Redigera med Elementor”-knappen försvann? Tja, för att använda CPT i Elementor måste du aktivera dem via Elementor-inställningarna. När du har hittat inställningarna, gå till Allmänt och markera din anpassade inläggstyp i Post Typer fönster. Varje Elementor-funktion står nu till ditt förfogande och du kan skräddarsy CPT:erna till din härds innehåll.

Kommer du ihåg de ACF-fälten du skapade tidigare? Nu kan du se varför de fungerar så bra tillsammans med CPT. Bara genom att fylla i några fält och använda dynamiskt innehåll där det behövs, kan vi snabbt och effektivt lägga till och hantera en stor mängd data. Både anpassade inläggstyper och anpassade fält är absolut nödvändiga för WordPress-webbplatsutveckling. Den stora omfattningen av designmöjligheter de ger till bordet är nästan obegränsad och kommer att avsevärt öka arbetsbelastningen du eller ditt team kommer att kunna bära.

Anpassade inläggstyper och Elementor

Elementor integrerar anpassade inläggstyper genom att använda dynamiskt innehåll. De flesta textrelaterade widgets kan använda dynamiskt innehåll och visa data från de anpassade fält som du tidigare skapat. Till exempel är textredigerarens widget ett av de vanligaste sätten att uppnå detta. Leta upp ikonen för dynamiskt innehåll precis bredvid "text”-knappen i widgetpanelen och klicka på den. En mängd alternativ kommer upp i ett nytt rullgardinsfönster. Leta upp "ACF-fält" objektet och klicka på det.

Du kommer att märka att även om inmatningsfältet har fyllts i så har ingenting förändrats i designen. Följaktligen måste du klicka på fältet igen och ett rullgardinsfönster öppnas där du kommer att kunna välja exakt vilken typ av anpassat innehåll du vill visa.

Nu när ditt inlägg har fyllts på med alla typer av data och designen är klar, kan du spara ditt inlägg som en mall, så att det kan tillämpas på varje anpassad inläggstyp du har skapat. Du kan skapa en ny mall från början och sedan tillämpa den på alla dina anpassade inlägg också.

Genom att använda Elementors Theme Builder, kan du skapa arkiv- och enstaka inläggsmallar för dina anpassade inläggstyper och redigera villkoren under vilka CPT:erna kommer att visas på din webbplats. Det är upp till dig att bestämma vilken typ av tillvägagångssätt som är mest lämplig för din webbplats behov.

Skapa anpassade inläggstyper med kod

Om du är väl insatt i kodning och inte är rädd för att mixtra med filerna i ditt tema, skapa gärna CPT genom att applicera koden manuellt. Ta en titt på följande kod nedan:

function create_post_type() {
register_post_type( 'elementor_product',
array (
'etiketter' => array(
'name'=> _('Produkter'),
'singular_name' => _('Produkt')
),
'public' => sant,
'has_archive' => sant,
)
);
}
add_action( 'init', 'create_post_type' );

Denna speciella kodbit måste läggas till i functions.php filen i din temans rotkatalog, som finns i Temaeditor. Var därför noga med att skriva koden i barntemat, annars riskerar du att uppleva "dödens vita skärm" och göra allt ditt arbete otillgängligt. I allmänhet bör du alltid posta anpassad kod i barntemat. Som du kan se är det otroligt effektivt att implementera anpassade inläggstyper på din webbplats med hjälp av kod. Ju mer erfaren du blir, desto mer avancerade CPT kommer du att kunna skapa.

slutord

Anpassade inläggstyper är en ovärderlig del av webbplatsskapandet. Med noggrann planering och smart implementering kommer du att kunna anpassa din helt nya webbplats till alla typer av data där ute. Även om CPT:erna kan verka överväldigande i början, finns det mycket avancerade plugins tillgängliga gratis som hjälper till att skapa CPT. Tillsammans med Elementor har CPT:er nästan obegränsade designmöjligheter. Tänk på att aktivera din CPT i Elementor Inställningar! Med gott om tid och erfarenhet kommer du att kunna kartlägga en CPT bara från första anblicken på data. Håll utkik efter fler artiklar, heja!

Vanliga frågor och svar

Can I display custom post types in Elementor using this method if they have custom taxonomies or meta fields?

The article focuses on displaying custom post types in Elementor using the Posts widget, which primarily pulls content from the default WordPress post type. It may not address the display of custom post types with custom taxonomies or meta fields out of the box. You may need to use additional plugins or custom code to extend Elementor’s capabilities and ensure compatibility with custom post types that have unique taxonomies or meta fields.

Will displaying custom post types in Elementor affect the styling and layout of my website’s theme?

The method described in the article for displaying custom post types in Elementor utilizes Elementor’s Posts widget, which allows you to control the layout and styling of post content within Elementor. While the appearance of custom post types displayed in Elementor can be customized to match your website’s theme, it’s essential to consider how the styling and layout may integrate with your theme’s overall design aesthetic. You may need to adjust your theme’s styling or use custom CSS to ensure a seamless visual integration.

Can I filter or sort custom post types displayed in Elementor based on custom taxonomies or meta fields?

The article does not specifically address filtering or sorting custom post types displayed in Elementor based on custom taxonomies or meta fields. While Elementor’s Posts widget offers some filtering and sorting options for standard post types, additional customization may be required to filter or sort custom post types based on custom taxonomies or meta fields. Consider using plugins or custom code to implement advanced filtering and sorting functionality as needed.

How can I ensure that custom post types displayed in Elementor are optimized for performance and page load times?

While the article provides guidance on displaying custom post types in Elementor, it may not cover optimization techniques for ensuring optimal performance and page load times. When working with custom post types in Elementor, it’s essential to consider factors such as caching, lazy loading, image optimization, and minimizing server requests to improve performance. Utilize caching plugins, optimize images and assets, and implement performance best practices to ensure smooth and efficient page loading.

Are there any compatibility issues or considerations to be aware of when displaying custom post types in Elementor?

The article does not address potential compatibility issues or considerations that may arise when displaying custom post types in Elementor. While Elementor is widely compatible with various WordPress themes and plugins, conflicts or display issues may occur, particularly if custom post types are registered with unique settings or functionalities. It’s recommended to test custom post type displays thoroughly across different devices and browsers and address any compatibility issues promptly through custom code or plugin adjustments.