Jak Stworzyć WordPress Post-List Wonderwall

W artykule:

Krok 1-Utwórz motyw potomny
Krok 2-Dodaj niestandardową stylizację do stylu.css
Krok 3-Zmień zawartość.szablon php do generowania HTML
Krok 4-Utwórz Odpowiednie Rozmiary Obrazu
Aktywuj i testuj
Ale Co Zrobić Ty Myślisz?

W tej mini-serii o użyciu polecanych obrazów do budowy Post-listing wonderwall, mamy karty-odwrócone i mamy pokolorowane. W tej ostatniej odsłonie, to mój ulubiony Bounce Pop.

Ta technika ukrywa tytuł i przycisk ” Czytaj więcej „za polecanym obrazem, a następnie przenosi go do przodu po najechaniu kursorem – dzięki czemu tło rozszerza się poza obraz, zanim” wyskoczy ” z powrotem do rozmiaru obrazu.

Brzmi skomplikowanie, ale to pestka do wdrożenia.

Bounce Pop-wizualnie oczywisty wybór postów

Najlepszym przykładem tego efektu wizualnego jest wspaniale zilustrowany przez piękny motyw pochodzenia z eleganckich motywów. Oszałamiający charakter ich realizacji wyraźnie ma wiele wspólnego z przygotowaniem i wyborem obrazów, ale bounce pop jest zaskakująco skuteczny na nawet najbardziej przyziemnym zestawie obrazów.

Nie jest wymagany javascript, ani żadne niestandardowe funkcje, tylko kilka dodatkowych instrukcji CSS i zmiana HTML dla stron z listą postów (strona główna, Strona kategorii, Strona archiwum).

Krok 1-Utwórz motyw potomny

Jak zawsze, dostosowania zostaną dodane do motywu podrzędnego. Jeśli nie wiesz, jak skonfigurować motyw potomny, przeczytaj ten artykuł w Kodeksie WordPress.

Krok 2-Dodaj niestandardową stylizację do stylu.css

Aby utworzyć motyw potomny, trzeba było utworzyć styl.css plik. Otwórz go i skopiuj i wklej w następującym CSS:

.bp-wrapper {
styl listy: brak;
wyświetlacz: inline-block;
width: 250px;
vertical-align: top;
pozycja: względna;
backface-widoczność: ukryta;
- webkit-backface-visibility: hidden; / * Chrome i Safari */
- moz-backface-visibility: hidden; / * Firefox */
- ms-backface-visibility: hidden; / * Internet Explorer */
}

.bp-wrapper H2 {
margin: 10px;
font-size: 24px;
}

.bp-button {
padding: 10px 15px;
background-color: rgb (0,0,0);
background-color: rgba(0,0,0, 0,5);
border-radius:4PX;
color: # fff;
pozycja: absolutna;
/ bottom: 10px;
left: 80px;
}

/ * konfiguracja kontenera opisu obrazu */
.bp-wrapper .bp-post-details {
pozycja: absolutna;
width: 250px;
top:0;
color: # fff;
background-color: rgb (17,153,105);
background-color: rgba(17,153,105, 0.9) ;
wysokość: 250px;
text-align:center;
czcionka: 14px arial;
padding:0px;
nieprzezroczystość: 0;
z-index:10;
}

/ * inicjowanie animacji po najechaniu na kursor */
.bp-wrapper .bp-post-details: hover {
nieprzezroczystość:1;
animacja: bounce 0.4 s ease-in-out;
- webkit-animacja: bounce 0.4 S;
- moz-animacja: bounce 0.4 S;
- ms-animacja: bounce 0.4 S;
- o-animation: bounce 0.4 s ease-in-out;
}
/ * animacja timelime */
@- webkit-keyframes bounce {
0% {
- webkit-transform: scale (1);
}

50% {
nieprzezroczystość: 1;
- webkit-transform: scale (1.1);
}

100% {
- webkit-transform: scale (1);
}
}

@- moz-keyframes bounce {
0% {
- moz-transformacja: skala (1);
}

50% {
nieprzezroczystość: 1;
- moz-transform: scale (1.1);
}

100% {
- moz-transformacja: skala (1);
}
}

@ - o-keyframes bounce {
0% {
- o-transformacja: skala (1);
}

50% {
nieprzezroczystość: 1;
- o-transformacja: skala (1.1);
}

100% {
- o-transformacja: skala (1);
}
}

@ keyframes bounce {
0% {
transformacja: skala (1);
}

50% {
nieprzezroczystość: 1;
transformacja: skala (1.1);
}

100% {
transformacja: skala (1);
}
}

Musisz ustawić rozmiary zgodnie z tym, jak chcesz układać stronę. Powyższy przykład CSS zakłada wysokość i szerokość 250px, więc jeśli chcesz użyć czegoś innego, pamiętaj, aby wstawić własne rozmiary. Musisz również zmienić położenie przycisku.

