Merch styling

Single Post

Å kategorisere innlegg for å lage guider, fremgangsmåter og fremhevet innhold er en fin måte å øke butikkens tilstedeværelse på. Enkeltpostoverskriften og enkeltinnlegget er designet for å gjøre nettopp det. Med egendefinert heltetittel, utdrag og postnavigasjon. 100 % dynamisk alt du trenger er å legge til innhold.

Enkeltinnlegget har blitt stylet for å gi en dristig introduksjon, stort utvalgt bilde og rent, lettlest innhold. Starter med en egendefinert helteoverskrift og avslutter med en relatert innleggsdel. Den skal gi alt du trenger for å lage kategorisert innleggsinnhold for å støtte butikken din. Alle de tilpassede funksjonene er 100 % dynamiske, du trenger bare å:

  • Skriv innlegget ditt
  • Legg til et manuelt utdrag
  • Velg det fremhevede bildet ditt
  • Gi det en kategori

En merknad om kategorier: Den tilpassede postnavigasjonsdelen og relaterte innlegg viser innhold basert på gjeldende postkategori. Den bruker den første kategorien som er tildelt innlegget. Så hvis du velger å tilordne et innlegg til flere kategorier, vil det bare spørre etter den første kategorien.

Heltens header

Enkeltpostoverskriften er et ganske komplisert oppsett. Bruker fire separate GeneratePress-elementer. Inkludert 2 kroker, en fremhevet bildeoverskrift og et layoutelement. Det er ingenting brukeren trenger å gjøre for at dette skal vises eller oppdateres dynamisk.

Det grunnleggende

Før du dykker ned i detaljene hvis du ikke er kjent med Elements-modulen og dens Hook, Header og Layout Element, kan du begynne å lese her:

De fire elementene

#1 Krok: Overskrift for egendefinert enkeltpost

Dette krokelementet inneholder tilpasset PHP. Den sender ut kategori, innleggstittel og innleggsutdrag. Å endre dette oppsettet krever kunnskap om PHP. Det er derfor lurt å la den stå i fred.

Hvis du ikke vil ha den egendefinerte postoverskriften, kan du fjerne Single Post Custom Entry Header Hook-elementet. Du vil heller ikke trenge følgende krokelement og layoutelement.

#2 Hook: Fade Out Header Element på Scroll opp

Denne kroken inneholder noen enkle vanilje-javascript. Dette gir den subtile uttoningen på det tilpassede overskriftselementet ved rulling. Det er ingen CSS nødvendig. Her er JS hvis du er interessert.

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

Ettersom vi har elementet Single Post Custom Entry Header og Post Navigation -elementet trenger vi ikke Post-tittelen i innholdet vårt. Så dette elementet fjerner det ganske enkelt.

#4 Overskrift: Overskrift for enkelt innlegg Utvalgt bilde

Et standard overskriftselement som bruker postens fremhevede bilde for bakgrunnen. Den har blitt satt opp til en forhåndsinnstilt størrelse ved hjelp av padding og bruker Parallax-rulleeffekten.

En merknad om bruk av Elements

duplisere elementer

Elementer er som en smart tilpasset posttype. Noen ganger vil du kanskje lage flere varianter av dem. Men i stedet for å lage dem fra bunnen av kan du bruke Duplicate Post-plugin. Bare sørg for å sjekke Elements-alternativet i plugins-innstillingene og bruk New Draft-alternativet det gir på ethvert element.

Innholdet

Enkeltinnlegget bruker en smalere innholdsbredde for enklere lesing. I GP Premiums 1.8 oppdaterte Layout Element er dette veldig enkelt å gjøre. Bare gå til Utseende> gjenstander> Enkelt innlegg layout —> Innhold-fanen> Innholdsbredde .

For å merke deg kan du kombinere denne innstillingen med elementet Remove Single Post Layout ovenfor. Jeg har holdt de to atskilt for klarhet og i tilfelle du vil fjerne den ene, men ikke den andre.

Det tilpassede overskriftselementet krever litt CSS for å oppnå samme effekt. For å endre denne bredden kreves det å redigere noe CSS. Vær oppmerksom på at denne CSS-en er spesielt utviklet for den tilpassede overskriften. Å gjøre det bredere kan komme i konflikt med postnavigasjonen.

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

Smalt innhold PreGP Premium 1.8

Hvis du ikke bruker GP Premium 1.8, vil ikke stolpebredden bli redusert. Du kan enten oppdatere til 1.8 eller finne ovennevnte CSS i Customizer > Ekstra CSS og endre den til:

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

Enkelt innlegg – Sentrert dato og bylinje

De fleste metadataene på enkeltinnlegget har blitt flyttet til den egendefinerte postoverskriften. Den gjenværende metaen, datoen og bylinjen er sentrert.

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

Enkelt innlegg – økt mellomrom

For en klarere definisjon av innleggets innholdsstruktur har jeg økt avstanden mellom avsnitt og H2-overskrifter. Dette identifiserer tydelig for leseren at de starter en ny seksjon. Denne CSS-en skaper et større hvitt område over H2-blokken i forhold til enhver annen type blokk.

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

Legger til innhold

Dette nettstedet ble bygget ved hjelp av WP 5.0 Block (Gutenberg) editor. For postskriving er det et utmerket verktøy. Du kan selvfølgelig installere og bruke Classic-editoren til å skrive. På samme måte kan du legge til favorittsidebyggeren din, selv om jeg personlig aldri ville brukt en til å skrive innlegg.

Relaterte innlegg

Relaterte innlegg vises under hvert av innleggene. Dette er levert av de utmerkede WP Show Posts. Igjen er den 100 % dynamisk og viser innlegg innenfor samme kategori som det gjeldende innlegget.

Hvordan jeg laget de relaterte innleggene

#1 En WP Vis innleggsliste

I dashbordet> WP Vis innlegg vil du se en postliste kalt Related . Tittelen på denne listen er veldig viktig ettersom den brukes i neste trinn. Hvis listenavnet endres, må du oppdatere koden som følger. Oppsettet av listen er ganske enkelt. Vi velger innholdet og antall kolonner som skal vises. Vi velger IKKE en taksonomi. Dette vil bli gjort av vår kode.

#2 Hook: Relaterte innlegg

Vi bruker kroken som finnes i Utseende> gjenstander> Relaterte innlegg. Vi har valgt utbefore_footer hekte og sjekket Utfør PHP. Våre visningsregler er satt til Alle innlegg. For innholdet bruker vi litt PHP i stedet for den vanlige WP Show Posts Shortcode. Dette er slik at det dynamisk viser innholdet vårt.

<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 vil se på denne linjenrelated listenavn:

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

Som nevnt i #1 må navnet på listen samsvare med denne etiketten.

#3 Style den relaterte postblokken

I vår PHP / HTML vil du se to klasser lagt til den overordnede DIV. De er wpsp-relaterte-poster og grid-container .
grid-container er en GeneratePress-klasse og den setter ganske enkelt beholderbredden til den i Customizer. Den er dynamisk, noe som er fint.
wpsp-related-posts er en tilpasset klasse og setter polstring, marginer og bakgrunnsfarger. Se etter dette i Customizer> Ytterligere 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;
}

Endring av bakgrunnsfarger eller stiler gjøres ved å redigere den CSS-en

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