Merch Styling

The Single Post

Kategoryzacja postów w celu stworzenia przewodników, poradników i wyróżnionych treści jest świetnym sposobem na zwiększenie obecności Twojego sklepu. Nagłówek i pojedynczy post został zaprojektowany właśnie po to. Z niestandardowym tytułem bohatera, fragmentem i nawigacją po poście. 100% dynamiczna wszystko co musisz dodać to treść.

Pojedynczy post został wystylizowany, aby zapewnić odważne wprowadzenie, duży wyróżniony obraz i czystą łatwą do odczytania treść. Począwszy od niestandardowego nagłówka bohatera, a skończywszy na sekcji powiązanych postów. Powinien zapewnić wszystko, czego potrzebujesz, aby stworzyć skategoryzowane treści postów, aby wspierać swój sklep. Wszystkie niestandardowe funkcje są w 100% dynamiczne po prostu trzeba:

  • Napisz swój post
  • Dodaj wypis z podręcznika
  • Wybierz swoje wyróżnione zdjęcie
  • Nadaj mu kategorię

Uwaga dotycząca Kategorii: nawigacja niestandardowego postu i sekcja powiązanych postów wyświetla zawartość w oparciu o bieżącą kategorię postów. Używa pierwszej Kategorii przypisanej do postu. Więc jeśli zdecydujesz się przypisać post do wielu kategorii, zapyta on tylko o pierwszą kategorię.

Nagłówek bohatera

Nagłówek pojedynczego postu jest dość skomplikowaną konfiguracją. Korzystanie z czterech oddzielnych elementów GeneratePress. W tym 2 haki, wyróżniony nagłówek obrazu i element układu. Nie ma nic, co użytkownik musi zrobić, aby to było wyświetlane lub dynamicznie aktualizowane.

Podstawy

Zanim zagłębisz się w szczegóły, jeśli nie znasz modułu Elements i jego Hook, Header i Layout Element to zacznij czytać tutaj:

Cztery elementy

#1 Hak: Single Post Custom Entry Header

Ten element haka zawiera niestandardowe PHP. Podaje on kategorię, tytuł postu i fragment postu. Zmiana tego ustawienia wymaga znajomości języka PHP. Dlatego wskazane jest, aby pozostawić ją w spokoju.

Jeśli nie chcesz niestandardowego nagłówka postu, możesz usunąć element Single Post Custom Entry Header Hook. Nie będziesz również potrzebował następującego elementu hook i elementu layout.

#2 Hak: Wygaszanie elementu nagłówka przy przewijaniu w górę

Ten hak zawiera kilka prostych waniliowych javascriptów. Zapewnia to subtelne wygaszenie na niestandardowym elemencie nagłówka podczas przewijania. Nie jest wymagane stosowanie CSS. Tutaj jest JS, jeśli jesteś zainteresowany.

<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 Układ: Usuń tytuł pojedynczego postu

Ponieważ mamy element Single Post Custom Entry Header i Post Navigation nie potrzebujemy tytułu Posta w naszej treści. Więc ten element po prostu to usuwa.

#4 Header: Single Post Header Featured Image

Standardowy element nagłówka, który wykorzystuje obrazek z posta jako tło. Został on ustawiony do wstępnie ustawionego rozmiaru za pomocą Padding i wykorzystuje efekt przewijania Parallax.

Uwaga na temat używania elementów

Powielanie elementów

Elementy są jak sprytny niestandardowy typ postu. Czasami możesz chcieć zrobić wiele ich wariantów. Ale zamiast tworzyć je od podstaw możesz skorzystać z wtyczki Duplicate Post. Wystarczy upewnić się, że zaznaczysz opcję Elementy w ustawieniach wtyczki i użyjesz opcji New Draft, którą zapewnia na dowolnym elemencie.

Treść

