Basit bir WordPress teması oluşturmak. Şablon için Basit Bir WordPress Tema Grupları Oluşturma

Sitenizi WordPress ile yapmak için kesinlikle bir tema eklemeniz gerekecek. Bunlara şablonlar da denir. Bu, herhangi bir web kaynağının temelidir.

Bu makale, bir şablon oluşturma aşamalarını tartışacak ve psd dosyalarının düzenini açıklayacaktır.

Ayrıca, WordPress temaları için temel teknik gereksinimleri, WordPress çekirdeğinde çalışması için bir şablonun ne olması gerektiğini de öğreneceksiniz. Sonuç olarak, kendi temanızla gereksinimlerinize tam olarak uyan bir web sitesi oluşturabilirsiniz.

Lütfen bu eğitimin hazır bir tema eklemeyle ilgili bir açıklama içermediğini unutmayın - bu, kendi şablonunuzu oluşturmak için bir kılavuzdur. Temayı indirdiyseniz ve nasıl kurulacağını bilmiyorsanız, "Görünüm" bölümündeki WordPress yönetici paneline gidin ve mevcut tasarımlardan birini oraya ekleyin. Ve şimdi temanın ne olduğuna, ne işe yaradığına ve nasıl kendiniz yaratacağınıza daha yakından bakalım.

Bir temanın hangi amaçlarla manuel olarak oluşturulduğu

Bir tema (şablon), birlikte bir kaynağın tasarımını tanımlayan işlevsel ve stil dosyalarının bir koleksiyonudur. Tema, sitenin nasıl görüneceğine bağlıdır, bu nedenle bir şablon oluşturma sürecine doğru bir şekilde yaklaşmak çok önemlidir. Şimdi pek çok kişi şu soruyu soruyor: "İnternetten hazır bir temayı ücretsiz olarak indirebiliyorsanız neden kendi temanızı oluşturmalısınız?". Bu mantıklı bir sorudur ve oldukça kapsamlı bir cevabı vardır: "Gereksinimlerinizi tam olarak karşılayan mükemmel şablonu yapmak."

Ücretsiz WordPress şablonları dizininden bir tasarım satın aldığınızda veya indirdiğinizde, genellikle kaliteden ödün verirsiniz. Genellikle bu şablonlar sizin için çalışmaz. Ama kendinizi alçakgönüllü oluyorsunuz, bir veya iki nüansın resmin tamamı olmadığını ve daha sonra konuyu düzenleyeceğinizi düşünüyorum. Ama aslında, sitenin sevmediğiniz bitmemiş bir temayla kaldığı ortaya çıkıyor. Bu nedenle, derhal kendi işinizi yapmak daha iyidir. Ve düzen ilk başta karmaşık görünebilir, ancak daha sonra öğrendiğinizde özel şablonlar bile oluşturabilirsiniz.

Ek olarak, bir şablon oluşturduktan sonra kendinizi bir WordPress "doktoru" gibi hissedeceksiniz - sitenin içinde ne olduğunu bileceksiniz. Hangi unsurların ne için sorumlu olduğunu anlayın. Sonra site ve sizinle konuşacaksınız. WordPress etiketleri, yapısı ve döngüleri hakkında bilgi edinin. Ya da belki bunu profesyonelce yapmak ve şablonlar oluşturarak hayatını kazanmaya başlamak istersiniz.

Bu nedenle, web siteniz için kendiniz bir şablon hazırlamanızın ana nedenleri şunlardır:

• hTML, CSS ve PHP hakkında bir iki şey hakkında her şeyi öğrenin;
• yaratabileceksiniz çünkü web tasarımı aynı zamanda bir sanattır;
• tema satarak para kazanmak mümkün olacak;
• yeni bir beceri keşfedin;
• gelecekteki siteniz için% 100 uygun olacak bir tasarım oluşturun.

Tema hangi standartları karşılıyor?

Şablonunuzu yazarken resmi yönergelere uymanız çok önemlidir. Kodu kırmak, yanlış yere etiket eklemek ve onu atlamak - bu tasarıma zarar verebilir ve görünümünü tamamen bozabilir. PHP kodu yazma kurallarına ve bu dillere henüz aşina değilseniz HTML'ye aşina olmalısınız. Basamaklı CSS stil sayfalarıyla da uğraşmak zorundasınız, bu yüzden temel bilgileri de unutmayın - İnternette bununla ilgili birçok bilgi var. Eh, ve en önemsiz son gereklilik, bir okul çocuğu gibi değil, tasarımcı gibi bir web sitesi oluşturmaktır, böylece ciddi bir proje elde edersiniz. Aksi takdirde, bu işi üstlenmenin bir anlamı yok.

Tüm WordPress temaları wp-content / themes / klasöründe barındırılır. Bu klasörün içinde ayrı temalara sahip başka klasörler, ek işlevlere sahip bir dosya (functions.php), stil dosyaları ve resimler vardır. Belirli bir konuyla ilgili verileri bulmak için ilgili dizine gitmeniz gerekir. Bu, "Western" temasını wp-content / themes / vestern / klasörüne yerleştirecektir.

Başlamadan önce, önceden oluşturulmuş temaların yapısına en azından birkaç göz atmalısınız. Varsayılan WordPress sitesi, inceleyebileceğiniz iki standart şablon içerir. Bu, Varsayılan ve Klasik şablondur. Dosyalarını sunucuda gerekli dizinde açın ve farklılıklarını karşılaştırın.

Şablonun genellikle üç dosya biçiminden oluştuğunu fark edeceksiniz:

1. Style.css - sitenin dış tasarımından sorumlu bir stil dosyası.
2. Functions.php, sayfalara çeşitli özellikler ekleyen işlevsel bir dosyadır.
3. Sitede görünen şablonun özelliklerinden sorumlu olan diğer php dosyaları, temanın WordPress ile entegrasyonu. Psd düzenini tam teşekküllü bir şablona çevirmenize izin veren bu dosyalardır.

WordPress temasının düzeninin nasıl gittiğini anlamak için bu dosyaların her birine daha yakından bakalım.

Style.css dosyası oluşturma kuralları

İlk olarak, CSS işaretlemesinin tüm özelliklerini karşılaması gerekir. Bu dosya sitenizin nasıl görüneceğini belirler. Ancak, oluşturulan şablonun bir açıklamasını buna eklemezseniz işe yaramaz. Bu, bir psd düzenini WordPress motoruna taşırken akılda tutulması gereken ilk WordPress özelliğidir. Aşağıdaki parametreleri belirtmelisiniz:

1. Şablonun adı.
2. Konuya yönlendiren URL.
3. Şablonun ana özelliklerini belirten açıklama. Kısaca.
4. Yazarın ismi. Bu durumda isminizi girin.
5. Yazara, yani size bağlantı. Sosyal ağlarda profilinize bir bağlantı sağlayabilirsiniz.
6. Ana temanın adı isteğe bağlıdır.
7. Tema versiyonu. Yalnızca oluşturulmuşsa, v. 1.0.
8. Şablonun tam açıklaması. Detaylı yazabilirsiniz.

En temel WordPress temasını oluşturmak için tek bir style.css dosyasıyla düzenlenmiş bir sürüm eklemeniz yeterlidir. Bu dosyada, "şablon" satırının yanında ana temanın adını belirtin. Örneğin, standart bir şablonu düzenliyorsanız Klasik. Şimdi oluşturulan tema Klasik şablonla tamamen eşleşecek. Bu nedenle, dosyaları wp-content / themes / classic dizinine yüklemeniz gerekecektir.

Böylece, önceden hazırlanmış bir şablonun “alt öğesi” olacak ilk, en basit temanızı oluşturabilirsiniz. Ancak bu tam teşekküllü bir site tasarımı olmayacak, sadece onu telafi etme çabası olacak, bu yüzden araştırmaya devam etmelisiniz.

Ek işlevsellik dosyası functions.php'nin özellikleri

Şablonlar her zaman functions.php dosyasını kullanmaz, ancak çoğu durumda gereklidir. İlgili temayla dizine yerleştirilmelidir. Lütfen bu dosya şablon klasöründeyse, temayı başlatırken hesaba katılacağını unutmayın. Bir eklenti gibi çalışır. Ve verdiğiniz gibi işlevleri yerine getirecektir.

Functions.php dosyasının ana amacı, belirli bir tema için yöneticideki mevcut özelleştirme işlevlerini tanımlamaktır. Yani functions.php'ye girdiğiniz tüm işlevler yönetici panelinde veya kullanıcı sayfasında görüntülenecektir. Tipik olarak bu, WordPress sitesinin renk düzenini, yazı tipini ve daha fazlasını değiştirmektir. Ancak bu dosyanın birçok kullanım alanı vardır. Ancak bu tamamen farklı bir hikaye ...

Php şablon dosyalarının özellikleri

Php dosyaları sitenin ayrı bölümlerinden sorumlu olacaktır. Hem kurucu sayfaları hem de kullanıcıya gösterilecek başlıkları, kategorileri ve diğer bölümleri tanımlarlar. Artık temanın yaratıcısı olduğunuz için, hangi ve kaç tane şablon dosyası seçeceğinize karar vermek size kalmış. Bunları seçtikten sonra, yönetici panelinizde yeni işlevler görünecektir. Ne kadar az dosya seçerseniz, site o kadar hızlı çalışır, ancak işlevselliği o kadar az olur. Hangi dosyalara ihtiyacınız olduğunu ve hangilerini onsuz yapabileceğinizi dikkatlice düşünün.

Sitenize minimal bir tema eklemek veya psd düzeninizi denemek istiyorsanız, şablon dizininde yalnızca iki dosyaya ihtiyacınız vardır:

1. Style.css.
2. Index.php.

Deneyimli web yöneticileri, index.php dosyasını yalnızca altbilgi, kenar çubuğu, arama, arşiv, kategoriler, sayfalar vb. İçin ayarları yapmaya yetecek şekilde değiştirmeyi başarırlar. Ancak, her dosyanın içinde yer alacağı bir WordPress şablonu oluşturmaya çalışsanız iyi olur. ilgili işlevi gerçekleştirin.

Yanlışlıkla herhangi bir şablon dosyasına işaret etmeseniz bile, WordPress otomatik olarak siteye kendi varsayılan ayarlarını ekleyecektir. Örneğin, yorumlardan sorumlu bir dosya eklemezseniz, motor bu işlevin sürümlerini dizinlerde bulacaktır - örneğin, wp-comments.php. Daha sonra "yabancı" yorumlar sitenizin yapısına dahil edilecek ve şablon gereksinimlerini karşılamayacaktır. Bunun olmasını önlemek için, sayfanın farklı bileşenlerini görüntülemek için tüm ana dosyaları eklemeniz gerekir:

• header.php - site başlığından sorumludur;
• sidebar.php - kenar çubukları;
• footer.php - kaynak altbilgisi (alt kısım);
• comments.php ve comments-popup.php yorumlardır.

