Şablon geliştirme / ayarlama iş akışı


16

Genellikle sadece mevcut ücretsiz şablonları ayarlar, renkleri ve yazı tiplerini değiştiririm. Soru, zaten Joomla sayfamı çevrimiçi duruma getirdiğimde, şablon css'de değişiklik yapmanın en kolay yolu nedir?

Şu anda, bir önizleme için belirli stilleri bulmak ve ayarlamak için Chrome Geliştirme Araçları'nı kullanıyorum . Beğendiysem, şablonun css dosyasını doğrudan yönetim alanındaki çevrimiçi editörde ayarlıyorum.

İlk başladığımda ve herhangi bir içeriğim olmadığında, Joomla ile yerel bir web sunucusu kullandım, bu da avantajlıydı, css ve php kodu yazmak için uygun bir IDE kullanabiliyordum. Şimdiden bazı içeriklerim olduğundan, yaptığım değişikliklerin sahip olduğum içerikle nasıl göründüğünü görmek istiyorum.

Bunun temel bir soru olduğunu biliyorum, ancak birisi mevcut bir sitenin tasarımını ayarlamak istediğinde tercih edilen bir iş akışı var mı?

Yanıtlar:


10

Akeeba ile yaşam alanını klonlayın, yerel olarak kurun, ardından gerektiği gibi ayarlayın. SSH / FTP'yi tamamladığınızda, değiştirdiğiniz dosyaları tekrar canlı siteye aktarın.

Canlı bir sitede “ince ayar yapmak” için pek de iyi nedenler vardır…


Değişiklikleri veritabanında değiştirdiyseniz (örneğin, modüllerin sırasını değiştirdiniz), bunun işe yaramayacağını unutmayın.
Flimm

@Flimm Soru, DB'de tutulan değişiklikleri senkronize etmek değil , CSS'yi değiştirmekti .
Seth Warburton

10

Odağınızın kullanım kolaylığı, otomasyon veya maliyet olmasına bağlı olarak burada birkaç seçeneğiniz vardır:

  • Yerel yüklemenizle daha önce tam olarak ne yaptığınızı yapın, ancak yüklendikten sonra configuration.php, ana makineniz uzaktan erişimi destekliyorsa , yerel Joomla kurulumunu canlı, uzak MySQL veritabanınızı kullanacak şekilde değiştirin . Yine de dikkatli olun - tüm DB değişiklikleri canlı yayına girer

  • Extplorer gibi bir bileşen kullanın ve şablon dosyalarını doğrudan tarayıcıda düzenleyin, yine de Chrome'un geliştirici araçlarını kullanarak siteyi görüntüleyen başka bir sekme açık. extplorer kod renklendirme özellikleri ve hızlı bir şekilde küçük değişiklikler yapmak için mükemmeldir.

  • Değişiklikleri dışarı atmak için bir sürüm kontrol sistemi kullanın; örneğin, şablonunuzu bir depoda olacak şekilde seçtiğiniz IDE'yi kullanarak şablonunuzu yerel bir Joomla kurulumunda geliştirin. İşiniz bittiğinde, canlı sitenizde değişiklik yapın. Bu değişiklikleri çalışan bir sürüm olarak kontrol etmek için taahhüt sonrası kanca kullanın. Kurulumu daha karmaşık olsa da, bir hata yaparsanız her zaman eski şablon sürümlerine geri dönebileceğiniz anlamına gelir. Yerel ve canlı veri tutarlılığını sağlamak için uzak MySQL ekleyin.

  • Uygun bir şablon / şablon çerçevesi için ödeme yapın - şirketimde YooTheme şablonlarını kullanıyoruz. Bu şablon çerçevesi, solda yüzlerce CSS değişkeni (iyi, LESS değişkenleri) ve sağda canlı bir önizleme içeren 2 bölmeli bir pencere olan 'Customizr' adlı bir özelliğe sahiptir. Bu değişkenler, oluk dolgudan menü öğesi metin gölgesine ve aradaki her şeye kadar şablonun neredeyse her öğesini kontrol eder. Değişiklikler önizlemede anında uygulanır ve farklı değişken konfigürasyonlarıyla oynayabilmeniz için birden fazla 'stil' tanımlanabilir. Tüm bunlar, eminim diğer şablon çerçeveleri çok benzer özelliklere sahiptir.

