Ubuntu VPS Üzerinde Drupal Omega 4 Alt Teması Oluşturma Rehberi

Ubuntu VPS Üzerinde Drupal Omega 4 Alt Teması Oluşturma Rehberi

Giriş: Drupal Temaları ve Omega 4’ün Gücü

Drupal, güçlü ve esnek bir içerik yönetim sistemi (CMS) olmasının yanı sıra, temalama konusunda da geliştiricilere geniş olanaklar sunar. Bir Drupal web sitesinin görsel kimliği ve kullanıcı deneyimi, büyük ölçüde kullanılan tema tarafından belirlenir. Temalama, sitenizin estetik görünümünü, düzenini ve responsive (duyarlı) özelliklerini şekillendirme sürecidir. Bu süreçte, sıfırdan bir tema oluşturmak yerine, mevcut bir “base theme” (temel tema) üzerine inşa etmek yaygın ve önerilen bir yaklaşımdır. Bu makalede, Drupal 7 için popüler ve güçlü bir temel tema olan Omega 4’ü kullanarak Ubuntu tabanlı bir Sanal Özel Sunucu (VPS) üzerinde nasıl alt tema (subtheme) oluşturacağımızı adım adım inceleyeceğiz.

Omega 4, geliştiricilere modern web standartlarına uygun, responsive ve grid tabanlı tasarımlar oluşturma konusunda benzersiz bir esneklik sunar. Compass ve Sass gibi ön işlemcilerle entegre çalışarak CSS yazımını kolaylaştırır ve hızlandırır. Ayrıca, Grunt veya Gulp gibi görev çalıştırıcıları ile entegrasyonu sayesinde Sass derleme, JavaScript birleştirme ve LiveReload gibi otomasyon süreçlerini mümkün kılar.

Alt tema kullanmanın temel avantajı, Drupal çekirdeğini veya temel temayı doğrudan değiştirmeden sitenizi özelleştirebilmenizdir. Bu, temel tema güncellemeleri yayınlandığında, yaptığınız özelleştirmelerin kaybolmamasını sağlar ve bakım sürecini büyük ölçüde basitleştirir. Ubuntu VPS ortamı ise, geliştirme ve üretim ortamlarınız üzerinde tam kontrol sahibi olmanızı sağlar, bu da özellikle performans optimizasyonu ve güvenlik açısından kritik öneme sahiptir. Bu rehberde, bir VPS ortamında Omega 4 alt teması oluşturma ve geliştirme sürecinin tüm aşamalarını ele alacağız.

Ön Gereksinimler: Ortamınızı Hazırlama

Omega 4 alt teması oluşturmaya başlamadan önce, Ubuntu VPS’nizin belirli yazılımlarla donatılmış olması gerekmektedir. Bu adımlar, geliştirme ortamınızı kurmak için temel oluşturacaktır.

Ubuntu VPS Erişimi ve Temel Bilgiler

* SSH Erişimi: VPS’nize Secure Shell (SSH) aracılığıyla erişebilmeniz gerekmektedir. Genellikle ssh kullanıcıadı@vps_ip_adresi komutu ile bağlanılır.
* Temel Linux Komut Bilgisi: cd, ls, mkdir, cp, mv, rm, sudo gibi temel komutları kullanabilmeniz beklenir.
* LAMP/LEMP Yığını: Drupal’ın çalışabilmesi için Apache/Nginx, MySQL/MariaDB ve PHP (LAMP veya LEMP yığını) kurulu ve yapılandırılmış olmalıdır.
* Drupal Kurulumu: VPS’nizde çalışan bir Drupal 7 kurulumu bulunmalıdır. Genellikle bu, /var/www/html/drupal veya /var/www/drupal gibi bir dizinde yer alır.

Gerekli Geliştirme Araçları