Bu dosyaların her birini oluşturduktan sonra, sitenin bunları görüntülemeye başlaması için, index.php ana şablon dosyasında bunlarla ilgili verileri girmeniz gerekir. Bunu yapmak için, index.php'de adlandırılmış dosyalara götüren etiketleri belirtin. Örneğin:

• site başlık dosyası (header.php) eklemek için etiketi yazın

  get_header () tamplate etiketi;

• altbilgi için de aynıdır, ancak üstbilgi yerine altbilgi vb. belirtin.

İndex.php içindeki şablon dosyalarından birini dahil etmenin bir örneği şu şekilde görünecektir: Belirtilen anahtar şablon dosyalarının her biri için ayrı bilgi aramanız gerekecektir. Şablonlarda yazılan tüm işlevleri anlayabilmeniz için her dosya için kılavuzlar ve örnekler bulun.

Şablon işlevselliği seçimi

Zamanla, hangi şablon türünü seçeceğiniz konusunda bir ikilemle karşılaşacaksınız. Motor bir seçenek sunar. Ya bir Şablon Hiyerarşisi bağlı bir şablon ya da Koşullu Etiketleri olan bir düzen seçebilirsiniz.

İlk seçenek zaten düşünüldü. Tüm php şablon dosyaları Şablon Hiyerarşisidir. Yani, bu hiyerarşinin kurallarına uyarak, aşamalı olarak ayrı düzen dosyaları oluşturursunuz. Böylece, bir dizi işlevsel php bileşeninden tam teşekküllü bir şablon oluşturacaksınız. Bu durumda hiyerarşi, talep üzerine yükleme ilkesi üzerinde çalışır. Örneğin, bir kategori dosyanız (kategori.php) varsa ve kullanıcı bunu talep ettiyse, sitenin bu belirli kısmı tarayıcıya yüklenecektir. Değilse, index.php şablon anahtar dosyası yüklenecektir.

Böylece, Şablon Hiyerarşisi ilkesini kullanarak sitenin ayrı bölümlerinin görünümünü değiştirebilirsiniz. Her sayfanın kendine özgü kimliği vardır. Kategori-6.php dosyasını temalı dizine ekleyin ve kimliği 6 olan bir kategori talep ettiğinizde bu özel tasarım açılacaktır. Orada değilse, ayarlar standart olarak kalacaktır - index.php genişleyecektir.

Bazen Şablon Hiyerarşisi ilkesi, en rahat şablon görünümünü sağlamak için yeterli değildir. Bu durumda, programcılar ikinci prensibi kullanmaya başvururlar - Koşullu Etiketleri sunarlar. Bu etiketler bir siteyi belirli koşullar açısından kontrol eder ve değillerse görünümünü değiştirirler. Yani, bu etiketler if / else (if / then) ilkesine göre çalışır. Yani her kategorinin numarasıyla bir php dosyası eklemeniz gerekmez, ancak her kimlik için koşulları bir kez yazabilirsiniz.

WordPress'te bir psd düzeninin düzeni nasıldır?

Bazı insanlar önce çeşitli programları kullanarak gelecekteki tasarımın bir düzenini oluşturmayı ve ancak daha sonra onu belirli bir motora aktarmayı sever. Bu gerçekten kullanışlıdır, çünkü bazı uygulamalar herhangi bir beceri olmadan harika tasarımlar oluşturmanıza izin verir. Zaten bir psd dosyanız varsa ve bunu WordPress motoru için kod kullanmadan yapmak istiyorsanız, o zaman popüler hizmetlerden birinin yardımını kullanabilirsiniz.

Lütfen bunun ücretli bir hizmet olduğunu, dolayısıyla şablonun yalnızca yarısının size ait olacağını unutmayın. Düzen size uygun görünüyorsa, ancak artık onu dizmek için gücünüz yoksa, bu hizmeti yalnızca son çare olarak sipariş edin. Düşük bir fiyata ve kelimenin tam anlamıyla bir gecede psd'yi WordPress'e aktarmaya hazır birçok programcı var.

PSD, Photoshop uygulamasından alınan bir dosyadır. Tasarımınızın grafik bir temsili gibidir. Bunu telafi etmek için, bir metin düzenleyicisine html işaretlemesi eklemeniz gerekir. Yavaş yavaş, bu işaretlemenin her bir noktasını değiştirerek, düzende gösterilen nihai sonucu elde edeceksiniz. Hemen şablonunuzun ortalamasını ve farklı parçalarının boyutlarını belirtin.

Bir sonraki adım, arka plan resimleri eklemektir. Aynı Photoshop uygulamasını kullanarak bunları kendiniz de yapabilirsiniz. En kolay seçenek, degrade arka plan resimleri oluşturmaktır. Ardından logonuzu oluşturmaya başlayın. Ortaya çıkan tüm istekleri yavaş yavaş çözün - site üstbilgisini, altbilgisini, kenar çubuğunu ve tüm parçalarını yapılan düzene göre ayarlayın. Sitenin gereksinimlerinize göre yüklenmesi için dizinine önemli şablon dosyaları eklemeyi unutmayın.

Ancak bu şekilde, farklı programlama dillerinin temellerini kademeli olarak öğrenerek, bağımsız olarak bir web sitesinin nasıl oluşturulacağını öğrenebilirsiniz. Kimse bugün ya da yarın yapabileceğini söylemiyor. Yerleşim sürecinin tüm özelliklerini anlamak aylar alabilir. Ancak endişelenmeyin - bazıları yıllar alabilir. Artık sıfırdan bir şablon oluşturmanın yanı sıra, psd düzenini WordPress motorundaki bir İnternet kaynağı için hazır bir temaya aktarmanın yaklaşık prosedürünü biliyorsunuz.

