Merch Styling

Den enkelte post

Kategorisering af indlæg for at skabe vejledninger, hvordan man gør det og fremhævet indhold er en fantastisk måde at øge din butiks tilstedeværelse på. Den enkelte overskrift og det enkelte indlæg er designet til at gøre netop dette. Med brugerdefineret heltetitel, uddrag og indlægsnavigation. 100% dynamisk, du skal blot tilføje indhold.

Det enkelte indlæg er udformet med en fed indledning, et stort billede og et rent og letlæseligt indhold. Begynder med en brugerdefineret helteoverskrift og slutter med en sektion med relaterede indlæg. Den bør indeholde alt det, du har brug for til at oprette kategoriseret indhold til at støtte din butik. Alle de brugerdefinerede funktioner er 100 % dynamiske, du skal blot bruge dem:

  • Skriv dit indlæg
  • Tilføj et manuelt uddrag
  • Vælg dit fremhævede billede
  • Giv den en kategori

En bemærkning om kategorier: Den brugerdefinerede indlægsnavigation og sektionen for relaterede indlæg viser indhold baseret på den aktuelle kategori af indlæg. Den bruger den første kategori, der er tildelt indlægget. Så hvis du vælger at tildele et indlæg til flere kategorier, vil der kun blive spurgt i den første kategori.

Helten header

Den enkelte post header er en ret kompliceret opsætning. Brug af fire separate GeneratePress-elementer. Inklusive 2 kroge, et fremhævede billede i overskriften og et layoutelement. Der er intet, brugeren skal gøre for at få dette vist eller dynamisk opdateret.

Det grundlæggende

Hvis du ikke er bekendt med Elements-modulet og dets Hook-, Header- og Layout-elementer, kan du begynde at læse her, før du går i detaljer:

De fire elementer

#1 Hook: Enkelt indlæg Brugerdefineret indtastning Header

Dette hook-element indeholder brugerdefineret PHP. Den udsender kategori, indlægstitel og uddrag af indlæg. Ændring af denne opsætning kræver kendskab til PHP. Det er derfor tilrådeligt at lade den være i fred.

Hvis du ikke vil have den brugerdefinerede indlægsoverskrift, kan du fjerne elementet Single Post Custom Entry Header Hook-elementet. Du har heller ikke brug for følgende hook-element og layout-element.

#2 Hook: Fade Out Header Element ved rulning op

Denne hook indeholder noget simpelt vanilla javascript. Dette giver en diskret udtoning af det brugerdefinerede headerelement ved rulning. Der er ikke behov for CSS. Her er JS, hvis du er interesseret.

<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: Fjern titlen på et enkelt indlæg

Da vi har Single Post Custom Entry Header og Post Navigation-elementet, har vi ikke brug for Post Title i vores indhold. Så dette element fjerner simpelthen dette.

#4 Overskrift: Billede i overskriften for et enkelt indlæg

Et standard header-element, der bruger indlæggenes fremhævede billede som baggrund. Den er blevet indstillet til en forudindstillet størrelse ved hjælp af Padding og bruger Parallax scrolling-effekten.

En bemærkning om brugen af Elements

Duplikering af elementer

Elementer er som en smart brugerdefineret indlægstype. Nogle gange vil du måske lave flere varianter af dem. Men i stedet for at oprette dem fra bunden kan du bruge Duplicate Post-plugin’et. Du skal blot sørge for at markere indstillingen Elements i plugins indstillinger og bruge indstillingen New Draft på ethvert element.

Indholdet

Det enkelte indlæg har en smallere indholdsbredde for at gøre det lettere at læse. I GP Premium’s 1.8 opdaterede Layout Element er dette meget enkelt at gøre. Du skal blot gå til Udseende > Elementer > Single Post Layout –> Content Tab > Content Width (indholdsbredde).

Bemærk, at du kan kombinere denne indstilling med ovenstående element Fjern enkeltindlægslayout. Jeg har holdt de to adskilt af hensyn til overskueligheden, og hvis du ønsker at fjerne det ene, men ikke det andet.

Det brugerdefinerede header-element kræver en smule CSS for at opnå samme effekt. Hvis du vil ændre denne bredde, skal du redigere noget CSS. Bemærk venligst, at denne CSS er specielt designet til den brugerdefinerede header. Hvis du gør den bredere, kan det komme i konflikt med postnavigationen.

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

Indsnævre indhold Pre GP Premium 1.8

Hvis du ikke bruger GP Premium 1.8, vil indlægsbredden ikke blive indsnævret. Du kan enten opdatere til 1.8 eller finde ovenstående CSS i Customizer > Additional CSS og ændre den til:

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

Enkeltpost – Centreret dato og by-line

De fleste metadata på det enkelte indlæg er flyttet til den brugerdefinerede indlægsoverskrift. Den resterende meta, datoen og by-linjen er centreret.

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

Enkelt indlæg – øget mellemrum

For at gøre indlæggenes indholdsstruktur mere tydelig har jeg øget afstanden mellem afsnit og H2-rubrikker. Dette gør det klart for læseren, at de starter et nyt afsnit. Denne CSS skaber et større hvidt felt over H2-blokken, som går forud for enhver anden type blok.

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

Tilføjelse af indhold

Dette websted blev bygget med WP 5.0 Block (Gutenberg) editoren. Det er et fremragende værktøj til at skrive indlæg. Du kan selvfølgelig installere og bruge Classic-editoren til at skrive med. Du kan også tilføje din foretrukne side builder, selv om jeg personligt aldrig ville bruge en til at skrive indlæg.

Relaterede indlæg

Relaterede indlæg vises under hvert af indlæggene. Dette leveres af den fremragende WP Show Posts. Igen er den 100 % dynamisk og viser indlæg inden for samme kategori som det aktuelle indlæg.

Sådan lavede jeg de relaterede indlæg

#1 En WP Vis indlægsliste

I Dashboard > WP Show Posts vil du se en liste over indlæg med navnet Related. Titlen på denne liste er meget vigtig, da den bruges i det næste trin. Hvis listens navn ændres, skal du opdatere den efterfølgende kode. Opsætningen af listen er ganske enkel. Vi vælger det indhold og antallet af kolonner, der skal vises. Vi vælger IKKE en taksonomi. Dette vil blive gjort af vores kode.

#2 Hook: Relaterede indlæg

Vi bruger krogen, der findes iAppearance > Elements > Relaterede indlæg. Vi har valgt before_footer hook og markeret Execute PHP. Vores regler for visning er indstillet til Alle indlæg. Til indholdet bruger vi noget PHP i stedet for den sædvanlige WP Show Posts shortcode. Dette er for at få vores indhold vist dynamisk.

<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>

Du kan se navnet på listen related i denne linje:

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

Som nævnt i #1 skal listens navn passe til denne etiket.

#3 Styling af blokken relaterede indlæg

I vores PHP / HTML vil du se to klasser, der er tilføjet til den overordnede DIV. De er wpsp-related-posts og grid-container.
grid-container er en GeneratePress-klasse, og den indstiller blot containerbredden til den bredde, der er angivet i Customizer. Den er dynamisk, og det er dejligt.
wpsp-related-posts er en brugerdefineret klasse og indstiller padding, marginer og baggrundsfarver. Se efter dette i Customizer > Additional 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 af baggrundsfarver eller stilarter sker ved at redigere denne CSS

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