Pojedynczy post używa węższej szerokości treści dla łatwiejszego czytania. W GP Premium 1.8 zaktualizowanym Layout Element jest to naprawdę proste do zrobienia. Wystarczy wejść w Wygląd > Elementy > Single Post Layout –> Zakładka Content > Content Width.

Aby zauważyć, że możesz połączyć to ustawienie z powyższym elementem Remove Single Post Layout. Trzymałem te dwa oddzielne dla jasności i na wypadek, gdybyś chciał usunąć jeden, ale nie drugi.

Niestandardowy element nagłówka wymaga trochę CSS, aby osiągnąć ten sam efekt. Zmiana tej szerokości wymaga edycji niektórych CSS. Należy pamiętać, że ten CSS został specjalnie zaprojektowany dla niestandardowego nagłówka. Uczynienie go szerszym może być sprzeczne z nawigacją w poście.

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

Narrow Content Pre GP Premium 1.8

Jeśli nie używasz GP Premium 1.8 to szerokość postu nie będzie zwężona. Możesz zaktualizować do 1.8 lub znaleźć powyższy CSS w Customizer > Additional CSS i zmienić go na:

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

Single Post – wyśrodkowana data i by-line

Większość danych meta na pojedynczym poście została przeniesiona do niestandardowego nagłówka postu. Pozostałe meta, data i by-line są wyśrodkowane.

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

Single Post – zwiększona ilość białych znaków

Dla wyraźniejszego określenia struktury treści postów zwiększyłem odstępy między akapitami i nagłówkami H2. To jasno określa czytelnikowi, że rozpoczynają nową sekcję. Ten CSS tworzy większą białą przestrzeń nad blokiem H2, który postępuje z każdym innym typem bloku.

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

Dodawanie treści

Ta strona została zbudowana przy użyciu edytora WP 5.0 Block (Gutenberg). Do pisania postów jest to doskonałe narzędzie. Możesz oczywiście zainstalować i używać do pisania edytora Classic. Podobnie możesz dodać swój ulubiony page builder, chociaż osobiście nigdy nie użyłbym go do pisania postów.

Related Posts

Related Posts są wyświetlane pod każdym z postów. Zapewnia to znakomity WP Show Posts. Ponownie jest to w 100% dynamiczne i wyświetla posty w ramach tej samej kategorii bieżącego postu.

Jak zrobiłem Related Posts

#1 A WP Show Posts List

W Dashboardzie > WP Show Posts zobaczysz listę postów o nazwie Related. Tytuł tej Listy jest bardzo ważny, ponieważ jest on wykorzystywany w następnym kroku. Jeśli nazwa Listy zostanie zmieniona, będziesz musiał zaktualizować poniższy kod. Konfiguracja Listy jest dość prosta. Wybieramy treść i ilość kolumn do wyświetlenia. NIE wybieramy taksonomii. Będzie to realizowane przez nasz kod.

#2 Hak: Related Posts

Korzystamy z haka znajdującego się wAppearance > Elements > Related Posts. Wybraliśmy hak before_footer i zaznaczyliśmy opcję Execute PHP. Nasze Zasady wyświetlania są ustawione na Wszystkie posty. Dla treści używamy trochę PHP zamiast zwykłego WP Show Posts shortcode. Dzięki temu dynamicznie wyświetla naszą treść.

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

W tym wierszu zobaczysz nazwę listy related:

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

Jak zauważono w #1 nazwa Listy musi odpowiadać tej etykiecie.

#3 Styling the related posts block

W naszym PHP / HTML zobaczysz dwie klasy dodane do rodzica DIV. Są to wpsp-related-posts i grid-container.
grid-container jest klasą GeneratePress i po prostu ustawia szerokość kontenera do tego w ramach Customizera. Jest dynamiczny, co jest miłe.
wpsp-related-posts jest klasą niestandardową i ustawia padding, marginesy i kolory tła. Poszukaj tego w Customizerze > Dodatkowy 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;
}

Zmiana kolorów tła lub stylów odbywa się poprzez edycję tego CSS

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