Merch Styling

Den enda posten

Att kategorisera inlägg för att skapa guider, hur man gör och presenterat innehåll är ett bra sätt att öka din närvaro i butikerna. Huvudet och det enskilda inlägget har utformats för att göra just detta. Med anpassad hjältetitel, utdrag och inläggsnavigering. 100 % dynamisk, allt du behöver göra är att lägga till innehåll.

Det enskilda inlägget har utformats så att det har en djärv introduktion, en stor bild och ett rent och lättläst innehåll. Vi börjar med en anpassad huvudrubrik och avslutar med en sektion för relaterade inlägg. Den bör ge dig allt du behöver för att skapa kategoriserade inlägg för att stödja din butik. Alla anpassade funktioner är 100 % dynamiska och du behöver bara göra det:

  • Skriv ditt inlägg
  • Lägg till ett manuellt utdrag
  • Välj en bild som du vill ha med i bilden
  • Ge den en kategori

En anmärkning om kategorier: Navigeringen för anpassade inlägg och avsnittet Relaterade inlägg visar innehåll baserat på den aktuella kategorin för inlägg. Den använder den första kategorin som tilldelats inlägget. Om du väljer att tilldela ett inlägg till flera kategorier kommer endast den första kategorin att frågas ut.

Huvudrubriken för hjälten

Huvudet för ett enda inlägg är en ganska komplicerad konstruktion. Användning av fyra separata GeneratePress-element. Innehåller 2 krokar, en huvudrubrik med en presenterad bild och ett layoutelement. Användaren behöver inte göra någonting för att detta ska visas eller uppdateras dynamiskt.

Grunderna

Om du inte känner till Elements-modulen och dess Hook-, Header- och Layoutelement innan du går in på detaljerna kan du börja läsa här:

De fyra elementen

#1 Krok: Enstaka inlägg anpassad ingångsrubrik

Det här hook-elementet innehåller anpassad PHP. Den visar kategori, titel och utdrag av inlägget. För att ändra denna inställning krävs kunskaper i PHP. Det är därför lämpligt att låta den vara ifred.

Om du inte vill ha en egen rubrik kan du ta bort elementet Single Post Custom Entry Header Hook. Du behöver inte heller följande hookelement och layoutelement.

#2 Krok: Tona ut rubrikelementet vid upprullning

Denna hook innehåller lite enkelt vanilla javascript. Detta ger en subtil utfasning av det anpassade rubrikelementet vid rullning. Det krävs ingen CSS. Här är JS om du är intresserad.

<script>
window.onscroll = function () {
    var target = document.getElementById("custom-post-entry-header");

    var height = window.innerHeight;

    var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;

    // Change this if you want it to fade faster
    height = height / 3;
    var fader = (height - scrollTop) / height;
    if (fader > 0) {
        target.style.opacity = fader;
    }

};
</script>

#3 Layout: Ta bort rubriken för ett enskilt inlägg

Eftersom vi har en rubrik för anpassade inlägg och ett navigeringselement för inlägg behöver vi inte titeln på inlägget i vårt innehåll. Detta element tar helt enkelt bort detta.

#4 Header: Huvudet för ett enda inlägg med en bild i huvudet

Ett standardelement för rubriker som använder inläggets bild som bakgrund. Den har ställts in till en förinställd storlek med hjälp av Padding och använder Parallax-rullningseffekten.

En anmärkning om hur du använder Elements

Duplicering av element

Element är som en smart anpassad posttyp. Ibland kan du vilja göra flera olika varianter av dem. Men i stället för att skapa dem från början kan du använda insticksprogrammet Duplicate Post. Se bara till att du markerar alternativet Elements i plugins inställningar och använder alternativet New Draft på alla element.

Innehållet

Enstaka inlägg har en smalare innehållsbredd för att underlätta läsningen. I GP Premiums 1.8 uppdaterade layoutelement är detta mycket enkelt att göra. Gå till Utseende > Elements > Single Post Layout –> Content Tab > Content Width.

Observera att du kan kombinera den här inställningen med elementet Remove Single Post Layout ovan. Jag har hållit de två separata för tydlighetens skull och om du skulle vilja ta bort den ena men inte den andra.

Det anpassade headerelementet kräver lite CSS för att uppnå samma effekt. För att ändra bredden måste du redigera CSS. Observera att denna CSS har utformats särskilt för den anpassade rubriken. Om du gör den bredare kan den komma i konflikt med navigeringen av inlägget.

