Bir tema şablonuna kenar çubuğu nasıl eklenir. Yeni kenar çubukları WordPress süper eklentisi WordPress kenar çubuğu nedir

  • 02.07.2020

İyi bir web sitesi oluşturmak istiyorsanız şablonunuzu yeniden boyutlandırabilmelisiniz. Varsayılan olarak, birçok tema garip şablon tel kafes boyutları sunar. Dar konular çok geniş olduğu kadar kötüdür. Sitedeki işlevleri yerine getirmek için doğru olan bir "altın ortalamaya" sahip olmalısınız. Kaynağınızın içeriğinin doğru şekilde görüntülenmesinin tek yolu budur ve tüm widget'lar kenar çubuğuna sığar. Bu makalede, yan sütunların boyutunu ayarlamanın yollarının neler olduğunu öğreneceksiniz.

Kenar çubuğu olmadan site işe yaramaz görünüyor. Sayfanın içeriğini bir şekilde görsel olarak seyreltmek istiyorsanız, belirli bir boyutta bir kenar çubuğu ekleyerek WordPress şablonunu değiştirmelisiniz. Genellikle kenar çubukları varsayılan olarak zaten kuruludur. Ancak kenar çubuğunun genişliği belirli bir proje için her zaman optimal değildir. Bir WordPress sitesinin yan kısmının genişliğini ve yüksekliğini değiştirme yöntemlerine bir göz atalım.

Kenar çubuğunun boyutu ne olmalıdır

Hiçbir şeyi değiştirmeniz gerekmeyebilir. Kenar çubuğunu yalnızca "çarpık" ve doğal görünmüyorsa değiştirin. İlk olarak, kenar çubuğunun içeriği içeren sayfanın ana gövdesinden daha dar olduğundan emin olun. Kenar çubuğu sitenin önemli bir parçası değildir, bu yüzden fazla dikkat edilmemelidir - en fazla sayfanın görünen kısmının %40'ını kaplayabilir. Lütfen iki (veya daha fazla) kenar çubuğunuz varsa bunların genişliklerinin tüm sayfa genişliğinin %50'sini geçmemesi gerektiğini unutmayın. Yalnızca bir yan sütun kullanmak daha iyidir - bu şekilde daha verimlidir.

Yalnızca bir kenar çubuğu kullanan siteler için tasarımcıların "altın kuralı" vardır. Bu kural, bir sayfada yalnızca bir kenar çubuğu varsa, site genişliğinin %38'inden fazlasını kaplamaması gerektiğini belirtir. Birçok seçkin web tasarımcısı böyle gizemli bir figürden bahseder (örneğin: Jarel Remik).

Yüksekliğe gelince, kenar çubuğunun sitenin tepesinden dışarı çıkmaması önemlidir. Üst sınırdaki yüksekliği sayfanın ana gövdesi ile aynı olmalıdır. Ancak sitenin taban kısmını daha uzun hale getirmek için alt sınır değiştirilebilir. Sitedeki her şeyi kenar çubuğuna sıkıştırmaya çalışmanıza gerek yok - sadece temel bilgiler. Ve gerçekten çok fazla bilgi varsa, iki yan sütun yapın, ancak kenar çubuğunu sitenin altbilgisine kadar uzatmanıza gerek yoktur.

Kenar çubuğu manuel olarak nasıl yeniden boyutlandırılır

Şimdi kenar çubuklarını ve şablon çerçevesinin kendisini herhangi bir ekstra kullanmadan bağımsız olarak nasıl yeniden boyutlandıracağımız hakkında konuşalım. Bu yöntem, sayfanın kaynak kodunu değiştirmeyi içerir. Şablon boyutu parametresinin eklendiği html etiketlerindedir. Arka plan olarak özel boyutlu bir resim yüklediyseniz, yeniden boyutlandırmanın olumsuz sonuçları olabileceğini lütfen unutmayın. Bu nedenle, site düzeni aşamasında tel kafes parametrelerini değiştirmek daha iyidir.

