Ett användbart inslag i WordPress är hur det genererar klasser och ID-skivor. Några av dessa genereras av systemet själv, medan du i andra fall lägger in några PHP i ditt tema och WordPress använder det för att lägga till klasser och ID-adresser till sidmarkeringen.
I denna handledning demonstrerar jag tre sätt på vilka WordPress gör det här och ger praktiska tillämpningar och exempel för var och en. De tre områden jag ska hantera är följande:
Klasser och ID-er genererade för bilder som du laddar upp till WordPress via media uppladdaren
Malltaggar som används i tematets mallfiler för att generera klasser och ID-er baserat på innehåll och sida som visas
Parametrar som du kan ställa in när du registrerar widgets och menyer (eller som redan kommer att ställas in i ett välskrivet tema), som genererar klasser och ID-er som är relevanta för specifika typer av widgetar, enskilda widgets och menyalternativ
För var och en av dem ska jag förklara hur de fungerar och visa sedan var och en med några exempel.
Vad du behöver för att slutföra denna handledning
För att följa de praktiska exemplen i denna handledning behöver du:
En utvecklingsinstallation av WordPress
Ett tema som du kan redigera
Jag jobbar med ett barntema av tjugo tolv - du kan komma åt temafilerna i kodpaketet.
Klasser och IDS Genererade för bilder av Media Uploader
När du laddar upp bilder via Media Uploader får du möjlighet att ange hur bilden ska anpassas, vilket visas i skärmdumpen. Du blir också ombedd att välja vilken bildstorlek du vill visa: miniatyrbild, medium, stor eller full storlek.
Baserat på ditt val tilldelas WordPress taggar för dina uppladdade bilder ett antal klasser. Klasserna för anpassning är följande:
.alignnone
.Centrera i linje med
.anpassa till höger
.justera vänster
Dessutom tilldelar WordPress .wpcaption klass till en bildtext som du lägger till i en bild. Bildtexten kommer att ha denna klass samt en av inriktningsklasserna ovan, baserat på hur du väljer att justera bilden.
WordPress lägger också till klasser för varje bildstorlek:
.storleks fullständig
.storlek-large
.storlek-mediet
.storlek-thumbnail
Du kan använda dessa för att stila bilder av varje filstorlek.
De flesta teman kommer att innehålla CSS för att utforma var och en av dessa klasser på lämpligt sätt, till exempel omfattar tjugo tolv temat följande:
CSS ovan justerar något element (inte bara bilder) med .justera vänster, .anpassa till höger eller .Centrera i linje med klass, vilket innebär att du också kan använda dessa klasser för att stila annat innehåll än bilder om du vill.
Det lägger också till marginaler till bilder som har dessa klasser och säkerställer att bilder i full och stor storlek inte strider utanför deras innehållande element, med hjälp av max bredd: 100%.
Du kan se effekten av detta på skärmdumpen nedan. Den första bilden är justerad rätt och den andra är centrerad och full storlek.
Lägg till din egen stil med dessa klasser och id
Förutom att du ställer in justeringar och marginaler för var och en av dessa klasser kan du använda dem för att lägga till ytterligare styling.
Den första bilden i skärmbilden ovan är högerlinjad. Om skärmen ändras, blir den lika stor och texten slingrar runt det:
Du kan lägga till styling för att se till att en rättjusterad bild inte tar upp mer än 50% av skärmens bredd, så att texten kommer att slingras snyggare genom att lägga till följande CSS i ditt stilark:
img.alignright maxbredd: 50%;
Nu när sidan ses på en smal skärm är bilden mindre dominerande:
Förutom att lägga till CSS för layout eller dimensionering kan du lägga till dekorativ stilering till bilder som är anpassade på ett visst sätt. För att lägga till dekorativ stilering till centrerade fullstora bilder lägger du till följande i ditt stilark:
Detta lägger till en gräns för bilden och minskar dess storlek:
Malletiketter för att lägga till klasser och id
Klasserna och ID-erna vi har tittat på för bilder genereras av WordPress själv. Andra klasser och ID kan genereras av malltaggar i ditt tema.
Notera: Om du inte är bekant med malltaggar kan du titta på artikeln i Codex's Template Tags.
Det finns två uppsättningar malltaggar: en som gäller för HTML-tagg och två som gäller för enskilda inlägg.
De body_class () Mall tagg
Ett välskrivet tema kommer att ha följande tagg i dess header.php fil:
>
Detta ersätter det normala märka. De body_class () mall tagg berättar WordPress att tilldela klasser till tagg baserat på den sida som visas och mallfilen som den använder från det aktiva temat.
Listan över klasser som kan genereras är lång och du kan hitta den i WordPress Codex.
Några exempel är:
.Hem för hemsidan
.enkel postid- ID när ett enda inlägg ses, där ID är den postens numeriska ID
.arkiv för alla arkivsidor
.sida-templat- filnamn -PHP när en anpassad sidmall används
Om du vill lägga till ytterligare klasser till tagg som inte genereras av WordPress, kan du. Till exempel för att lägga till klassen "hej" är koden:
>
Du kan lägga till så många klasser som du vill på så sätt, separera dem med mellanslag.
Du kan använda de klasser som genereras av body_class () tagg för att lägga till styling som är specifik för en viss plats på webbplatsen eller en mallfil eller till element i den mallfilen.
I mitt barntema har jag till exempel skapat en sidmall som heter sida full bredd-med-sidebar.php, som är utformad för att visa sidor med innehållets fulla bredd och sidofältet under innehållet i stället för att det är rätt. Du kan hitta denna sidmall i kodpaketet.
Använda body_class () taggen genererar WordPress a .page-mall-sida full bredd-med-sidebar-php klass för tagg (bland andra klasser).
Så till stilelement på en sida med den här mallen lägger du till följande i ditt stilark:
/ * stillayout för fullständig sidmall med sidbar * / .sidan-mall-sida-fullbredd-med-sidebar-php .site-innehåll, .sida-mall-sida-fullbredd med sidebar-php. widget-område bredd: 100%; klara: båda; .sida-mall-sida-fullbredd-med-sidebar-php # secondary.widget-område .widget bredd: 48%; marginal: 0 1%; flyta till vänster;
Detta anger bredden på huvudinnehållet och sidofältet (#sekundär) till 100%, och anpassar även widgetsna i sidofältet bredvid varandra. Du kan se effekten på skärmdumpen:
Notera: Om ditt tema är responsivt, se till att du gör några anpassningar av bredden på widgetsna på smala skärmar i dina mediasökningar.
De post_class () och post_id () Malletiketter
Dessa taggar fungerar på samma sätt som body_class () tagg, men du använder dem med enskilda inlägg i slingan istället för element.
Till exempel i Twenty Twelve-temat är varje inlägg i slingan insvept i en element med dessa taggar applicerade:
> // innehåll här
Detta genererar ett antal klasser baserat på postens kategori och typ och ett ID baserat på postens numeriska ID. Till exempel kommer ett inlägg i min demo webbplats med kategorin "röd" att ha följande klasser och ID genererade:
// innehåll
Du kan använda dessa klasser för att ställa in inlägg från enskilda kategorier på olika sätt. På demosidan finns tre kategorier uppställda: "röd", "blå" och "viktig".
För att utforma dessa lägger du till följande CSS i temat stilark:
/ * stil inlägg i "röd" kategori * / .kategori-röd border-top: 2px solid # cc0000; / * stil inlägg i "blå" kategori * / .kategori-blå border-top: 2px solid # 3366ff; / * stil inlägg i "viktig" kategori * / .blog. category-important padding-top: 2em; marginal-vänster: 2em; .kategori-viktig: före innehåll: 'LÄS DETTA POST! DET ÄR VIKTIGT';
Detta lägger till styling för var och en av kategorierna: en färgad gräns för var och en av färgkategorierna och en extra marginal för kategorin "viktig". Det använder också ett pseudoelement för att infoga ytterligare innehåll före varje inlägg i kategorin "viktig".
Resultatet visas på skärmdumpen.
Använda klasser och ID med widgetar och menyer
När widgets är registrerade i ett tema (eller ibland ett plugin) kan de använda funktionerna innehålla kod som berättar att WordPress genererar klasser och ID-skivor baserat på widgetens namn, typ och ID.
När menyer är registrerade kan WordPress generera klasser baserat på menyns namn, positionen av objekt i menyn och platsen på webbplatsen. Du kan använda alla dessa för att ställa in widgets och menyer.
Klasser och ID för Widgets
För att registrera ett widgetområde använder du register_sidebar () funktion i ditt tema functions.php fil. Detta tar följande parametrar:
Det finns två parametrar som genererar klasser och / eller ID:
'class' => "
'before_widget' => '
'
De 'klass' parameteren kan du manuellt ange en klass för widgetområdet. Inställningarna för 'Before_widget' parameter berätta WordPress att skapa ett unikt ID för varje widget i widgetområdet och ett antal klasser för det också, vilket kommer att baseras på vilken typ av widget det är.
Till exempel på demosidan har jag lagt till två widgets - en lista med inlägg och en lista med sidor. För listan över inlägg utförs följande HTML:
För listan med sidor matas följande HTML:
Du kan använda detta för att stila widgets som listar inlägg, genom att lägga till följande CSS i temat stilark:
Detta lägger till en gräns för sidor med widgetar, som visas i skärmdumpen:
Notera: Detta fungerar på demo-webbplatsen eftersom det använder ett barntema för de tjugo tolv temat, som har sidofält registrerade korrekt. Om du bygger ditt eget tema måste du lägga till register_sidebar () taggen med parametrarna ovan. Ta reda på hur du gör det i den tillhörande Codex-artikeln.
Klasser och ID för menyer
Navigationsmenyerna visas med hjälp av wp_nav_menu () tagga in ditt temas header.php fil. Detta tar ett antal parametrar, som beskrivs i wp_nav_menu artikel.
En av dessa lägger till klasser och ID: er för varje objekt i menyn:
'items_wrap' => '
% 3 $ s
'
Detta lägger till ett ID och ett antal klasser för varje objekt. Klasserna är baserade på klassen för menyn själv och platsen på platsen. Till exempel, när användaren är på en sida på webbplatsen, kommer dess inmatning i navigeringsmenyn att ha .current_page_item klass.
Du kan använda detta för att lägga till styling till den aktuella sidans inmatning i menyn. Om du till exempel lägger till en underskrift på den aktuella sidan lägger du till följande i ditt stilark:
/ * stil aktiv sida länk i navigering * / .main-navigation .current_page_item text-decoration: underline;
Den resulterande underskriften kan ses i skärmdumpen (såväl som den färgförändring som redan finns i överordnad temat stilark):
Notera: Eftersom jag använder ett barntema för de tjugo tolv temat behöver jag inte lägga till wp_nav_menu () taggen, eftersom det redan finns i modertemat.
Sammanfattning
Som vi har undersökt ovan finns det ett antal sätt på vilka WordPress genererar klasser och id på element i en webbplats. Några av dessa genereras av WordPress själv och andra använder mallkoder eller funktionsparametrar för att berätta för WordPress att mata ut klasserna och ID: erna. Du kan använda dessa för att stila sidor, menyer, widgets, postförteckningar och andra element i din design.
Det finns många andra sätt på vilka du kan använda dessa klasser och id för att utforma dina projekt. Till exempel:
Du kan skapa en webbplats med ett antal olika avsnitt, med hjälp av klasser som genereras av body_class () tagg för att göra innehåll i varje avsnitt ser väldigt distinkt ut
Du kan utforma enskilda postförteckningar annorlunda på en arkivsida genom att rikta in det ID som genererats av the_ID () märka
Du kan markera aktuella menyalternativ i din navigering, skapa en knappliknande effekt och använda bilder, bakgrund, gradienter och mer
Du kan använda en kombination av ovanstående, till exempel utforma vissa widgets annorlunda i olika delar av webbplatsen
Möjligheterna är bara begränsade av din fantasi!
Medel
Några användbara Codex-sidor om ämnena som omfattas av denna handledning:
Klasser genererade för bilder: http://codex.wordpress.org/CSS#WordPress_Generated_Classes
De body_class () tagg: http://codex.wordpress.org/Function_Reference/body_class
De post_class () tagg: http://codex.wordpress.org/Function_Reference/post_class
De the_ID () tagg: http://codex.wordpress.org/Function_Reference/the_ID
De wp_register_sidebar () funktion: http://codex.wordpress.org/Function_Reference/register_sidebar
De wp_nav_menu () tagg: http://codex.wordpress.org/Function_Reference/wp_nav_menu
En guide till malltaggar: http://codex.wordpress.org/Template_Tags
Share
Accentsconagua