#post-nav .post-nav-entry-header {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto
}

Smalare innehåll Pre GP Premium 1.8

Om du inte använder GP Premium 1.8 kommer inläggsbredden inte att minskas. Du kan antingen uppdatera till 1.8 eller hitta ovanstående CSS i Customizer > Additional CSS och ändra den till:

#post-nav .post-nav-entry-header, .single-post #content {
    max-width: 680px;
    margin-left: auto;
    margin-right: auto
}

Enkelt inlägg – Centrerat datum och by-line

De flesta metadata för det enskilda inlägget har flyttats till det anpassade inläggets rubrik. Den återstående metan, datumet och by-line är centrerad.

.single-post .entry-header {
    text-align: center;
}

Enstaka inlägg – ökat utrymme för vitrymder

För att tydligare definiera inläggets innehållsstruktur har jag ökat utrymmet mellan stycken och H2-rubriker. Detta visar tydligt för läsaren att det är ett nytt avsnitt som inleds. Denna CSS skapar ett större vitt utrymme ovanför H2-blocket, som går före alla andra typer av block.

.single-post .entry-content *+h2 {
    margin-top: 64px;
}

Lägga till innehåll

Den här webbplatsen byggdes med hjälp av WP 5.0 Block (Gutenberg)-redigeraren. För att skriva inlägg är det ett utmärkt verktyg. Du kan naturligtvis installera och använda Classic-redigeraren för att skriva. På samma sätt kan du lägga till din favoritsidebyggare, även om jag personligen aldrig skulle använda en sådan för att skriva inlägg.

Relaterade inlägg

Relaterade inlägg visas under varje inlägg. Detta tillhandahålls av den utmärkta WP Show Posts. Den är återigen 100 % dynamisk och visar inlägg inom samma kategori som det aktuella inlägget.

Hur jag gjorde de relaterade inläggen

#1 En WP-lista för att visa inlägg

I Dashboard > WP Show Posts ser du en postlista som heter Related. Titeln på denna lista är mycket viktig eftersom den används i nästa steg. Om listnamnet ändras måste du uppdatera koden som följer. Listans uppläggning är ganska enkel. Vi väljer innehållet och antalet kolumner som ska visas. Vi väljer INTE en taxonomi. Detta kommer att göras av vår kod.

#2 Krok: Relaterade inlägg

Vi använder den krok som finns iAppearance > Elements > Relaterade inlägg. Vi har valt kroken before_footer och markerat Execute PHP. Våra visningsregler är inställda på Alla inlägg. För innehållet använder vi PHP istället för den vanliga WP Show Posts-kortkoden. Detta för att dynamiskt visa vårt innehåll.

<div class="wpsp-related-posts  grid-container">
	<h2>Related Posts</h2>
<?php
if ( is_single() ) {
    $cats =  get_the_category();
    $cat = $cats[0];
} else {
    $cat = get_category( get_query_var( 'cat' ) );
}

$cat_slug = $cat->slug;
$list = get_page_by_title( 'related', 'OBJECT', 'wp_show_posts' );
wpsp_display( $list->ID, 'tax_term="' . $cat_slug . '"' );
?>
</div>

På denna rad visas namnet på related -listan:

$list = get_page_by_title( 'related', 'OBJECT', 'wp_show_posts' );

Såsom anges i punkt 1 måste listans namn stämma överens med denna etikett.

#3 Styling av blocket för relaterade inlägg

I vår PHP/HTML-fil ser du två klasser som läggs till i den överordnade DIV:n. De är wpsp-related-posts och grid-container.
grid-container är en GeneratePress-klass och den ställer helt enkelt in behållarens bredd till den som finns i Customizer. Den är dynamisk, vilket är bra.
wpsp-related-posts är en anpassad klass och anger utfyllnad, marginaler och bakgrundsfärger. Du hittar det här i Customizer > Additional CSS (ytterligare CSS):

.wpsp-related-posts {
    background-color: #f2f3f4;
    padding: 64px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.wpsp-related-posts h2 {
    margin-bottom: 64px;
}

Ändring av bakgrundsfärger eller stilar görs genom att redigera CSS

Click to rate this post!
[Total: 0 Average: 0]
Item added to cart.
0 items - 0,00