Koddaki kenar çubuğu parametreleri bir blok şeklindedir. Yan sütunlar da dahil olmak üzere tüm çerçevenin boyutunu değiştirmek için koda girmeniz ve dönüşümlü olarak her bir öğenin genişliğinin ve yüksekliğinin dijital parametrelerini ayarlamanız gerekir. Yani:

  • başlık - site başlığının boyutundan sorumludur;
  • bg ana içeriktir, yani sayfanın yazıların yayınlanacağı kısmıdır (bu, kenar çubuğunun bulunduğu kısımdır);
  • altbilgi, sitenin altbilgisidir, yani altbilgisidir.

Belirli bir bloğun boyutlarını bulmak için "Sayfa kodunu görüntüle" bölümündeki sarmalayıcı öğeye tıklamanız gerekir. Yan tarafta, tarayıcının CSS bölümünde, öğenin genişliğinin piksel cinsinden sayısal değerlerini göreceksiniz. Tüm tel çerçeveyi yeniden boyutlandırmak için ana öğeyi düzenlemeniz ve ardından diğer öğelerde değişiklik yapmanız gerekir. Sitenizin kullanıcıların önüne “atlamaması” için bunu yerel bir sunucuda yapmanız önerilir. Ve genel olarak, bir İnternet projesi başlatmadan önce bile bunu yapmak daha iyidir.

Kenar çubuğunu yeniden boyutlandırmak için şöyle bir satır bulun

Bu satır, sayfanın orta kısmının parametrelerinden, yani içerik bloğundan ve yan sütunlardan sorumludur. “Ana” satıra dokunmayın - bu sitenin ana kısmıdır. “Mainnav” etiketini bulmanız gerekiyor - bu kenar çubuğu. Tek yapmanız gereken CSS'deki genişlik öğesini değiştirmek - farklı bir boyut değeri girin. Kenar çubuğunu küçültebilir veya büyütebilirsiniz, ancak sitenizin doğru görüntülendiğinden emin olmak için yukarıdaki boyutlandırma ipuçlarını izlemeyi unutmayın.

Yapılan değişikliklerin kaydedilebilmesi için sunucu üzerinde yapılması gerekmektedir. Yani, başlangıçta yerel barındırmadaki ayarlamaları test edebilirsiniz, ancak daha sonra düzenlenen style.css dosyasını kopyaladığınızdan ve ana sunucunun veritabanlarına eklediğinizden emin olun. Ancak o zaman değişiklikler yürürlüğe girecek.

Kenar çubuğu yeniden boyutlandırma eklentisi

Basamaklı stil sayfalarının iç kısımlarına girmek ve düzenlenmesi gereken öğeleri aramak istemiyorsanız, WordPress eklentisi için Görsel Kenar Çubuğu Düzenleyicisini kullanabilirsiniz. Bu, yan hoparlörler oluşturmak için tasarlanmış özel bir modüldür. Daha küresel Görsel Besteci aracının bir parçasıdır.

Görsel Besteci eklentisi, WordPress için doğal bir sayfa oluşturucudur. Bununla beraber, sıfırdan hazır bir şablon oluşturabilirsiniz. Modül kısa kodlarla çalışır ve kurulumu çok kolaydır. Tek yapmanız gereken kenar çubuğunu yeniden boyutlandırmak değilse, Visual Composer eklentisini indirin ve Visual Sidebar Editor'ı bir eklenti olarak ekleyin. Sorun sadece sayfanın kenar çubuğunun boyutunda ise Görsel Kenar Çubuğu Düzenleyici modülü yeterli olacaktır.

Kenar çubuğunu değiştirmek için bir eklenti kullanmanın avantajı, her şeyi otomatik olarak yapmasıdır. Yani, Sürükle ve Bırak sistemini kullanarak neyi değiştirmek istediğinizi gösterirsiniz ve modül, isteklerinize göre eleman kodunu bağımsız olarak ayarlar. Html etiketlerini düzenlemede elinizi denemek istiyorsanız, eklenti size böyle bir fırsat sağlayacaktır. Ek olarak, siteye ek işlevler eklemek için özel kısa kodları vardır - 40'tan fazla uzantı.

