Korzystasz z polecanych obrazów na wszystkich swoich postach – w rzeczywistości poświęcasz dużo czasu na ich wybór i optymalizację-więc dlaczego nie użyć ich, aby nadać swojej stronie głównej, listom kategorii i archiwom wizualny cios?

W tej mini-serii przyjrzymy się trzem podejściom do tworzenia listy postów wonderwall: Card Flipper, Coloriser i Bounce Pop. Każdy jest prosty do zintegrowania z witryną i zapewni mnóstwo wizualnego huku dla Twojego wysiłku.

Zacznijmy więc od flippera kart, od Wonderwall.

Screen grab showing a grid of featured images with one flipped showing title
Daj swoim postom wizualne uderzenie

Card-flipping wykorzystuje Właściwość CSS3 transform, która jest obsługiwana przez Internet Explorer 10, Firefox i operę (tylko 2D). Safari i Chrome korzystają z właściwości alternative-webkit-transform, podczas gdy Internet Explorer 9 ma własną alternatywę-ms-transform, która jest tylko 2D.

To rozwiązanie będzie oparte na technikach opisanych w tym tutorialu CSS3 3D Transform Card Flip Gallery autorstwa Kevina Liew.

Obejrzyj demo, aby lepiej zrozumieć, co będziemy produkować.

Nie zamierzam wchodzić w to, jak to działa, ponieważ Kevin już to zrobił; po prostu skupię się na tym, jak zintegrować to podejście z witryną WordPress w czterech krokach.

Na dole artykułu znajduje się plik do pobrania, który zawiera motyw potomny oparty na motywie TwentyTwelve.

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

Po utworzeniu motywu podrzędnego stworzyłbyś styl.plik css. Otwórz go i skopiuj i wklej w następującym CSS

.thumb {
wyświetlacz: blok;
width: 300px;
wysokość: 140px;
pozycja: względna;
margin-bottom:5px;
margin-right:5px;
float: left;
}

.Thumb-wrapper {
wyświetlacz: blok;
Szerokość: 100%;
wysokość: 100%;
}

.thumb img {
Szerokość: 100%;
wysokość: 100%;
pozycja: absolutna;
wyświetlacz: blok;

}

.kciuk .thumb-detail {
wyświetlacz: blok;
Szerokość: 100%;
wysokość: 100%;
pozycja: absolutna;
tło: # fff;
font-family: arial;
font-weight: bold;
font-size: 16px;
}

.kciuk .thumb-detail a {
wyświetlacz: blok;
Szerokość: 95%;
wysokość: 100%;
text-transform: wielkie litery;
font-weight: bold;
kolor:#333;
tekst-Dekoracja: Brak;
font-family: 'Open Sans', sans-serif;
odstępy między literami:-1px;
padding: 10px;
font-size: 18px;
}

/*
* Bez CSS3
*/
.kciuk.scroll {
przepełnienie: Ukryte;
}

.kciuk.zwój .thumb-detail {
spód: - 280px;
}

/*
* CSS3 Flip
*/
.kciuk.flip {
- webkit-perspektywa: 800px;
- moz-perspektywa: 800px;
- ms-perspective: 800px;
- o-perspective: 800px;
perspektywa: 800px;
}

.kciuk.flip .Thumb-wrapper {
- webkit-transition:-webkit-transform 1s;
- moz-transition: - moz-transform 1s;
- ms-transition: - moz-transform 1s;
- o-transition: - moz-transform 1s;
Przejście: - moz-transform 1s;
- webkit-transform-style: preserve-3d;
- moz-transform-style: preserve-3d;
- ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}

.kciuk.flip .thumb-detail {
- webkit-transform: rotateY (- 180deg);
- moz-transform: rotateY (- 180deg);
- ms-transform: rotateY (- 180deg);
- o-transform: rotateY (- 180deg);
transformacja: rotateY (- 180deg);
}

.kciuk.flip img,
.kciuk.flip .thumb-detail {
- webkit-backface-widoczność: Ukryty;
- moz-backface-widoczność: ukryta;
- ms-backface-widoczność: ukryta;
-o-backface-widoczność: ukryta;
backface-widoczność: ukryta;
}

.kciuk.flip .flipIt {
- webkit-transform: rotateY (- 180deg);
- moz-transform: rotateY (- 180deg);
- ms-transform: rotateY (- 180deg);
- o-transform: rotateY (- 180deg);
transformacja: rotateY (- 180deg);
}

Jedyna uwaga jest tutaj w pierwszej deklaracji,.kciuk, gdzie szerokość oraz wysokość obraz jest ustawiony-będziesz chciał ustawić je na to, co jest odpowiednie dla Twojej witryny.

Ponadto marginesy (prawy i dolny) są ustawione na 5px, co zapewnia dość wąską szczelinę między obrazami. Możesz to powiększyć lub całkowicie usunąć, jeśli chcesz, aby obrazy leżały naprzeciwko siebie.

Krok 3-Dołącz Javascript

Rozwiązanie to wymaga jQuery aby obsłużyć przełączanie klas I Modernizr, aby sprawdzić możliwości przeglądarki i czy do karty-flip lub przewijania. Sprawdź, czy Twój motyw korzysta już z jednej z tych bibliotek.

