Word-Post WordPress sonrası Wonderwall Nasıl Yapılır-Kart Flipper
Tüm yayınlarınızda üstün resimler kullanıyorsunuz – aslında bunları seçmek ve optimize etmek için çok zaman harcıyorsunuz – neden bir ana sayfa, kategorilerin listesi ve arşivleriniz vermek için kullanmıyorsunuz? Bu mini-seri’de, Gönderme Wonderwall’ınızı yapmak için üç yaklaşım göreceğiz: Kart Flipper, Colorizer ve Bounce Pop. Her biri sitenize kolayca entegre edilebilir ve işletmeniz için birçok görsel avantaj sağlayacaktır. Öyleyse flipper kartı, Wonderwall Register-Kartu-Back ile başlayalım.
İnternet Explorer 10, Firefox ve Opera (özellikle 2D) tarafından desteklenen CSS3 Dönüşüm özelliğini kullanarak GÖSTEMLİ BULUŞ LİSTESİNİ GÖSTERLİ OLMA KARTINIZ. Safari ve Chrome Alternatif Özellikler Kullanıyor -Webkit -Transform İnternet Explorer 9’un sadece 2D olan kendi alternatifi -MS -Transform vardır.Bu çözüm, Kevin Liew tarafından 3D CSS3 Transform Card Flip Gallery öğreticisinde açıklanan tekniklere dayanacaktır. Ne üreteceğimiz hakkında daha iyi fikirler almak için demoya bakın. Nasıl çalıştığını tartışmayacağım çünkü Kevin bunu yaptı; WordPress sitenize bir yaklaşımı sadece dört adımda nasıl entegre edeceğine odaklanacağım. Makalenin altında yirmiTwelve temasına dayanan çocukların temasını içeren indirmeler vardır. Adım 1 – Çocuk teması her zamanki gibi, çocuğun temasına ayarlamalar eklenecektir. Çocuk temasını nasıl ayarlayacağınızı bilmiyorsanız, CODEX WordPress’teki bu makaleyi okuyun.
Adım 2 – Style.css için özel bir stil ekleyin Çocuğunuzun temasını oluşturduğunuzda, bir style.css dosyası oluşturacaksınız. Açın ve aşağıdaki CSS’de kopyalayıp yapıştırın.
Ekran bloğu;
width:300px;height:140px;
Pozisyon: göreceli;
margin-bottom:5px;
margin-right:5px;
float:left;
}
.thumb-wrapper {
Ekran bloğu;
width:100%;
height:100%;
}
.thumb img {
width:100%;
height:100%;
Pozisyon: Mutlak;
Ekran bloğu;
}
.thumb .thumb-detail {
Ekran bloğu;
width:100%;
height:100%;
Pozisyon: Mutlak;
background:#fff;
font-family:arial;
font-weight:bold;
font-size:16px;
}
.thumb .thumb-detail a {
Ekran bloğu;
width:95%;
height:100%;
text-transform:uppercase;
font-weight:bold;
color:#333;
Metin dekorasyonu: yok;
font-family: ‘Open Sans’, sans-serif;
letter-spacing:-1px;
padding:10px;
font-size:18px;
}
/*
* Without CSS3
*/
.thumb.scroll {
overflow: hidden;
}
.thumb.scroll .thumb-detail {
bottom:-280px;
}
/*
* CSS3 Flip
*/
.thumb.flip {
-webkit-perspective:800px;
-moz-perspective:800px;
-ms-perspective:800px;
-o-perspective:800px;
perspective:800px;
}
.thumb.flip .thumb-wrapper {
-webkit-transition: -webkit-transform 1s;
-moz-transition: -moz-transform 1s;
-ms-transition: -moz-transform 1s;
-o-transition: -moz-transform 1s;
transition: -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;
}
.thumb.flip .thumb-detail {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.thumb.flip img,
.thumb.flip .thumb-detail {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.thumb.flip .flipit {-webkit-transform: rotatey (-180deg);
-Moz-transform: rotatey (-180deg);
-Ms-transform: rotatey (-180deg);
-O-transform: rotatey (-180deg);
Dönüşüm: rotatey (-180deg);
}
Buradaki tek husus ilk beyanda. Görüntünün genişliğinin ve yüksekliğinin ayarlandığı başparmak, siteniz için uygun olana ayarlayabilirsiniz.
Ayrıca, marj (sağ ve alt) 5px’e ayarlanır ve görüntü arasında oldukça dar bir boşluk sağlar. Çizimlerin birbiriyle yüzleşmesini istiyorsanız, bunu büyütmek veya tamamen silmek isteyebilirsiniz. Adım 3 – JavaScript’i Ekleyin Bu çözüm, tarayıcı özelliklerini kontrol etmek için sınıf ve Modernizr değişikliklerini işlemesini ve kartları veya ruloyu çevirip çevirmeyeceğini gerektirir. Temanızın bu kütüphanelerden birini kullanıp kullanmadığını kontrol edin. Bu kütüphaneyi sayfanıza eklemek için, alt temanızda bir function.php dosyasını açın veya oluşturun ve aşağıdaki kodu ekleyin:
İşlev 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.conchflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js’, false, false);
}
Add_action (‘wp_enqueue_scripts’, ‘cf_load_javascript’);
Sadece kolaylaştırmak için kütüphaneyi CDNJS’den çektik.
Şimdi sayfaya özel bir JavaScript girmemiz gerekiyor: function add_cardflip_js () {
if (is_category () || is_home () || is_archive ()) {
Eko ”
“;} / * ise * /}
Add_action (‘wp_footer’, ‘add_cardflip_js’);
Add_cardflip_js işlevi yalnızca geçerli URL ana sayfa, kategorilerin listesi veya arşiv listesi için ise JavaScript ekler. İfadeler ve tercih ederseniz JavaScript tüm ön uç sayfalarda görünürse silebilirsiniz. Gördüğünüz gibi, CSS3 dönüşümünün kapasitesi için bir inceleme vardır ve desteklenmezse, komut dosyası kaydırma efektini uygular. Adım 4 – HTML üretmek için şablon içeriğini değiştir. Bunu yapmak için, ana sayfa, kategorilerin listesi veya arşiv sayfaları oluşturuluyorsa, yalnızca bir şablonu, content.php’i değiştirmemiz gerekir. Saline Content.php, ebeveyn temasından çocuğun temasına. Bu kodu “” etiketinden hemen önce ekleyin::
& lt;? PHP // Yalnızca bir liste sayfasındayken (is_category () || is_home () || is_archive ()) {? & gt;
& lt; “php echo get_the_post_thumbnail ($ post-> id)? & gt;
& lt; “Php the_category (‘:’); ? & gt;
<a href = "& lt teşekkür? Php the_permalink ();
& lt; “php} else {? & gt;
Şablonun altına aşağıdakileri ekleyerek IF ifadesini kapatın:
& lt; “php}? & gt;
Çocuğunuzun temasını etkinleştirin ve test edin, artık üç dosyadan oluşmalıdır: content.php, function.php ve style.css.Bu çocuğun temasını etkinleştirin ve siteye atlayın ve ana sayfanızın, kategorinizin ve arşivlerinizin listesinin artık kaydedilmiş bir sihirli duvar olduğunu göreceksiniz.Bir dahaki sefere bir renklendirici, monokromdaki tüm üstün görüntüleri görüntülemek ve daha sonra bir fareover ile renklendirmek için daha pürüzsüz bir teknik göreceğiz.Register sonrası Wonderwall kullanan favori bir siteniz var mı?Öyleyse, aşağıdaki yorumlarda bağlantıyı göndererek herkese söyleyin. İndirin: Flipper Card Demo Teması (Zip, YirmiTwelve gerektirir) Kredi Kodu: Kevin Liew Etiketi:
CSS
Mini görüntü
