Kenar çubuğu nasıl yeniden boyutlandırılır - manuel yöntem ve Görsel Kenar Çubuğu Düzenleyicisi ile düzenleme. WordPress, şablonun genişliğini artırır veya Wordpress şablonunun yan menüsünü ve makaleler bölümünü tam genişliğe genişletir
WordPress harika bir blog oluşturma aracıdır, ancak ne yazık ki mükemmel değildir. Pek çok güncelleme ve yüzlerce yeni özellikten sonra bile, rahat bir deneyim için bazı temel kullanıcı arabirimi iyileştirmelerine ihtiyaç duyulmaktadır.
Son zamanlarda pek çok uzun liste makalesi yazıyorum ve bu süreçte WordPress'in yerleşik görsel yazı düzenleyicisiyle ilgili bilmediğim veya daha önce beni pek rahatsız etmeyen bir sorun keşfettim.
Bu kısa öğreticide, size WordPress görsel yazı düzenleyicisinde ana metin sütununun genişliğini nasıl değiştireceğinizi göstereceğim.
Sorun
Büyük gönderiler oluştururken (çoğunlukla resimlerle), listenin düzgün biçimlendirildiğinden emin olmak için genellikle gönderiyi kaydetmem ve önizlemem gerekiyordu. Ek olarak, genellikle doğrudan resmimin üzerine metin yazmak zorunda kalıyordum, çünkü editör penceresinin boyutu resimlerimin herhangi birinden (ve sitemdeki ana içerik bloğundan) neredeyse bir buçuk kat daha büyük:
Çözüm
Çözüm nispeten basit, ancak onu nasıl uygulayacağınızı bilmeniz gerekiyor. Öncelikle sitenizdeki içerik bloğunun mevcut genişliğini bilmeniz gerekir. Benim durumumda, blog bloğumun genişliği 650 pikseldir.
O zaman dosyanızı açmanız gerekecek fonksiyonlar.php ve dosyanın en altına aşağıdaki kodu ekleyin:
function fb_change_mce_buttons($initArray) ( $initArray["width"] = "650px"; return $initArray; ) add_filter("tiny_mce_before_init", "fb_change_mce_buttons");
Sonuç
Sonuç olarak, içerik bloğunuzun genişliğini sitenin kendisinde tekrarlayan bir yazı düzenleyici göreceksiniz. Bu şekilde, yönetici konsolu aracılığıyla bir giriş oluşturduğunuzda, nihai sonuca olabildiğince yakın görüneceğinden emin olacaksınız.
Bazı ekran çözünürlüklerinin ayarlarınızı değiştireceğini ve örneğin yalnızca bir sütun göstereceğini unutmayın; bu, içeriğinizin genişliğine bağlı olacaktır.
Bazı WordPress şablonları, yan menüde, sözde kenar çubuğunda oldukça dardır veya tam tersi, makaleler bölümünde dardır ve doğal olarak bazı web yöneticilerinin, örneğin afişleri sığdırmak için belirli sınırları genişletmesi gerekir. Bu yazıda size nasıl olduğunu göstereceğim başlığın, şablonun, makaleler bölümünün veya yan menünün boyutunu değiştirin.
Bunun için şablonun boyutunu değiştirmek gerekebilir.
Şablonun boyutunu hem en başta, kurar kurmaz değiştirmek isteyebilirsiniz, hem de bir dizi makale yazdıktan ve ilk düzinelerce ziyaretçiniz görünmeye başladıktan sonra. Örneğin, blogumdaki reklamlardan ilk birkaç kuruş kazanmayı denemek istediğimde şablonu genişletmem gerekiyordu. Bu amaçlar için, Google-AdSense'ten bir banner reklam sistemi seçildi. Ancak talihsiz bir şekilde en az iki sent kazanmak için iki parametre dikkate alınmalıdır:
- Bir kişinin bir reklama tıklayabilmesi için sistemin vereceği bannerların belli yerlerde olması gerekir. İnternette bunun sol kaydırıcı olduğunu yazıyorlar, oraya kare bir afiş yerleştiriyoruz ve makalenin içine üç kez. En tepede, merkezde, biraz ilerledikten sonra ve en sonunda. Bu düzenleme insanların banner'a tıklaması için ideal olacaktır. Elbette başka seçenekler de var, örneğin resimlerde ama onları bu makale çerçevesinde değerlendirmiyoruz.
- Google, belirli boyutlarda banner'lar yayınlar.
onlar. birinci ve ikinci noktaları birleştirmeliyiz, yani Google veya Yandex'den gelen banner'ların bunun için ayrılan yerlere, sol kenar çubuğunda ve makalelerde yerleştirildiğinden emin olmamız gerekiyor. Şablonum bu amaçlar için çok dar olduğundan ve küçük afişleri asmanın bir anlamı olmadığından, çünkü kimse onlara tıklamayacağından, geriye kalan tek şey yan menüyü ve makaleler bölümünü genişletmek.
Şablonu yatay olarak artırma 1. bölüm, sayıları anlama
Şu veya bu elemanın genişliğini ne kadar artırmamız gerektiğini anlamak için, bir bakışta “orada bir santimetre ve orada yarım santimetre” olduğunu tahmin etmemiz değil, bu sayıları tam olarak piksel cinsinden bulmamız gerekiyor. Hemen hemen her tarayıcı bu konuda bize yardımcı olacaktır, örneğin:
- safari
- firefox
- Google Chrome
Şahsen, Safari örneğini ve sizin için uygun olan herhangi bir tarayıcıyı size göstereceğim. Farklılıklar sadece bir düğmede olmalıdır.
Yani, taban - site boyutumuz 4 öğeden oluşur, şablonun kendisinin boyutu, sayfa boyutu, makale bloğunun boyutu ve sol menü bloğu. Hepsini sırayla artıracağız merak etmeyin korkulacak bir durum yok.
Sol menünün genişliğini değiştirmek için.
Bu durumda, adım 3-5'te yaptığımız gibi hem pikselleri hem de sayfadaki yüzdeyi değiştirebilirsiniz. Bunun için piksel yerine parametreyi değiştirmek yeterlidir.
Bu değerler, genişliğin yüzde kaçının bu veya bu öğe tarafından işgal edilebileceği anlamına gelir. Önemli olan, kenar çubuğunun ve makalenin toplamının% 100 olması ve daha fazla olmaması gerektiğidir, aksi takdirde her şey sayfada yüzer.
Bu kadar. Artık her şeyin uyması için hangi değerleri değiştirmemiz gerektiğini biliyoruz. Geriye kalan tek şey, gerekli verileri stil dosyasına girmektir.
Şablonu yatay olarak artırma 2. bölüm, genişliği değiştirme
Rakamları anladıktan ve bir yere bir kağıda yazdıktan sonra, şimdi onları sadece kendimiz için değil, herkes için değiştirelim. Bunun için:
- FTP ile siteye giriş yapın
- /wp-content/themes/Your theme/style.css dosyasını bulun ve bilgisayarınıza kopyalayın
- Bu dosyanın bir yedek kopyasını oluşturun, örn. belgeler klasörünüze kopyalayın. Böylece bilgisayarda dosyanın biri üzerinde çalışacağımız, ikincisi dokunmayacağımız iki kopyası olsun. İkincisi, yanlış bir şeyi değiştirip ne olduğunu unutmamız durumunda kullanılır.
- Dosyayı uygun bir düzenleyicide açın. Şimdi eski değerleri yenileriyle değiştirmek gibi oldukça basit bir görevle karşı karşıyayız. İki yol var, birincisi kolay, ikincisi ağır. İlk önce arama yaparak eski değeri buluruz ve yerine yenisini yazarız. İkinci yol, stillerin adını aramaktır, stillerin içinde genişliği ararız ve değeri değiştiririz.
Şahsen ben kendim için ilk kolay yolu seçtim çünkü bu, sadece birkaç saniye içinde değişiklik yapmanıza izin veriyor. Yani, 980 değerini arıyoruz. Dosya araması, değiştirmem gereken sadece iki parametre verdi.
İlki, tüm sitenin genişliğinden sorumludur:
| 1
2
3
4
5
6
7
8
| #sayfa ( minimum yükseklik: 100 piksel; açık: her ikisi; genişlik: %96; dolgu: 0 ; dolgu üst: 24 piksel; maksimum genişlik: 980 piksel; taşma: gizli; |
#sayfa ( min-height: 100px; clear: her ikisi; genişlik: %96; padding: 0; padding-top: 24px; max-width: 980px; taşma: gizli;
İkincisi, iki öğenin genişliği, makale listesi ve sol menü içindir:
| 1
2
3
4
5
6
7
8
9
10
11
| . ana konteyner (genişlik: 980 piksel; kenar boşluğu: 0 otomatik; taşma: gizli; dolgu: 0 ; arka plan: #fff; konum: göreli; - webkit- kutusu- gölge: 0px 0px 10px rgba(50 , 50 , 50 , 0.17 ) ;-moz- kutu gölgesi: 0px 0px 10px rgba(50 , 50 , 50 , 0.17 ) ; kutu gölgesi: 0px 0px 10px rgba(50 , 50 , 50 , 0.17 ) ; ) |
Ana kapsayıcı ( genişlik: 980 piksel; kenar boşluğu: 0 otomatik; taşma: gizli; dolgu: 0; arka plan: #fff; konum: göreli; -webkit-box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.17) ; -moz-box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.17); box-shadow: 0px 0px 10px rgba(50, 50, 50, 0.17); )
Tek yapmamız gereken değerleri 980'den 1080'e değiştirmek ve geri yüklemek.
Hepsi bu kadar, ancak herhangi bir sorunuz varsa, yorumlara yazın, yoksa size yardımcı olmaktan memnuniyet duyarım.
Çoğu zaman, bir wordpress şablonu seçerken bir sorun ortaya çıkar - bu, blokların yetersiz genişliğidir. Birçoğunun hemen şablonun genişliğini değiştirme isteği vardır. Html veya php konusunda bilgili olanlar için bu herhangi bir özel sorun yaratmayacaktır. Ancak hazırlıksız bir kişi için bir wordpress şablonunun boyutunda nasıl değişiklik yapılacağı hakkında ayrıntılı yazmak için bütün bir broşüre ihtiyacınız var.
En basit şey sipariş vermek ama bunu yapmaya çalışanlar kendileri bilgi kazanıyor. Gelecekte, her küçük şey için uzmanlara başvurmak zorunda kalmayacak. Bunu yapmanın "temelini" bilmek oldukça mümkündür. Herhangi bir değişikliğe başlamadan önce, kaynağınızın tüm sayfalarının bir yedeğini aldığınızdan emin olun. Hatalı çalışma durumunda, sitenin orijinal görünümünü kolayca geri yükleyebilirsiniz.
İnanılmaz sayıda wordpress şablonu var, hepsi farklı ve her biri kendi yolunda değişiyor. Ancak ana sayfanın genişliği, başlık, sol ve sağ sütunlar, alt bilgi gibi temel bloklar her şeye sahiptir. İş için ihtiyacımız var:
-
İnternet tarayıcısı Mozilla Firefox.
-
Firebug eklentisi Firefox'ta yüklü.
İhtiyacınız olan her şey indirilip yüklendiğinde ve kullanıma hazır olduğunda, seçilen şablonu Mozilla Firefox'ta açın ve hata simgesine tıklayarak Firebug'u başlatın.
Eklenti Paneli
Alt kısımda, içinde çalışacağımız eklenti paneli açılır. Yaptığınız tüm değişiklikler hemen monitörün üst kısmında görüntülenecektir. Sağdaki sekmede seçilen öğenin CSS stilini, solda sayfanın html kodunu görüyoruz. Şablonun genişliğini artırmak veya azaltmak için bilmemiz gereken ilk şey, tabanın mevcut boyutudur. Eklentimizin imleç simgesine tıklayın.
Sayfadaki öğeler farklı renklerle vurgulanacak ve sitenizin yapısını ayrıntılı olarak tanımak için sayfanın her bir öğesini vurgulayabileceksiniz. Adı aldıktan sonra, tam boyutları öğreneceksiniz. Geçerli genişlik ayarlandıktan sonra bu değere sol tıklayın. Deneme yöntemi ile en uygun genişliği oluşturuyor ve gösterimini test ediyoruz.
Herhangi bir öğe ve değerle deneme yapmaktan çekinmeyin. Güncel değişiklikler sunucudaki sayfanızı hiçbir şekilde etkileyemez, yalnızca eklenti penceresinde (Mozilla'nın geçerli önbelleği) etkindirler. Güncelleme yaptığınızda, tüm ayarlar sıfırlanır.
style.css'yi düzenle
Şimdi wordpress şablonu için bu değişiklikleri kaydetmeye devam ediyor. Genellikle şablon genişliği style.css ile yazılır. Web sitesinin yönetim paneline → görünüm → editör → style.css → satır 79'a giriyoruz, genişlik değerini değiştiriyoruz. Kurtarırız.
Yazardan: Merhaba arkadaşlar. WordPress temasıyla ilgili başka bir yazımızda, WordPress şablonu nasıl değiştirilir sorusunu ele alacağız. Daha önce bir WordPress şablonunu değiştirme ihtiyacıyla hiç karşılaşmadıysanız, bu makaleyi okuduğunuzdan emin olun çünkü er ya da geç, büyük olasılıkla bir WordPress şablonunu özelleştirme ve düzenleme sorunlarıyla uğraşmak zorunda kalacaksınız.
Başlamak için, kullanıcıların bir WordPress şablonunu kendileri için özelleştirirken karşılaştıkları en yaygın soruları tanımlayalım. İşte bunların örnek bir listesi:
wordpress şablonu nasıl düzenlenir
WordPress'te şablon genişliğini değiştirme
wordpress şablonu nasıl yeniden boyutlandırılır
Bir wordpress şablonunun rengi nasıl değiştirilir?
wordpress şablonunda yazı tipi nasıl değiştirilir
Ve bu, karşılaşabileceğiniz veya başkalarının çözmesine yardımcı olabileceğiniz, sipariş üzerine web siteleri geliştiriyorsanız bir ücret karşılığında da dahil olmak üzere, sorunların yalnızca küçük bir listesidir.
Yukarıdaki listedeki tüm sorular, site için kullanılan temaya bağlı olarak iki şekilde çözülebilir. Düzen bilgisi gerektirmeyen en basit seçenekle başlayalım. Bu seçenek, şablon ayarlardan düzenlemeyi destekliyorsa uygundur.
Görünüm - Özelleştir bölümüne gidelim ve sayfanın sol tarafında sitenin ana sayfasını ve mevcut site ayarlarını görelim. Bunlar arasında tasarım ayarları olabilir.
Örneğin sitenin renk düzenini değiştirmeye çalışalım. Renkler menüsüne gidip sitenin yan ve orta kısımlarının arka planını değiştirelim.
Gördüğünüz gibi, bu oldukça kullanışlı ve bir WordPress şablonunun rengini değiştirmek oldukça basit - sonucu hemen görüyoruz ve değerlendirebiliyoruz.
Ancak, her tema ihtiyacımız olan tüm WordPress şablon özelleştirmelerini sunmaz. Örneğin, WordPress'te şablonun genişliğini değiştirmenize izin veren ayarların olması pek olası değildir, örneğin mevcut temada bile şablondaki yazı tipini değiştirmenize izin veren hiçbir ayar yoktur vb. Bu durumda nasıl olunur? Burası ikinci seçeneğe başvurmamız gereken yer ve burada bazı düzen becerilerine zaten ihtiyaç var.
Bu nedenle, çoğunlukla yalnızca bir dosyayı düzenlememiz gerekir - bu, style.css stil dosyasıdır. Tema klasörünüzde bulunur. Örnek olarak yazı rengini değiştirelim. Bu arada, bunu doğrudan WordPress yönetici panelinden yapabilirsiniz. Sadece dikkatli olun ve siteyi yanlışlıkla "kırmamaya" dikkat edin. Herhangi bir değişiklik yapmadan önce temanızı yedeklemek en iyisidir. Bu nedenle, Görünüm - Düzenleyici menüsüne gidin ve varsayılan olarak tema stili dosyasını düzenleme için açmış olmanız gerekir.
Değilse, sağdaki listeden bu dosyayı seçin, buna Stil Sayfası (style.css) denir. Çoğu zaman, yazı tipi rengi gövdede ayarlanır, bu yüzden bu öğenin stillerini bulalım ve yazı tipi rengi olarak kırmızı rengi ayarlayalım.
Dosyayı kaydettikten sonra siteyi güncelleyebilir ve sitedeki ana yazı tipi için kırmızı rengi görebiliriz.
Gördüğünüz gibi, bir WordPress şablonunu kendiniz için özelleştirmek oldukça basit bir iştir. Biraz CSS bilgisiyle, WordPress şablonunu değiştirebilecek ve şablonu gerektiği gibi özelleştirebileceksiniz. Aynı şema ile diğer benzer sorunları çözebiliriz. Bunun üzerine sana veda ediyorum. İyi şanslar ve yakında görüşürüz!