Share
Tot nu toe heb ik je in deze serie geïntroduceerd wat postformaten zijn en hoe je verschillende sjablonen voor verschillende postformaten in de loop kunt gebruiken. In dit bericht laat ik je zien hoe je verschillende CSS kunt toepassen op delen van de inhoud van een bericht op basis van het berichtformaat.
De voorbeelden die ik je zal laten zien zijn vrij eenvoudig, ze veranderen gewoon de achtergrondkleur, maar als je eenmaal deze basisbegrippen begrijpt, kun je ze gebruiken om verschillende ontwerpen toe te passen op verschillende postformaten en echt je thema opvallen voor hoe het omgaat media en andere gespecialiseerde inhoud.
Normen die voldoen aan de standaarden maken gebruik van de functie post_class () om de klassen in te stellen voor de container rond postinhoud. Met deze functie wordt een klasse toegevoegd op basis van het postformaat. Als een bericht bijvoorbeeld het formaat 'afbeelding' heeft, heeft de post een klasse 'format-image'. Dit maakt het heel eenvoudig om containers in de post via CSS te targeten zonder dat u paginasjablonen hoeft te wijzigen of specifieke functies hoeft te schrijven.
Als u de achtergrondkleur van de inhoud van de post in alle afbeeldingspalen wilt wijzigen, kunt u eenvoudig deze CSS toevoegen aan de stijl.css van uw thema:
.format-image .entry-content achtergrond-kleur: rood;
Soms kun je niet bereiken wat je wilt, zonder extra klassen toe te voegen of de lay-out volledig te veranderen. De tweede optie is waarom we verschillende inhoudsonderdelen gebruiken. Ik legde uit hoe ik verschillende inhoudsdelen per postformaat kon gebruiken in mijn laatste bericht in deze serie.
Als u eenmaal een ander deel van de inhoud heeft, kunt u de gewenste wijzigingen aanbrengen, bijvoorbeeld in afbeeldingspalen waarvan u de afgebeelde afbeelding een container met volledige breedte wilt maken in plaats van een klein, zwevend element.
Als u alleen de manier wilt wijzigen waarop een postindeling in de blogindex wordt weergegeven, zodat deze beter opvalt, kunt u een filter toevoegen om extra klassen toe te voegen aan post_class () in specifieke situaties. We kunnen het filter post_class gebruiken om specifieke klassen aan het bericht toe te voegen in specifieke situaties, bijvoorbeeld als het de opmaakafbeelding heeft en niet de enkelvoudige berichtweergave is.
Accentsconagua
function slug_preview_image_class ($ classes) global $ post; if (has_post_format ('image', $ post-> ID) &&! is_single ($ post-> ID)) $ classes [] = 'preview-image-post'; return $ klassen; add_filter ('post_class', 'slug_preview_image_class'); Met dit filter kunt u beeldpalen in de blogindex of het archief targeten, zonder de manier waarop ze als afzonderlijke berichten worden weergegeven te wijzigen, door de klasse 'preview-image-post' te targeten.
U kunt ook eenvoudig een voorbeeldklasse aan een bericht toevoegen met een ander postformaat dan het standaardformaat. Het filter dat ik zojuist heb laten zien, kan worden gewijzigd om dit te doen door handmatig alle berichtindelingen van de themaondersteuning in een array toe te voegen has_post_format ().
Natuurlijk weet u misschien niet welke postformaten het thema ondersteunt, als u bijvoorbeeld deze functie in een plug-in toevoegt in plaats van een thema. Als dat zo is, is het beter om de lijst met momenteel geregistreerde post-formaten te gebruiken get_theme_support ('post-formats') zoals je kunt zien in deze aangepaste filterfunctie.
function slug_post_format_preview_class ($ classes) global $ post; $ post_formats = get_theme_support ('post-formats'); if (has_post_format ($ post_formats [0], $ post-> ID) &&! is_single ($ post-> ID)) $ classes [] = 'preview-format'; return $ klassen; add_filter ('post_class', 'slug_post_format_preview_class'); Met dit filter op zijn plaats kunt u nog steeds afzonderlijke postformaten afzonderlijk of allemaal tegelijkertijd targeten. Deze CSS, samen met het filter dat overeenkomt met het filter 'preview-formaat', verandert de achtergrond van de berichtinhoud voor elk berichtformaat in blauw, tenzij het een afbeeldingspost is, in welk geval de achtergrondkleur rood is.
.preview-format .entry-content background-colour: # 00F; .preview-format.format-image .entry-content background-colour: # F00;
Dit artikel heeft je een voorproefje gegeven van hoe je je verschillende postformaten kunt opmaken om ze op te laten vallen in de lus, of zelfs om hun uiterlijk in één postweergave aan te passen. Zoals altijd moedig ik je aan om te experimenteren met de voorbeeldcode en verwijzingsthema's die post-indelingen ondersteunen, zoals het thema Sociaal hinderlijk van themahybride.
Als je alleen reden hebt om geen postformaten te gebruiken, omdat je zoveel berichten hebt zonder een ingestelde post-indeling, zorg dan dat je het volgende bericht in deze serie ziet. Ik behandel bulkupdates van het formaat van berichten.