* Drush: Drupal’ın komut satırı aracıdır ve tema oluşturma, modül yönetimi gibi birçok görevi otomatikleştirmek için vazgeçilmezdir.
* Kurulum için: sudo composer global require drush/drush veya Drush’ın resmi sitesindeki talimatları izleyebilirsiniz. Yükledikten sonra drush status ile kontrol edin.
* Git: Temaları ve modülleri indirmek, kendi kodunuzu versiyonlamak için kullanılır.
* Kurulum için: sudo apt update && sudo apt install git-all.
* Node.js ve npm: Omega 4, Sass/Compass derlemesi, LiveReload gibi otomasyon görevleri için Node.js tabanlı araçları (Grunt/Gulp) kullanır. npm (Node Package Manager) ise Node.js paketlerini yönetmek için kullanılır.
* Node.js’i kurmanın en iyi yolu nvm (Node Version Manager) kullanmaktır. Bu, farklı Node.js sürümleri arasında geçiş yapmanızı sağlar.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
        source ~/.bashrc # veya ~/.zshrc
        nvm install node # En son LTS sürümünü kurar
        nvm use node

* Alternatif olarak, doğrudan apt ile kurabilirsiniz (ancak bu genellikle daha eski bir sürüm verir): sudo apt install nodejs npm.
* Kurulumdan sonra node -v ve npm -v ile kontrol edin.
* Grunt CLI: Grunt görev çalıştırıcısını global olarak kurmanız gerekir.
* Kurulum için: sudo npm install -g grunt-cli.
* Compass (Ruby Gem): Omega 4, Sass dosyalarını CSS’e derlemek için Compass’ı kullanır. Compass, Ruby tabanlıdır, bu yüzden Ruby ve Gem paket yöneticisinin kurulu olması gerekir.
* Kurulum için:

sudo apt update
        sudo apt install ruby-full
        sudo gem install compass

* Kurulumdan sonra compass -v ile kontrol edin.

Bu ön gereksinimleri tamamladıktan sonra, Drupal tema dizininize geçerek Omega 4 temel temasını kurmaya başlayabiliriz.

Omega 4 Temel Temasını Yükleme

Omega 4 alt teması oluşturmak için öncelikle temel Omega 4 temasının Drupal kurulumunuzda bulunması ve etkinleştirilmesi gerekmektedir.

Omega 4’ü İndirme

Drupal tema dizininize gidin. Genellikle bu, sites/all/themes dizinidir:

cd /var/www/html/drupal/sites/all/themes

Omega 4’ü Drush kullanarak indirebilirsiniz. Bu en kolay ve önerilen yöntemdir:

drush dl omega

Bu komut, Omega 4’ün en son kararlı sürümünü indirecektir. Alternatif olarak, Git kullanarak da indirebilirsiniz:

git clone --branch 7.x-4.x https://git.drupal.org/project/omega.git

İndirme işlemi tamamlandığında, omega adında yeni bir dizin oluştuğunu göreceksiniz.

Omega Temasını Etkinleştirme

Omega, bir temel tema olduğu için doğrudan varsayılan tema olarak ayarlanması beklenmez. Ancak, alt temaların düzgün çalışabilmesi için Drupal’da etkinleştirilmiş olması gerekir.

drush en omega

Bu komut, Omega temasını Drupal kurulumunuzda etkinleştirecektir. Drupal yönetici arayüzünden de (Görünüm -> Temalar) etkinleştirebilirsiniz.

Omega 4 Alt Teması Oluşturma

Omega 4’ün en güçlü özelliklerinden biri, alt temaları hızlı ve kolay bir şekilde oluşturabilmesidir. Drush, bu süreci otomatikleştiren özel bir komut sunar.

Drush ile Alt Tema Oluşturma

Drupal kök dizininize geri dönün (veya herhangi bir yerden Drush komutunu çalıştırabilirsiniz, ancak tema dizininde olmak daha anlaşılır olabilir):

cd /var/www/html/drupal

Alt temanızı oluşturmak için Drush’ın omega-subtheme komutunu kullanın:

drush omega-subtheme "alt_tema_adim" --starterkit="omega_simple_starterkit"

* alt_tema_adim: Oluşturmak istediğiniz alt temanın makine adıdır. Küçük harf ve alt çizgi kullanın. Örneğin, my_custom_theme.
* --starterkit="omega_simple_starterkit": Omega 4, alt temalar için farklı başlangıç kitleri (starterkit) sunar. omega_simple_starterkit, en temel ve temiz başlangıç noktasıdır. Diğer seçenekler için drush help omega-subtheme komutunu çalıştırabilirsiniz.