Merhaba, bugün bir web sitesi düzeni oluşturma hakkında bir makale yayınlamaya karar verdim ve bunu daha sonra düzenleyip çekeceğiz wordpress motoru... Bu nedenle, bu makalelerin yayınlanmasını kaçırmak istemiyorsanız, o zaman kesinlikle blog güncellemelerine abone olun ve makalenin yayınlanmasından sonra hemen öğreneceksiniz. Bir psd site düzeni oluşturmak ve bir wordpress şablonu oluşturmak aslında çok basit bir süreçtir ve eminim ki talimatlarımı takip edebilir ve kendinize tamamen benzersiz bir şablon alabilirsiniz.

Bir şablon oluşturmak için çok fazla bilgiye, bilgiye ihtiyacımız yok HTML ve CSS, sadece bu blogdaki konulardaki makaleleri okuyun. DIV etiketlerinin ve SPAN etiketlerinin kullanımına özellikle dikkat edin.

Şimdi bir PSD düzeni oluşturmak için neye ihtiyacımız olduğunu bulalım ve sonra bu şablonu site için yapalım. Aslında bunun için fazla ihtiyacınız yok, internetten indirilebilen bir photoshop programı, umarım bu sizin için sorun olmaz ve bunun için kaynak materyalleri indirin.

Ayrıca yakında site için dokuların ve arka planların nasıl oluşturulacağı hakkında konuşacağım makaleler yayınlayacağım, bu yüzden blog güncellemelerine abone olun.

Belge oluşturma.

Şimdi düzeni oluşturmaya başlayalım ve yeni bir belge oluşturalım. Dosyayı seçin - oluşturun. Belge için boyutları seçin 960 açık 1600 pikseller.

Sol ve sağ olmak üzere iki kılavuz gösteriyoruz. Bunu yapmak için cetvellere tıklayın ve çizgiler çizin.

Şimdi tuvali yeniden boyutlandırmamız gerekiyor. Bunun için seçiyoruz Görüntü boyutu tuval ve tuval boyutunu 1200 x 1600 piksel olarak ayarlayın. Bundan sonra, Boya Kovası Aracını kullanarak bu alanı beyazla doldurun.

Şablon grupları.

Şimdi site için gruplar oluşturalım. Tüm şablonlarda olduğu gibi sitenin başlık, menü, içerik, yan sütun ve altbilgisi gibi standart gruplar oluşturalım. Bunu yapmak çok kolaydır, katmanlar menüsünde klasör resmine tıklayın, oluşturulan grubu yeniden adlandırmak için, sadece isme çift tıklamanız ve istediğiniz adı girmeniz yeterlidir.

Site başlığı.

Şimdi site için bir başlık oluşturarak başlayalım. Yapılacak ilk şey, adlı bir dokuyu açmaktır. "Doku 1"... Ve şimdi siyah arka planı kırpmamız gerekiyor, bunu yapmak çok kolay, aracı seçin "Sihirli değnek" ve siyah arka plana tıklayın, şimdi ışıklı alana sağ tıklayın ve "Seçimi ters çevir" öğesini seçin.

Bir sonraki adım, sınırlarımızın doğruluğunu ayarlamak, farenin sağ düğmesini ve kenarı iyileştirmek için öğeyi seçmektir. Ve tüm ayarları resimde gösterildiği gibi yapın.

Şimdi " katmanlar - yeni - yeni katmana kopyala". Şimdi katmanı fareyle alın ve çizimimize sürükleyin.

Bir sonraki adım, çizimi çevirmektir. Bunu yapmak için, Saat yönünün tersine 90 derece Düzenle-Dönüştür-Döndür'ü seçin. Bundan sonra, farenin sol tuşuna basarak, aşağıdaki resimde gösterildiği gibi katmanınızı hareket ettirmeniz gerekecektir.

Şimdi resmimizin doygunluğunu artırmamız gerekiyor ve bunun için sekmeye gidiyoruz Görüntüler - Düzeltme - Ton / Doygunluk... Şimdi resmin parlaklığını -100'e düşürmemiz gerekiyor. Ve almamız gereken şey bu:

Şimdi web sitemizin logosunu yazalım. Bunun için yeni bir yazı tipi yüklememiz gerekiyor. Sanırım kaynak dosyayı zaten indirmişsiniz ve arşivde bir de yazı tipi dosyası var. Yapmanız gereken ilk şey, yazı tipini açmaktır. Şimdi klasöre gitmemiz gerekiyor (çoğunlukla bu C: / windows - Yazı Tipi Sürücüsüdür).
Ve oradaki tüm yazı tipi dosyalarını kopyalayın. Şimdi programı yeniden başlatın ve bu yazı tipi sizin için kullanılabilir olacaktır.
Şimdi Metin aracını seçin ve yazı tipimizi, beyaz rengini seçin ve sol kılavuzun yakınında bir logo oluşturun. İşte sahip olduğum şey.

Şimdi sağ tarafta bir menü oluşturalım. Üç ana noktadan oluşacak ve burası Ana Sayfa, Kişiler ve yazar hakkında. Metin aracını tekrar seçin ve doğru yerde tıklayın. Renk beyazdır ve yazı tipi Geniş Latin'dir ve boyutu 18 pikseldir.

Yeni bir katman oluşturun. Şimdi "düz kement" aracını alın ve etiketlerden birinin etrafındaki düğmeyi seçin.

