Så här skapar du en hemsida med flera listor med hjälp av anpassade sökningar

WordPress ger dig ett par inbyggda alternativ för din hemsida: en visning av dina senaste blogginlägg eller en statisk sida efter eget val. Men vad sägs om du vill skapa något lite mer intressant än det?

Om din webbplats har mycket data med hjälp av kategorier, taxonomier eller anpassade posttyper för att organisera det, kanske du vill visa data av mer än ett slag på din hemsida. Den goda nyheten är att du kan göra detta med hjälp av en anpassad mall för hemsidan. I den här mallen skriver du ett antal anpassade frågor för att lista uppgifterna på det sätt du vill. I den här handledningen lär du dig att göra följande:

  • Skapa en anpassad hemsida mall för användning av ditt tema
  • Inkludera fyra frågor i den mallen för att visa olika typer av data, inklusive tre anpassade frågor

Frågorna kommer att lista standardinställningar plus en anpassad posttyp registrerad för detta projekt, som kallas "djur". Du kan hitta mallfilen med de fyra frågorna i kodpaketet.


Vad du behöver för att slutföra denna handledning

  • En utvecklingsinstallation av WordPress
  • Ett tema installerat som du kan redigera. Om du arbetar med ett befintligt tema rekommenderar jag att du skapar ett barntema så att du kan skapa mallfiler utan att redigera överordnatema. Jag använder ett barntema på tjugo tolv

Hemsida Design

Innan du börjar konfigurera hemsidan mall, ta en tid innan du identifierar vad som finns på hemsidan:

Hemsidan innehåller:

  • En rubrik med en banner och navigeringsmeny
  • Hemsidans innehåll - text och en bild
  • Tre listor, var och en med hjälp av en anpassad fråga:
    • Uppdateringar - det här är standardinställningar i kategorin "Uppdateringar"
    • I detalj - standardinställningar i kategorin "Detalj"
    • Djur - dessa använder en anpassad posttyp som kallas "djur"
  • En vanlig footer

Elementen i den här layouten du kommer att arbeta med är hemsidans innehåll och de tre listorna.


Innan du börjar: Ställa in data

Innan du börjar måste du ha några saker på plats för dina frågor att arbeta med:

  • En "djur" anpassad posttyp registrerad. För detaljer om hur du gör det, se register_post_type i WordPress Codex. Alternativt kan functions.php filen i kodpaketet innehåller koden som gör det här
  • Två kategorier uppställda för normala inlägg - "Uppdateringar" och "I detalj"
  • En statisk sida som heter "Hem", med lite innehåll tillagt det. Detta bör ställas in som hemsidan via Inställningar-sidan i WordPress-instrumentpanelen
  • Några normala inlägg i varje kategori och några djur (med anpassad inläggstyp). Mallen visar upp till åtta av vardera

Skapa frontsidans mall

Det första steget är att skapa en mallfil för att hålla din kod. Skapa en tom fil i din temmapp och namnge den front-page.php. Lägg till följande kod i filen:

  // innehåll på framsidan går här 

Spara din fil. Som du kan se innehåller detta filerna för sidhuvud och sidfot på din hemsida. Inga sidofält ingår som det inte ingår i hemsidan. När du besöker webbplatsens hemsida kommer du nu att ha en tom sida med bara rubriken och sidfoten som visas:


Lägger till statiskt innehåll på hemsidan

Förutom att visa resultaten av anpassade frågor, kommer din hemsida att visa innehållet från statens startsida. För att lägga till detta i din mallfil, sätt i följande kod för att ersätta "// innehåll på framsidan går här"linje:

  
>
?>

Detta är standardslingan. WordPress använder den för att visa innehållet på den statiska sidan du har registrerat som hemsida. Din hemsida kommer nu att innehålla det statiska innehållet:


Den första anpassade frågan med WP_Query

För de anpassade frågorna kommer du att använda WP_Query klass. Det här låter dig konfigurera anpassade frågor och köra en loop baserat på var och en för att visa inlägg.