Bu komutu çalıştırdığınızda, Drush size alt temanızın adını, açıklamasını ve diğer bazı bilgileri soracaktır. Bu bilgileri girerek devam edin. İşlem tamamlandığında, sites/all/themes/alt_tema_adim dizininde yeni alt temanızın oluşturulduğunu göreceksiniz.

Oluşturulan Alt Tema Yapısı

Yeni oluşturulan alt temanızın dizin yapısı aşağıdaki gibi olacaktır:

alt_tema_adim/
├── css/
│   ├── layout.css
│   ├── responsive-narrow.css
│   ├── responsive-normal.css
│   └── responsive-wide.css
├── js/
├── sass/
│   ├── _base.scss
│   ├── _custom.scss
│   ├── _layout.scss
│   ├── _mixins.scss
│   ├── _normalize.scss
│   ├── _variables.scss
│   ├── style.scss
│   └── ... (diğer Sass dosyaları)
├── templates/
│   ├── node.tpl.php
│   ├── page.tpl.php
│   └── ... (diğer TPL dosyaları)
├── .gitignore
├── config.rb
├── Gruntfile.js
├── package.json
├── alt_tema_adim.info
├── alt_tema_adim.module
├── alt_tema_adim.php
├── template.php
└── theme-settings.php

* alt_tema_adim.info: Drupal 7 temalarının temel bilgi dosyasıdır. Tema adı, açıklama, CSS/JS dosyaları, bölgeler (regions) ve özellikler (features) burada tanımlanır.
* template.php: Tema fonksiyonlarını, preprocess kancalarını ve diğer PHP tabanlı özelleştirmeleri içerir.
* theme-settings.php: Tema ayarlarına özel form elemanları ve işlevleri tanımlamak için kullanılır.
* sass/: Tüm Sass kaynak dosyalarınız burada yer alır. Compass ile derlenerek css/ dizinine çıktı verir.
* css/: Derlenmiş CSS dosyaları burada bulunur. Genellikle bu dosyaları doğrudan düzenlemezsiniz, Sass dosyalarını düzenlersiniz.
* js/: Özel JavaScript dosyalarınız için dizin.
* templates/: Drupal’ın varsayılan TPL dosyalarını geçersiz kılmak için kullanılır. Örneğin, page.tpl.php veya node.tpl.php.
* config.rb: Compass için yapılandırma dosyasıdır. Sass kaynak dizini, CSS çıktı dizini, Sass stilini (compressed, expanded vb.) tanımlar.
* Gruntfile.js: Grunt görev çalıştırıcısının yapılandırma dosyasıdır. Sass derleme, LiveReload, dosya izleme (watch) gibi görevleri tanımlar.
* package.json: Node.js tabanlı projenizin meta verilerini ve bağımlılıklarını (npm paketleri) tanımlar.

Alt Temayı Etkinleştirme ve Varsayılan Yapma

Alt temanızı oluşturduktan sonra, Drupal’da etkinleştirmeniz ve isterseniz varsayılan tema olarak ayarlamanız gerekir.

drush en alt_tema_adim
drush vset theme_default alt_tema_adim

Artık Drupal siteniz, yeni oluşturduğunuz Omega 4 alt temanızı kullanacaktır. Yönetici arayüzünden (Görünüm -> Temalar) de bu işlemleri yapabilirsiniz.

Alt Temayı Geliştirmeye Hazırlama: Grunt ve Sass

Omega 4 alt temanızın en önemli avantajlarından biri, Sass ve Grunt gibi modern geliştirme araçlarıyla entegre çalışmasıdır. Bu, tema geliştirme sürecini çok daha verimli hale getirir.

Node.js Bağımlılıklarını Yükleme

Alt temanızın dizinine gidin:

cd /var/www/html/drupal/sites/all/themes/alt_tema_adim