Ve seçilen alanı 2A2A2A rengiyle doldurun. Şimdi katmanların sırasını değiştirin, katmanı dolgunun üstündeki yazıt ile aktarın.

Sitenin ana içeriği.

Ve şimdi tıklandıktan sonra bir menü butonumuz var. Şimdi İçerik klasörüne gitmemiz ve içinde yeni bir katman oluşturmamız gerekiyor.

Açığız resim 3 ve tüm katmanların altına yerleştirin. Dönüşüm yardımı ile resmin boyutunu tüm alanı doldurana kadar arttırıyoruz.

Şimdi dokunun parlaklığını ve kontrastını ayarlayın. Bunu yapmak için düğmelere basın Ctrl + Üst Karakter + U... Görüntü - Düzeltme - Eğriler'i seçin.

Ayarları resimdeki gibi yapıyoruz.

Yeni bir katman oluşturun ve şimdi sizinle içerik alanını seçelim. İçerik alanı beyaz ve 660 x 1200 piksel olacaktır. Bunu yapmak için, alanın boyutlarını girmemiz gereken "dikdörtgen alan ve stile göre belirlenmiş oranlar" aracını seçin ve ardından alanı "Doldur" aracıyla doldurun.

Şimdi alanımız için bir vuruş ayarlamamız gerekiyor. Resmimizin bulunduğu katmanı seçin ve "Katman stili ekle" düğmesine tıklayın, açılır menüden Kontur'u seçin.

Ve aşağıdaki ayarları yapın - kalınlık 1 piksel ve renk c8c7c7.

Şimdi aç resim 4, ölçekleme kullanarak boyutu küçültürsek, sağ ve soldaki beyaz alandan yaklaşık on piksel daha büyük olmalıdır. Üstte ve altta 50-60 piksel girinti yapmanız gerekir.

Şimdi düğme kombinasyonlarına basıyoruz Ctrl + Üst Karakter + U dokuyu doygunluğunu gidermek ve eğrileri kullanarak parlaklığı ayarlamak için. Resimdeki gibi ayarlar.

Beyaz tuvalimizin bulunduğu katmanı seçin, sağ tıklayın ve " Piksel seçin».

Şimdi gri katmanı seçin ve tıklayın seçim - değiştirme - sıkıştırve üç piksel küçültecek şekilde ayarlayın. Bundan sonra, seçimimizi tersine çevirmemiz gerekiyor, bunu zaten yaptık ve bunu yapmak kolay, seçmek Seçimi ters çevirme, düğmesine basın Del... İşte almamız gerekenler:

Şimdi aynı gri katman için bir maske oluşturun.

Siyah beyaz bir gradyan seçin ve sayfanın ortasından altına doğru çizmek için sol tıklayın ve böylece geçişi yumuşatın.

Şimdi sayfa gezinme düğmelerini oluşturalım. Bunu yapmak için, sadece siyah bir dikdörtgen çizmemiz gerekiyor, kendi takdirinize bağlı olarak boyutu seçebilirsiniz. Ayrıca her düğmede sayfaların adını kaydetmeniz gerekir. Yazıtlar için yazı tipini kullanın Times New Roman ve boyut 18 pikseller.

Şimdi ikonlu bir resim açalım ve ana menünün karşı tarafına ekleyelim. Şimdi içeriği her iki tarafta yirmi piksel girintili yapmamız gerekiyor. Şimdi ilk yazımıza bir başlık eklememiz gerekiyor, yazı rengi siyah. Yorumların tarihi ve sayısı için cb8154 rengini kullandım.

Şimdi, başlığı sitenin ana içeriğinden ayırmak için bir çizgi çizin. Düz bir çizgi çizmek için, kurşun kalem aracını seçmeniz ve Shift tuşunu basılı tutmanız, başlangıcına tıklayarak bir çizgi çizmeniz ve çizginin en sonuna kadar çizmeniz gerekir.

Şimdi önizleme için bir yer oluşturmamız gerekiyor. Bunu yapmak için ihtiyacımız olan boyutlarda bir dikdörtgen oluşturun, 165 x 165 piksel yapmaya ve onu siyahla doldurmaya karar verdim. Ayarları buna uygulayın: kontur ve gölge.

İnme.

Gölge.

Şimdi biraz serbest metin ekleyelim. İşte almamız gerekenler:

Şimdi makalelerin bitiminden sonra, 30 pikseli ve gri rengi (ССССС) ayırmanız gerekiyor. Sonra dört adet 32 \u200b\u200bx 32 piksel kare çizin ve bunları 8E0A13 kırmızıyla doldurun.

Bir arama formu çizmek.

Bunu yapmak için, sadece dikdörtgen bir beyaz alan çizmemiz, ona bir iç gölge uygulamamız gerekiyor.

Şimdi 32x32 boyutunda ve kırmızı renkte kırmızı bir düğme çizip " Arama».

Kenar çubuğu.

Yeni bir katmanda, 270 piksel genişliğinde bir dikdörtgen çizin ve 1F1F1F rengiyle doldurun. Ayrıca aynı 270 piksel genişliğinde ve 25 piksel yüksekliğinde, siyahla dolu bir başlık ekleyin.

Şimdi blog için kategoriler yazmamız gerekiyor. 16 piksel boyutunda, Times New Roman yazı tipinde metin. Her menü öğesine bir resim eklemeniz gerekir. Biz seciyoruz " Keyfi şekil"Ve raster noktasının şeklini seçin" Süs 4”Ve 818181 ile doldurun.

