HTML5 şablonunu olağanüstü bir WordPress temasına nasıl dönüştürür?
Mükemmel WordPress temasını bulamadığınızda ne yaparsınız? Büyük olasılıkla, tema çerçevesine dönebilirsiniz. Ancak, bazen, bu düşünceyi aklınızda olabilir: “Sadece bir HTML5 şablon kodu oluşturup bir WordPress temasına dönüştürmem gerekiyor.” Ama bu sadece bir rüya borusu değil mi? Gerçekçi olalım. Gerçek şu ki, bazı temel WordPress programlama becerileriniz olduğu sürece, HTML5 şablonunu bir WordPress temasına dönüştürmek, denemek istediğiniz sürece ulaşılabilir. Bu yazıda size nasıl olduğunu göstereceğim. HTML şablonlarını neden WordPress temalarına dönüştürmelisiniz? Bu projeyi almak istemenizin bazı iyi nedenleri var.
HTML5 şablonunu kullanmak, web sitenizin görünümünden her dakika detay üzerinde tam kontrole sahip olduğunuz anlamına gelir. Şablonun bazı bölümlerini sevmiyor musunuz? Değiştirmek. Basit bir HTML şablonunu değiştirmek karmaşık bir WordPress temasından çok daha kolaydır.
HTML5 şablonlarını kullanmak, sitenizi kullanmayı planlamadığınız birçok özellikle yüklemediğiniz anlamına gelir.
Binlerce başka site tarafından kullanılmayan bir WordPress teması istiyorsanız, HTML5 şablonlarını dönüştürmek, tamamen özel bir WordPress teması almanın bir yoludur.
Daha önce hiç bir WordPress teması yapmadıysanız, şablonu dönüştürmek, WordPress geliştirme kaslarınızı gerçekten çok iyi bir şekilde gerecektir.
Bu makalede, basit bir HTML5 şablonuyla başlayıp tam bir WordPress temasına dönüştüreceğim. Takip etmeye devam edin, aynı şeyi yapabilirsiniz.
Geliştirme ortamınızı HTML5 şablonunu bir WordPress temasına dönüştürmek için hazırlarken, yapmanız gereken ilk şey geliştirme ortamınızı hazırlamaktır. Çalışmaya başlamadan önce ihtiyacınız olan araçlar: WordPress’i desteklemek için yerel sunucular: Dikkate alınması gereken birçok seçenek var. XAMPP, MAMP, WAMP, VVV ve Vagrant’ın nasıl kullanılacağını belirttik. Birini seçin ve işlevini sağlayın.
Yerel WordPress Kurulumu: Eklentiyi mümkün olduğunca az etkinleştirdiğinizde bir WordPress teması oluşturmalısınız, bu nedenle yeni bir kurulum yapın veya mümkün olduğunca çok eklenti devre dışı bıraktıktan sonra mevcut bir kurulum kullanın.
Değişikliğinizi izlemek için repo git: Bu teknik bir gereklilik olmasa da, bu iyi bir fikirdir. Değişikliklerimi izlemek ve bitmiş ürünlere ev sahipliği yapmak için GitHub ve GIT için kullanımı kolay GUI sunmak için SourCetree kullandım.
Ayrıca WordPress temasının çalışma şekline alışmalı ve ilk önce bu projeye girmeden önce temel bir PHP kodlama becerisine sahip olmalısınız. Bilmediğiniz “Hiyerarşi Şablonu”, “Codex” ve “Loop” terimi ise, bu öğreticiye girmeden önce biraz ödev yapmanız gerekir. Akademiden bir veya iki ders alarak veya yeni başlayan WordPress geliştirme serimizi okuyarak bilmeniz gerekenleri öğrenebilirsiniz.
Yol boyunca herhangi bir noktada sıkışıp kalmışsanız ve kullandığım şablon dosyasını hazır WordPress temasıyla karşılaştırmak istiyorsanız, şablon dosyasının bir kopyasını bootstrap başlatabilir ve Github’daki WordPress temasının kaynak kodunu görebilirsiniz. . Adım 1: Kendi şablonunuzu bulun veya herhangi bir HTML şablonunu bir WordPress temasına dönüştürebilirsiniz. Bununla birlikte, WordPress’teki temel işlevselliğe yakından bağlı olan şablonun düzenini seçerseniz, göreviniz çok daha kolay olacaktır: gönderi, sayfalar, yan çubuk, başlık ve altbilgi. Şablonun veya şablonun parçalarının WordPress temasına nasıl çevrileceğine dair kendi düşüncenizi kodlarken, herhangi bir şablonu bir WordPress temasına dönüştüremeyeceğiniz anlamına gelmez. Yapabilirsiniz. Bununla birlikte, daha geleneksel olmayan şablonları seçerseniz, tamamen işlevsel bir WordPress temasına dönüştürmek için daha fazla iş gerekir. Web tasarımı ve “mobil ilk” tasarımını destekleme konusunda minimalist bir insanım. Sonuç olarak, temel blog şablonu aradığım gibi Bootstrap’a dayanıyor. Bu öğretici için Blog Şablonu ve Home Blog’u Start Bootstrap’tan tamamladım.
Bu şablon ücretsiz, minimalist, WordPress’e kolayca çevrilecek ve bootstrap ile yapılacaktır. Mükemmel.
Mükemmel bir şekilde bitirdikten veya kendiniz kodladıktan sonra, bir sonraki adıma devam etmeye hazırsınız: şablonu bir WordPress temasına dönüştürmek. Adım 2: HTML5 şablonunu WordPress temasına değiştirin Bu noktada, bir HTML5 şablonuna sahip olmanız gerekir. CSS ve JavaScript kaynakları için dizin.html dosyaları ve alt dizinler içeren dizinden oluşmalıdır. Tüm tema dizini WP-Content/ Theats/ WordPress geliştirme sitenizden kopyalayın. WordPress teması şimdi WordPress’in onu bulması gereken yerde. Ancak, geliştirme sitenizdeki WordPress temasını etkinleştirmek için iki değişiklik yapmanız gerekir: index.html adını dizin.php olarak değiştirin.
Veya ana CSS dosya şablonunu bir seviyenin üstüne taşıyabilirsiniz – /CSS dizininden çıkın ve WordPress temasının kök dizinini girin. Anahtar, tema kök dizininde bir style.css dosyası olması ve doğru tema üstbilgisini içermesi gerektiğidir. İsterseniz, tema ekran görüntülerini tema dizininize eklemek için doğru zamandır. Bu değişiklikleri yaptıktan sonra, WordPress yönetici alanındaki görünüm> temaları açtığınızda WordPress temanız etkinleştirme için kullanılabilir. Lütfen ve WordPress temanızı etkinleştirin ve sitenizi ön uç görün.
Bu noktada, WordPress temanız güzel görünmeyecek. İşte bu noktada sitemin görünümü:
Olan, temanızın tüm CSS ve JavaScript kaynakları tema dizininizde olması, ancak HTML şablonunuzun sitenizin etki alanı ile ilgili dosyaları bulmaya ayarlanmasıdır. Başka bir deyişle, WordPress tema kaynakları http://domainanda.com/wp-content/themes/your time-inectory/ adresinde bulunur, ancak sitenizin şablonu bu kaynakları http://domainanda.com adresinde arıyor. Açıkçası, onları bulamadı. Bir sonraki adım, WordPress temamıza WordPress’in bulacağı şekilde CSS ve JavaScript kaynaklarını eklemektir. Adımlar 3: Enqueue komut dosyaları ve stilleri doğru bir şekilde WordPress temasına komut dosyaları ve stiller eklemek için doğru yol sıralamaktır. . Bunu yapmak için, temanızın kök dizininde bir function.php dosyası oluşturmanız gerekir. Şimdi, HTML şablonunuza bağlı CSS ve JavaScript kaynaklarına bakın. CSS kaynakları şablonun kafasına eklenecek ve komut dosyası kapanış gövdesi etiketinden hemen önce veya hemen önce eklenebilir. WordPress temanıza eklemeniz gereken tüm CSS ve JavaScript kaynaklarını bulduktan sonra, tüm komut dosyalarını ve kaynakları bekleyen işlevler oluşturduktan sonra – style.css temanızı eklemeyi unutmayın – sonra işlevini WordPress temasıyla ilişkilendirin kancalar ile wp_enqueue_scripts. Function.php dosyanıza işlevler ve kancalar eklemek istiyorsunuz.
Enqueing işleviniz biraz farklı görünecektir. Ancak, referans olarak, yaptığım enqueing işlevinin görüntülenmesi aşağıdadır:
Yükleme Çekirdeği 716C5647B842201EAB77C024942224C04 Teslim edilen CSS ve JavaScript kaynakları ile WordPress artık temanıza bağlı kaynakları tanıyacaktır. Ancak, gerçekten doğrudan sitenize girmek için, WordPress tema dosyanıza iki kanca eklemeniz gerekir: wp_head: dizin.php’deki kapanma etiketinden hemen önce eklenmelidir.
WP_FOOTER: Index.php adresindeki etiket kapağından hemen önce eklenmelidir.
Bu etiketle dizin.
Çekirdek 9fa2edaf6d2d96fa0fe06183c9bb83d5 içerir
Kanca eklendiğinde ve komut dosyası ve stil doğru girildiğinde, WordPress temanız artık orijinal HTML şablonuna benzeyecektir. Bir sonraki adım, index.php’yi birkaç parçaya ayıracağız, böylece başlıkları, altbilgileri ve kenar çubuğunu yayınlar, sayfalar, arşiv sayfaları ve daha fazlası ile yeniden kullanabilmemizdir. Adım 4: Şablonun şablon kısmının bir kısmını oluşturun, yalnızca tema şablonu dosyalarınızdan biri tarafından başvurulursa kullanılan WordPress temasının bir parçasıdır. Bir örneğe bakalım, neredeyse tüm WordPress temaları belgeleri header.php dosyalarına ayırır. Bu şekilde, başlık sayfalar, yayınlar, ana sayfalar, arşiv sayfaları ve sayfa 404 ile yeniden kullanılabilir. Ancak, header.php asla doğrudan çağrılmadı. Bu yalnızca index.php gibi şablon dosyaları tarafından çağrıldığında kullanılır. Çoğu durumda, şablonun en az üç bölümünü yapmak isteyeceksiniz:
header.php
Footer.php
Sidebar.php
Bir header.php oluşturun WordPress temanızın kök dizininde yeni bir dosya oluşturun ve header.php adını verin. Header.php Dosyası Temanız, belge türünün beyanını, açılış HTML etiketini, baş öğesinin tamamını, açılış gövdesini etiketini ve sitenizin navigasyonunu içerecektir – kısaca, her sayfanın üstünde görünür. sitenizin. Kodu kopyalamanız önce bir başlık dosyası oluşturmanız gerekir. WordPress temasındaki her dosya, dosyanın amacının yalnızca kısa bir açıklaması olan bir dosya üstbilgisi eklemeniz gerekir. WordPress Tema Dizini’nde bulunan temadaki bazı başlık dosyalarını görün. Hepsinin çok benzer göründüğünü göreceksiniz. Header.php için dosya başlığınız şöyle görünecektir: Core 38A4C15822B19650140F7011B8F0CCEF içerir
Bir dosya üstbilgisi olduğunuzdan sonra, index.php’den header.php’ye tüm başlık kodlarını devam ettirin ve kopyalayın. Ardından, index.php’den tüm başlık kodlarını silin ve WordPress get_header () işleviyle değiştirin:
EAC243ADF722060FA717A1CC7108F15C’nin özünü içerir
Sidebar.php ve footer.php yapın Tüm kenar çubuğu içeriği ve tüm altbilgi içeriği için ek dosyalar için ayrı dosyalar oluşturarak aynı işlemi tekrarlayın. Kodu index.php’den ilgili dosyalara kopyaladıktan ve index.php’den kaldırdıktan sonra, tüm şablon dosyalarını bire bağlamak için Get_ideBar ve Get_Footer WordPress işlevini kullanın. İşiniz bittiğinde, index.php başlık dosyaları ve get_header ile başlamalı ve hemen get_sidebar ile bitmeli ve ardından get_footer izlemelidir. Üç işlev arasında sayfanızın ana içeriği olmalıdır. Aşağıda, dizin.php’nin şu anda ne olması gerektiğine dair basitleştirilmiş ekran:
A6025AD894F0C60C2B5EC88D47D959A4 Adım 4: Ekle Döngü Ekle, WordPress veritabanlarını isteyen ve WordPress sitenizin her sayfasında görüntülenen içerik üreten bir işlevdir.Genel olarak, en az iki farklı döngü versiyonuna sahip olmak istiyorsunuz:
Blog sayfanız için gönderme, meta veriler, üstün resimler ve gönderme teklifleri başlıkını görüntüleyen bir döngü sürümü.
Bireysel sayfalarınız için ikinci sürüm ve sayfaların veya yayınların eksiksiz içeriğini görüntüleyen yayınlar.
Buna ek olarak, tek tek sayfalar, bireysel yayınlar, arama sonuçları sayfaları ve daha fazlası için varyasyonlar yaparak döngüyü daha da daraltmak isteyebilirsiniz.Temel olarak, bir WordPress döngüsüne benzeyen şey budur:
Core 8DC9BD6ADFD69C65309E7F9F7E02D3B9 içerir
Tabii ki, küçük koddaki yorumlar, içeriği doğru hale getirmek için HTML içeriği ve etiketler üretmek için WordPress işleviyle değiştirilmelidir. Loop’un sayfaları, bireysel yayınları, blog sayfalarını, veranda, arşiv sayfalarını ve 404 ve arama sayfalarını dikkate alması gerekir. Sonuç olarak, her şeyi bir dosyada tamamlamak zordur. Bu nedenle, halka açık temaların çoğu Döngüyü index.php’den bozar ve content.php, content-single.php, content-page.php vb. Birkaç dosyaya bir döngü eklemeye karar verirseniz, kullanmak istediğiniz döngü sürümüne başvurmak için Get_template_part işlevi ile birlikte şartlı bir etiket kullanın. Benim tavsiyem, WordPress sitenizde görünen şeylerden memnun olana kadar döngünüzü basit ve yavaşça tekrarlamaktır. Her şey başarısız olursa, sonuçlar istediğiniz kadar şaşırtıcı olmasa da, aşağıdaki döngü hemen hemen tüm WordPress web siteleri için çalışacaktır. Ancak, sizin için yeni bir döngü varsa bu iyi bir başlangıç noktasıdır.
Bu öğreticinin kapsamı dışında döngüyü derinlemesine kapsıyor. Ancak, daha önce tartıştığımız konu budur ve orta kullanıcılar için WordPress’in gelişimini okuyarak her şeyi öğrenebilirsiniz: sorgular ve tekrarlar. Adım 5: Şablon dosyasının içeriğini WordPress işleviyle değiştirin Bir sonraki adım bir HTML şablonundan bir sonraki şablona büyük ölçüde değişebilir. Yapmak istediğiniz şey, her şablon dosyasını – başlık, dizin, içerik (varsa), kenar çubuğu ve altbilgi – statik içeriğin her bir bölümünü uygun WordPress işleviyle değiştirmektir. Header.php ile başlayın. Her küçük içerik bulduğunuzda WordPress işlevini değiştirin. Hangi işlevlerin kullanılacağından emin değilseniz, doğru işlevi bulmak için yapabileceğiniz iki şey vardır: WordPress temasından şablon dosyasına yirmi on altı gibi kodlanmış ve yaptıklarını kopyalayın. Yirmi -Sixteen GPL’dir, kopyalama olabilir – hatta önerilir!
“Charset WordPress işlevi” gibi terimleri arayarak Codex WordPress’te uygun işlevi bulmak için Google’ı kullanın.
Çok karmaşık olabilecek bir adım, bir başlık menüsü hazırlamaktır. Bu adımı ayrıntılı olarak görmek için kısa zaman ayıralım. Başlık Menüsünün Hazırlanması Başlık menüsünü ekle iki adımlı bir işlemdir:
Function.php’e işlevler ekleyerek WordPress temanıza başlık konumunu ekleyin.
HTML şablonu tarafından kullanılan sınıfı ve kimliği çoğaltmak için menüyü başucuya girin.
Menünün konumunu WordPress Heme’inize eklemek için Register_nav_Menus işlevini kullanmanız gerekir. WordPress teması örneğinde, aşağıdaki işlevi Function.php olarak bıraktım.
Ardından, menünüzü üretmek için header.php adresinden wp_nav_menu işlevini kullanmanız gerekir. HTML şablonunuzdaki menüye uygulanan sınıfa ve kimliğe özel dikkat gösterin. CSS şablonlarının yeni menünüze uygulanması için bu seçmeni çoğaltmanız gerekir. Neyse ki, WordPress işlevi onu oldukça kolaylaştırır. Menüyü Header.php’ye ekleyen kod ekranı aşağıdadır.php WordPress temam:
Core 760C27C0398773292A3110A44183734’ü içerir
Menüye iki sınıf, NAV ve NAVBAR-NAV, kimlik ve Menü konteynerine iki sınıf eklediğimi unutmayın. Bu seçmeni HTML şablonundan kopyaladım. Bu, menünün şablon stilini almasını sağlar. Widget alanınızı hazırlarken Kenar çubuğu widget alanı, başlığı ve altbilgiyi kullandığınız şablona göre uygulamanız olarak ayarlamanız gerekir. Widget Alanı Ekle İki adımlı bir işlemdir:
Widget alanını function.php adresine kaydetmek için Register_idabar işlevini kullanın.
Widget alanını görüntülemek istediğiniz tema bölümüne eklemek için Dynamic_sideBar işlevini kullanın.
Register_idabar işlevi, widget alanının adını, widget alanı kimliğini ve her widget ve widget başlığında görünecek HTML bitini içeren bir değer alır. Register_idabar işlevi özel işlevde yuva yapar ve özel işlev widgets_init kait kullanılarak WordPress’e bağlanır. Bu, WordPress temam için yan bıçakları Functions.php’de kaydeden işlevin görünümüdür.
Çekirdek 9953227F9818B5F68A453C3940ECCFB3 Kayıtlı Widget Alanı ile Dynamic_idabar ile sidebar.php ekleyebiliriz. Dynamic_idabar işlevi, functions.php adresinden register_idabar’a kaydolduğumuz widget kimliği alanını alır. Kod ekranı Widget Alanını Sidebar.php’ye ekleyin: temamda:
Çekirdek yükleme BC447A4D189BA5E8C41BBC4BD75E0AA6
Bu işlevlerin her ikisi de temamın widget alanını üretmek için birlikte çalışır. Widget alanı, Col-MD-4 sınıfına sahip bir div’e yüklenecektir. Buna ek olarak, her widget kuyu sınıfına sahip bir div’e yüklenir ve her widget başlığı dördüncü seviye başlık öğesinde yuva yapar. WordPress temanıza bir dizi widget alanı eklemek için bu işlemi uygulayabilirsiniz. Tüm yapman gereken:
Widget’ın her alanı için benzersiz kimlikten farklı bir Register_ideBar işlevi oluşturun. Tüm Register_idulus işlevlerinizi tek bir özel işlevle biriktirebilir ve ardından widgets_init kait kullanırken her şeyi başlatabilirsiniz.
Görüntülemek istediğiniz yere widget alanını yüklemek için Dynamic_sideBar işlevini ve benzersiz widget alanı kimliğini kullanın: kenar çubuğunda, başlıkta veya altbilgide.
Bir sonraki adım … eğer adım adım takip ettiyseniz, bu noktada HTML5 şablonunu işlevsel bir WordPress temasına değiştirdiniz. Mutlu! Bu WordPress temasını oluşturmak için aynı süreci izledim:
Bu öğreticinin üst kısmındaki şablona tekrar bakarsanız, bunun doğru kopya olduğunu göreceksiniz. Şimdiye kadar elde ettiğiniz şeyden memnun olmanız gerekse de, büyük olasılıkla yaptığınız şeyden tam olarak memnun değilsiniz. Atmak isteyebileceğiniz bir sonraki adım şunlardır: Her yazı, sayfa, arama sonuçları ve şablon için özel bir şablon ve döngü oluşturmak sayfa 404.
Yayın bölümünü ve sayfalarınızın her birine yorum bölümünü ekleyin.
Şablonunuzda görüntülenen widget stiline uygun özel bir widget yapın.
Temalarınızı halka açık hale getirmeyi planlıyorsanız WordPress temanızı içselleştirin.
Şimdiye kadar başarılı olduysanız, bu ek görevlerin her birini yapmak için gereken becerilere sahipsiniz. Ancak, bu öğreticinin kapsamı dışında olma sürecinde size rehberlik edin. Bu görevleri yapmak için yardıma ihtiyacınız varsa, aşağıdaki adımları ele almak için gereken kavramları öğreten aşağıdaki kaynaklara bakın:
WordPress’te özel bir sayfa şablonu oluşturun
Yeni Başlayanlar İçin WordPress Geliştirme: Widget’lar ve Menüler
WordPress çevirisi ve yerelleştirme için ana kılavuz
Buna ek olarak, son birkaç aydır Akademi’den iki ders aldığımı söylememeyi ihmal edeceğim.Bu derslerde bu projeyi tamamlamak için gereken becerileri inceliyorum.HTML5 şablonunu bir WordPress temasına sarmak zaman ve zorlu bir iş olabilir.Ancak, süreç yoluyla gerçekten benzersiz bir WordPress teması alacağınız anlamına gelir ve şablonu hiç önceki temaya dönüştürmediyseniz, kesinlikle çok şey öğreneceksiniz. HTML şablonunu hiç önceki WordPress temasına dönüştürdünüz mü?Aşağıdaki yorumlar bölümünde deneyiminizi bizimle paylaşın!
Etiket:
gelişim
şablon