package.json dosyasında tanımlı olan tüm Node.js bağımlılıklarını (Grunt eklentileri, Sass derleyicileri vb.) yüklemek için npm install komutunu çalıştırın:

npm install

Bu işlem biraz zaman alabilir ve node_modules adında yeni bir dizin oluşturacaktır.

Gruntfile.js ve Compass/Sass Yapılandırması

* config.rb (Compass Yapılandırması): Bu dosya, Compass’ın Sass dosyalarını nasıl işleyeceğini belirler. Genellikle varsayılan ayarlar yeterlidir, ancak çıktı stilini (örneğin, output_style = :compressed için üretim ortamı) değiştirebilirsiniz.

# config.rb örneği
    require 'compass-normalize'
    http_path = "/"
    css_dir = "css"
    sass_dir = "sass"
    images_dir = "images"
    javascripts_dir = "js"
    # output_style = :compressed # Üretim için
    output_style = :expanded # Geliştirme için
    relative_assets = true
    line_comments = false

* Gruntfile.js (Grunt Yapılandırması): Bu dosya, Grunt’ın çalıştıracağı görevleri tanımlar. Omega 4’ün varsayılan Gruntfile.js‘si genellikle Sass derleme, CSS birleştirme, JavaScript linting ve LiveReload gibi görevleri içerir.
* Sass Derleme: Grunt, grunt-contrib-compass eklentisi aracılığıyla Sass dosyalarınızı otomatik olarak CSS’e derler. sass/style.scss ana Sass dosyanızdır ve tüm diğer parçacıkları (_variables.scss, _layout.scss vb.) @import eder.
* Watch Görevi: grunt-contrib-watch eklentisi, Sass dosyalarınızda bir değişiklik algıladığında otomatik olarak Sass’ı derler.
* LiveReload/BrowserSync: Bu özellik, kodunuzda yaptığınız değişiklikleri tarayıcınızı yenilemeden anında görmenizi sağlar. VPS üzerinde çalışırken bu özelliği kullanmak biraz daha fazla yapılandırma gerektirir.

Geliştirme Sunucusunu Başlatma (Grunt Watch)

Alt temanızın dizininde grunt komutunu çalıştırın:

grunt

Bu komut, Gruntfile.js‘de tanımlı varsayılan görevleri (genellikle watch görevi) başlatır. watch görevi, Sass dosyalarınızda değişiklikleri izleyecek ve otomatik olarak derleyecektir.

VPS Üzerinde LiveReload/BrowserSync Kullanımı

VPS üzerinde geliştirme yaparken, LiveReload veya BrowserSync’i yerel makinenizden erişilebilir hale getirmeniz gerekir. Bu, SSH port yönlendirme (port forwarding) ile yapılır.

1. Grunt/BrowserSync Yapılandırması: Gruntfile.js dosyanızda BrowserSync veya LiveReload yapılandırmasını, sunucunun tüm ağ arayüzlerini dinleyecek şekilde ayarlayın (host: '0.0.0.0' veya VPS’inizin genel IP adresi).

// Gruntfile.js içinde BrowserSync örneği
    browserSync: {
        dev: {
            bsFiles: {
                src : [
                    'css/*.css',
                    'js/*.js',
                    '/*.tpl.php',
                    '../..//*.tpl.php' // Drupal'ın diğer TPL dosyalarını da izle
                ]
            },
            options: {
                watchTask: true,
                proxy: 'http://your_vps_ip_or_domain', // Drupal sitenizin adresi
                open: false, // Tarayıcıyı otomatik açma
                host: '0.0.0.0' // Tüm arayüzleri dinle
            }
        }
    }

2. SSH Port Yönlendirme: Yerel makinenizden VPS’e bağlanırken, BrowserSync’in kullandığı portu (genellikle 3000 veya 3001) yerel makinenize yönlendirin.

ssh -L 3000:localhost:3000 kullanıcıadı@vps_ip_adresi

Bu komut, VPS’teki 3000 numaralı portu yerel makinenizin 3000 numaralı portuna yönlendirir.
3. Tarayıcı Erişimi: Grunt ve BrowserSync VPS’inizde çalışırken, yerel tarayıcınızdan http://localhost:3000 adresine giderek sitenizi LiveReload özelliğiyle birlikte görebilirsiniz.

