WordPress Döngüsü Oluşturma ve CSS'yi Özelleştirme

Bölüm 1'i tamamladığınızı varsayarsak, bu bölümde WordPress döngüsünü oluşturacağız ve CSS'yi özelleştireceğiz. WordPress döngüsü, WordPress tarafından web sitenizdeki içeriği görüntülemek için kullanılan PHP kodudur. Döngüyü düzenlemek için PHP'ye aşina olmanız gerekir. Eğer değilseniz, temel bilgileri öğrenmenize yardımcı olacak çok sayıda çevrimiçi kaynak bulunmaktadır. Temel PHP bilgisine sahip olduğunuzda, metin düzenleyicinizi açın ve loop.php adlı yeni bir dosya oluşturun. Bu dosyada WordPress döngüsünü oluşturacağız. Yapmanız gereken ilk şey WordPress'e Bölüm 1'de oluşturduğumuz header.php dosyasını yüklemesini söylemek. Döngü, web sitenizdeki tüm içeriği görüntülemekten sorumludur. Bunu, WordPress veritabanınızdaki tüm gönderiler arasında dolaşarak ve bunları sayfada görüntüleyerek yapar. Döngüyü oluşturmak için aşağıdaki kodu loop.php'ye ekleyin: Bu kod, WordPress veritabanında herhangi bir gönderi olup olmadığını kontrol eder. Gönderiler varsa, her biri arasında dolaşacak ve sayfada görüntülenecektir. Döngüyü ayarladığımıza göre, içine biraz içerik eklememiz gerekiyor. Bu örnekte, her gönderinin başlığını ve içeriğini görüntüleyeceğiz. Döngünün içine aşağıdaki kodu ekleyin: Bu kod, her gönderinin başlığını ve içeriğini görüntüler. Döngüyü ayarladığımıza göre, ona stil vermek için biraz CSS eklememiz gerekiyor. Metin düzenleyicinizde style.css adında yeni bir dosya oluşturun. Aşağıdaki kodu style.css dosyasına ekleyin: .post { margin-bottom: 40px; } Bu kod, her gönderinin altına bir kenar boşluğu ekler. Bu, sayfadaki yayınları boşaltmaya yardımcı olacaktır. Artık döngü ve CSS kurulumuna sahip olduğumuza göre, temamıza birkaç dosya daha eklememiz gerekiyor. Metin düzenleyicinizde footer.php adlı yeni bir dosya oluşturun. Foote'a aşağıdaki kodu ekleyin

(Bölüm 2) Bootstrap bir WordPress Teması için ne yapar ve neden bu kadar popülerdir. Bu öğretici, Bootstrap CSS çerçevesiyle sıfırdan bir WordPress teması oluşturma sürecinde size yol gösterecek bir dizi öğreticinin ikinci bölümüdür. Bu, başlık alanı , gezinme, kenar çubuğu ve alt bilgi alanları oluşturma konusundaki tartışmamızın üçüncü ve son bölümüdür. Blogu aktif olarak işaretlemek için etiket satırı ve blog adı artık sayfanın üst kısmında görüntülenecektir. Altbilgi alanında Altbilgi – Telif Hakkı Metni adlı bir widget olacaktır. Aşağıda, bu bölümü WordPress'e dahil etmek için birkaç seçenek bulunmaktadır. Bir WordPress teması, ona ekstra widget'lar ve Widget Alanları eklenerek widget'lanır.

bootstrapstarter_widgets_init() işlevini başlatmak için footer.php dosyasına şu satırları ekleyin: footer-copyright-text ve sidebar-module-inset. Burada iki kenar çubuğu vardır: biri gri arka plana sahip, diğeri siyah arka plana sahip. Başlangıç ​​şablonuna ilk baktığınızda, widget'ın en üstteki widget'ı (Hakkında) için turuncu bir arka plan görünür ve bir başlık girerseniz, otomatik olarak h4 etiketlerine sarılır. dynamic_sidebar()'ı kullanarak, Altbilgi – Telif Hakkı Metni adlı alana atanmış widget'ları görüntüleyebiliriz. Bu adım adım öğreticideki adım adım yönergeleri kullanarak tam özellikli bir blog kenar çubuğu oluşturun. Son index.php dosyası şu sonuçları içerir: Blog alanından hemen sonra bulunabilen Sonuçlar işlevi. Bu, makalenin buradan indirilebilen son halidir.