Warto również zauważyć, że transformacja: skala (1.1) oświadczenie. Jest to Rozmiar „odbicia”, więc gdy nakładka jest przenoszona do przodu, rozszerza się do 110% swojego normalnego rozmiaru, zanim” wyskoczy ” z powrotem do 100%. Jeśli chcesz zmienić zakres odbicia, po prostu zmień wartość skala.

A jeśli chcesz zmienić kolor nakładki (obecnie ustawiony na zielony w obrazie funkcji), Zmień tło-kolor atrybut dla .bp-wrapper .bp-post-szczegóły klasy. Zobaczysz dwie wartości określone: rgb oraz rgba. Nie wszystkie przeglądarki rozumieją rgba więc ustawienie obu zestawów awaryjnego.

„A” w rgba jest kanałem alfa, który ustawia krycie (1 jest stałe, 0 jest przezroczyste). W przeciwieństwie do nieprzezroczystość atrybut dziedziczony przez dzieci elementu, kanał alfa dotyczy tylko stylizowanego elementu.

Krok 3-Zmień zawartość.szablon php do generowania HTML

Ostatnim krokiem jest upewnienie się, że wymagany kod HTML jest wyprowadzany dla stron z listą. Aby to zrobić, wystarczy zmienić tylko jeden szablon, treść.php, aby wygenerować inny kod HTML dla postu, jeśli strona główna, lista kategorii lub strona archiwum są generowane.

Kopiuj treść.php od motywu nadrzędnego do motywu podrzędnego. Otwórz go i dodaj ten kod bezpośrednio przed < artykuł> / tag:

<?php
if (is_category() || is_home () / / is_archive ()) {?>

< article class = "bp-wrapper">

<a href="<?php the_permalink(); ?>"><?PHP echo get_the_post_thumbnail ($post->ID, 'homepage-thumb' ) ?>< / a>

< div class = "bp-post-details">

<H2><?php the_title(); ?>< / H2>

<a class = "bp-button" href="<?php the_permalink(); ?> ">Czytaj Post< / a>

< / div>

< / article>

<?php
 else { ?>

Zamknij jeśli oświadczenie poprzez dodanie na dole szablonu następującego:

<?php
} ?>

Krok 4-Utwórz Odpowiednie Rozmiary Obrazu

Są szanse, że nie będziesz miał odpowiednich rozmiarów obrazu dla Twojego Post-listing wonderwall. Zauważysz w powyższym kodzie, że użyłem nazwy rozmiaru Strona główna-thumb kiedy dzwonisz get_the_post_thumbnail musimy to ustawić.

Chociaż możesz dodać kodowanie, aby wygenerować nowe rozmiary obrazów, dostępne są wtyczki, które sprawiają, że jest to proste zadanie. Proste rozmiary obrazów pozwalają zmienić rozmiar domyślnej „miniatury” lub ustawić nowy rozmiar. Pójdziemy na to drugie.

Zainstaluj wtyczkę i kliknij na Ustawienia w akcji wtyczki.
Na stronie ustawień kliknij na Dodaj nowy rozmiar miniatury
Wprowadź nową nazwę w polu tekstowym (np. Strona główna-thumb) i kliknij na Sprawdź nazwę rozmiaru obrazu
Wprowadź wymagane wymiary i dodaj nazwę publiczną – jest to nazwa, której musisz użyć w wywołaniu get_the_post_thumbnail
Kliknij na Uprawa ponieważ chcemy mieć pewność, że obrazy są zawsze wymiarami, które podałeś
Kliknij na Zweryfikuj

Screen grab of adding a new image size in the Simple Image Sizes settings page — Definiowanie nowego rozmiaru obrazu za pomocą wtyczki Simple Image Sizes

Teraz zobaczysz swój nowy rozmiar dodany do tabeli rozmiarów miniatur.

Screen grab showing the new size in the image size table on the settings screen of the Simple Image Sizes plugin — Nowy Rozmiar obrazu został utworzony i jest dostępny dla funkcji regenerate thumbnails

Upewnij się, że wybrano nową nazwę rozmiaru i że Posty jest zaznaczony na liście typ postu i kliknij na Regeneruj Miniatury.

Spowoduje to utworzenie nowego zestawu miniatur dla wybranych rozmiarów miniatur.

Aktywuj i testuj

Powinieneś być gotowy. Aktywuj swój motyw podrzędny i przejdź do strony głównej. Powinieneś teraz otrzymać listę postów opartą na obrazie z efektem bounce pop po najechaniu kursorem.

Tak, to trzy różne podejścia do produkcji wonderwall, które są proste do wdrożenia i są znacznie bardziej atrakcyjne wizualnie niż standardowy tekst listing.

Myślę, że te techniki mają prawdziwy potencjał dla użytkowników tabletów.