Alt Temayı Özelleştirme

Artık alt temanız hazır ve geliştirme ortamınız kuruldu. Şimdi temanızı kendi ihtiyaçlarınıza göre özelleştirmeye başlayabilirsiniz.

Sass ile Stil Belirleme

sass/ dizini, temanızın tüm stil tanımlamalarını içerir.
* sass/style.scss: Bu, temanızın ana Sass dosyasıdır. Diğer tüm Sass parçacıklarını (_variables.scss, _layout.scss vb.) @import ederek tek bir CSS dosyası oluşturur.
* _variables.scss: Renkler, fontlar, boyutlar gibi tüm global değişkenleri burada tanımlayın. Bu, tutarlı bir tasarım dili oluşturmanıza yardımcı olur.
* _layout.scss: Temanızın genel düzenini, grid sistemini ve ana yapısal stillerini burada tanımlayın. Omega’nın grid sınıflarını (grid-12, alpha, omega gibi) kullanarak responsive düzenler oluşturabilirsiniz.
* _custom.scss: Kendi özel stil kurallarınızı ve bileşenlerinizi burada ekleyebilirsiniz.
Media Queries: Omega 4, responsive tasarım için varsayılan medya sorguları sunar. sass/responsive-.scss dosyalarını kullanarak farklı ekran boyutları için özelleştirmeler yapabilirsiniz. Örneğin:

// sass/_custom.scss içinde
    .region-content {
        padding: 20px;

        @media #{$narrow} { // Omega'nın narrow breakpoint'i
            padding: 10px;
        }
    }

Sass dosyalarınızı düzenlediğinizde, Grunt watch görevi otomatik olarak bunları derleyecek ve css/style.css dosyasını güncelleyecektir. LiveReload sayesinde tarayıcınızda anında değişiklikleri göreceksiniz.

JavaScript Ekleme

js/ dizini, özel JavaScript dosyalarınız için ayrılmıştır.
* alt_tema_adim.js: Bu dosyayı oluşturarak veya düzenleyerek özel JavaScript kodlarınızı ekleyebilirsiniz. Drupal’da JavaScript yazarken Drupal.behaviors yapısını kullanmak en iyi uygulamadır:

// js/alt_tema_adim.js
    (function ($, Drupal, window, document, undefined) {
      Drupal.behaviors.myCustomScript = {
        attach: function (context, settings) {
          // Bu kod, DOM hazır olduğunda ve AJAX çağrılarından sonra çalışır.
          $('.my-element', context).once('my-custom-script').each(function () {
            // Sadece bir kez çalışacak kod buraya.
            $(this).on('click', function() {
              alert('Elemente tıklandı!');
            });
          });
        }
      };
    })(jQuery, Drupal, this, this.document);

* alt_tema_adim.info dosyasında JS dosyasını tanımlayın:

; alt_tema_adim.info
    scripts[] = js/alt_tema_adim.js

Şablon Dosyalarını Geçersiz Kılma (Template Overrides)

Drupal, çekirdek ve modül tarafından sağlanan HTML çıktısını, tema içinde .tpl.php dosyalarını kullanarak geçersiz kılmanıza olanak tanır.
* templates/ dizini: Bu dizine, geçersiz kılmak istediğiniz .tpl.php dosyalarının kopyalarını yerleştirin. Örneğin, sayfa yapısını değiştirmek için page.tpl.php dosyasını, düğüm görünümünü değiştirmek için node.tpl.php dosyasını kopyalayıp düzenleyebilirsiniz.
* Örnek: Drupal çekirdeğindeki page.tpl.php dosyasını templates/page.tpl.php olarak kopyalayın ve HTML yapısını veya bölgelerin yerleşimini değiştirin.
* template.php: Bu dosya, temanızın PHP tabanlı mantığını içerir. Ön işleme kancaları (preprocess hooks) kullanarak şablon dosyalarına geçmeden önce değişkenleri değiştirebilir veya yeni değişkenler ekleyebilirsiniz.

