Share
In dieser Serie habe ich Sie bisher mit den Post-Formaten vertraut gemacht und verschiedene Schablonen für die verschiedenen Post-Formate in der Schleife verwendet. In diesem Beitrag zeige ich Ihnen, wie Sie unterschiedliche CSS-Einstellungen für Teile des Inhalts eines Beitrags festlegen, die auf dem Beitragsformat basieren.
Die Beispiele, die ich Ihnen zeigen werde, sind ziemlich einfach. Sie ändern lediglich die Hintergrundfarbe. Sobald Sie diese grundlegenden Konzepte verstanden haben, können Sie sie verwenden, um verschiedene Designs auf verschiedene Postformate anzuwenden und Ihr Thema wirklich hervorzuheben Medien und andere spezialisierte Inhalte.
Standardkonforme Themen verwenden die Funktion post_class () um die Klassen für den den Postinhalt umgebenden Container festzulegen. Diese Funktion fügt eine Klasse hinzu, die auf dem Post-Format basiert. Wenn zum Beispiel ein Beitrag das Format "image" hat, hat der Beitrag eine Klasse "format-image". Dies macht es sehr einfach, Container innerhalb der Post über CSS anzuvisieren, ohne Seitenvorlagen ändern oder bestimmte Funktionen schreiben zu müssen.
Um die Hintergrundfarbe des Inhalts des Beitrags in allen Bildbeiträgen zu ändern, können Sie diese CSS einfach zu style.css Ihres Themas hinzufügen:
.format-image .entry-content Hintergrundfarbe: rot;
Manchmal können Sie nicht erreichen, was Sie möchten, ohne zusätzliche Klassen hinzuzufügen oder das Layout vollständig zu ändern. Die zweite Möglichkeit ist, warum wir unterschiedliche Inhaltsbereiche verwenden. In meinem letzten Beitrag dieser Serie habe ich dargelegt, wie verschiedene Inhaltsteile pro Postformat verwendet werden können.
Sobald Sie einen anderen Inhaltsteil haben, können Sie die gewünschten Änderungen vornehmen, z. B. in Bildbeiträgen, in denen Sie das vorgestellte Bild zu einem Container mit voller Breite machen möchten, anstatt eines kleinen, schwebenden Elements.
Wenn Sie nur die Art und Weise ändern möchten, in der ein Post-Format im Blog-Index angezeigt wird, können Sie einen Filter hinzufügen, um weitere Klassen hinzuzufügen post_class () in bestimmten Situationen. Wir können den post_class-Filter verwenden, um dem Beitrag in bestimmten Situationen bestimmte Klassen hinzuzufügen, z. B. wenn er das Format image hat und nicht die Ansicht für einen einzelnen Beitrag ist.
Accentsconagua
Funktion slug_preview_image_class ($ classes) global $ post; if (has_post_format ('image', $ post-> ID) &&! is_single ($ post-> ID)) $ classes [] = 'preview-image-post'; $ Klassen zurückgeben; add_filter ('post_class', 'slug_preview_image_class'); Mit diesem Filter können Sie Bildbeiträge im Blogindex oder -archiv anvisieren, ohne die Darstellung als einzelne Beiträge zu beeinträchtigen, indem Sie auf die Klasse "Vorschaubild-Beitrag" abzielen.
Sie können auch einfach eine Vorschau-Klasse zu einem Beitrag mit einem anderen Post-Format als dem Standardformat hinzufügen. Der Filter, den Sie soeben gezeigt haben, kann geändert werden, indem Sie alle Postformate, die das Design in einem Array unterstützt, manuell hinzufügen has_post_format ().
Natürlich wissen Sie möglicherweise nicht, welche Postformate das Design unterstützt, wenn Sie zum Beispiel diese Funktion in ein Plugin anstelle eines Designs einfügen. In diesem Fall ist es besser, die Liste der aktuell registrierten Postformate mithilfe von zu erhalten get_theme_support ('Postformate') wie Sie in dieser modifizierten Filterfunktion sehen können.
Funktion slug_post_format_preview_class ($ classes) global $ post; $ post_formats = get_theme_support ('Postformate'); if (has_post_format ($ post_formats [0], $ post-> ID) &&! is_single ($ post-> ID)) $ classes [] = 'preview-format'; $ Klassen zurückgeben; add_filter ('post_class', 'slug_post_format_preview_class'); Mit diesem Filter können Sie dennoch einzelne Postformate einzeln oder alle zusammen anvisieren. Dieses CSS ändert zusammen mit dem Filter, der mit dem Filter für das "Vorschau-Format" gekennzeichnet ist, den Hintergrund des Post-Inhalts für jedes Post-Format in Blau, sofern es sich nicht um einen Bild-Post handelt. In diesem Fall ist die Hintergrundfarbe rot.
.Preview-Format .entry-content Hintergrundfarbe: # 00F; .preview-format.format-image .entry-content background-color: # F00;
Dieser Artikel gibt Ihnen einen Vorgeschmack darauf, wie Sie die verschiedenen Postformate formatieren können, um sie in der Schleife hervorzuheben oder sogar ihr Aussehen in der Ansicht einzelner Postings anzupassen. Ich ermutige Sie wie immer dazu, mit dem Beispielcode und Referenzthemen zu experimentieren, die Postformate unterstützen, z.
Wenn Sie nur deshalb kein Post-Format verwenden, weil Sie so viele Posts ohne Post-Format-Set haben, sollten Sie unbedingt den nächsten Post in dieser Serie sehen. Ich werde mich darum kümmern, das Format der Beiträge zu aktualisieren.
