İçerik
- Bilgi gerekli: HTML, CSS, PHP
- Gerektirir: Drupal 7'nin çalışma kurulumu
- Proje zamanı: 1 saat +
Kaynak dosyaları buradan indirin
Bu makale ilk olarak web tasarımcıları ve geliştiricileri için dünyanın en çok satan dergisi olan .net dergisinin 221. sayısında yayınlandı.
Yani, DrupalCon London ve Denver'ı özlediniz mi? Ya da devam ettiniz ve herkesin bahsettiği bu temalı şeyin ne olduğunu gerçekten anlamadınız mı? Bu eğitim sizi doğru yola götürecek.
Öncelikle tasarımcı ya da CSS uzmanı olmadığım ve hiçbiriyle ilgilenmediğim gerçeğini anlatmak istiyorum. Drupal'ı çok iyi tanıyorum ve size Drupal temasına başlamanın en iyi yolunu ve tema içinde medya sorgularından nasıl yararlanacağınızı göstermek istiyorum. Drupal topluluğunda şu anda HTML5, CSS3 ve medya sorguları gibi teknolojilerin en iyi nasıl entegre edileceği hakkında çok fazla konuşma var. Hem Jake Strawn hem de John Albin Wilkins, DrupalCon London oturumlarında duyarlı tasarımın kullanımını tartıştılar.
Medya sorguları, mobil cihazlar için site oluşturmanın her zaman en iyi yolu değildir, ancak sitenizin farklı görünümlerle çalışması için iyi bir yol sunarlar. Ayrıca Varnish gibi harici önbelleğe alma ile iyi oynuyorlar. Cihazı koklayan ve ardından sitenin doğru sürümünü veya farklı bir temayı görüntüleyen çözümlerin çoğu, önbelleğe alınır ve kullanıcıya doğru sürümü göstermez.
Drupal temasına başlamak için ihtiyacınız olan tek şey, temanızın ve CSS'nin ana hatlarını çizip tanımlayabileceğiniz bir bilgi dosyasıdır. Drupal sizin için gerisini halleder. Bununla birlikte, HTML’den herhangi birini veya hatta içeriğin kendisini düzenlemek istiyorsanız, bunu yapmakta özgürsünüz - ve bu makale size nasıl yapılacağını gösterecektir.
Bilgi dosyaları
İlk adım bir bilgi dosyası yazmaktır. Bu dosya, temanızın ne olduğunu ve nasıl kullanılacağını bilmek için Drupal'ın ihtiyaç duyduğu tüm bilgileri depolar. Birkaç gerekli öğe ve birçok isteğe bağlı öğe vardır.
- name = Duyarlı
- description = Drupal7'de Medya Sorguları kullanma örneği
- core = 7.x
- stil sayfaları [tümü] [] = css / reset.css
- stil sayfaları [tümü] [] = css / main.css
- stil sayfaları [(min-genişlik: 480px)] [] = css / 480.css
- stil sayfaları [(min-genişlik: 768px)] [] = css / 768.css
- stil sayfaları [(min-genişlik: 1024px)] [] = css / 1024.css
- stil sayfaları [(min-genişlik: 1280px)] [] = css / 1280.css
Yukarıdaki kod adlı bir dosyaya eklenebilir responsive.info. Bu dosyanın adlı bir klasöre gitmesi gerekecek duyarlı, daha sonra içine girebilir siteler / tümü / temalar Drupal 7 kurulumunuzun.
Bu dosyanın ilk birkaç satırının anlaşılması kolay olmalıdır: isim temanızın adıdır; açıklama temanızın açıklamasıdır; ve çekirdek temanızın yazıldığı Drupal sürümüdür - bu durumda Drupal 7 kullanıyoruz, bu nedenle çekirdek dır-dir 7.x. Her ikisi de isim ve açıklama Drupal arayüzündeki Temalar sayfasında görüntülenecektir.
Sonraki birkaç satır, Drupal'ın temanızın bir parçası olarak yüklemesini istediğiniz tüm stil sayfalarıdır. Bu stil sayfalarının bildirimi sözde bir PHP dizisindedir. Dizideki ilk anahtar, Drupal'ın oluşturacağı stil etiketinin medya öğeleridir.Bu anahtar, temanız için kullanmak istediğiniz baskı veya ekran gibi herhangi bir medya sorgusunu veya HTML stili etiket medya öğesini içerebilir. Birden çok stil sayfasının tek bir ortam türüne uygulanmasına izin vermek için dizideki ikinci anahtar boş bırakılır. Bu stil sayfaları için, Andy Clarke’ın ‘320 ve üstü’ yaklaşımını benimsiyorum.
Bu düşünce tarzı, ekran büyüdüğünde onları elinizden almak yerine işlevsellik ve özellikler eklemeye odaklanmanızı sağlar. İlk iki stil sayfası tüm ortam türleri içindir. Reset.css bir CSS sıfırlama içeriyor - benim durumumda (ve örnek dosyalarda), bu Eric Meyer'e ait, ancak kendinizinkini kullanmaktan çekinmeyin.
Main.css "gerçek" CSS'nin başlangıcıdır. Bu, her görüntü alanı boyutunda kullanılacak tüm varsayılan CSS'ye ve ayrıca 480 pikselden daha küçük bir görüntü alanında görüldüğünde site için biçimlendirmeye sahiptir. Bu, portre akıllı telefon stilleri eklemek için ideal bir yerdir.
Bilgi dosyasının son dört satırı, medya sorgularını kullanan dört CSS dosyasını tanımlar. Bu medya sorguları, CSS'yi bir yatay iPhone boyutu olan 480 piksel olarak değiştirecek şekilde ayarlanmıştır:
768px, dikey iPad boyutu:
1.024px, yatay bir iPad boyutunda ...
... ve 1,280 piksel, iyi boyutlu bir masaüstü tarayıcısının boyutu:
Şimdi devam edebilir ve bilgi dosyasında tanımlanan CSS dosyalarını oluşturabilirsiniz. Örnekte kullanılan dosyaların yolu, OKB'nin iyiliği için bir CSS klasörü kullanır. Bu nedenle adında bir klasör oluşturmanız gerekecek css içinde siteler / tümü / temalar / duyarlı daha sonra bilgi dosyasında ayarlanan dosya adlarını kullanarak CSS dosyalarını orada oluşturun.
Eric Meyer’in (veya en sevdiğiniz) CSS sıfırlamasının bir kopyasını alın ve buraya yerleştirin reset.css. Daha sonra main.css siteyi tasarlamak için CSS'nizi eklemeye başlayın. Drupal HTML'yi sizin için zaten oluşturmuştur ve HTML Drupal'ın oluşturduğu şeye bakmak ve sitenizin çıplak haliyle neye benzediğini görmek için şimdi "Duyarlı" temasını etkinleştirebilirsiniz.
Drupal’ın HTML’inden memnun değil misiniz? Pekala, sorun değil - bunu değiştirebilirsiniz. Jen Simmons'ın sitenize HTML5 eklenmesine yardımcı olmak için Drupal’ın oluşturduğu HTML’yi nasıl değiştireceğinizi tartıştığı 219. sayıdaki ‘HTML’nizi basitleştirin ve iyileştirin’ eğiticisine bakın.
Şablon dosyaları
Drupal'da birçok şablon dosyası var. Bunlar temel Drupal kurulumuyla ve en çok katkıda bulunan modüllerle birlikte gelir. Bunlar, HTML'nin çoğunun tanımlandığı yerlerdir ve hepsi uzantı ile bittiği için fark edilmesi kolaydır. tpl.php. Bu şablon dosyalarının tümü, temanızda aynı ada sahip bir dosya eklenerek geçersiz kılınabilir - örneğin, sitenizdeki düğümler için HTML'yi geçersiz kılmak istiyorsanız kopyalayabilirsiniz. node.tpl.php düğüm modülünden ve ekleyin siteler / tümü / temalar / duyarlı.
Bir sayfayı oluşturmak için birden fazla şablon dosyası gerekir. İlk olarak html.tpl.php. Bu, HTML'de gövde dışındaki her şeyi içerir. Sonra gelir page.tpl.php, HTML'de gövde içindeki her şey budur. Bu ikisi tüm sayfalar için yüklenir. Diğer tüm şablon dosyaları, sitenizin nasıl oluşturulduğuna bağlıdır. Bloklarınız varsa, yüklenecektir block.tpl.php bunlar için. Düğümleri tam veya teaser biçiminde görüntülüyorsanız, bu yüklenir node.tpl.php. Ardından, görünümler veya paneller gibi modüllerle katkıda bulunduysanız, bu modüllerin ürettiği her öğe için bir dizi farklı şablon dosyası olacaktır.
Şablon dosyaları, içlerinde kullanılan PHP değişkenlerine göre hangi içeriğin görüntüleneceğini bilir. Bu değişkenler, Drupal çekirdeği ve katkıda bulunan modüller içindeki tema işlevleri aracılığıyla doldurulur. Tema işlevlerini geçersiz kılmak şablon dosyaları kadar kolaydır. İlk adım, adında bir dosya oluşturmaktır. template.php içinde siteler / tümü / temalar / duyarlı. Bu şablon PHP dosyası içinde herhangi bir tema işlevini ekleyebilir, ancak işlev adındaki ilk sözcüğü, bu durumda "duyarlı" olan tema adına değiştirebilirsiniz.
Örnek olarak, çağrı cihazını oluşturmak için kullanılan tema işlevini geçersiz kılmaya bakacağız. Çağrı cihazı, çok fazla içeriğiniz olduğunda Drupal sitenizdeki birçok sayfada ve görünümde bulunur. Sayfalayıcının yalnızca önceki ve sonraki bağlantılarla çok basit olmasını, sayfa numarasız olmasını istediğimizi varsayalım. Kullanacaktık:
- ? php
- function responsive_pager ($ değişkenler) {
- $ etiketler = $ değişkenler ['etiketler'];
- $ element = $ değişkenler ['element'];
- $ parametreler = $ değişkenler ['parametreler'];
- global $ pager_total;
- $ li_previous = theme (’pager_previous’, array (’metin’ => (isset ($ etiketler [1])?
- $ etiketler [1]: t (’‹ önceki ’)),’ element ’=> $ element,’ interval ’=> 1,’ parametreler ’=> $ parametreler));
- $ li_next = theme ('pager_next', array ('text' => (isset ($ etiketler [3])? $ etiketler [3]: t ('sonraki ›')), 'element' => $ element, ' aralık '=> 1,' parametreler '=> $ parametreler));
- eğer ($ pager_total [$ element]> 1) {
- eğer ($ li_previous) {
- $ öğeler [] = dizi (
- ’Class’ => array (’pager-previous’),
- ’Veri’ => $ li_previous,
- );
- }
- eğer ($ li_next) {
- $ öğeler [] = dizi (
- ’Class’ => array (’pager-next’),
- ’Veri’ => $ li_next,
- );
- }
- 'h2>' döndür. t (’Sayfalar’). ’/ H2>’. tema ('öğe_ listesi', dizi (
- ’Öğeler’ => $ öğeler,
- ’Öznitelikler’ => array (’class’ => array (’pager’)),
- ));
- }
- }
Bu eklenebilir template.php temanın dosyası. Geçersiz kılacaktır theme_pager içinde işlev pager.inc Drupal çekirdeği. Bu işlevin adı responsive_pager. Bu, Drupal'da bir tema işlevindeki "tema" kelimesinin, tema adını geçersiz kılarken tema adına değiştirilme modelini gösterir. template.php. Orijinal tema işlevleri kopyalanabilir ve ardından gerektiğinde değiştirilebilir. Bu örnek, varsayılan çağrı cihazını "ilk, önceki, 1, 2, 3, 4, 5, sonraki, son" dan temel "önceki, sonraki" ye değiştirir. Bu çağrı cihazı düğmelerini oluşturmak için tüm varsayılan Drupal kodunu kullanır, ancak diğer tüm mantığı kaldırmıştır. Bu, çağrı cihazının gereken şekilde davranmasını sağlamak için değiştirilebilir.
JavaScript ve jQuery
Genellikle bir site JavaScript'ten ve daha spesifik olarak jQuery'den biraz parıltıya ihtiyaç duyar. Drupal jQuery ile birlikte gelir, böylece temanız boyunca kullanılabilir. JavaScript dosyaları, CSS gibi, bilgi dosyası aracılığıyla temanıza eklenebilir.
- komut dosyaları [] = sparkle.js
Yukarıdaki satır eklenebilir responsive.info dosyayı dahil etmek sparkle.js tema yüklendiğinde. JavaScript için Drupal, JavaScript eklemek için tek bir mekanizma oluşturmak için kullanılan ve bu nedenle bir sayfa yüklendiğinde ve yeni içerik eklendiğinde tutarlı bir şekilde uygulanan bir "Davranışlar" sistemi kullanır. Bunun nasıl çalıştığına bir örnek olarak, site başlığına az miktarda jQuery animasyonu ekleyelim.
- (işlev ($) {
- Drupal.behaviors.responsiveAnimation = {
- attach: function (bağlam, ayarlar) {
- $ ("H1 # site-adı", bağlam)
- .hover (function () {
- $ (bu)
- .animate ({
- "Margin-left": "10px"
- },
- 'yavaş');
- });
- }
- }
- } (jQuery));
Yukarıdaki kod, sparkle.js duyarlı temada dosya oluşturur ve üzerine gelindiğinde site adına bir animasyon efekti ekler. Burada dikkat edilmesi gereken bir nokta, temanın bilgi dosyasında bir değişiklik yapıldığında, tema yeniden etkinleştirilene kadar etkili olmayacağından, görünüm sayfasına gitmeniz ve bunu daha önce yapmanız gerekmesidir. sparkle.js çalışacak. Kod, jQuery'yi $: Çakışmaları önlemek için bu varsayılan olarak yapılmaz. İşlev daha sonra bir özelliği olarak saklanır Drupal. Davranışları ve tema ve işlevselliği ile ilgili bir isim verilir. Gerisi, standart jQuery'de bulacağınız şeydir.
Eğer h1 # site-adı üzerine gelindiğinde, site adının soluna 10 piksellik bir kenar boşluğu eklemek için yavaş bir animasyon eklenir. Drupal web sitesi drupal.org/node/171213'te JavaScript ve jQuery'nin kullanımına ilişkin bazı harika belgeler bulunmaktadır. Bu size nasıl çalıştığı ve nasıl kullanılabileceği konusunda daha fazla fikir verecektir.
Drupal temasını üst düzeyde ele aldık; dokümantasyon daha derinlere iner. Burada tartışılanların bağlamı hakkında bir fikir edinmek için örnek dosyalarını indirin. Millwoodonline.com'da bu makaledeki duyarlı temayı da yükledim. Bu, nasıl göründüğünü ve gerçek site içeriğiyle nasıl çalıştığını görmenizi sağlar.
Kelimeler: Tim Millwood
Acquia'da bir müşteri danışmanı ve serbest çalışan web geliştiricisi olan Tim, Drupal topluluğunun aktif bir üyesidir.