// template.php
    function alt_tema_adim_preprocess_page(&$variables) {
      // Sayfa şablonuna özel bir sınıf ekle
      $variables['classes_array'][] = 'my-custom-page-class';
      // Yeni bir değişken tanımla
      $variables['my_custom_variable'] = 'Merhaba Dünya!';
    }

page.tpl.php içinde $my_custom_variable‘ı kullanabilirsiniz.
* Tema Önbelleğini Temizleme: Yeni şablon dosyaları veya template.php değişiklikleri yaptıktan sonra, Drupal’ın tema önbelleğini temizlemeniz gerekir: drush cc theme veya yönetici arayüzünden.

Dağıtım ve En İyi Uygulamalar

Temanızı geliştirme ortamında test edip tamamladıktan sonra, üretim ortamına dağıtmak ve performansını optimize etmek önemlidir.

Performans Optimizasyonu

* CSS/JS Birleştirme ve Sıkıştırma: Drupal’ın kendi CSS/JS birleştirme ve sıkıştırma özelliklerini etkinleştirin (Yönetim -> Yapılandırma -> Geliştirme -> Performans). Bu, HTTP istek sayısını azaltır ve dosya boyutlarını küçültür.
* Sass Çıktı Stili: config.rb dosyasında output_style = :compressed olarak ayarlayarak Sass’ın sıkıştırılmış CSS üretmesini sağlayın.
* Resim Optimizasyonu: Temanızda kullandığınız tüm resimlerin optimize edildiğinden emin olun (sıkıştırma, doğru format).
* Tarayıcı Önbellekleme: Sunucu seviyesinde (Apache/Nginx) tarayıcı önbellekleme kuralları belirleyin.
* Drupal Önbellekleme: Drupal’ın tüm önbellekleme mekanizmalarını (sayfa önbelleği, blok önbelleği vb.) etkinleştirin.
* Opcode Önbellekleme: PHP için OPcache gibi bir opcode önbellekleyicisini etkinleştirin.
* Harici Önbellekleme: Varnish, Redis gibi harici önbellekleme çözümlerini değerlendirin.

Sürüm Kontrolü (Git)

Alt temanızın kodunu Git ile versiyonlamak, değişiklikleri takip etmek, işbirliği yapmak ve gerektiğinde eski sürümlere dönmek için kritik öneme sahiptir.
1. Alt tema dizininde Git deposu başlatın:

cd /var/www/html/drupal/sites/all/themes/alt_tema_adim
    git init

2. .gitignore dosyasını düzenleyin: node_modules/, css/ (derlenmiş CSS olduğu için), .sass-cache/ gibi dizinlerin Git tarafından izlenmemesini sağlayın.
3. Değişiklikleri ekleyin ve commit edin:

git add .
    git commit -m "İlk alt tema commit'i"

4. Uzak bir depoya (GitHub, GitLab, Bitbucket) gönderin:

git remote add origin https://github.com/kullaniciadi/alt_tema_adim.git
    git push -u origin master

Güvenlik

* Dosya İzinleri: Drupal dosyaları ve dizinleri için doğru dosya izinlerini ayarlayın. Genellikle dosyalar için 644, dizinler için 755 izinleri önerilir. sites/default/files dizini yazılabilir olmalıdır (775 veya 777, ancak dikkatli olun).
* Güncel Tutma: Drupal çekirdeğini, modüllerini ve Omega temel temasını düzenli olarak güncelleyin. Bu, güvenlik açıklarını kapatır ve yeni özelliklerden yararlanmanızı sağlar.

Sık Karşılaşılan Sorunlar ve Çözümleri

Geliştirme sürecinde bazı sorunlarla karşılaşabilirsiniz. İşte yaygın sorunlar ve olası çözümleri:

* Dosya İzinleri Hatası:
* Sorun: npm install veya Grunt çalışırken izin hatası alıyorsunuz.
* Çözüm: sudo ile komutları çalıştırmayı deneyin (sudo npm install, sudo grunt). Ancak, Node.js paketlerini global olarak kurarken sudo kullanmak bazen sorun yaratabilir. nvm kullanmak veya dosya sahipliğini doğru ayarlamak daha kalıcı bir çözümdür (sudo chown -R kullanıcı:www-data /var/www/html/drupal).
* Sass Derleme Hatası:
* Sorun: Sass dosyalarında yaptığınız değişiklikler CSS’e yansımıyor veya grunt komutu hata veriyor.
* Çözüm:
* Sass sözdizimini kontrol edin. Küçük bir yazım hatası bile derlemeyi durdurabilir.
* config.rb dosyasının doğru yapılandırıldığından emin olun.
* compass ve grunt-cli‘nin doğru yüklendiğinden emin olun (compass -v, grunt -v).
* npm install komutunu tekrar çalıştırın.
* Drush Çalışmıyor:
* Sorun: drush komutu bulunamıyor veya hata veriyor.
* Çözüm: Drush’ın PATH’inize eklendiğinden emin olun. Genellikle Composer ile global olarak kurduğunuzda ~/.composer/vendor/bin dizinine yüklenir. Bu dizini PATH’inize eklemeniz gerekebilir (export PATH="$HOME/.composer/vendor/bin:$PATH").
* LiveReload/BrowserSync Bağlantı Sorunu:
* Sorun: Tarayıcınızda LiveReload çalışmıyor veya http://localhost:3000 adresine erişemiyorsunuz.
* Çözüm:
* SSH port yönlendirmesini doğru yaptığınızdan emin olun (ssh -L 3000:localhost:3000 ...).
* Gruntfile.js‘deki proxy ve host ayarlarını kontrol edin. proxy Drupal sitenizin doğru adresini işaret etmeli, host ise 0.0.0.0 veya VPS’inizin IP’si olmalıdır.
* VPS’nizin güvenlik duvarının (ufw) BrowserSync portunu (genellikle 3000 veya 3001) engellemediğinden emin olun. Geliştirme sırasında geçici olarak açmanız gerekebilir (sudo ufw allow 3000/tcp).
* Drupal Önbelleği:
* Sorun: Yaptığınız değişiklikler sitede görünmüyor.
* Çözüm: Çoğu zaman bu, Drupal önbelleğinden kaynaklanır. drush cc all komutuyla tüm önbellekleri temizleyin.

Sonuç

Bu kapsamlı rehberde, Ubuntu VPS üzerinde Drupal Omega 4 alt teması oluşturma sürecini adım adım inceledik. Ön gereksinimlerin hazırlanmasından başlayarak, temel Omega temasının kurulumuna, Drush ile alt tema oluşturmaya, Grunt ve Sass gibi modern geliştirme araçlarını yapılandırmaya ve temanızı özelleştirmeye kadar tüm aşamaları detaylandırdık. Ayrıca, VPS ortamında LiveReload/BrowserSync kullanımı gibi spesifik konulara ve sık karşılaşılan sorunların çözümlerine de değindik.

Omega 4, sunduğu esneklik ve geliştirici dostu özelliklerle Drupal 7 için güçlü ve responsive temalar oluşturmak isteyen herkes için mükemmel bir temeldir. Bir alt tema kullanarak, Drupal veya Omega temel teması güncellendiğinde bile özelleştirmelerinizin güvende kalmasını sağlarsınız. Ubuntu VPS ise, geliştirme ve üretim ortamlarınız üzerinde tam kontrol sağlayarak projenizin ihtiyaçlarına göre ölçeklenebilirlik ve performans optimizasyonu yapmanıza olanak tanır.

Artık elinizde, kendi Drupal siteniz için benzersiz ve modern bir kullanıcı deneyimi yaratmak üzere sağlam bir temel var. Bu bilgileri kullanarak, web sitenizin görsel kimliğini tamamen kendi vizyonunuza göre şekillendirebilir, responsive ve performanslı bir tema geliştirebilirsiniz. Unutmayın, temalama sürekli bir öğrenme ve uygulama sürecidir. Bu rehberdeki adımları takip ederek ve kendi denemelerinizi yaparak Drupal temalama konusundaki becerilerinizi daha da geliştireceksiniz. Başarılar dileriz!