Not: Kullanıcıdan başka extplorer veya YooTheme ile hiçbir ilişkim yok.


6

Yaptığınız yalnızca CSS değişiklikleri ise bunları Chrome Geliştirme Araçları'nda önizlemeye devam edebilir ve Cloud9 veya ShiftEdit gibi bir çevrimiçi geliştirme ortamı kullanarak FTP üzerinden sunucunuza doğrudan bağlanabilir ve canlı bir sitede IDE kullanarak ince ayarlar yapabilirsiniz yerel olarak barındırıldığı zaman yaptığınız gibi.

Ancak bunu sitenizi kırabilecek daha büyük değişiklikler için tavsiye etmem (birkaç yıl önce zor yoldan öğrendim). Bunlar için yerel bir sunucu (veya koding.com'dan ücretsiz bir VM ) kurmanızı , siteyi Akeeba ile klonlamanızı ve test edildikten sonra değişiklikleri canlı sitenize göndermek için Git * kullanmanızı öneririm .

* Kodunuzun GitHub'da herkese açık olmasını istemiyorsanız iyi bir alternatif BitBucket'tir .


5

Yöntem 1

Kullandığım yöntemlerden biri kendi indexsph.php dosyasına kendi css dosyamı eklemektir. Bu, yalnızca kullanıcıysanız eklemek için sarılabilir.

Bunu genişletmenin bir yolu, kullanıcıysanız bir css dosyası ekleyen basit bir eklenti yazmaktır. Bunu, bir sonraki güncellemeyle değiştirilebilecek şablonda doğrudan değişiklik yapmaktan kaçınmak için varsayılan yönetici şablonunda değişiklik yapmak için kullandım.

Gibi bir şey...

class plgSystemBB extends JPlugin {
    public function onBeforeCompileHead() {

    if (JFactory::getUser()->username == 'my.login.name.goes.here')
    {
        JFactory::getDocument()->addStylesheet("/templates/protostar/css/test.css");
    }

    if(!JFactory::getApplication()->isAdmin()){
        return;
    }   

    JFactory::getDocument()->addStylesheet("/templates/isis/css/admin-extra.css");
}

Yöntem 2

Şablon değişikliklerini önizlemek için şablonu çoğaltabilir ve kopyada değişiklik yapabilirsiniz. Bu değişiklikleri görüntülemek için, şablonu geçersiz kılan URL'ye "? Template = test" ekleyin. "Test" i, kopya için kullanmaya karar verdiğiniz adla değiştirin.

Yalnızca bir stili değil, tüm şablonu çoğaltmanız gerektiğini unutmayın. Hem stiller hem de şablonlar yönetici gui'sinde çoğaltılabilir.

URL'deki bir stili geçersiz kılmanın mümkün olduğuna inanmıyorum. [PW: J3'te, URL'deki bir stili geçersiz kılabileceğinizi öğrendim. Bkz. Yöntem 3.]


Yöntem 3

Yöntem 2'ye benzer, ancak stillerle. "Test" stilini kullanın ve test stilini içeren ana şablonu değiştirin. Url'deki bir stili geçersiz kılmak için? TemplateStyle = ekleyin, şablon tanımlayıcısı nerede (yani sayısal).


@peter Eklenti fikrini seviyorum, hala uzaktan kod yazıp kaynak kontrolüne geçmeniz gerektiğini düşünüyorum, ancak test ekibiyle paylaşıldığı takdirde bazı testleri denemek iyi olabilir
tristanbailey

1
@tristanbailey Teşekkürler. Evet, uzaktan kodlama çok daha temiz, ancak soru bunu çevrimiçi bir sitede çevrimiçi yapmak için atıfta bulundu.
Peter Wiseman
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.