Een handige functie van WordPress is de manier waarop het klassen en ID's genereert. Sommige hiervan worden gegenereerd door het systeem zelf, terwijl u in andere gevallen wat PHP invoegt in uw thema en WordPress gebruikt dat om klassen en ID's aan de paginamarkering toe te voegen.
In deze zelfstudie laat ik drie manieren zien waarop WordPress dit doet en praktische toepassingen en voorbeelden voor elk beschikbaar stelt. De drie gebieden die ik zal behandelen zijn als volgt:
Klassen en ID's gegenereerd voor afbeeldingen die u uploadt naar WordPress via de media-uploader
Sjabloontags die worden gebruikt in de sjabloonbestanden van een thema om klassen en ID's te genereren op basis van de inhoud en pagina die wordt bekeken
Parameters die u kunt instellen bij het registreren van widgets en menu's (of die al zijn ingesteld in een goed geschreven thema), die klassen en id's genereren die relevant zijn voor specifieke typen widgets, afzonderlijke widgets en menu-items
Voor elk daarvan zal ik uitleggen hoe ze werken en ze vervolgens demonstreren met enkele voorbeelden.
Wat u nodig hebt om deze zelfstudie te voltooien
Als u de praktische voorbeelden in deze zelfstudie wilt volgen, heeft u het volgende nodig:
Een ontwikkelingsinstallatie van WordPress
Een thema dat u kunt bewerken
Ik zal werken met een kindthema van Twenty Twelve - je hebt toegang tot de themabestanden in de codebundel.
Klassen en IDS gegenereerd voor afbeeldingen door de Media Uploader
Wanneer u afbeeldingen uploadt via de Media Uploader, krijgt u de mogelijkheid om aan te geven hoe de afbeelding moet worden uitgelijnd, zoals wordt weergegeven in de schermafbeelding. Je wordt ook gevraagd om te kiezen welk beeldformaat je wilt weergeven: thumbnail, medium, large of full size.
Op basis van uw selectie wijst WordPress de tag voor uw geüploade afbeeldingen een aantal klassen. De klassen voor uitlijning zijn als volgt:
.alignnone
.aligncenter
.rechts uitlijnen
.alignleft
Bovendien wijst WordPress de .wpcaption klasse aan een bijschrift dat u aan een afbeelding toevoegt. Bijschriften hebben zowel deze klasse als een van de uitlijnklassen hierboven, gebaseerd op hoe u ervoor kiest om de afbeelding uit te lijnen.
WordPress voegt ook klassen toe voor elke afbeeldingsgrootte:
.size-full
.grote maat
.maat medium
.size-thumbnail
U kunt deze gebruiken om afbeeldingen van elke bestandsgrootte te stijlen.
De meeste thema's bevatten CSS om elk van deze klassen op de juiste manier te stijlen, het Twenty Twelve-thema omvat bijvoorbeeld het volgende:
De bovenstaande CSS lijnt elk element (niet alleen afbeeldingen) uit met de .alignleft, .rechts uitlijnen of .aligncenter klasse, wat betekent dat je deze klassen ook kunt gebruiken om andere inhoud dan afbeeldingen te stylen als je dat wilt.
Het voegt ook marges toe aan afbeeldingen die deze klassen hebben en zorgt ervoor dat afbeeldingen van volledige en grote formaten niet buiten hun element vallen, met behulp van max. breedte: 100%.
U kunt het effect hiervan zien in de onderstaande schermafbeelding. De eerste afbeelding is rechts uitgelijnd en de tweede is gecentreerd en op ware grootte.
Voeg uw eigen styling toe met behulp van deze klassen en ID's
Naast het instellen van uitlijning en marges voor elk van deze klassen, kunt u ze gebruiken om extra styling toe te voegen.
De eerste afbeelding in de schermafbeelding hierboven is rechts uitgelijnd. Als het formaat van het scherm wordt gewijzigd, blijft het dezelfde grootte en de tekst loopt er slordig omheen:
U kunt een stijl toevoegen om ervoor te zorgen dat een afbeelding die recht is uitgelijnd, niet meer dan 50% van de breedte van het scherm beslaat, zodat de tekst netter wordt ingepakt door de volgende CSS aan uw stylesheet toe te voegen:
img.alignright max-width: 50%;
Wanneer de pagina nu op een smal scherm wordt bekeken, is de afbeelding minder dominant:
Naast het toevoegen van CSS voor lay-out of dimensionering, kunt u decoratieve stilering toevoegen aan afbeeldingen die op een bepaalde manier zijn uitgelijnd. Als u decoratieve opmaak wilt toevoegen aan gecentreerde afbeeldingen op volledig formaat, voegt u het volgende toe aan uw stylesheet:
Dit voegt een rand toe aan de afbeelding en verkleint de grootte ervan:
Sjabloontags voor het toevoegen van klassen en id's
De klassen en ID's waarnaar we hebben gekeken voor afbeeldingen worden gegenereerd door WordPress zelf. Andere klassen en ID's kunnen worden gegenereerd door sjabloontags in uw thema.
Notitie: Als u niet bekend bent met sjabloontags, bekijkt u het artikel Sjabloontags van de Codex.
Er zijn twee sets sjabloontags: een die van toepassing is op de HTML-tag en twee die van toepassing zijn op individuele berichten.
De body_class () Sjabloonlabel
Een goed geschreven thema heeft de volgende tag in zijn header.php het dossier:
>
Dit vervangt de normale label. De body_class () sjabloon tag vertelt WordPress om klassen toe te wijzen aan de tag gebaseerd op de pagina die wordt bekeken en het sjabloonbestand dat wordt gebruikt in het actieve thema.
De lijst met klassen die kan worden gegenereerd, is lang en u kunt deze vinden in de WordPress Codex.
Enkele voorbeelden zijn:
.huis voor de startpagina
.één postid- ID wanneer een enkel bericht wordt bekeken, waarbij ID de numerieke ID van dat bericht is
.archief voor elke archiefpagina
.pagina-template bestandsnaam -PHP wanneer een aangepaste paginasjabloon wordt gebruikt
Als u extra klassen wilt toevoegen aan de tag die niet worden gegenereerd door WordPress, dat kan. Om bijvoorbeeld de klasse "hallo" toe te voegen, is de code:
>
Je kunt op deze manier zoveel klassen toevoegen als je wilt, door ze te scheiden met spaties.
U kunt de klassen gebruiken die zijn gegenereerd door de body_class () tag om styling toe te voegen die specifiek is voor een bepaalde locatie op de site of een sjabloonbestand, of elementen in dat sjabloonbestand.
In mijn kindthema heb ik bijvoorbeeld een paginasjabloon gemaakt met de naam page-volle breedte-met-sidebar.php, die is ontworpen om pagina's weer te geven met de volledige breedte van de inhoud en de zijbalk onder de inhoud in plaats van aan de rechterkant. U vindt deze paginasjabloon in de codebundel.
De ... gebruiken body_class () tag, WordPress genereert een .pagina-template-page-volle breedte-met-sidebar-php klasse voor de tag (naast andere klassen).
Dus om elementen op een pagina te stijlen met behulp van deze sjabloon, voegt u het volgende toe aan uw stylesheet:
/ * stijllay-out voor sjabloon met volledige pagina met zijbalk * / .pagina-sjabloon-pagina-volledige-breedte-met-zijbalk-php. site-inhoud, .pagina-sjabloon-pagina-volledige-breedte-met-zijbalk-php. widget-area width: 100%; beiden opschonen; .pagina-template-page-full-width-with-sidebar-php # secondary.widget-area .widget width: 48%; marge: 0 1%; zweven: links;
Dit stelt de breedte van de hoofdinhoud en de zijbalk in (#tweede) tot 100% en lijnt ook de widgets in de zijbalk naast elkaar uit. Je kunt het effect zien in de screenshot:
Notitie: Als uw thema responsief is, zorgt u ervoor dat u de breedte van de widgets aanpast op smalle schermen in uw mediaquery's.
De post_class () en post_id () Sjabloon Tags
Deze tags werken op dezelfde manier als de body_class () tag, maar je gebruikt ze met individuele berichten in de lus in plaats van de element.
Bijvoorbeeld, in het Twenty Twelve-thema is elke post in de lus omwikkeld met een element met deze tags toegepast:
> // inhoud hier
Dit genereert een aantal klassen op basis van de categorie en het type van de post en een ID op basis van de numerieke ID van de post. Een bericht in mijn demosite met de categorie 'rood' heeft bijvoorbeeld de volgende klassen en gegenereerde id's:
// inhoud
U kunt deze klassen gebruiken om berichten uit afzonderlijke categorieën anders te stijlen. Op de demosite zijn drie categorieën ingesteld: 'rood', 'blauw' en 'belangrijk'.
Om deze te stylen, voeg je de volgende CSS toe aan de stylesheet van het thema:
/ * stijl berichten in 'rood' categorie * / .category-rood border-top: 2px solid # cc0000; / * style posts in 'blue' categorie * / .category-blue border-top: 2px solid # 3366ff; / * stijl berichten in 'belangrijke' categorie * / .blog .category-important padding-top: 2em; marge links: 2em; .category-important: before content: 'LEES DEZE POST! HET IS BELANGRIJK';
Dit voegt stijl toe voor elk van de categorieën: een gekleurde rand voor elk van de kleurcategorieën en een extra marge voor de categorie 'belangrijk'. Het gebruikt ook een pseudo-element om extra inhoud vóór elk bericht in de categorie 'belangrijk' in te voegen.
Het resultaat wordt getoond in de screenshot.
Klassen en ID's gebruiken met widgets en menu's
Wanneer widgets zijn geregistreerd in een thema (of soms een plug-in), kunnen de gebruikte functies code bevatten waarmee WordPress klassen en ID's genereert op basis van de naam, het type en de ID van de widget.
Wanneer menu's worden geregistreerd, kan WordPress klassen genereren op basis van de naam van het menu, de positie van items in het menu en de locatie op de site. U kunt al deze gebruiken om uw widgets en menu's op te maken.
Klassen en ID's voor Widgets
Als u een widgetgebied wilt registreren, gebruikt u de register_sidebar () functie in uw thema's functions.php het dossier. Dit neemt de volgende parameters:
Er zijn twee parameters die klassen en / of ID's genereren:
'klasse' => "
'before_widget' => '
'
De 'klasse' Met parameter kunt u handmatig een klasse opgeven voor het widgetgebied. De instellingen voor de 'Before_widget' parameter vertel WordPress om een uniek ID te genereren voor elke widget in het widgetgebied en een aantal klassen ervoor, die gebaseerd zullen zijn op het type widget dat het is.
In de demosite heb ik bijvoorbeeld twee widgets toegevoegd: een lijst met berichten en een lijst met pagina's. Voor de lijst met berichten wordt de volgende HTML uitgevoerd:
Voor de lijst met pagina's wordt de volgende HTML uitgevoerd:
U kunt dit gebruiken om widgets te stijlen waarin berichten worden weergegeven, door de volgende CSS toe te voegen aan de stylesheet van het thema:
Hiermee voegt u een rand toe aan widgets met vermeldingspagina's, zoals weergegeven in de schermafbeelding:
Notitie: Dit werkt op de demosite omdat het een kindthema gebruikt van het Twenty Twenty-thema, waarvan de zijbalken correct zijn geregistreerd. Als u uw eigen thema bouwt, moet u de register_sidebar () -tag met de bovenstaande parameters toevoegen. Lees hier hoe u dit kunt doen in het bijbehorende Codex-artikel.
Klassen en ID's voor menu's
Navigatiemenu's worden weergegeven met behulp van de wp_nav_menu () tag in uw thema's header.php het dossier. Dit vereist een aantal parameters, zoals beschreven in de wp_nav_menu artikel.
Een van deze voegt klassen en ID's toe aan elk item in het menu:
'items_wrap' => '
% 3 $ s
'
Dit voegt een ID en een aantal klassen toe aan elk item. De klassen zijn gebaseerd op de klasse voor het menu zelf en de locatie op de site. Wanneer de gebruiker zich bijvoorbeeld op een pagina op de site bevindt, heeft zijn invoer in het navigatiemenu de .current_page_item klasse.
U kunt dit gebruiken om stijl toe te voegen aan het item van de huidige pagina in het menu. Als u bijvoorbeeld een onderstreping aan de huidige pagina wilt toevoegen, voegt u het volgende toe aan uw stylesheet:
/ * stijl actieve paginalink in navigatie * / .main-navigatie. current_page_item a text-decoration: onderstrepen;
De resulterende onderstreping is te zien in de schermafbeelding (evenals de kleurverandering die al in de stylesheet van het bovenliggende thema staat):
Notitie: Omdat ik een kindthema gebruik van het Twenty Twenty-thema, hoef ik het niet toe te voegen wp_nav_menu () tag, omdat deze al aanwezig is in het bovenliggende thema.
Samenvatting
Zoals we hierboven hebben besproken, zijn er een aantal manieren waarop WordPress klassen en ID's genereert voor elementen in een site. Sommige hiervan worden gegenereerd door WordPress zelf en anderen gebruiken sjabloonlabels of functieparameters om WordPress te vertellen om de klassen en id's uit te voeren. U kunt deze gebruiken om pagina's, menu's, widgets, berichtvermeldingen en andere elementen in uw ontwerp stijl te geven.
Er zijn veel andere manieren waarop u deze klassen en ID's kunt gebruiken om uw projecten vorm te geven. Bijvoorbeeld:
U kunt een site maken met een aantal verschillende secties, met behulp van klassen die zijn gegenereerd door de body_class () tag om inhoud in elke sectie er heel anders uit te laten zien
U kunt individuele berichtvermeldingen anders indelen in een archiefpagina door de ID te targeten die is gegenereerd door de het ID() label
U kunt huidige menu-items in uw navigatie markeren, een knopachtig effect creëren en afbeeldingen, achtergronden, verlopen en meer gebruiken
U zou een combinatie van het bovenstaande kunnen gebruiken, bijvoorbeeld bepaalde widgets anders in verschillende delen van de site in model brengen
De mogelijkheden worden alleen beperkt door uw verbeeldingskracht!
Middelen
Enkele nuttige Codex-pagina's over de onderwerpen die in deze zelfstudie worden behandeld:
Klassen gegenereerd voor afbeeldingen: http://codex.wordpress.org/CSS#WordPress_Generated_Classes
De body_class () tag: http://codex.wordpress.org/Function_Reference/body_class
De post_class () tag: http://codex.wordpress.org/Function_Reference/post_class
De het ID() tag: http://codex.wordpress.org/Function_Reference/the_ID
De wp_register_sidebar () functie: http://codex.wordpress.org/Function_Reference/register_sidebar
De wp_nav_menu () tag: http://codex.wordpress.org/Function_Reference/wp_nav_menu
Een gids voor sjabloontags: http://codex.wordpress.org/Template_Tags
Share
Accentsconagua