Aby dodać te biblioteki do swoich stron, Otwórz lub utwórz funkcje.php plik w szablonie potomnym i dodaj następujący kod:

function cf_load_javascript () {

wp_enqueue_script ('jQuery', 'http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js', false, false,false);
wp_enqueue_script ('modernizr', 'http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js', false, false ,false);
}

add_action ('wp_enqueue_scripts', 'cf_load_javascript');

Ściągamy biblioteki z CDNJS tylko po to, żeby było łatwiej.

Teraz musimy wstawić Niestandardowy Javscript na stronę:

function add_cardflip_js () {

if (is_category() || is_home () / / is_archive ()) {

echo "
hasClass('csstransforms3d'))%20%7B%0A%0A%2F%2F%20if%20it's%20supported%2C%20remove%20the%20scroll%20effect%20add%20the%20cool%20card%20flipping%20instead%0A%24('.thumb").removeClass ('scroll').addClass('flip')%3B%0A%0A%2F%2F%20add%2Fremove%20flip%20class%20that%20make%20the%20transition%20effect%0A%24('.kciuk.flip").najedź kursorem (%0function%20 ()%20% 7B%0A % 24(this).find (".thumb-wrapper").addClass ('flipIt')%3b%0a%7D%2C%0funkcja%20 ()%20% 7B%0a%24 (this).find (".thumb-wrapper").removeClass('flipIt')%3B%0A%7D%0A)%3B%0A%0A%7D%20else%20%7B%0A%0A%2F%2F%20CSS%203D%20is%20not%20supported%2C%20use%20the%20scroll%20up%20effect%20instead%0A%24('.thumb").najedź kursorem (%0function%20 ()%20% 7B%0A % 24(this).find (".thumb-detail").stop().animate(%7Bbottom%3A0%7D%2C%20500%2C%20'easeOutCubic')%3B%0A%7D%2C%0Afunction%20()%20%7B%0A%24(this).find (".thumb-detail").stop().animacja(%7bbottom%3A%20(%24(this)).height()%20*%20-1)%20%7D%2C%20500%2C%20'easeOutCubic')%3B%0A%7D%0A)%3B%0A%0A%7D%0A%0A%7D)(jQuery)%3B%0A%0A%3C%2Fscript%3E" data-MCE-resize= "false" data-MCE-placeholder = " 1 "class =" MCE-object "width =" 20 " height="20" alt = " <script>"title="<script>"/>";

} / * jeśli */

}

add_action ('wp_footer', 'add_cardflip_js');

Na add_cardflip_js funkcja doda ten Javascript tylko wtedy, gdy bieżący adres URL dotyczy strony głównej, listy kategorii lub listy archiwum. Możesz usunąć instrukcję if I jeśli wolisz, aby Javascript pojawiał się na wszystkich stronach front-end.

Jak widać, jest sprawdzanie możliwości transformacji CSS3 i jeśli nie jest obsługiwane, skrypt zaimplementuje efekt przewijania w górę.

Krok 4-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 wyprowadzić kod HTML z karty, jeśli generowana jest strona główna, lista kategorii lub strona archiwum.

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

<?php / / tylko karta wyjściowa-przerzucanie HTML na stronie aukcji if ( is_category() || is_home () / / is_archive ()) {?>


< div class = "Thumb scroll">


< div class = "thumb-wrapper">

<?PHP echo get_the_post_thumbnail ($post->ID ) ?>


< div class = "thumb-detail">



<?php the_category(':'); ?>

<a href="<?php the_permalink(); ?>"><?php the_title ()?>< / a>

< / div>


< / div>


< / div>


<?php } else { ?>

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

<?php } ?>

Aktywuj i testuj

Twój motyw potomny powinien teraz składać się z trzech plików: zawartości.php, funkcje.php i style.css. Aktywuj ten motyw potomny i przejdź do witryny, a przekonasz się, że Twoja Strona Główna, Kategorie i archiwa są teraz post-listing-Card-flipping Wonderwall.

Następnym razem przyjrzymy się Koloryzatorowi, bardziej subtelnej technice prezentowania wszystkich wyróżnionych obrazów w monochromacie, a następnie zmieniania ich na kolor po najechaniu myszą.

Czy masz ulubioną witrynę, która wykorzystuje Post-listing wonderwall? Jeśli tak, daj znać wszystkim, zamieszczając link w komentarzach poniżej.

Pobierz: Card Flipper Demo Theme (spakowany, wymaga TwentyTwelve)

Code Credits: Kevin Liew

Tagi:

You May Also Like

Jak naprawić nieprawidłowy błąd JSON w WordPress (Przewodnik dla początkujących)

W artykule: Co powoduje błąd “nieprawidłowa odpowiedź JSON” w WordPress?1. Sprawdź adresy…

Jak naprawić błąd krytyczny w WordPress (krok po kroku)

W artykule: Co To jest błąd krytyczny w WordPress?Co powoduje krytyczny błąd…

Jak zmienić kolor linku w WordPress (poradnik dla początkujących)

W artykule: Dlaczego Linki Są Ważne?Jak dodawać linki w postach i stronach…

9 Najlepsze Darmowe Wtyczki WordPress Author Bio Box

W artykule: 1. Simple Author Box2. Branda3. Autor postu WP4. Author Bio…