Site altbilgisi.

Altbilgi ile fazla uğraşmayacağız, sadece tüm alanı siyahla doldurun ve Times New Roman yazı tipi, 18 piksel boyutunda ve E6E6E6 rengiyle bir menü ekleyin.

Ortaya çıkan bir şablonu indirmek istiyorsanız, düğmeye tıklayın ve bir indirme bağlantısı size sunulacaktır. Bu, makaleyi sonlandırıyor ve artık bir wordpress şablonu oluşturmanın ilk adımının bir PSD site düzeni oluşturmak olduğunu bildiğinizi düşünüyorum.

Bu makale, en basit WordPress temasını nasıl oluşturacağınız konusunda size yol gösterecektir. Kodeks bu konuda kapsamlı belgeler sunsa da, yeni başlayanlar için biraz ürkütücü geliyor bana. Bu nedenle, bu "eğitimde" size WordPress temalarının nasıl çalıştığını anlatacağım ve ham bir HTML şablonunu onlar için nasıl uyarlayacağınızı göstereceğim. Bu, sizden PHP bilgisi gerektirmez, ancak bir tasarım oluşturmak için Photoshop ve CSS'yi biliyorsanız iyidir.

1. Ön uç blogu

Başlamadan önce varsayılan WordPress temasına bir göz atalım ve nelerden oluştuğunu anlayalım. Öğeleri işaretleyelim (başlık, yazı başlığı, arama formu, gezinme, altbilgi, vb.).

Standart Ön Sayfa ( index.php)

Standart Tek Kişilik ( single.php)

2. Photoshop düzenleri

Varsayılan temanın görünümüne ve hissine bağlı olarak, blogunuz için Photoshop mizanpajları tasarlayın. Bu örnek için, ücretsiz temalarımdan biri olan GlossyBlue kullanıyorum. Bitmiş Photoshop dosyasını görmek için demo.zip dosyasını indirin.

3. HTML ve CSS

PSD tasarımı hazır olduğunda, her sayfa için bir HTML + CSS şablonu oluşturun. Bu talimatın adımlarını takip ederek, GlossyBlue HTML dosyalarımı şuradan kullanabilirsiniz: demo.zip... Arşivi açtıktan sonra göreceksiniz index.html, single.htmlve page.html... Sonra, onları bir şablona dönüştürmek için kullanacağım.

Neden önce statik HTML oluşturmalısınız? Bu esas olarak gereklidir çünkü geliştirme sürecini büyük ölçüde basitleştirecektir. Genellikle her şablon için bir HTML dosyası oluşturuyorum, tüm tarayıcılarda geçerliliğini (HTML ve CSS biçimlendirmesi) kontrol ediyorum. Bundan sonra, geriye kalan tek şey WordPress kodunu kesip yapıştırmaktır. Böylece HTML veya CSS hataları konusunda endişelenmenize gerek yok.

4. WordPress teması nasıl çalışır?

Varsayılan tema klasörüne ( wp-içerik / temalar / varsayılan), birçok php dosyası (şablon dosyaları olarak adlandırılır) ve bir dosya göreceksiniz style.css... WordPress genellikle birkaç şablon dosyası kullanır ( index.php , header.php, sidebar.php,ve footer.php).

Codex'te daha fazla ayrıntı: "Site Mimarisi" ve "Şablon Hiyerarşisi".

5. Yinelenen şablon dosyaları

HTML klasörünü GlossyBlue'dan klasöre kopyalayın wp-içerik / temalar... Bundan sonra varsayılan tema dizinine gidin, comments.php ve searchform.php klasöre parlak mavi.

6. Style.css

Varsayılan tema klasörüne gidin, dosyayı açın style.css... Dosyanın başında açıklanan metni kopyalayın ve şuraya yapıştırın: style.css GlossyBlue temaları. İsterseniz başlık ve yazar bilgilerini değiştirebilirsiniz.

7. Dosyaları bölme

Şimdi HTML dosyalarını parçalara nerede böleceğimizi bulmamız gerekiyor: header.php, sidebar.php ve footer.php... Aşağıdaki ekran görüntüsü indeks dosyamın basitleştirilmiş bir versiyonunun yanı sıra bölünme ilkesini göstermektedir.

8. Header.php

Keşfedin index.html... Bölümü yukarıdan bittiği yere kadar kesmeniz, yeni bir php dosyasına yapıştırmanız ve olarak kaydetmeniz gerekir. header.php.
Varsayılan tema klasörüne gidin, yeni açın header.php... Php kodunun gerektirdiği etiketleri kopyalayın ve değiştirin: başlık, bağlantı, stil sayfaları, h1 ve div sınıfı \u003d açıklama.

Navigasyon menüsü (wp_list_pages) Etiketleri değiştirin li -de ul id \u003d nav üzerinde;

9. Sidebar.php

Geri vermek index.html, kodu başladığı yerden kesin form id \u003d searchform ve etiket kapanmadan önce div id \u003d kenar çubuğu, yeni bir php dosyasına koyun ve farklı kaydedin sidebar.php.

• Değiştir form id \u003d searchform tüm içerik açık.
• Etiketleri değiştir li kategoriler
• Etiketleri değiştir li arşivler

10. Footer.php

Geri vermek index.html... Buradan kodu çıkartın div id \u003d altbilgi div etiketi id \u003d altbilgi ile kapsayıcı sonuna kadar / html sonra yenisini koy footer.php.

Son girişler Burada en son 5 blog gönderisini görüntülemek için query_post'u kullandım.

