ev borcu WordPress sitesi
En İyi WordPress Hile Sayfası
WordPress, henüz değilse, hızla bir ev adı haline geliyor. Dünyanın gördüğü en iyi web sitelerinden ve web uygulamalarından bazılarına güç veren bu iyi huylu güzellik her yerdedir. Sadece inanılmaz derecede çok yönlü olmakla kalmayıp aynı zamanda öğrenmesi ve kullanması inanılmaz derecede kolay olan birinci sınıf bir CMS ve blog platformudur. WordPress'in popülaritesi her geçen gün neden artsın ki?
Ancak WordPress'i kurup başlattığınızda yüzeyde gördüğünüz şey, perde arkasında olanların sadece küçük bir kısmı. Aslında, hepimizin çok sevdiği güzel kullanıcı arayüzü, sahne arkası aktivite kargaşasıyla karşılaştırıldığında hiçbir şey. Demek istediğim, WordPress, PHP ve MySQL olarak bilinen iki karmaşık web teknolojisi üzerinde çalışır.
Rol oynayan diğer teknolojiler arasında JavaScript, yakın kuzeni jQuery, CSS ve HTML bulunur. WordPress temaları (ve hatta eklentiler) çoğunlukla PHP ile yazılmıştır ve çalışması için MySQL veritabanlarına güvenir. Ayrıca yukarıda belirtilen web teknolojilerine de bağlıdırlar. Tüm bu teknolojiler birlikte çalışmalıdır.
Şimdi yeni başlayan biri olarak, WordPress platformunun, temaların ve eklentilerin uyum içinde çalışması için geliştiricilerin, toplu olarak PHP etiketleri olarak bilinen bir dizi standart kod kullandığını anlamayabilirsiniz. Bugünün gönderisinde ana hatlarıyla belirttiğimiz bu kodlar, size ne kadar yararlı olduklarını gösteriyor. İyi bir ölçüm için burada bir yere birkaç örnek sıkıştıracağız, bu yüzden tema oluşturma yolculuğunuzda bir patlama yaşamaya hazır olun!
Tema Anatomisi
Bir WordPress teması, birbirine bağlı birkaç PHP dosyasından başka bir şey değildir. Temanızın (ve sitenizin) nasıl göründüğünden sorumlu olan bir CSS stil sayfası dosyasıyla birlikte gelir. Yine de temel bilgilere geri dönersek, bir WordPress teması yalnızca birkaç PHP dosyasıdır. Yukarıda, bir WordPress temasının anatomisi için harika bir tuts+ hile sayfasının bir anlık görüntüsü bulunmaktadır. Bir WordPress teması oluşturmak için aşağıdaki dosyalara ihtiyacınız olacak:
- header.php – Bu şablon dosyası, <head> bölümünde ve açılış <body> etiketinden önce görünen başlık bilgilerini içerir. Burada diğerlerinin yanı sıra meta veriler, site başlığı ve CSS stil sayfanıza bağlantı eklersiniz.
- index.php – Bu, WordPress temanız (veya siteniz) için ana gövde şablonu. Tek amacı, diğer dosyaları şablon etiketlerini kullanarak dahil ederek bir araya getirmektir (bir an için şablon etiketleri hakkında daha fazla bilgi).
- sidebar.php – Bu sizin kenar çubuğu bölümünüzdür. Widget'ları, kategorileri, ekstra menüleri, arama formunu ve hoşunuza giden her şeyi yerleştirebilirsiniz.
- footer.php – Bu, altbilgi bölümüdür. Telif hakkı bilgilerinizi, RSS bağlantılarınızı, widget'larınızı, bağlantılarınızı, sosyal simgelerinizi vb. ekleyin
- page.php – WordPress tabanlı sitenizde bir sayfa oluşturduğunuzda, sorumlu şablon budur
- single.php – Bu şablon dosyaları tek bir blog yazısı taşır
- yorumlar.php – Onlardan sorumlu şablon yorum
- 404.php – Okuyucunuz kötü şöhretli 404 bulunamadı hatasıyla karşılaştığında gösterilen şablon
- search.php – Okuyucularınıza WordPress sitenizde içerik bulma şansı sunar
- searchform.php – Yukarıda belirtilen işlevselliği sunmak için bir arama formuna ihtiyacınız olacak, değil mi?
- arşiv.php – Çünkü 2008'de yayınladığınız içeriği bulmak zor olmamalı
- function.php – Tüm özel işlevleri ve hatta özel eklentileri buraya yerleştirin. Bununla birlikte, temalar arası uyumluluk için bağımsız eklentiler olarak özel kod eklemeniz önerilir. Ekstra menüler ekleyebilir, widget'ları etkinleştirebilir ve çok daha fazlasını yapabilirsiniz. Bu dosya, WordPress sitenizi/temanızı istediğiniz yöne çevirmek için size çok fazla güç verir.
- style.css – Bu bir PHP şablon dosyası değildir. Ama estetiği kontrol etmek için CSS stillerinizi eklediğiniz dosyadır. Ayrıca WordPress temanız için bilgi başlığı ile birlikte gelir.
Şüphesiz, daha az şablonla bir tema oluşturabilirsiniz, ancak bunu alışkanlık haline getirmenizi tavsiye etmiyoruz. Sonuçta, standart bir WP teması oluşturmak için yukarıdaki 10 dosyaya ihtiyacınız var. On üç büyük bir rakam değil, değil mi? Özetle, index.php dosyanız şöyle görünebilir:
<?php // Every page will need the contents of the header.php get_header(); ?> // Insert main content here, include the loop <?php // Include your sidebar get_sidebar(); ?> <?php // The footer hook is used by themes and plugins to load scripts and tracking codes get_footer(); ?>
Devam edersek , loop adında şık bir kod parçasından bahsedelim.
Döngü
Popüler WordPress Eğitimi: HTML'den WordPress Teması Nasıl Oluşturulur gibi önceki yazı dizilerimizden bazılarında, geçerken de olsa döngüden bahsettik. Peki, döngüyü popüler snippet yapan nedir? Bu özel kod parçası olmadan, alıntılarla birlikte her gönderiyi WordPress temanıza elle kodlamanız gerekir. Bunu her yeni makale yayınladığınızda yapardınız.
Harcayacağınız çaba ve zaman sizi maviye çevirir ve kaskatı keser. Arkanda bırakacağın karbon izi – üzgün benliğini ölümüne çalıştıktan sonra – ozon tabakasında on iki Yankee stadyumu büyüklüğünde bir delik açardı. Şey, gerçekleri (veya bunların eksikliğini) gereğinden fazla uzatıyorum ama WordPress sitenize her gönderiyi manuel olarak kodlarsanız çılgına dönersiniz.
Döngü bir hayat kurtarıcıdır. Aşağıdaki kod parçacığını WordPress şablon dosyalarınızın herhangi bir yerine atın, oluşturduğunuz tüm gönderileri listelesin:
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); // Post Content here endwhile; endif; ?>
Gönderilerin bir listesini görüntülemek için genellikle index.php içindeki döngüyü kullanırız, ancak denemekten çekinmeyin; gönderilerinizi listelemek istediğiniz yere ekleyin. Ayrıca, gönderilerinizi uygun gördüğünüz şekilde özelleştirmek için döngü içine özel HTML ve PHP etiketleri ekleyin. Etiketlerden bahsetmişken, WordPress'te neler var?
Etiketleri Dahil Et
Şablon içerme etiketleri, WordPress tema klasörünüzdeki diğer şablon dosyalarını eklemek (veya daha doğrusu çağırmak) için herhangi bir şablon dosyasında kullandığınız PHP kodlarıdır. İşte bahsettiğimiz şey:
- <?php get_header(); ?> – header.php dosyasını çağırmak (veya dahil etmek) için index.php içinde bunu kullanın. Header.php'yi getirecek ve içeriğini index.php'de gösterecek – bir dosyanın dahil edilmesi tamamen bununla ilgili.
- <?php get_sidebar(); ?> – sidebar.php içerir
- <?php get_footer(); ?> – footer.php şablon dosyasını içerir
- <?php yorum_şablonu(); ?> – Hızlı Test: Bu içerme etiketinin ne işe yaradığını düşünüyorsunuz?
Şablon Blog Bilgisi Etiketleri
Bloginfo etiketleri olarak adlandıracağımız başka bir şablon etiketi kategorisi daha var. Veritabanından WordPress siteniz hakkında bilgi almak için bir rol oynarlar. Bu, esas olarak, Kullanıcı Profili ve Ayarlar -> Genel aracılığıyla yönetici alanınızdaki WordPress sitenize beslediğiniz bilgilerdir . Bilgiler veritabanlarınızdan alındıktan sonra, bu etiketler, onları yerleştirirken sitenizde aynı şekilde görüntülenecektir.
Bloginfo'nun yapısını biraz değiştirebilirsiniz, böylece sadece alınan bilgiyi görüntülemek yerine, onu (bilgiyi) PHP kodunuzun başka bir yerinde kullanabilirsiniz. Ne kadar uygun? Birazdan bunun hakkında daha fazla bilgi. İşte en yaygın blog bilgisi etiketleri:
- <?php bloginfo('isim'); ?> – Bu, WordPress blogunuzun/sitenizin başlığını görüntüler
- <?php bloginfo('url'); ?> – Bu şablon etiketi blogunuzun URL'sini görüntüler
- <?php bloginfo('açıklama'); ?> – Bu, blogunuzun açıklamasını veya daha doğrusu sloganını görüntüler.
- <?php bloginfo('karakter seti'); ?> – Sitenizi kodlamak için kullanılan karakter setini görüntüler. Varsayılan UTF-8'dir
- <?php bloginfo('stylesheet_url'); ?> – Bu, etkin temanızın CSS stil sayfasının URL'sini gösterir
- <?php bloginfo('sürüm'); ?> – Kullanmakta olduğunuz WordPress sürümünü görüntüler
- <?php bloginfo('dil'); ?> – WordPress dilini görüntüler
- <?php bloginfo('rss_url'); ?> – RSS 0.92 beslemesinin URL'sini görüntüler
- <?php bloginfo('rss2_url'); ?> – RSS 2.0 beslemesinin URL'sini görüntüler
WordPress temanızı geliştirmek için kullanabileceğiniz birkaç blog bilgisi etiketi daha var. Şimdi, birkaç saniye önce bahsettiğimiz küçük blog bilgisi değişikliği hakkında. Şimdiye kadar <?php bloginfo(); kullanıyorduk . ?>. Bunu şu şekilde değiştirelim: <?php $bloginfo = get_bloginfo ($show, $filter); ?> . Parametreleri parçalamama izin verin:
- $show – Bu, veritabanından almak istediğiniz bilgiyi adlandırmak için kullandığınız anahtar kelimedir. Örnekler arasında 'ad', 'url', 'açıklama', 'admin_email' vb. sayılabilir.
- $filter – Bu sadece alınan bilgileri filtrelemenize izin verir. Varsayılan olarak, 'ham' olarak ayarlanmıştır, bu sadece $show değerinin olduğu gibi döndürüldüğü anlamına gelir. Bunu 'display' olarak ayarlamak, önce $show değerinin wptexturize() işlevinden geçirilmesine neden olur. Yine de şu anda bunun için terlemeyin.
İşte bir örnek: "En İyi Premium WordPress Temaları" gibi sloganınızı (site açıklaması) alıp görüntülemek istediğimizi varsayalım, önce bu bilgiyi bu etiketi kullanarak alacağız…
<?php $site_description = get_bloginfo( 'description' ); ?>
…site açıklamasını $site_description dosyasına yükler. Site açıklamanızı sitenizde görüntülemek için şunu kullanın:
<?php echo 'Your tagline is: '. esc_html( $site_description ); ?>
Bu size şunları sağlar: Sloganınız: En İyi Premium WordPress Temaları
Not: WordPress sitenizle çok daha fazlasını elde etmenize olanak tanıyan birçok başka şablon etiketi türü vardır. Genel etiketler, yazar etiketleri, küçük resim etiketleri, kategori etiketleri ve diğerleri arasında bağlantı etiketleri gibi çeşitli kümelere sınıflandırılırlar. Onları döngü içinde bile kullanabilirsiniz, yani evet, eğlenmelisiniz.
Tema Stil Sayfası
style.css'den daha önce bahsetmiştik. Yine, style.css dosyası neden önemlidir? İlk olarak, temanız hakkında ayrıntılar sağlar. Bu bilgi, yönetici alanında seçim sırasında temanın belirlenmesine yardımcı olan stil sayfası başlığına gider. Bu nedenle, hiçbir iki temanın stil sayfası başlıklarında aynı ayrıntılara sahip olmaması gerekir. İşte bir stil sayfası başlığı örneği:
/* Theme Name: Your Theme Name Theme URI: https://www.yoursite.com/yourtheme Author: Your Name Author URI: https://www.yoursite.com/ Description: This WordPress theme is 100% responsive blah blah... Version: 1.0 License: GNU General Public License V2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: gold, one-column, left-sidebar, responsive-grid, etc Text Domain: yourthemename */
Bu bilgi style.css'de önce (veya en üstte) gelir. Bunun dışında şunları yaptığınızdan emin olun:
- CSS Kodlama Standartlarını Takip Edin
- Geçerli CSS kullan
- CSS'yi simge durumuna küçült
- Baskıya uygun stiller ekleyin
- Tüm HTML öğelerine stil verin
Son düşünceler
Bu hile sayfası, WordPress tema geliştirmeyi öğrenirken başlamanıza yardımcı olacak hızlı bir kaynaktır. Burada paylaştığımız etiketleri ve snippet'leri kullanarak hızlı bir şekilde standart bir tema geliştirebilir ve hiç zorlanmadan geliştirebilirsiniz. Tabii ki, WordPress tema geliştirmeyi öğrenmeye devam etmeniz gerekiyor ve bunun için diğer saygın kaynaklar arasında WordPress Codex, tuts+, Threehouse ve ThemeShaper'ı öneriyoruz.
Bunun dışında, lütfen aşağıdaki yorumlarda ipuçlarınızı, hilelerinizi, snippet'lerinizi veya aklınıza gelen herhangi bir şeyi paylaşmaktan çekinmeyin. WordPress'i nereden veya nasıl öğrendiğinizi öğrenmek isteriz. Görüşürüz!