Detail Web Design

Style Manager

WordPress sitenizdeki tüm CSS, JS ve Font işlemlerini tek panelden kolayca yönetin.

CDN veya Yerel, Admin veya Frontend – ister Bootstrap, ister Google Fonts! Performans ve GDPR uyumluluğunu bir araya getiren hepsi bir arada çözüm.

Kurulum Rehberine
Açıklamalar
Kullanım Akışı
Sıkça Sorulan Sorular


Kurulum Adımları

  1. 1.

    Plugin’i Yükleyin ve Aktif Edin

    DV Style Manager eklentisini WordPress sitenize kolayca entegre edin:

    • Dosya Yükleme: İndirdiğiniz dv-style-manager klasörünü sitenizin /wp-content/plugins/ dizinine yükleyin.
    • Eklentiyi Aktif Etme: WordPress admin panelinize giriş yapın, Eklentiler → Yüklü Eklentiler sayfasına gidin ve DV Style Manager eklentisini aktif hale getirin.
  2. 2.

    Yönetim Panelini Açın

    Eklenti aktif edildikten sonra, tüm kontrol parmaklarınızın ucunda:

    • Sol admin menüsünde DV Style Manager bölümünü göreceksiniz. Buradan Dashboard, Paketler, Css, Js, Fontlar, Google Fonts gibi tüm yönetim sayfalarına erişebilirsiniz.
  3. 3.

    İlk Ayarları Yapın

    İhtiyaçlarınıza göre özelleştirme çok basit:

    • Her bir sayfa (Paketler, Css, Js, Fontlar, Google Fonts) için istediğiniz framework veya scriptleri çoklu seçim yaparak belirleyin.
    • Her seçili öğe için Yükleme Şekli (CDN/Yerel) ve Yükleme Yeri (Frontend/Admin/Her ikisi) seçeneklerini ayarlayabilirsiniz.
    • Ayarlarınızı kaydetmek için “Kaydet” butonuna tıklamanız yeterlidir. Tüm seçimleriniz otomatik olarak veri tabanına kaydedilecektir.
  4. 4.

    Sonuçları Anında Görün

    Ayarlarınız kaydedildikten sonra, DV Style Manager otomatik olarak çalışmaya başlar:

    • Seçtiğiniz tüm CSS, JavaScript ve font dosyaları otomatik olarak sitenizin <head> bölümüne eklenir.
    • Yerel yükleme modunu seçtiğinizde, tüm dosyalar sitenizin /wp-content/uploads/dv-style-manager/ dizini altında ilgili klasörlere güvenli bir şekilde indirilir ve buradan sunulur.


Yönetim Paneli Ekranları & Açıklamalar

⚙️

Paketler

  • Bootstrap, UIkit, Materialize gibi CSS+JS paketlerini kolayca ekleyebilirsiniz.
  • Çoklu seçim özelliği ile birden fazla framework’ü aynı anda seçip yönetebilirsiniz.
  • CDN veya Yerel yükleme seçenekleriyle dosyaların nereden yükleneceğini belirleyin.
🎨

Saf CSS Frameworkleri

  • Bulma, Tailwind CSS, Spectre.css gibi sadece CSS içeren kütüphaneleri seçip sitenize dahil edin.
  • Bu kategoride sadece ilgili CSS dosyaları yüklenir, gereksiz JS yüklemesi yapılmaz.
💻

Bağımsız JS Scriptleri

  • jQuery UI, Popper.js, Chart.js gibi sık kullanılan scriptleri seçerek projenize ekleyin.
  • CDN veya Yerel yükleme ayrımı sayesinde scriptlerinizi en performanslı şekilde yönetin.
🔠

Font İkon Setleri

  • Font Awesome, Bootstrap Icons, Material Icons gibi geniş font ikon setlerini entegre edin.
  • Yerel yükleme seçeneği ile font dosyaları sitenize indirilir ve CSS yolları otomatik düzeltilir.
✒️

Google Fonts

  • Yüzlerce Google Font arasından çoklu seçim yaparak dilediğiniz fontları sitenize ekleyin.
  • Yerel seçenekte fontlar indirilir ve otomatik CSS kuralları oluşturulur (GDPR uyumlu).
  • CDN seçerseniz, fontlar doğrudan Google sunucularından yüklenir.
🔒

GDPR Uyumluluğu & Hız Optimizasyonu

  • Yerel modda dış bağlantı kurulmaz, tam GDPR uyumluluğu sağlanır.
  • Tüm varlıkların kendi sunucunuzdan yüklenmesi sayesinde sayfa yükleme hızlarınız artar.


Kullanım Akışı ve Örnekler

Bootstrap’ı Admin ve Frontend’de Yerel Yükleme

Paketler sayfasından Bootstrap’ı seçip yerel yüklemeyi tercih ettiğinizde:

Paketler sayfasında yapacağınız ayarlar:

  • Seçilen Paket: Bootstrap
  • Yükleme Şekli: Yerel
  • Nerede Yüklensin: Admin & Frontend