"Son Yorumlar" Eklenti tarafından oluşturulan "Son Yorumlar" (tema klasöründe bulunur)

11. Index.php

Şimdi senin içinde index.html sadece kalmalı div id \u003d içerik... Dosyayı farklı kaydedin index.php... Satırları girin: get_header, get_sidebarve get_footer desende göründükleri sırayla.

12. Döngüyü ayrıştırma

Döngü, ayarlarınıza bağlı olarak blog gönderilerini sırayla görüntüler. Aşağıdaki ekran görüntüsü nasıl çalıştığını göstermektedir. Başlangıçta döngü, kayıtların varlığını kontrol eder ve herhangi bir kayıt bulamazsa bir mesaj verir. "Bulunamadı".

13. Bir döngünün kopyalanması

Varsayılan tema dizinine gidin, index.php... Döngüyü standarttan kopyalayın index.php senin - arasında div id \u003d içerik ../ div... Bundan sonra, statik metni WordPress şablon etiketleriyle değiştirin: gönderi tarihi, başlık, kategori, yorumlar, sonraki ve önceki bağlantı.

14. Tema önizlemesi

Tebrikler! Herkese açık bölümü (şablonun ana bölümünü) oluşturdunuz Şimdi yönetici paneline gidin, yer işaretine gidin Tasarım, bir GlossyBlue teması görmelisiniz. Etkinleştirin ve sonucu eylemde görmek için genel bölüme gidin.

15. Single.php

Bir şablon oluşturma zamanı single.php... İsterseniz, kodu standart temadan aktararak adımları tekrarlayabilirsiniz. Ama yeni oluşturulmuş olanı kullanmak benim için daha kolay görünüyor index.phpolarak kaydederek single.php... Keşfedin single.php standart temadan ve şablon etiketlerini istediğiniz yere kopyalayın. Sonra bağlanın yorumlar_şablonu... Aşağıdaki ekran görüntüsü yaptığım değişiklikleri gösteriyor:

16. Page.php

Şimdi yeni single.php başlık ile kaydet page.php... Yazı tarihini, yorum formunu, sonraki / önceki bağlantıları kaldırın. Hepsi bu - şablonunuz. page.phphazır.

17. HTML dosyalarını kaldırma

Tüm HTML dosyalarını klasörden sil parlak mavi(artık onlara ihtiyacımız olmayacak). Bu, temel bir WordPress teması oluşturmak için teknik olarak yeterlidir. Standart temada daha fazla PHP dosyası olduğunu fark etmiş olabilirsiniz. Aslında, basit bir temaya ihtiyacınız varsa onlara gerçekten ihtiyacınız yok. Örneğin, eğer search.php veya 404.php tema klasöründe olmayacaksa, WordPress otomatik olarak index.php Sayfayı görüntülemek için. Daha fazla ayrıntı için Şablon Hiyerarşisini okuyun.

18. WordPress Sayfa Şablonu

Son bir örnek için - size blogunuzdaki tüm gönderileri listeleyen bir Arşiv sayfası oluşturmak için Sayfa Şablonunu nasıl kullanacağınızı göstereceğim (bir site haritası için kullanışlıdır). Kopyala archives.php varsayılan tema klasöründen. Gereksiz kodu kaldırın ve şuna benzer bir şey elde edersiniz:

Ücretsiz PSD web sitesi şablonları, iş, portföy ve diğer web sitesi türlerini ayarlamak için kullanışlıdır. İnternetin her yerinde bulunabilirler. Çoğunun çirkin olduğunu söylememekle birlikte, nadiren standartlarınızı aşacak bir şey bulursunuz. Adobe Photoshop, "kullanımı kolay, ustalaşması zor" programlardan biri olduğundan, birçok yeni başlayan ve profesyonel ilk web siteleri için PSD şablonlarını kullanmayı tercih ediyor. Bunun nedeni, PSD web şablonlarının kurulumunun, düzenlemesinin ve kullanımının kolay olmasıdır. Ancak, bu web şablonlarını güvenilir kaynaklardan almanız gerekir. Bir web şablonu tasarımına aşık olmak, onu heyecanla indirmek ve Photoshop'ta açmak kolaydır, ancak bunun tam bir karmaşa olduğunu ve etrafında yolunuzu bulamayacağınızı fark etmek için.

İyi web şablonları estetik açıdan hoştur ve gözleri yatıştırır. Öte yandan harika web şablonları, en iyi göz alıcı ve kullanımı kolay şablonları oluşturmak için bu tür bir güzelliği kullanılabilirlikle birleştirir.

İster bir portföy web şablonu, ister kişisel bir blog şablonu, bir e-ticaret şablonu veya bir restoran şablonu isteyin, bu en iyi ücretsiz PSD şablonlarının listesini gerçekten yararlı bulacaksınız.

SINIRSIZ İNDİRME: 500.000+ Web Sitesi Şablonu ve Tasarım Varlığı

İhtiyaç duyduğunuz tüm Web Sitesi Şablonları ve diğer birçok tasarım öğesi, Envato Elements'e aylık abonelik için mevcuttur. Abonelik ücreti aylık 29 ABD dolarıdır ve size sınırsız erişimbüyük ve büyüyen bir kitaplığa 500,000+ İhtiyaç duyduğunuz sıklıkta indirilebilen öğeler (Stok fotoğraflar da)!

ŞİMDİ İNDİRİN