Sayfaları düzenlemek için böyle bir eklenti kullanmanın bir başka artısı, motor versiyonundan bağımsız olarak değişiklikleri kaydetmektir. WordPress'i güncelleseniz bile şablon değişmez - modül tarafından kontrol edilir. Bu nedenle, daha eski sürümlere yükseltebilir veya WordPress'i güncelleyebilirsiniz - bu artık kenar çubuğunun boyutuna zarar vermez. Ek olarak, eklenti uygun içe ve dışa aktarma ile çalışır - yani, kenar çubuklarını bir siteden kopyalayabilir ve başkalarına aktarabilirsiniz. Ve en önemlisi, modül son derece anlaşılır bir prensibe göre çalışır - yeni başlayanlar bile hızlı bir şekilde ustalaşacaktır.

Görsel Kenar Çubuğu Düzenleyicisi'nin çalışmasını beğendiyseniz, tam eklentiyi - Görsel Besteci modülünü yüklemeyi düşünün. O zaman portal sayfalarındaki herhangi bir öğeyi düzenlemeniz kolay olacaktır.

Kenar çubuğu hemen hemen her sitenin bir parçasıdır, genellikle içerik alanının soluna, sağına veya altbilginin önüne yerleştirilir. WordPress kenar çubukları istisna değildir. Tek fark, WordPress'te kenar çubuğunun, widget'ların otomatik olarak görüntülendiği alandır. WordPress'te sınırsız sayıda kenar çubuğu oluşturabilirsiniz, ancak örneğin, ana içerik alanının solunda ve sağında iki kenar çubuğu oluşturacağım.

WordPress kenar çubuklarını kaydetme

Kenar çubuklarının admin panelinde görünmesi için öncelikle onları kaydetmemiz gerekiyor. Başka bir deyişle, function.php dosyanıza aşağıdaki kodu ekleyin:

/ ** * Kenar çubuklarını kaydedin. * / function fwbs_widgets_init () (register_sidebar (dizi ("ad" => __ ("Sağ sütun", "fwbs")), "id" => "kenar çubuğu-1", "açıklama" => __ ("Sağ kenar çubuğu " ," fwbs ")," Before_widget "=>"

"," Before_title "=>"

"," after_title "=>"

",)); register_sidebar (dizi ("ad "=> __ (" Sol sütun "," fwbs ")," id "=>" kenar çubuğu-2 "," açıklama "=> __ (" Altbilgideki sol sütun sitenin "," fwbs ")," Before_widget "=>" "," Before_title "=>"

"," after_title "=>"

",));) add_action (" widgets_init "," fwbs_widgets_init ");

Şimdi "widget'lar" bölümündeki yönetici alanına gidin ve sonucu görün. İşte aldığım şeyin bir resmi:


Ancak aynen böyle, Front-End'de kenar çubukları görünmeyecek, sitenin ön tarafında çağrılmaları gerekecek. Ama daha fazlası aşağıda.

WordPress kenar çubukları oluşturmak için yukarıdaki kodu ayrıştırma

Her şey ilk bakışta göründüğü kadar karmaşık değil.

  • "name" => __ ("Sağ sütun", "fwbs") - widget bölgesinin adı, herhangi bir ad yazabilirsiniz, köşeli ayraçlar arasında dikkatlice, ekranda nerede görüntülendiğini görebilirsiniz;
  • "id" => "kenar çubuğu-1" - Kimlik, kenar çubuğuna atanan benzersiz bir tanımlayıcıdır, tüm kenar çubuklarının diğer kimliklerden farklı olarak kendilerine ait olması gerekir;
  • "description" => __ ("Sağ taraftaki sütun", "fwbs") - widget alanının adına benzer açıklama;
  • "before_widget" => "
  • "after_widget" => ""- Kenar çubuğu bölgesini kapatan HTML etiketi. Bildiğimiz gibi, bazı istisnalar dışında tüm HTML etiketleri eşlenmelidir (açma ve kapama);
  • "before_title" => "

    "- widget'ın başlığı, sınıfla birlikte bir H4 etiketine sarılacak

    , H1, H2, H3, H4, H5, H6 başlığının önemini değiştirebilir ve kendi sınıflarınızı atayabilirsiniz;

  • "after_title" => ""- kapanışwidget'ın başlığı için eşleştirilmiş etiket.

Bu kodla iki WordPress widget bölgesi kaydettim, şimdi bunları ekranda göstermem gerekiyor.

WordPress kenar çubuklarını görüntüleme

Kenar çubuklarını şablonda herhangi bir yerde görüntülemek için aşağıdaki kodu doğru yere yazmak mantıklıdır:

Kod hakkında biraz açıklama:

  • - Komut veren PHP kodu, kenar çubuğunda id = kenar çubuğu-1 altında widget'lar varsa, o zaman görüntülenmelidir, widget'lar yoksa kenar çubuğu görüntülenmez;
  • - Şablon kodunda yazdığınız yerde id = sidebar-1 altındaki kenar çubuğunu çağıran PHP kodu.

Fakat gördüğünüz gibi WordPress şablonlarında kenar çubuğu çıktı kodu ayrı sidebar.php dosyalarına yerleştirilir ve ardından sidebar.php dosyasındaki içerik şablonda doğru yerde görüntülenir. WordPress'in içeriği dinamik olarak gösterdiğini ve site şablonunun birkaç bölümden oluştuğunu bildiğimize göre, bölümlerinden biri de sidebar.php dosyasıdır.Bunu ben yapayım.

sidebar.php dosyasını oluşturma

Bir dosya oluşturun, örneğin sidebar-right.php, ona bir başlık verin ve yukarıdaki kodu içine yapıştırın. Hep birlikte şöyle görünecek:

Örnekte görebileceğiniz gibi, kodu ek HTML işaretlemesi ile tamamladım.

Şimdi, widget alanını görüntülemek için doğru yere aşağıdakileri yazmak kalıyor:

Sol taraftaki sütun için, sidebar-left.php dosyası buna göre oluşturulur ve şablonda doğru yerde aşağıdaki gibi gösteririz:

Dedikleri gibi, kodda bir fark bulun.

İşte bu, kenar çubukları oluşturuldu, şimdi sadece küçük şeyler meselesi, onlar için HTML şablonunda işaretleme oluşturmak ve CSS stilleri yazmak, ancak bu tamamen farklı bir hikaye. şimdi yeni bir rubrik açtım

Her şeyden önce, kenar çubukları hakkında birkaç genel noktayı açıklığa kavuşturalım:

  • Kenar çubuğu- bu, sitenin ana içeriğin solundaki veya sağındaki alandır (tek kelimeyle, yan sütun),
  • WordPress'te Kenar Çubuğu- bu, sitede widget'ların görüntülendiği herhangi bir alandır;

Her iki durumda da, kenar çubuklarının amacı aynıdır - site navigasyonu, sosyal ağlara bağlantılar, sosyal ağ widget'ları, herhangi bir üçüncü taraf hizmetin widget'ları (örneğin, uçuş araması), vb.

WordPress'te kenar çubuğunun tanımından tek fark, site sayfasında herhangi bir yere yerleştirilebilmesidir (ancak çoğu zaman içeriğin ve altbilginin sağında ve solundaki kenar çubuklarıdır).

Bu adımda, biri kenar çubuğunda ve diğeri sitenin alt kısmında olmak üzere iki kenar çubuğunun nasıl oluşturulacağını adım adım anlatacağız.

Adım 1. Kenar çubuğunu kaydedin

Yeni başlayanlar için, farklı WordPress temaları kenar çubuklarını farklı şekilde kaydeder, bazıları hala 2007 yöntemini kullanır. Niye ya? Sadece bazı sahte geliştiriciler bilmeden diğer temalardan kod kopyalamayı severler, "her duruma uygun" şablonları olarak kullandıkları temanın 5 yıldan fazla bir süredir güncellenmemiş olması umurlarında bile değildir.

Demek istediğim, bugün size vereceğim kod, temanızda kullanılan koddan farklı olabilir - endişelenmeyin, eski kodu yenisiyle değiştirin.

Dediğim gibi, iki kenar çubuğu oluşturacağız - kenar çubuğunda ve altbilgide, işlev bize bu konuda yardımcı olacaktır (kodda net olmayan bir şey varsa, işlev belgelerine bakın). widgets_init kancası gerekli!

Functions.php dosyası için kod:

işlev true_register_wp_sidebars () ( / * Kenar çubuğunda, ilk kenar çubuğu * / register_sidebar (dizi ("id" => "true_side", // benzersiz kimlik "ad" => "Yan sütun", // kenar çubuğu adı"açıklama" => "Kenar çubuğuna eklemek için widget'ları buraya sürükleyip bırakın.", // "before_widget" açıklaması => "

" , // widget'lar varsayılan olarak görüntülenir
  • -liste"after_widget" => "
  • "," Before_title "=>"

    " , // varsayılan widget başlıkları

    "after_title" => "

    " ) ) ; / * Bodrumda - ikinci kenar çubuğu * / register_sidebar (array ("id" => "true_foot", "name" => "Footer", "description" =>) "Widget'ları altbilgiye eklemek için buraya sürükleyip bırakın.", "before_widget" => "
    " , "after_widget" => "
    "," Before_title "=>"

    "," after_title "=>"

    "));) add_action (" widgets_init "," true_register_wp_sidebars ");

    sayfadan anladığım bu Görünüm> Widget'lar:

    Zaten şimdi kenar çubuklarına widget ekleyebilir ve özelleştirebilirsiniz, şimdi bunları sitede görüntülemeniz yeterlidir.

    Adım 2. Site sayfalarında kenar çubukları nasıl görüntülenir?

    İlk adımdaki gibi, farklı temalarda sitede kenar çubuklarını görüntülemekten sorumlu farklı kodlar bulabilirsiniz. Fonksiyonları kullanarak kendim kullandığım tek bir yöntemi ele alacağım.

    Özetle, bu işlevler ne içindir:

    • - kenar çubuğunda widget olup olmadığını kontrol eder,
    • - bir kenar çubuğu görüntüler;

    Şimdi son adımda oluşturduğumuz bu iki kenar çubuğunu görüntüleyelim. Ve kenar çubuğuyla başlayalım:

    Kodu nereye ekleyeceğiz? Kenar çubuklarını görüntülemek istediğiniz yere, oraya ekleyin. Hangi dosya olduğundan emin değil misiniz? Genel olarak, tamamen temanıza bağlıdır, ancak büyük olasılıkla kenar çubuğu kodunu sidebar.php'ye ve altbilgi kodunu da footer.php'ye ekleyin. Ayrıca işlevlerin belgelerine de ihtiyacınız olabilir ve.

    Aşağıdaki ipuçlarının her biri sitede çok ciddi hatalardan kaçınmanıza yardımcı olacaktır, ancak PHP ve WordPress'te iyi bilginiz varsa, bu ipuçlarından yeni bir şey öğrenmeyeceksiniz.

    • Görüntülenen sadbarda widget yoksa, if ve else kullanarak bu durumda yürütülecek kodu ayarlayabilirsiniz:

      if (is_active_sidebar ("true_foot")): dynamic_sidebar ("true_foot"); Başka: // kenar çubuğunun boş olması durumunda varsayılan kod endif;

    • İşlev ve diğer WordPress işlevleri için PHP function_exists () kullanmanıza gerek yoktur. Sadece bazen kullanırlar. Bunun faydası yok.
    • Bazıları dosyayı içerir kenar çubuğu.php include () veya require() yoluyla. Bununla ne elde etmek istiyorsunuz? Artan verimlilik? Sitenizin yavaş yüklenmesinin nedeninin bu olduğundan şüpheliyim. Ve bağlanmak için kenar çubuğu.php bunun için özel olarak tasarlanmış bir işlev kullanıyoruz

    3 dk okuma 29.11.2016 tarihinde yayınlandı

    Merhaba! Bir WordPress sitesi için en ilginç ve en kullanışlı eklentileri ayırmaya devam ediyoruz! Bugün siteniz için sınırsız sayıda yeni kenar çubuğu oluşturmanıza olanak sağlayacak Süper kullanışlı bir eklenti hakkında bilgi edineceksiniz! Kenar çubuklarını sitenizin herhangi bir yerinde görüntüleyebilirsiniz. Basit bir kısa kod veya php kodu kullanarak sitenize kenar çubukları ekleyebilirsiniz. Kenar çubukları, gönderilere, sayfalara, widget'lara, kenar çubuklarına, altbilgilere, site üstbilgilerine vb. kolayca eklenebilir.

    Ayarlarda sayfa adını belirterek belirli sayfalar veya gönderiler için kenar çubukları oluşturabilirsiniz. Örneğin, yalnızca bir gönderi için görünen bir kenar çubuğu oluşturabilirsiniz. Belirli kullanıcılar için kenar çubuklarının görünümünü özelleştirebilirsiniz. Çok basit ayarlar. Süper kullanışlı eklenti!

    Kenar çubuğu widget'ı WordPress eklentisi ekleyin

    Eklentiyi doğrudan WordPress yönetici panelinizden yükleyebilirsiniz. Sayfaya gidin: Eklentiler - Yeni Ekle, arama formuna eklentinin adını girin, Enter'a basın, eklentiyi kurun ve etkinleştirin.


    Daha öte, eklentiyi kurup etkinleştirdikten sonra sayfaya gidin: Yan Paneller - Yeni Ekle... Yeni kenar çubuğu için bir ad girin. Alana tıklayarak "İçerik türünü seçin" yeni kenar çubuğunun tam olarak nerede görüntüleneceğini seçebilirsiniz. Türü seçerseniz - sayfalar veya gönderiler, o zaman kenar çubuğunun hangi belirli sayfalarda görüntüleneceğini seçebilirsiniz.


    Daha öte, Sağdaki sayfanın alt kısmında, alanda "Eylem" bir değer seçebilirsiniz - Kısa Kod / Şablon Etiketi. Oluşturduğunuz kenar çubuğunun görüntüleneceği site yerine yapıştırmanız gereken bir kısa kod ve php kodunuz olacaktır. alanında "Görünürlük" bu kenar çubuğunun görüntüleneceği kullanıcıları seçebilirsiniz.

    Daha öte, sayfaya git: Görünüm - Widget'lar... Bu, oluşturduğunuz tüm kenar çubuklarını göreceğiniz yerdir. Widget'ı kenar çubuğuna sürüklemeniz yeterlidir, kenar çubuğunun kurulu olduğu yerde görünecektir.


    Bir gönderiye veya sayfaya kenar çubuğu eklemek istiyorsanız, düzenlemek için sayfayı veya gönderiyi açın. Kenar çubuğu kısa kodunu sayfa içeriğine ekleyin. Sayfayı yenileyin.


    İlk etkin widget panelini görüntüler (kenar çubuğu - en az bir widget içeren panel). Sitede birden fazla widget paneli varsa hangisinin görüntüleneceğini, panelin kimliğini veya numarasını belirtebilirsiniz.

    dynamic_sidebar (), bir dönüş değeriyle doğru veya yanlış döndürür, ayrıca widget çubuğunu görüntüler. Dönüş değeri, örneğin panelde hiç pencere öğesi olmadığında pencere öğelerini değiştiren kodun işlenip işlenmediğini belirlemek için kullanılabilir (bkz. örnek # 1).

    İadeler

    widget'lı bir panel bulunursa true . panel veya widget yoksa false.

    kullanım

    $ indeksi (dize / sayı) Paneli kaydederken register_sidebar () işlevinin id parametresinde belirtilen panel tanımlayıcısı. Bir sayı belirtilirse, ID kenar çubuğu- $ indeksi olan panel aranacaktır.
    Varsayılan: 1 (kenar çubuğu-1)

    Örnekleri

    # 1 Varsa, kenar çubuğunu görüntüleyin.

    Bu örnek, ilk boş olmayan kenar çubuğunun nasıl görüntüleneceğini (kayıt sırasında kenar çubuğu kimliği belirtilmemiştir) veya bulunamazsa belirtilen kodun nasıl işleneceğini gösterir:

    # 2 İstediğiniz kenar çubuğunu görüntüleyin.

    # 3 Panelin varlığını kontrol edin ve görüntüleyin

    Örnek 2'de, içindeki panel ve widget'ların varlığını kontrol etmedik. Bu örnekte, gereksiz HTML etiketlerini görüntülememek için panelin varlığını kontrol edeceğiz (