Kendiniz yapmak için yirmi on beş nasıl ayarlanır
Kısa bir süre önce, temiz görünümü nedeniyle yeni varsayılan yirmi on beş WordPress temasını övdüm ve güzel içerik paylaşmaya odaklandım. Dikey ritmi, yan bıçakların düzenini ve duyarlı davranışı seviyorum. Bu gerçekten güzel bir tema. Ama görünüşü severken, her zaman sizinkini yapmak için yer var. Yirmi On beş, birkaç ayar seçeneği sunar, ancak isteklerinize göre düzenlemek için yapmak isteyebileceğiniz daha fazlası vardır. Bu yazıda, şaşırtıcı olan temayı sizin için doğru site tasarımına dönüştürmenin birkaç yolunu göreceğim. Konjenital özelleştirme seçeneğini, daha fazla kuvvet artışları eklemek için bazı eklentiler ve küçük sorunlara rağmen bazı problemler için kendileri tarafından kodlanan çözümleri görüyoruz.
Bu makale sırasında şunları araştıracağız:
Varsayılan özelleştirme
renk
Ana içerik ve yan bıçaklar için arka plan görüntüsü
Sosyal menü kullanmak
Eklenti
Google yazı tipi için destek ekleyin
Yan bıçaklara Twitter Yemi Ekle
Tile Galerisi için Destek Ekleyin, Bağlantılar Paylaşımı ve Diğerleri
Kodlanmış çözüm
Sağ tarafın yanını sağa yönlendir
Gönderinin altına resim kredisi ekleyin
Yayın altındaki yazarın bölümünü silin
İçerik kutusunun rengini değiştirin
Varsayılan temaların özelleştirilmesi Gitmek için ana yer görünüm> Yöneticide özelleştirmedir. Bu, temaların ayarlanmasını aşağıdaki seçeneklerle gündeme getirecektir:
Temel Renk Şeması: İçeriğiniz ve yanlarınız için bir renk prasset seçmenizi sağlar.
Arka plan rengi: Ana içerik alanı için arka plan rengini ayarlayın. İçerik kutusu orijinal rengini koruyacaktır.
Başlığın ve kenar çubuğu metninin rengi: Başlık ve kenar çubuğu için metin rengini ayarlayın. Yan çubuk daha küçük bir ekranda bir gölgelik haline gelir.
Başlığın ve kenar çubuğunun arka plan rengi: Kenar çubuğu/başlık alanı için arka plan rengini ayarlayın.
Bazı renk varyasyonları. Bu iki bölümün başlığı ve arka plan görüntüleri, her bir içeriğin yan bıçakları ve alanı için arka plan görüntüsünü ayarlayan bir ayar içerir. Burada bir resim kullanacak olsanız bile, iyi görünen arka plan rengini ayarladığınızdan emin olun. Yanlış bir şey varsa ve görüntünüz yüklenmezse, okuyucunuz hala görsel olarak eğlenceli bir şey görecektir. Arka plan görüntüsü yanlar ve içerik için düzenlenmiştir. Merak ediyorsanız, yol boyunca uzanan ve birkaç opaklığa sahip siyah bir yan bıçağı olan bir arka plan görüntüsüne sahip olmanın bir yolu yoktur. Yukarıdaki ekran görüntüsü böyle görünüyor ama aslında iki görüntü. Navigasyon bölümünün navigasyon, widget ve ön sayfası, menünüzü temalarda bulunan iki menü konumuna ayarlamanızı sağlar. “Ana menü” adlı sıradan bir sayfa menüsü ve “Sosyal Bağlantı Menüsü” adlı bir sosyal menü vardır. Bunu daha sonra biraz daha ayrıntılı olarak göreceğiz, menü bölümünün içinden atar. Ayarlamalarda yönetilen widget’ı denemediyseniz, bu yapmak için mükemmel bir fırsattır. WordPress 3.9’da elden geçirildi ve eskisinden çok daha kullanışlıydı. Widget’ın önizlemesini doğrudan ayarlamalardan yapabilirsiniz – olağanüstü özellikler. Statik bir ön sayfayla, ön sayfanız olarak daha önce oluşturulan bir sayfayı seçebilirsiniz. Ön sayfadaki en son yayınınızdan başka bir şey görüntülemek istiyorsanız bunu kullanın. Menüyü ve sosyal bağlantıyı ayarlayın Sıradan menüler ve sosyal bağlantı menülerine örnekler. Görünüm> menülere giderseniz, kendi menünüzü monte edebilirsiniz. Burada yeni hiçbir şey yok. Nasıl çalıştığını öğrenmek istiyorsanız, WordPress kullanıcı kılavuzuna bakın. Desteklenen sitelere bağlantı. Menü öğesi adını ne adlandırdığınız konusunda endişelenmenize gerek yok, doğru simge sağlanan bağlantıya göre kullanılacaktır. Aşağıda, bağlanabileceğiniz mevcut sosyal sitelerin tam bir listesidir:
Kod kalemi Digg
saldırmak
Dropbox
Flickr
Gitithub
Google+
Izlemek
Cep
Poldaddy
Skype
Yanılmak
Tumblr
Endonezya
Vimeo
WordPress
Youtube
Varsayılan ayarlama, yirmi on beş’i istediğiniz gibi ayarlamak için yeterli değilse, ek güç seçenekleri sunan bazı eklentiler.
Google yazı tipi için destek ekleyin
Yirmi -Fifteen, Google Font’tan iki harika yazı tipi olan Noto Serif ve Noto Sans kullanır. Ne yazık ki, yazı tipi ailesini ayarlamanın doğuştan gelen bir yolu yoktur, ancak Typecase adlı bir eklenti tüm bunları tamamlar. WP Tavern, sürecin nasıl çalıştığını ayrıntılı olarak açıklar. TypeCase’i indirip yükledikten sonra, temaları ayarlamak için sağlamak istediğiniz birkaç yazı tipini seçebilirsiniz. Ardından, özelleştirici temasını ziyaret edin ve gövde kopyası ve başlık için kullanılacak yazı tipini ayarlamak için seçeneği kullanın. TypeCase ayrıca yazı tiplerinizi belirli öğelere ayarlamak için özel seçmenler eklemenizi sağlar. Bu, temayı değiştirmeden temaya yazı tipleri eklemenin çok etkili bir yoludur. Google Font’a destek eklemekle ilgilenmek ister misiniz?
Detaylar
Twitter yem ekle Yan çubuğa Twitter yem eklemek muhtemelen insanların sizinle etkileşime girmesi için yapabileceğiniz en iyi şeylerden biridir. Son zamanlarda, şimdiye kadar kullandığım en iyilerden biri olan oldukça uzun bir Twitter feed widget eklentisi keşfettim. Hazırlık, widget kimliğini eklemek kadar kolaydır ve besleme ekranını kapsamlı bir şekilde ayarlamanızı sağlar. Twitter yem eklemekle ilgileniyor musunuz?
Detaylar
Tile Galerisi, Paylaşım Bağlantıları ve Diğerleri
14 milyona yakın bir dizi indirme ile Jetpack, mevcut en popüler eklentilerden biridir. Automattic’te arkadaşlarımız tarafından yapıldı ve seçici olarak etkinleştirilebilen veya devre dışı bırakılabilen çok sayıda özellik içeriyor. Tile Galerisi, Galerinizin kısa kodundan otomatik olarak bir taş tarzı galerisi yaparak sevdiğim özelliklerden biridir. Avantajı, galerinize girerken özel bir şey yapmanıza gerek olmaması, sadece özelliklerini etkinleştirmenizdir. Genellikle kullanılan başka bir modül, postanın altına otomatik olarak eklenebilen paylaşım bölümüdür. Yirmi -Fifteen’e bakıyor:
Tile Galerisi, Paylaşım Bağlantıları ve diğerleriyle ilgileniyor musunuz?
Detaylar Temayı ayarlamada tuzağa düşmeden önce yirmi -fifteen kod kodu ayarlayın, bir çocuk teması oluşturmalıyız. Bu çok kolay, ancak nasıl yapılacağından emin değilseniz, çocuğun teması için pratik rehberimize bakın. Çocuğun teması, koda dokunmadan temaları değiştirmenizi sağlar. Bu, değişiminizi kaybetmeden ana temayı güncellemenizi sağlar.
Çocuğunuzun temasını yaptıktan sonra, bazı özel değişiklikler uygulamaya hazırsınız.
Yan bıçakları sağa taşımak sorun nedir? Bu şekilde tercih ederseniz, tarafın tarafını sayfanın sağ tarafına yönlendirme seçeneği yoktur. Nasıl düzeltilir? Yan çubuğu sağa taşımak için, çocuğunuzun temasına stil.css dosyasına yalnızca birkaç stil eklemeniz gerekir. Çözüm bu tam koddur, bir açıklama daha sonra gerçekleşir: Core 5F47292F15CBC2E2D4FF içerir
Peki bunu böyle yapmayı nasıl bilebilirim? Stilin ne olduğunu öğrenmek için sadece bir Chrome geliştiricisi kullanıyorum. Menüyü açmak ve imleci yan çubuğa (OS X’de) yönlendirmek için Shift + Command + C tuşuna basın. .Ebulbaran tarafı (.idulbar) varsayılan olarak sola doğru iten çeşitli kurallara sahiptir. Ana içerik alanı (.Site-content) onu sola iten kurallara sahiptir. Bu kurala döndüm, düzgün olmaya dikkat et. Bunu yaparken dikkatli olun, çünkü bazı kuralların varsayılan olarak ayarlanması gerekir. Örneğin: Şamandıra değiştirirken sadece şamandıra söyle: doğru. Bu ilk sol olarak tanımlandığından, kuralın üzerine yazılmıştır. Ancak, kurallar marj yaprağı olarak belirlenirse: 20px; Çocuk temasında marj-sağ: 20 piksel tanımlayarak yeniden yazmazsınız. Sol kenar boşluğunun yanı sıra elementin 20 piksel sağ kenar boşluğuna sahip olması gerektiğini söylüyorsunuz. Bu durumda şunu yazmalısınız: marj-sol: otomatik; Marj-sağ: 20px; Marj-sol: Otomatik; Marj-sağ: 20px;
. Tüm kuralları yazdığınızda bu oldukça açıktır, ancak bazen kurallara geldiğinde bu hatayı yaparım ve neyin yanlış olduğunu öğrenmek için biraz zaman harcıyorum! Bulmacanın son kısmı, arka plan ayırıcısının yeni düzenimize paralel olmasını sağlamaktır. Ayırıcı, sahte slektörden önce :: kullanılarak eklenir. Solda değil, bu elemanın konumunun sağda kalmasını sağlayarak, yan çubukta değişiklikleri tamamladık. Kodu medya sorgusuna sardığınızdan emin olun. Bu stili büyük bir ekrana uygulamak istiyoruz. Daha küçük bir ekranda, yan çubuk bir gölgelik olarak kalmalıdır. Varsayılan olarak bu, 955px veya 59.6875EM’de küçük bir masaüstü ekranında gerçekleşir. Aşağıda Görüntü Kredisi Ekleme Sorun nedir? Tüm web’den resim kullanırsam kimin sorumlu olduğunu söylemek istiyorum, ancak yirmi on beşe görüntü kredisi ekleme seçeneği yok. Nasıl düzeltilir? Gelişmiş özel alanları kullanın ve çocuğun teması aracılığıyla şablonunuza bilgileri yerleştirin. Size bunu web sitemde nasıl yaptığım hakkında genel bir bakış vereceğim, ancak bu konuda daha gayri resmi olmak için, nasıl çalıştığını görmek için WordPress ile bir eğitim günlüğü oluşturmaya bakın. Çözüm, her sayfa düzenleme sayfasında görüntülenen WYSIWYG metin alanını yaptığım gelişmiş özel alanda. Bunu bir URL alanı yapabilirim ama beni ön uçta sınırlayacak. Metnin metnini kullanarak, istersem görüntüler hakkında bir veya iki cümle yazabiliyorum.
ACF’de yaptığım kredi imajı alanı. Bu noktada tüm yayınlarınıza görüntü kredisi ekleyebilirsiniz, ancak ön uçta görünmezler. Fonksiyonlarınızı açın.
Bu kod, orijinal içeriği sevkiyattan alır ve kredi dizemizi ekledikten sonra iade eder. Belirli bir HTML biçimi kullandığımı unutmayın:
Core 5F47292F15CBC2E2D4FF içerir
Bunu yapmamın nedeni, Jetpack’in Sharr gibi içeriğinin bir kısmını görüntülemek için aynı yapıyı kullanmasıydı. Bunu taklit etmek istiyorum, böylece aynı html kullanıyorum. Test etmeden önce, style.css görünümü biraz değiştirmenizi sağlar. Jetpack modülü gibi görünmesini sağlamak için aşağıdakileri kullanın:
Core 5F47292F15CBC2E2D4FF içerir
Kredi resimleri ve jetcpack bölücüsü yazarın rolünü silin Sorun nedir? Yazarın biyografisi her yazının altında görüntülenir, bu da iyi görünür, ancak tek bir yazar web siteniz varsa, bilgilerinizin yanda görüntülenmesi muhtemel çünkü gerekli değildir. Nasıl düzeltilir? Bunu iki şekilde yapabilirsiniz: ekrandan silmek için bir stil sayfası kullanabilir veya işlevlerini hiç silebilirsiniz. Ekrandan silmek için çözüm, style.css dosyasını açın ve aşağıdakileri ekleyin: .author-info {ekran: none; } .Author-info {ekran: yok; }. Bu yöntemi seçerseniz, metin hala orada olacaktır, ancak görünümden gizlenecektir. İçeriğin gerekmediğinde yüklenmesini önlemek istiyorsanız, tamamen, HTML ve her şeyi silebilirsiniz. Bunu yapmak için Content.php dosyasını üst temadan çocuk temanıza kopyalayıp eklemeniz gerekir. Dosyayı açın ve // yazar biyografisiyle başlayan kısmı bulun. İlk PHP etiketinden son PHP etiketine kadar her şeyi silin. Aşağıda silinmesi gereken eksiksiz bir koddur: Çekirdek 5F47292F15CBC2E2D4FF içerir
İçerik kutusunun rengini değiştirme sorun nedir? Tema ayarı, içerik kutusunun rengini değiştirmenize izin vermez. Nasıl düzeltilir? Daha çekici desenler yapmak için içerik kutusunun (ve içindeki metin) rengini değiştirebilirsiniz. Stili sadece her şeyin çocuğunuzun temasının stil sayfasında yazılabilmesi için değiştirmeniz gerekir.
Yirmi beşte özel renkli bir kutu. Çözüm, yukarıdaki ekran görüntüsünde görülen efektleri elde etmektir, bazı stilleri değiştirmek zorundayım. Kutunun metninin arka planını ve rengini değiştirmek yeterli değildir, çünkü bağlantılar ve diğer öğeler buna başlayabilir. Çekirdeğin temelini oluşturma 5F47292F15CBC2E2D4FF
Yukarıdaki ile aynı tasarımı almak istiyorsanız, içerik arka planı için #000000 ve tema ayarındaki yan çubuğun arka planı için #303030 kullanın. Dikkatli olun, çünkü içerik göndermedeki bazı öğeler bu stil olabilir. Ekran görüntülerinde örnekler zaten görebilirsiniz – Tag Pre. Bu tasarımda iyi görünüyor, ancak diğer unsurlar hoş olmayan sonuçlarla olabilir. Sorun bu ise, kendi renginizi kullanmak için stil sayfanıza yeni kurallar ekleyin. Sorun ne sınırsız bir kutu yapın? Bazı durumlarda, örneğin bir vardiya için çerçevesiz bir çerçeve yapmak isteyebilirsiniz. Sorunu daha iyi anlamak için aşağıdaki ekran görüntülerine bakın.
Sınırsız ve düzenli olarak diğerinin altında bir yazı. Nasıl düzeltilir? Gönderi formatlarından birini çerçevesiz olarak ayarlayabiliriz, ancak olmasını tercih ederim, tasarım iyi. Ayrıca, sınırları ve sınırsız kutuları içeren bir kutuda görüntüleri görüntülemek isteyebilirim. Yaptığım çözüm yine gelişmiş bir özel alan içeriyordu. Her yayının düzenleme ekranı için bir çıktı olan gerçek/yanlış bir tür kontrolü yaptım. Bu, belirli bir gönderinin sınırsız olmasını isteyip istemediğimi düzenlememi sağlıyor.
Sınırsız kontrol, daha önce tartışılan görüntünün kredi alanı altında. Çözüm, bir gönderi her yüklendiğinde bu kutunun durumunu algılayacağımız ve bilet ise özel bir sınıf görüntüleyeceğimizdir. Bu, işlevi Post_class Hook’a bağlayarak yapılabilir: 5F47292F15CBC2E2D4FF’nin çekirdeğini içerir Sınırsız kutunun kontrol edilip edilmediğini görmek için get_field işlevini kullanıyoruz. Eğer öyleyse, gönderiye eklenecek sınıf dizisine ekleriz. Şu andan itibaren, yapmak istediğiniz öznelin çoğu. Sınırı silebilir, ancak meta kutusunu kaydedebilir, meta kutusunu tamamen silebilirsiniz. Her şeyi silmeyi seçtim:
Core 5F47292F15CBC2E2D4FF içerir
Bu arada, ana sayfanızın tepesine kalıcı bir kayma eklemek istiyorsanız, bu bunu yapmak için mükemmel bir yoldur. Yapmanız gereken tek şey bir kaydırma içeriği eklemek ve yazıyı yapışkan olarak işaretlemektir. Gösterimde, bir kaydırıcı yapmak için Meta Slider eklentisini kullandım. Sonuç Gördüğünüz gibi, yirmi on beş kişiyi sizin için doğru olarak ayarlamanın birçok yolu vardır. Konjenital özelleştirme, bazı temel ayarlar üzerinde kontrol sağlarken, eklentiler inanılmaz bir tema haline gelen şeyi genişletmek için birçok şey yapabilir. Daha fazla temel değişikliğe ihtiyacınız varsa, bir çocuğun temasıyla neredeyse her şey elde edilebilir. Elemanları silebilir, kendi öğelerinizi ekleyebilir ve her şeyin stilini modüler bir şekilde ayarlayabilirsiniz. Yirmi on beş olarak başka bazı ayarlamalar görmek istiyorsanız veya kendi temanızı değiştirdiyseniz, aşağıdaki yorumlarda bize söyleyin. Etiket: çocuk teması
kodlamak
Ücretsiz tema