Använder sig av WP_Query är mycket bättre övning än att använda query_posts funktionen som den sistnämnda återställer huvudfrågan och kan orsaka prestandafrågor. WP_Query tar en uppsättning parametrar som definierar den fråga du vill köra. Några exempel på parametrar som du kan ange inkluderar (men är inte begränsade till):

  • post_type - inlägg, sidor, bilagor eller en anpassad posttyp
  • kategori
  • märka
  • taxonomy term (er)
  • posts_per_page - Antalet inlägg som ska visas
  • ordning - ASC eller DESC
  • sortera efter - Du kan beställa efter datum, namn, författare, menyorder eller många fler parametrar
  • … och många fler

För detaljer om parametrarna som du kan använda med WP_Query, se WP_Query i WordPress Codex. Att använda WP_Query, du anger följande kod:

 have_posts ()): $ query-> the_post (); // postinnehåll som visas här än ?>

På din hemsida vill du lista de senaste åtta inläggen i kategorin "Uppdateringar". För att göra detta lägger du till följande kod mellan huvudfrågan och samtalet till sidfoten:

 

/ Kategori / uppdateringar / "> Uppdateringar

    'post', 'category_name' => 'Uppdateringar', 'posts_per_page' => 8)); medan ($ query-> has_posts ()): $ query-> the_post (); ?>
  • "> -

Detta skapar en

element som innehåller din lista och öppnar listan med en länk till kategorin arkivet i en

märka. Det definierar sedan argumenten för WP_Query och kör slingan baserat på den frågan. Tilläggsklasserna kan användas för att ställa in varje enskild lista.


Den andra anpassade frågan

Den andra anpassade frågan är nästan identisk med den första, det frågar bara inlägg från en annan kategori. Lägg till följande efter den första frågan och omedelbart före den andra stängningen

märka:

 

/ kategori / djupgående / "> I djup

    'post', 'category_name' => 'In Depth', 'posts_per_page' => 8)); medan ($ query-> has_posts ()): $ query-> the_post (); ?>
  • "> -

Detta lägger till en andra postlista för inlägg i kategorin "In Detail".


Den tredje anpassade frågan: Fråga en anpassad posttyp

Den tredje och sista frågan frågar inte standardinställningar, men den "djur" anpassade posttypen du registrerade innan du skapade din mallfil. Efter den andra anpassade frågan lägger du till följande:

 

"> Våra favoritdjur

    "djur", "posts_per_page '=> 8)); medan ($ query-> has_posts ()): $ query-> the_post (); ?>
  • ">

Du har nu alla frågor på plats och visas på hemsidan:


Style listorna

Det sista steget är att lägga till lite styling. För tillfället är listorna en under den andra, med väldigt lite i vägen för avstånd eller dekoration.

I det här steget lägger du till några enkla stylingar för att förbättra detta. Lägg till följande i ditt temans stilark:

 .rensa float: none; klara: båda;  .home section.archive width: 31%; marginal: 10px 1%; border-top: 1px solid # 222; flyta till vänster;  .home section.archive ul li linjehöjd: 1.4em; 

Detta kommer att se till att listorna rensas under huvudinnehållet och placera dem sida vid sida. Det lägger också till lite avstånd mellan objekten i varje lista:


Sammanfattning

Du har nu en anpassad hemsida som innehåller innehållet för statisk sida plus tre anpassade frågor som innehåller olika innehållstyper. Du kan anpassa detta tillvägagångssätt till olika krav. Till exempel:

  • För en första sida som bara visar arkiv och inget statiskt innehåll, tar du helt enkelt bort den första slingan
  • För att lista posten "djur" på ett annat sätt kan du ange taxonomier i dina argument för WP_Query
  • Du kan lägga till eller ändra innehållet som visas för varje inlägg, till exempel med the_thumbnail () för att visa miniatyrbilder i posten (eller utvalda bilder)
  • Du kan lägga till anpassade frågor i sidfältet eller sidfoten för att visa dem på alla sidor

Medel

Några användbara resurser:

  • Codex sida på WP_Query klass: http://codex.wordpress.org/Class_Reference/WP_Query
  • Skapa en mallfil för framsidan: http://codex.wordpress.org/Template_Hierarchy#Front_Page_display
  • Registrering av anpassade posttyper: http://codex.wordpress.org/Function_Reference/register_post_type