Gezinme çubuğu ve kenar çubukları için CSS düzeltmeleri ve ayarlamaları da sağlanır. Bu sayfada, kullanırsanız LyraThemes.com'a komisyon ödenmesine neden olabilecek harici satış ortağı bağlantılarıyla karşılaşabilirsiniz. Bu sayfadaki yazılı görüşlerimiz veya incelemelerimiz hakkında hiçbir beyanda bulunmayız veya iddiada bulunmayız.

WordPress'te Bootstrap Temasını Kullanabilir miyiz?

Bootstrap'i WordPress'te kullanmanın en basit yolu, onu zaten destekleyen duyarlı bir temayı etkinleştirmektir. Bootstrap ile, çerçeve temalarının birçoğuna dahil edildiğinden, onu tema geliştiricisinden indirmeye veya yüklemeye gerek kalmadan kullanabilirsiniz.

Bir tema veya eklenti kurulumu, WordPress ile bir Bootstrap web sitesi oluşturmak kadar basit değildir. Bir WordPress teması oluşturmak için bir WordPress barındırma hesabınızın olması gerekir. Bootstrap'i temel olarak kullanarak, WordPress ve Bootstrap birlikte çalışabilir. Her iki sistemin de kullanıcı dostu arayüzünün altında birçok teknik detay gizlidir. Çok sık sıfırdan bir WordPress teması oluşturamazsınız. Bootstrap tabanlı bir WordPress teması hakkında fikir edinmek için, önceki bir sürümden gerekli dosyalardan birkaçını kopyalayın. Tema WPBootstrap olarak adlandırılacak ve dizine aynı ad (küçük harfle) verilecektir.

Bir WordPress temasına Bootstrap nasıl ekleyebilirim? Birkaç seçenek var. Aşağıdakiler, header.php ve footer.php dosyalarına dahil edebileceğiniz Bootstrap CSS ve JavaScript kitaplıklarıdır. Tema dizinine yüklenerek ve ardından ekran görüntüsü.png dosyası kullanılarak temaya bir önizleme görüntüsü eklenebilir. Bir WordPress teması oluşturmak çok iştir, bu yüzden dosyaları başka bir temadan kopyalamanızı öneririm. Bootstrap'in kendi kuralları ve uygulamaları olduğundan, bunları öğrenme prosedürü de izlenmelidir. Aslında, hem WordPress hem de Bootstrap tutkulu topluluklara sahiptir, bu nedenle ne olacağını asla bilemezsiniz.

Bootstrap, WordPress'ten Daha İyi mi?

Yeni başlıyorsanız ve web tasarımı hakkında fazla bir şey bilmiyorsanız, öğrenmesi ve kullanması basit olduğu için Bootstrap kullanmak iyi bir fikirdir. Web sitesi tasarım becerilerinizi geliştirmek istiyorsanız, WordPress daha iyi bir seçenek olabilir.

Bir web sitesi geliştirirken Bootstrap ve WordPress arasında karar vermek zordur. Burada, Bootstrap ve WordPress'in hızlı bir karşılaştırmasını ve her birinin tam bir dökümünü gözden geçireceğiz. Bu yöntemi kullanarak web siteniz için en uygun platforma karar verebilirsiniz. Bootstrap sitelerinin yüklenmesi WordPress sitelerinden daha ucuzdur. Bootstrap ile oluşturulan web sitelerine herhangi bir cihazdan erişilebilir. En iyi WordPress web siteleri, ister PC'lerde, ister tabletlerde veya dizüstü bilgisayarlarda olsun, büyük ekranlarda en iyi şekilde çalışır. Bootstrap'ta web siteniz veya sayfalarınız için sayfa içi SEO yapabilmek için bir programcı olmalısınız.

React-Bootstrap, React'in gücü ile Bootstrap'in esnekliğini birleştiren bir kütüphanedir. Bootstrap 4, duyarlı tasarıma , tutarlı tasarıma ve sahip olmadığı tüm özelliklere sahip sağlam bir platformdur. Kullanımı çok basit ve öğrenmesi basit olduğu için kalkarken ve koşarken herhangi bir sorun yaşamayacaksınız. React-Bootstrap, yüksek kaliteli, duyarlı web uygulamaları oluşturmak için harika bir kitaplıktır.