CSS eklentisini uygulamanın en iyi yolu nedir?


36

Şu anda, eklenti stillerini geçersiz kılmak için CSS özelliğini kullanıyorum. Eklentiyi düzenlemek için tercih ederim, çünkü güncelleme yaparken daha az baş ağrısı olur.

Stil sayfam eklentilerden sonra yüklendiyse daha iyi olurdu, bu yüzden daha fazla değil, sadece belirli olması gerekiyordu. Bu, stil sayfalarımın daha güzel olmasını sağlar.


1
Bana CSS özgüllüğü hakkında bir şeyler öğrettiğim için sordum, bu soruyu daha önce hiç duymadım ve bana yardımcı oldu.
luke_mclachlan 18:16

Yanıtlar:


21

Önerdiğiniz gibi, en şık yaklaşım, CSS geçersiz kılmalarınızın, eklentiler tarafından enjekte edilen CSS'den sonra yüklenmeleridir. Bunu başarmak oldukça kolaydır - sadece stil sayfanıza başvurmadan önce header.phparamalarınızın yapıldığından emin olmanız gerekir wp_head():

<head>
    <!-- all the usual preamble stuff goes here -->

    <?php wp_head(); ?>

    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
</head>

Ya bir çocuk teması kullanıyorsam? Ana temamın header.php dosyasını geçersiz kılmayı sevmiyorum.
Jules

19

Eklentilerin CSS ile başa çıkmasının birkaç yolu vardır.

  • best case: plugin, CSS'yi sıraya sokar ve devre dışı bırakma seçeneği sunar (devre dışı bırakın, CSS kodunu stil sayfanıza kopyalayın ve mutlu olun);
  • iyi durumda: eklentiler tarzı sıraya kanca işlevi (kanca fonksiyonu, gerekirse mods ile kendi kanca);
  • olağan vaka: eklentisi doğrudan CSS'yi sıralar. Bkz senaryo sıradan çıkarma nasıl? (aynı zamanda stilleri için de geçerlidir). Kısa versiyon - gelecekteki WP sürümünde dequeue işlevi olacak, şimdilik bununla çalışabilirwp_deregister_*
  • Kötü durum: eklenti, başka şeylerin arasında CSS'yi yansıtıyor. Her seferinde ...

Genel olarak bence ayrı stil sayfalarını devre dışı bırakmak ve sorunları en aza indirmek ve performansı geliştirmek için bunları kendinize dahil etmek daha kolay ve kolaydır (getirilecek daha az dosya).


Hangisinin olduğunu nasıl bilebilirim?
IanEdington

1
Çoğunlukla koda bakarak. :)
Rarst

1

"İstekli olmayan" eklenti CSS'nin bir kopyasını tema klasörüne kaydeder ve ekleyerek tema css'a aktarırım

@import url('name-of-the-plugin-css.css');

bunun için (tabii ki, enjekte ettiğim kişi tarafından .css adını değiştirmek). Sonra tema klasöründeki css kopyasını değiştirir ve diğer dosyalar için yaptığım gibi sunucuya kaydederim. Evet, bazen onlara "! Önemli" olarak atayarak değiştirilen kimlikleri veya sınıfları "çivileştirmek" gerekebilir.

Bunun sanat haberi olup olmadığını bilmiyorum, ama zararı yok ve iyi çalışıyor.


1

Oldukça şık bir başka yol da CSS'nin özgüllüğünü kullanmaktır.

Yani eklentinin css diyorsa:

div.product div.images img {
  ......
}

css'inizde tanımlayabilirsiniz:

body div.product div.images img {
  ......
}

Ayrıca benzer bir soru için Michael Rader'in cevabına bakınız .


Tamam çok teşekkür ederim. Bu benim için kabul edilmiş bir cevap olacaktır. Sadece genel style.css kullanın ve özgüllük parlaklık gibi çalışır!
Luca Reghellin

0

Eklenti css geçersiz kılmak için, zaten özgüllük kullanıyordu ve! Önemli, sınıfları geçersiz kılmak için kimliği kullandım. Bu kodumu biraz temizledi. Tabii ki, bu sadece sınıfların yanı sıra öğelere atanan kimlikleri olduğunda işe yaraması için de mükemmel bir çözüm değildir.

Nitelik seçicileri teoride de kullanabilirsiniz. Ancak, henüz bu teoriyi test etmek için koymadım.


0

Özel css'im için! Önemlidir ve bu da sorun yaşadığım eklentinin stilini geçersiz kıldı. Eklentinin geliştiricisi eklenti css boyunca! Önemli kullanıyordu ve bu yüzden üzerine yazamadım! Önemli.

body {
font-family: "Open Sans", Arial, sans-serif !important;
font-weight: 300 !important;    
}

-1

Eklenti css geçersiz kılmak için, zaten özgüllük kullanıyordu ve! Önemli, sınıfları geçersiz kılmak için kimliği kullandım. Bu kodumu biraz temizledi. Tabii ki, bu sadece sınıfların yanı sıra öğelere atanan kimlikleri olduğunda işe yaraması için de mükemmel bir çözüm değildir.

Nitelik seçicileri teoride de kullanabilirsiniz. Ancak, henüz bu teoriyi test etmek için koymadım.

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.