Yeni başlayanlar için WordPress Geliştirme: Temalar Oluşturma
WordPress’in geliştirilmesiyle ilgileniyorsanız, yalnızca özelleştiricideki seçenekleri yapılandırarak veya daha karmaşık ayarlamalar için bir alt tema yaparak kendi temanızı kesinlikle ayarlamaya çalışacaksınız. Codex WordPress’e göre: “WordPress teması, weblogun altında yatan birleştirici bir tasarıma sahip grafik arayüzleri üretmek için birlikte çalışan bir dosya koleksiyonudur.” Basitçe söylemek gerekirse, tema sitenizi “soymak” için bir yol sağlar ve içeriğinizin görüntülenme şeklini değiştirmenizi sağlar. Bu, yeni başlayanlar için beş bölümümüzün üçüncü gönderidir, bu da size bir üreticiden geliştiriciye atlayabilmeniz için WordPress geliştirmenin temel kavramını öğretir. Serinin sonunda, kendi temel temalarınızı ve eklentilerinizi oluşturabilir ve kendi özelliklerinizle mükemmelleştirebilirsiniz.
Bu öğreticide, tema geliştirmeye hemen gireceğiz. Bir tema oluşturan ve şablonlar, şablon etiketleri ve döngüler üzerinde çalışmaya devam eden temel dosya ile başlayacağız ve yayınlarınızı tek bir sayfada, arşivde ve diğer sayfalarda görüntülemenize izin vereceğiz. Bu makalenin sonunda, kendi temanızı derleyebileceksiniz. Not: Bu dizi için, HTML ve CSS hakkında kapsamlı bir anlayışa sahip olmanız önemlidir, çünkü bu iki dil WordPress ile çalışırken önemli yapı taşlarıdır. Başlayalım. Yeni başlayanlar için WordPress Geliştirme Serisindeki öğreticiyi özlüyor musunuz? Beş yazıyı buradan takip edebilirsiniz:
Yeni başlayanlar için WordPress’in geliştirilmesi: Başlangıç
Yeni Başlayanlar İçin WordPress Geliştirme: PHP Öğrenme
Yeni başlayanlar için WordPress Geliştirme: Temalar Oluşturma
Yeni Başlayanlar İçin WordPress Geliştirme: Widget’lar ve Menüler
Yeni Başlayanlar için WordPress’in Geliştirilmesi: Yapı Eklentisi Durma Şimdi, WordPress’i çalışmak ve çalıştırmak için makinenize yerel bir ortam hazırlamalısınız. Değilse, bu serinin ikinci kısmını kontrol edin ve daha fazlasını öğrenmek için aşağı doğru kaydırın. Devam etmeye hazırsanız, bilmeniz gereken ilk şey WordPress’in temaları nerede kurtardığıdır. Temalar genellikle kurulumunuzdaki WP-Concent/temalarında bulunur. Localhost ortamınızdaki klasöre giderseniz, orada varsayılan WordPress teması olan birkaç temaya sahip olmanız gerekir. WP-Config.php’deki komutlarla temanızın konumunu değiştirmek mümkündür, ancak bu nadiren yapılır.
Yeni bir tema yapalım. Bunu yapmak için yapmanız gereken bazı kolay şeyler var: “Tema” dizinde yeni bir klasör oluşturun ve kurulumunuz ve benim-Awesome-Theme gibi benzersiz bir şey adlandırın. Bu yeni klasörde, iki dosya oluşturun: style.css ve index.php stil sayfası açın ve aşağıdaki kodu yapıştırın:
Core 3DAF60076C594AFA6BB8 içerir
Bu detay, arka uç WordPress’teki görünüm ekranı> temalarındaki tema detay bölümünü otomatik olarak dolduracaktır. Temanın adı, yorumlara eklemeniz gereken tek satırdır, ancak her şeyi doldurmanıza yardımcı olur. Metin etki alanının klasörün adıyla (bu durumda I-Awesome-tema) tam olarak eşleşmesi gerektiğini unutmayın. Bu, bu öğreticide tartışmayacağımız çeviriler için kullanılır, ancak en iyi uygulama kongreyi takip etmektir.
Görünüm> Temalar bölümünü ziyaret ederseniz, şimdi temanızı listede görebilmeniz ve hatta etkinleştirebilmelisiniz. Temanın herhangi bir kodu yok, bu yüzden sadece ön taraftaki beyaz ekranı göreceksiniz – ancak yakında değiştireceğiz! Yeni boş temalarımız, şablon dosyasını kullanarak WordPress tema şablonunun nasıl çalıştığı. Bu aslında akıllı bir yöntemdir, çünkü sıradan HTML ile karşılaştırıldığında web sitelerini çalıştırmak için gereken dosya sayısını büyük ölçüde azaltır. Bir HTML siteniz varsa, yayınladığınız her makale için bir dosyaya ihtiyacınız vardır. Her dosya bir site üstbilgisi, kenar çubuğu ve altbilgi içerecek ve bu bilgiler her dosya için aynı olacaktır. Dosya-dosyadan farklı olacak tek şey, makalenin kendisinin içeriğidir.
PHP sunucuda işlendiğinden, dosya alanını daha iyi kaydedebiliriz. Tüm bu ayrı dosyalara sahip olmak yerine, yalnızca bir dosya kullanabilir, açtığımız sayfaları algılayabilir ve PHP’yi yer tutucuyu gerçek yayın ve içeriğin gerçek başlığı ile değiştirmesini isteyebiliriz. İşte nasıl çalıştığını gösteren bazı sahte kodlar:
Makale alanında herhangi bir sabit kod görmediğinizi unutmayın. Gerçek başlığı görmek yerine, bir başlık yayınlamaktan sorumlu olan bir function-the_title () vardır. Bu işlevler, şu anda hangi yayınların istendiğini (URL’lere dayalı olarak) algılar ve veritabanında gereken bilgileri bulur.
Böylece, sitemizdeki her makale için, hepsi bir dosyayla dosyalar oluşturduk. WordPress de dahil olmak üzere birçok sistem daha fazla adım atar ve üstbilgileri ve altbilgileri de ayırır. Aslında, bir gönderiyi ayarlayan dosya daha çok şuna benziyor: Core 3daf60076c594Afa6bb8’i içeriyor
Web sitemizde bir sayfa, arşiv sayfaları ve 404 sayfa bulunacağından, diğerlerinin yanı sıra başlıkları ve altbilgileri de yeniden kullanmak isteyebiliriz. Yeniden kullanılabilen bu kod, sunucu yan kodlamasını çok yararlı ve verimli hale getiren şeydir. Web sitemizi oluşturmak için temamızdaki birçok şablon dosyasını kullanacağız temayı nasıl çalışırız. Bilmemiz gereken şey, hangi sayfa için yapmamız gereken dosyalar. Bu WordPress şablonu hiyerarşisi tarafından yönetilir. Düşünmemiz gereken sayfa türlerine bakalım:
Arşiv sayfaları (kategori arşivleri, tarih arşivleri, etiket arşivleri, yazar arşivleri vb.)
Tek Sayfa (tek gönderi, tek sayfa, tek özel yazı tipi)
Ön sayfa ve dizin sayfası
hatalı sayfa
Arama Sonuçları Sayfası
Buna “Hiyerarşi” denir çünkü WordPress hangi dosyaların görüntüleneceğini belirlerken birçok farklı dosya arar. Bir örneğe bakalım. Diyelim ki WPMU dev blogundaki yazım gibi yazar arşiv sayfasına bakıyoruz. WordPress ilk olarak tema klasöründe yazar-Danielpataki.php adlı bir dosya olup olmadığını kontrol eder. Varsa, dosya kullanılır. Değilse, yazarımın kimliğini içeren bir dosyaya geçer. Yazarımın kimliğinin ne olduğunu bilmiyorum, ama bunun 882 olduğunu varsayalım, bu durumda kullanılan dosya yazar-882.php. Dosya mevcut değilse, yazar.php, ardından archive.php ve son olarak – her şey başarısız olursa – olması için gereken bir dosya olan dizin.php kullanır. WordPress daha spesifik bir ve dosyayı ortak bir dosyaya değiştirir. Bu yararlıdır, çünkü önceki bölümde yaptığımız gibi, tüm yazarları işlemek için bir dosya oluşturabilirsiniz – yazar.php. Bununla birlikte, farklı bir yazar profilini farklı hale getirmek isteyebilirsiniz, bu durumda bunu gerçekleştirmek için yazar-Danielpataki.php kullanabilirsiniz. Temayı oluşturalım! Yeni bir tema oluştururken, bir çerçeve oluşturarak başlamayı seviyorum. Bu genellikle başlığı ve altbilgiyi önce yapmak anlamına gelir. Sonsuz bir bilgi paragrafından dökmek yerine, her zaman en iyisinin doğrudan içeri girip hemen bir şey yapmaya başlamak olduğunu düşünüyorum çünkü egzersiz mükemmel.
Bir temaya sahip olmalısınız ve boş.php dizin dosyası ve stil sayfası ile etkinleştirilmelidir, bu yüzden oluşturalım. Çerçevemi oluşturma genellikle ilk olarak arka uçtaki WordPress’teki görünüm ekranında temalarda temam için görüntülenebilen bir ekran görüntüsü oluşturur. Bu, tema yapma aşaması için hiç de önemli değil, ama hemen bana yapacağım ve temam için bir ilham kaynağı olarak işlev görecek iyi bir şey veriyor. Yaklaşan tema tasarımınız varsa, kullanın veya Unssplash gibi görüntü depolarının iyi bir görüntüsünü kullanabilirseniz. Görüntüler hakkında tartışırken, WordPress tema dizini için bir tema oluşturursanız, CC0 resimlerini kullanmanız gerekir. Bu bir telif hakkı lisansı “İstediğinizi yapın” ve düşündüğünüzden daha az. Unplash’taki tüm görüntüler çok güzel ve CC0, bu da bu siteyi fantastik kaynaklar haline getiriyor. İstediğiniz resmi bulduktan sonra, 880px genişliğinde ve yükseklik 660px’e kesin, ad ekran görüntüsü.png ve “tema” klasörünüze yerleştirin. Hızlı onarımlara ihtiyacınız varsa, örnek olarak kullanmanız için aşağıdaki resmi yaptım. Görüntüleri buradan indirebilirsiniz.
Tema Ekran görüntülerimiz
Merak ediyorsanız, renk kaplaması 2016 Pantone’un rengine dayanıyor (bu aslında bu yıl iki renk) -Bu gerçekten beğendim! Swaan ekibi tarafından Unplash’tan arka plan görüntüsü. Bir sonraki adım, temamızdan bir HTML çerçevesi yapmaktır. Bu, HTML Head Elements, Doctypes ve diğerleri gibi tüm sayfalarda yayınlanan kodu içerir. Header.php dosyalarını oluşturarak başlayalım. Dosyada, ilk HTML kodumuzu koyacağız, örneğin: Çekirdek 3DAF60076C594AFA6BB8
Açık öğelerimiz için bir kapanış etiketi içerecek bir footer.php dosyası oluşturarak kapatacağız:
Core 3DAF60076C594AFA6BB8 içerir
Orada iki önemli işlevi göstermeliyim: wp_head () ve wp_footer (). Bu işlevleri önümüzdeki haftanın bu seri öğreticisinde, kancaları keşfettiğimizde widget’lar ve menüler hakkında tartışacağız, ancak şimdilik, her tema yaptığınızda, wp_head () ‘i her tema yaptığınızda, baş etiketinden hemen önce koymanız gerektiğini hatırlamanız gerekir. Kapak gövdesi etiketinden hemen önce baş elemanı ve wp_footer (). Bu, WordPress ve eklentilerin temanıza işlevselliği enjekte etmelerine yardımcı olan bir işaretçi görevi görür. Şimdi dikkatimizi index.php’ye yönlendirelim. Bu aşamada web sitenizi ziyaret ederseniz, yalnızca boş bir ekran elde edersiniz. Bunun nedeni, boş dizin dosyası ve üstbilgi ve altbilgi dosyalarının hiç kullanılmamasıdır. Hadi değiştirelim. Dizin dosyasına aşağıdakileri ekleyin:
Core 3DAF60076C594AFA6BB8 içerir
Sayfanızı şimdi yüklerseniz, “Olağanüstü Temam” metnini göreceksiniz ve kaynak kodunu görürseniz, daha fazlasını göreceksiniz. WordPress ayrıca, girerseniz ve bu aşamada endişelenmenize gerek olmayan diğer birçok şeyi de sayfanın üst kısmındaki yönetici çubuğunu görüntüler. Bulmacanın son kısmı stil ekleme yeteneğidir, çünkü stil sayfamız otomatik olarak yüklenmez. Bir HTML web sitesi oluştururken kafaya stil eklemeye alışkın olabilirsiniz. Bunu temalarda yapamazsınız – WordPress’in bunu halletmesine izin vermelisiniz. Functions.php dosyasını oluşturun ve aşağıdaki kodu ekleyin: Çekirdek 3daf60076c594Afa6bb8 içerir
WordPress’in işlevselliği temaya enjekte ettiğinden nasıl bahsettiğimi ve yerlerinden birinin wp_head () işlevinde olduğunu hatırlıyor musunuz? İşlev dosyasında yaptığımız şey, WordPress’i stil sayfamız hakkında anlatıyor ve bu da kafaya uygun kodu ekleyecektir. Sonuç tamamen aynıdır, ancak bu yöntem daha sonra göreceğiniz gibi daha fazla esnekliğe izin verir. Şimdilik, bunu gelecekte referanslar için bir alıntı olarak kaydedin – bu serideki aşağıdaki öğreticide, tüm bunların nasıl çalıştığını daha iyi anlayacaksınız. Bu noktada, tüm küçük parçalar ve başlangıç parçalarımız var. Örneğin, stil sayfanızda body {arka plan: kırmızı} gibi bir şey yazıyorsanız, sitenizde iyi bir kırmızı arka plan elde edersiniz. Devam etmeden önce, çalışmak için görsel bir çerçeve oluşturalım, sitenin başlığı basit ve içeriğimizi içerecek kutu. Bence bu:
Basit ve çirkin, ama şimdilik işe yarayacak! İşlevini sağlamak için başlık dosyasına başlığı ekledim ve bir kap açtım. Altbilgide, kabı kapattım ve CIPTA altbilgisi metnini ekledim. Sonunda, iyi görünmesi için stil sayfasına birkaç stil ekledim. Bu geliştirme aşamasında ihtiyaç duyulan kadar iyi. Yukarıdaki web sitesini oluşturan üç tam kod dosyası:
Core 3DAF60076C594AFA6BB8 içerir
Core 3DAF60076C594AFA6BB8 içerir
Core 3DAF60076C594AFA6BB8 içerir
Buna ek olarak, dizin dosyasına biraz kukla içerik ekledim – özel bir şey yoktu, sadece başlıklar ve
içine sarılmış bazı lorem iPSum dolgu maddeleri paragrafları. Şu anda, web sitenizde ziyaret ettiğiniz sayfalar aynı görünecektir, çünkü yalnızca tüm sayfalar için yedekler olan index.php dosyalarımız var. Loop WordPress döngüsünü anlamak, WordPress’teki neredeyse tüm sayfaların kalbidir. Döngü, sayfada görüntülenen içeriği içerir. WordPress, tüm bunları URL’den alarak her sayfada ne var olacağını bilir. Örneğin, bir yayın sayfası bir yayın içermelidir, ana sayfanız en son on yayın içermelidir, kategori arşiv sayfası belirli bir kategorideki en son 10 gönderiyi içermelidir. Bu bilgiler veritabanından otomatik olarak alınır ve yapmanız gereken tek şey alınan tüm yayınları “geçmek” dir. Bunu göstermek, açıklamaktan daha kolaydır, bu yüzden dizin dosyasına ekleme şeklim budur:
Core 3DAF60076C594AFA6BB8 içerir
Bunu aldıktan sonra, PHP, WordPress ve tema mucizesi netleşir. Ön sayfanızdaki yayınların bir listesini göreceksiniz ve arka uçta bir gönderi eklerseniz görünecektir. Başlığa tıklarsanız, bir yayın için özel bir dosya oluşturmamış olsanız bile, bir gönderiyi görüntülenen bir sayfa görüntüler. Nasıl çalıştığını görmek için kodu analiz edelim. Her şey, Has_Posts () ‘nın değerini kontrol eden bir IF ifadesiyle başlar. Görüntülenen yayınlar varsa bu işlev True ve görüntülenmezse yanlış geri yüklenir. Ele ifadesinden görebileceğiniz gibi, yayın yoksa, hızlı bir mesaj görüntüleriz. Bir gönderi varsa, HAD_POSTS () sırasında gerçek değeri geri yükleme sırasında yapılacak bir süre döngü yaparız. Kullandığımız ilk işlev, bazı gönderme verilerini bizim için (endişelenmeyin) ve dahili sayıları ilerleten The_Post () ‘dir. Eğer son gönderideysek, bu görüntüleneceği anlamına gelir, ancak bir dahaki sefere Haint_posts () yanlış geri yükleyecektir, bu da sonunda döngüden çıkacağız. Bir gönderi görüntülerken, eksiksiz bir başlık ve içerik ekledim. Başlığı almak için The_Permalink () işlevini, the_title () gönderme ve tam içeriği görüntülemek için the_concent () almak için kullanıyorum. Bu tür işlev türü WordPress’teki şablon etiketi olarak adlandırılır ve bir dairede kullanılabilir ve beklendiği gibi doğru yazıyı algılayacaktır. Bu, sitemin şimdiye kadar ön uçta görünümü:
Başka bir yaklaşım iki ayrı dosya kullanmaktır: index.php, tırnak gösteren varyantlar ve single.php içeriği kullanacaktır.Lütfen tek bir.php oluşturun ve oradaki döngüde the_content () kullanın.Sorduğunu duydum: Hangisi daha iyi?Bu soruya iyi bir cevap yok çünkü gerçekten neyi başarmak istediğinize bağlı.Tek bir dosya ve dizin arasında değiştiğiniz her şey bir işlevse, IF ifadesini kullanmak daha iyi olabilir.Aslında, tek bir sayfa ve liste genellikle iki ayrı dosyayı garanti etmek için oldukça farklıdır, ancak bu iki tekniği kullanan iyi temalar örnekleri vardır.Birçok temanın yaptığı daha ileri gitmek ve döngüdeki içerik için bir şablon yapmaktır.Daha sonra göreceğiniz gibi, bu kodumuzu okumayı ve yeniden kullanmayı kolaylaştırır.Değiştirilmiş dizin dosyasına bakalım: Core 3DAF60076C594AFA6BB8 içerir
Ah, bu daha iyi!Her şeyden önce, çok fazla kaos ekleyen tüm açılış etiketlerinden ve PHP kapağından kurtuldum.Ama daha da önemlisi, tüm yayın içeriğini farklı dosyalara koydum.Get_template_part () işlevi yalnızca dosyadan içerik çizer ve temel olarak ikinci parametreyi bir yol oluşturmak için bir bağlantı işareti ekleyerek – ilk parametreyi ekler.ELSAY’ın ifadesindeki ikinci çağrı durumunda, işlev şablon parçalarını/content-none.php’yi çağırmaya çalışacaktır.İlk örnekte, ikinci parametrenin boş kalmasına izin verdim ve bu bir şablon-partlar/content.php olarak adlandırılacaktır.Single.php’de, aynı kodu ekleyeceğim, ancak get_template_part () işlevinin ikinci parametresi ile bir single ekleyeceğim.Son olarak, bir şablon parçaları klasörü ve üç dosya oluşturacağım: content.php, none.php ve content-single.php ve oraya ilgili kod parçaları ekleyin.Örneğin, Content.php şöyle görünecektir: Çekirdek 3DAF60076C594AFA6BB8 içerir