Tasarımı hazırladığınızda, herkese ilham verecek şekilde sergileme zamanı gelir. Basit bir ekran görüntüsü kullanabilirken, aynı zamanda bir PSD web sitesi şablonuyla işleri tamamen yeni bir boyuta taşıyabilirsiniz. Bu özel paket, yararınıza kullanabileceğiniz yedi farklı stil içerir. İMac, Macbook ve tek sayfadan iki iPhone'a ve kırpılmış Macbook'a kadar seçenekler orada, parmaklarınızın ucunda. Arka planı şeffaf tutarak veya renk ve hatta görüntü ekleyerek de düzenleyebilirsiniz. İşleri istediğiniz gibi yapın ve çalışmalarınızı mümkün olan en iyi ışıkta sergileyin.

Web sitenizin esnekliğini göstermek için kullanabileceğiniz süper minimal, temiz ve çarpıcı cihaz örnekleri. Kitte, her biri orijinal, yaratıcı ve dikkat çekici on iki farklı varyasyon var. Dahası, Macbook, iPad ve iPhone arasında seçim yapabilirsiniz. Reklam öğelerinizi sürükleyip bırakın ve istediğiniz şablonun onları anında görüntülemesine izin verin. Diğer güzellikler arasında on bir gölge kaplaması, özelleştirilebilir arka plan ve altı ana renk seçeneği bulunur. Artık dikkatleri üzerine toplayacak bir sunum yapmak için eksiksiz bir çözüme sahipsiniz. Her şeyi basit ve minimal tutmak sizin bir fincan çayınızsa, bu mockup paketi tam size göre.

Altı farklı izometrik görünüme sahip çarpıcı, modern ve kullanıcı dostu bir web sitesi mockup şablonu. Çevrimiçi varlığınız için spor yapmak istediğiniz sunum tarzı buysa, bunu hemen gerçekleştirin. Bir şablon bir parmak dokunuşuyla gerçekleştirdiğinde çalışmanızı nasıl sergilemek istediğinize sayısız saat harcamanıza gerek yok. Sadece tasarımlarınızı kaydırın ve hemen hemen bu kadar. Web sitenizin tamamını sergilemek için birden fazla sayfa düzeni ekleyebilir ve arka planı düzenleyebilirsiniz. Kısacası, nihai ürün gerçek bir şaheser olacak ve yeni müşteriler kazanmanıza yardımcı olacak.

Farklı cihazlara sahip çeşitli web sitesi örneklerinden oluşan eksiksiz bir koleksiyon. Artık sayfanızın esnekliğini iPhone'lar, iMac'ler, Macbook'lar ve iPad'lerde zorlayabilirsiniz. Ayrıca 4000 x 2500 piksel boyutunda on dört farklı PSD sahnesi bulacaksınız. Bunları, web sitesi tasarım vitrininin ötesine geçen her türlü farklı sunum için kullanabilirsiniz. Diğer özellikler arasında gölgeler ve ışık ayarı, akıllı nesneler (sadece sürükle ve bırak),% 50 yakınlaştırma ve daha fazlası bulunur. Ayrıca arka plan rengini değiştirebilir ve çok ayrıntılı özelleştirmenin keyfini çıkarabilirsiniz. Süper hızlı düzenleme ve iyileştirme ile, birkaç dakika içinde kullanıma hazır birden çok farklı sunumunuz olabilir.

Tasarımınızı görüntülemek için bir cihaz aradığınız diğer tüm web sitesi mockup şablonlarına başka bir harika alternatif. Bu durumda, kite dahil edilen, boyutları 4000 x 2500 piksel olan on iki farklı PSD dosyası elde edersiniz. Kusursuz düzenleme için nesneler ve gölgeler ayrılmıştır. Unutmayın, bu mockup paketi, sayfa tasarımınızın çarpıcı ve foto-gerçekçi görüntüsünü gerçekleştirme yolculuğunuzda size yardımcı olacak talimatlarla birlikte gelir. Akıllı nesne katmanları sayesinde, bu model düzenlerini etkinleştirmek için gerçekten çok fazla zaman ve enerji harcamanıza gerek yok. Görüntünüzde kaydırın ve anında eylem halinde görün.

Avire

Avire, düz stil tasarıma sahip, son derece özelleştirilebilir tek sayfalık bir şablondur. İhtiyaçlarınıza uyacak şekilde kullanımı ve değiştirilmesi kolaydır. Burada ve orada birkaç ince ayar ile tüm gereksinimlerinizi kesinlikle karşılayabilir.

Hexal

Hexal, web sitenizin ziyaretçilerine kalıcı izlenimler bırakmayı garanti eden benzersiz bir portföy şablonu. Web tasarımcıları, grafik tasarımcılar ve yaratıcı bir zihne sahip herkes için kesinlikle mükemmeldir.

Dokulu Tasarım

Bu ücretsiz PSD dosyasını hem kişisel hem de ticari amaçlarla kullanabilirsiniz. Yaratıcı kişilere hitap eden tek sayfalık bir portföy web şablonu.

Değiştirmek

Switch, bir önyükleme 3B çok amaçlı web şablonu, yani istediğiniz gibi olabilir! Tüm ihtiyaçlarınız için çeşitli çözümler sunan harika bir tek sayfalık şablon görevi görür.

Kappe

Kappe, yaratıcı, çok amaçlı bir web şablonu. Izgara tabanlı tasarımıyla, birkaç fare tıklamasıyla kişisel bir bloga veya iş web sayfasına dönüştürebilirsiniz.

Bildir

Bildir, web'deki en iyi uygulama açılış sayfasıdır. Şık ve modern tasarımı, mesajınızın tam da hayal ettiğiniz gibi iletilmesini sağlar.