Bu ayarlar sonucunda, sitenizin head bölümüne otomatik olarak eklenecek kodlar:

<link rel=”stylesheet” href=”/wp-content/uploads/dv-style-manager/packages/bootstrap.min.css“>

<script src=”/wp-content/uploads/dv-style-manager/packages/bootstrap.bundle.min.js“></script>

Google Fonts’u Yerel Olarak Kullanma (GDPR Uyumlu)

Google Fonts sayfasından Roboto’yu yerel olarak yüklemek istediğinizde:

Google Fonts sayfasında yapacağınız ayarlar:

  • Seçilen Font: Roboto
  • Yükleme Şekli: Yerel
  • Nerede Yüklensin: Sadece Frontend

Bu ayarlar sonucunda, sitenize indirilecek dosyalar ve eklenen CSS örneği:

– /wp-content/uploads/dv-style-manager/googlefonts/roboto/style.css

– /wp-content/uploads/dv-style-manager/googlefonts/roboto/roboto.woff2 (ve diğer font formatları)

Otomatik olarak oluşturulan ve eklenen CSS örneği:

                        @font-face {
                        font-family: 'Roboto';
                        src: url('/wp-content/uploads/dv-style-manager/googlefonts/roboto/roboto.woff2') format('woff2');
                        font-weight: normal;
                        font-style: normal;
                        font-display: swap; /* Performans için eklendi */
                        }

Font Awesome Icon Setini CDN Olarak Yükleme

Font ikon setleri sayfasından Font Awesome’ı CDN olarak seçtiğinizde:

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css“>


Sık Sorulan Sorular (SSS)

Kurulumda ek bir ayar veya kod gerekiyor mu?

Hayır, kesinlikle. DV Style Manager, kurulum sonrası ek bir kodlama bilgisi veya ayar gerektirmez. Sadece eklenti menüsünden istediğiniz seçenekleri belirleyip kaydetmeniz yeterlidir. Tüm CSS, JS ve font dosyaları otomatik olarak optimize edilerek sitenize entegre edilir.

Google Fonts GDPR uyumlu mu?

Evet, DV Style Manager Google Fonts için tam GDPR uyumluluğu sunar. Fontları Yerel modda seçtiğinizde, font dosyaları (.woff2 formatında) ve ilgili @font-face CSS kuralları doğrudan sunucunuza indirilir. Bu sayede siteniz dışarıya hiçbir istek atmaz ve ziyaretçi verisi Google sunucularına iletilmez, böylece gizlilik endişeleri ortadan kalkar.

Kaynakları sadece Frontend ya da sadece Admin panelinde yükleyebilir miyim?

Kesinlikle! DV Style Manager ile her bir CSS, JS veya Font kaynağı için “Nerede Yüklensin?” seçeneğini kullanarak ayrı ayrı kontrol sağlayabilirsiniz. Bu özellik sayesinde kaynakları yalnızca web sitenizin görünen yüzünde (Frontend), sadece WordPress yönetim panelinde (Admin) veya her ikisinde de yükleyebilirsiniz. Bu, performans optimizasyonu ve kaynak yönetimi açısından büyük esneklik sağlar.

Kendi özel JS veya CSS dosyamı yükleyebilir miyim?

Hayır, mevcut sürümde DV Style Manager sadece hazır frameworkler, scriptler ve font setlerinin yönetimini sağlamaktadır. Kendi özel JS veya CSS dosyalarınızı doğrudan yükleme özelliği bulunmamaktadır. Ancak, gelecekteki güncellemeler için bu tür talepleri değerlendirmekteyiz. Özel ihtiyaçlarınız veya projeleriniz için dvplugins.com üzerinden bizimle iletişime geçebilirsiniz.

Tüm dosyalar nereye kaydediliyor?

DV Style Manager tarafından yerel olarak indirilen tüm dosyalar, sitenizin /wp-content/uploads/dv-style-manager/ dizini altında kategoriye özel alt klasörlere kaydedilir. Bu yapılandırma, dosyaların düzenli ve erişilebilir olmasını sağlar:

  • /wp-content/uploads/dv-style-manager/packages/ – Paketlere ait CSS/JS dosyaları (Bootstrap, UIkit vb.)
  • /wp-content/uploads/dv-style-manager/css/ – Saf CSS frameworkleri (Bulma, Tailwind vb.)
  • /wp-content/uploads/dv-style-manager/js/ – Bağımsız JS scriptleri (jQuery UI, Chart.js vb.)
  • /wp-content/uploads/dv-style-manager/fonts/ – Font ikon setleri (Font Awesome, Boxicons vb.)
  • /wp-content/uploads/dv-style-manager/googlefonts/ – Google Font dosyaları (her font kendi alt klasöründe)

İletişim & Destek

Geliştirici: DV   |   Web: dvplugins.com

Soru ve önerileriniz için bize ulaşın: destek@dvplugins.com