Belirli sayfalara/yayınlara CSS nasıl uygulanır
WordPress’te belirli sayfalara veya yayınlara CSS uygulayabileceğinizi biliyor muydunuz? Evet, dostça WordPress doğası nedeniyle bu mümkün. Ve bu kılavuzda, belirli sayfalara veya yayınlara CSS eklemenin çeşitli yollarını göstereceğiz. Tüm WordPress temaları genellikle her içerik türü için farklı stiller uygular. Gönderme, sayfalar, taksonomi, profiller ve diğer içerikler her birinde farklı stil sayfalarına sahiptir. Aynı şey eklentiler ve WordPress’in diğer tüm yönleri için de geçerlidir. Ancak, WordPress esnekliği nedeniyle, belirli sayfalar ve yazı türleri için farklı stil sayfası da kullanabilirsiniz. Ancak, süreçten geçmeden önce neden CSS eklemeniz gerekebileceğini görelim.
Neden belirli sayfalara veya yayınlara CSS uygulayın, belirli sayfalara CSS ekleyin ve bir web sitesi oluşturuyorsanız veya web sitenizi tasarlıyorsanız gönderim çok kullanışlıdır. CSS genellikle web sitesinin görsel görünümünü ayarlamak için kullanılır. Bu nedenle, web sitenizdeki CSS’yi bir bütün olarak kullanmak, web sayfalarınızı tam olarak web sitenizi ziyaret edenler için istediğiniz gibi görüntülemek için çok yararlı olabilir. Web sitenizdeki sayfalara veya diğer yayınlara kıyasla benzersiz tasarımlar gerektiren bazı sayfalar veya yayın türleri olabilir. Bu durumda, en iyi seçeneklerinizden biri belirli sayfalara veya yayınlara CSS uygulamaktır. Bu sayfa veya yayın genellikle web sitesi menünüze eklenir. Ancak, mağaza sayfaları, ürün sayfaları ve hatta ev sayfaları gibi diğer benzersiz sayfaları ve yayınları da dahil edebilirler.
Örneğin, QuadLayers’daki biz bile portföyler gibi belirli sayfalarda CSS kullandık ve sayfalardan veya diğer yayın türlerinden farklı hale getiriyoruz. Şimdi, daha fazla uzatmadan, sürece devam edelim. Belirli sayfalara veya yayınlara CSS nasıl uygulanır, belirli sayfalara veya yayınlara CSS uygulamak için çeşitli yollar vardır. Ancak, işte en yaygın 3 kişi: HTML kimliği veya sınıfı kullanmak
PHP işlevlerini ekle
Belirli bir sayfaya veya gönderiye bir CSS dosyası ekleyin
Tüm bu yaklaşımlar CSS’yi çeşitli amaçlar için uygulamak için kullanılabilir. Bu makaledeki tüm bu yaklaşımları doğru adım -by -adım öğreticisi ile tartışacağız.
1. Bu HTML kimliğini veya sınıfını kullanmak en yaygın yaklaşımlardan biridir ve belirli sayfalara veya yayınlara CSS uygulamak istiyorsanız yaygın olarak kabul edilir. Tek yapmamız gereken, sayfaya veya gönderiye ait olacak benzersiz bir kimlik almak. Ardından, bu sınıf veya HTML kimliği, tüm CSS komut dosyalarımızı istenen sayfaya veya gönderiye hedeflememizi sağlar. 1.1. HTML sınıfını veya ilk sayfa kimliğini bulun, CSS komut dosyası için kullanılacak kimliği veya sınıfı bilmeniz gerekir. Bu, bir tarayıcı denetim aracının yardımıyla kolayca bulunabilir.
CSS uygulamak istediğiniz sayfayı açın ve düzenlemek istediğiniz öğelere sağ tıklayın. Ardından muayene tıklayın.
Burada vücudun HTML etiketini kontrol edin. Bu, kullandığınız temaya bağlı olarak değişecektir. Aşağıdaki örneklerde yirmi yirmi tema kullandık. Yani, yirmi yirmi tema kullanarak web sitesi ana sayfasını kontrol ederken göreceğiniz şey budur:
Tabii ki, daha özel seçmenlere ihtiyacınız varsa, tam CSS Yolu seçmenlerini kullanabilirsiniz. Ancak bu oldukça aşırı ve birçok durumda gerekli olmayacak. Örneğin, bu daha önce gördüğümüz aynı logo öğesini yönetmek için çok daha spesifik bir seçmen: html body.home div#page.site başlık#masthead div.site-marka div.site-logo span.custom-logo- Link img.custom-logo { / * css buradaki * /} 1.2. HTML sınıfını veya kimlik gönderisini bulun sayfaya benzer şekilde, her yazı için benzersiz bir HTML sınıfı olmalıdır. Bir kez daha, bir tarayıcı geliştiricisinin yardımıyla CSS uygulamak istediğiniz yazıdaki öğeleri kontrol edin. Ardından, PostID öznitelikleri gibi benzersiz kimlikleri görebileceksiniz. Yirmi yirmi temalı bir sonraki gönderi için, bu yazıyı tanımlayan sınıf PostID -557’dir. Aynı şeyi diğer web sitesi sayfalarında da yapabilirsiniz. Sayfaları tanımlayan benzersiz bir sınıf kullanma. Aşağıdaki ekran görüntülerini görürseniz, sayfayı tanımlayan sınıfın sayfa-ID-357 olduğunu görebilirsiniz.
Son olarak, web sitenizin özel logo örneği gibi ihtiyaçlarına uygun kendi CSS seçmenleriniz için. Ardından, CSS’yi belirli sayfalara veya yayınlara görünüm> Özelleştir> Ek CSS’ye ekleyerek uygulayabilirsiniz. Daha fazla yardıma ihtiyacınız varsa, WordPress’e CSS’nin nasıl uygulanacağına veya bir tarayıcı geliştiricisini kullanarak CSS’yi uygulayacağınız konusundaki kılavuzumuzu görebilirsiniz.
2. PHP işlevini ekleyin Önceki yöntem, özel CSS’imizi belirli bir gönderiye veya sayfaya uygulamak için yeterlidir. Bu, ihtiyacınız olabilecek ayarlamaların çoğu için yeterli olacaktır. Ancak bazı durumlarda sınırlar olabilir: temanızın düzenlenmesi gereken içerik için benzersiz bir sınıf veya HTML kimliği yoktur. CSS kurallarının büyük bir listesine sahipsiniz ve bunları ayrı dosyalara kaydetmeniz gerekiyor. Geçerli sayfanın yanı sıra başka koşullar başka bir koşul uygulamak istiyorsunuz.
CSS’yi belirli bir sayfaya veya gönderiye uygulamak istediğinizde benzer bir sorununuz varsa, PHP işlevini kullanmak daha iyi olacaktır.
Ancak başlamadan önce, WordPress sitenizin bir yedeklemesini yaptığınızdan veya bu yaklaşım için bir çocuk teması oluşturduğunuzdan emin olun. Web sitenizde bazı karmaşık dosyaları düzenleyeceğiz. Dolayısıyla, gereksiz herhangi bir değişiklik web sitenizde daha fazla sorun yaratabilir. Yardıma ihtiyacınız varsa, bir çocuk teması oluşturmak için WordPress için en iyi çocuk tema eklentilerinden birini bile kullanabilirsiniz. 2.1. Sayfalar/Gönderiler Kimliği Bul İlk adım, tarzımızı uygulamak istediğimiz sayfa kimliğini veya yayınlamaktır. Kimlik değerinin önceki adımla aynı olduğunu fark edebilirsiniz. Ancak, bu daha önce kullandığımız HTML kimliği değildir.
Şimdi kastettiğimiz kimlik, yayınları ve sayfaları tanımlayan PHP değişkeni. Aslında, önceki yaklaşımdaki kimlik HTML sınıfını tanımlar. Neyse ki, web sitenizde sayfalar ve kimlik gönderimi bulmak çok kolaydır. Editörü açtığınızda sayfa kimliğini görebilir ve arka uç Yönetici Gösterge Tablosu’nda yayınlayabilirsiniz. Tarayıcı URL’nizde gönderme veya sayfa kimliği belirtilmiştir.
Bir sayfa kimliği veya yayın almanın bir başka yolu, aşağıdaki komut dosyasını alt temanın function.php dosyasında kullanmaktır.Sadece görünümü açın> Tema Düzenleyicisi’ni açın ve functions.php dosyasını açın.Ardından, editörde aşağıdaki görüntüleri yapıştırın ve dosyayı güncelleyin.Bu, ön uçta bir sayfa kimliği yazdırır.Add_action (‘wp_head’, function () {$ page_id = get_qued_object_id ();
echo $ page_id;
});
CSS uygulamanız gereken yazı veya sayfa için PHP’nin tanımlanmasını öğrendikten sonra, CSS’yi kafasına yazdırabilirsiniz.Daha önce kullandığımız kancayı kullanabilirsiniz, yani wp_head ().Function.php dosyasına aşağıdaki snippet’leri bir kez daha yapıştırın.Add_action (‘wp_head’, ‘my_head_css’);
$ page_id = get_qued_object_id ();
if ($ page_id == 97) {
Echo “/ * css buradasınız */”; }
}
CSS’nizi “CSS You BURADA” bölümüne eklediğinizden ve dosyayı güncellediğinizden emin olun. 3. Belirli bir sayfaya bir CSS dosyası ekleyin veya POST POST, belirli bir gönderi veya sayfanın gerektirdiği temel ayar için küçük CSS parçaları eklemek için iyidir. Ancak daha büyük bir CSS komut dosyası için iyi uygulamaları takip etmeniz ve ayrı CSS dosyaları yüklemeniz gerekir. Tüm özel CSS’nizin toplanması gerektiğinde. 3.1. Bir CSS dosyası oluşturun İlk kod düzenleyicisini kullanarak, kod düzenleyicisini kullanarak gerekli tüm CSS komut dosyalarıyla birlikte ayrı bir CSS dosyası oluşturmanız gerekir. Visual Studio kodu, yüce metin veya CSS dosyalarını destekleyen diğerleri gibi editörler kullanılabilir. Ardından, CSS uzantılı yeni bir dosya oluşturun ve kodunuzu buraya yapıştırın. Bu öğretici için my-style.css dosyasını adlandırdık. 3.2. CSS Dosyalarını Yükle Geçerli Kilit Tema Klasörüne yükleyin, Yaptığınız CSS Dosyaları Çocuk Tema Dizini’ne yüklenmelidir. Bunun için dosya yüklemek için FileZilla gibi FTP istemcilerini kullanabilirsiniz. Hatta ana çocuğun kendisinin tema dizinine yükleyebilirsiniz.
3.2. CSS özel dosyanızın enqueue Şimdi, functions.php dosyasına bir kod görüntüsü ekleyerek WordPress sitenize özel bir CSS dosyası sıralayabilirsiniz. Aşağıdaki komut dosyasında, CSS dosyalarını WP web sitesine uygulamanın doğru yolu olan WP_ENQUEUE_SCRIPT () kancasını kullanacağız. İşlevde, yalnızca koşullar karşılandığında CSS dosyamızı (my-styles.css) kaydediyoruz ve bekliyoruz. Bu, önceki örnekle aynı kullanımdır. Ardından, get_quied_object_id () işlevi geçerli sayfadan veya yayından bir kimlik alır. Yapmanız gereken tek şey aşağıdaki komut dosyasını function.php dosyasına bir kez daha eklemek ve güncellemek. Add_action (‘wp_enqueue_scripts’, ‘my_theme_styles’); işlev my_theme_styles () {
if (get_qued_object_id () == 97) {
wp_register_style (‘Style-ukai’, get_stylesheet_directory_uri (). ‘/gaya-sai.css’);
wp_enqueue_style (‘style-ukai’, get_stylesheet_directory_uri (). ‘/gaya-sai.css’);
} } Not: Yukarıdaki komut dosyası örneğinde, önceki örnekte 97 olan aynı kimlik referansına atıfta bulunuyoruz. Bu sonuçlar, belirli sayfalara veya yayınlara CSS uygulayabileceğiniz tüm yöntemlerdir. Bu, web siteniz için belirli sayfalar ve yayınlar için benzersiz tasarımlar oluşturmanıza yardımcı olabilir. Özetlemek gerekirse, belirli sayfalara ve yayınlara CSS eklemenin en yaygın 3 yolu vardır:
HTML kimliği veya sınıf kullanma
PHP işlevlerini ekle
Belirli bir sayfaya veya gönderiye bir CSS dosyası ekleyin
Bunların en kolay yaklaşımı, CSS seçmenleri için HTML kimliği veya sınıfı kullanmaktır. Ancak, temanızın bir sınırı varsa, bir sonraki en iyi seçeneğiniz CSS uygulamak için bir PHP işlevi eklemektir. Son olarak, belirli bir sayfa veya yayın için büyük bir CSS komut dosyası uygulamanız gerekiyorsa, CSS dosyasına girmek sizin için en uygun yaklaşımdır. Web sitenizde daha fazla CSS kullanmak istiyorsanız, Divi menüsünü CSS ile ayarlamak veya WooCommerce Shop programını düzenlemek için bir öğreticimiz de var. Benzer şekilde, programlarınızı ve yayınlarınızı programlanmış yayınlar ve sayfalar yapmak, gönderileri sayfalara dönüştürmek, özel yazı türleri oluşturmak veya hatta WordPress’teki sayfalara yayın eklemek için sayfalarınızı ve yayınlarınızı daha fazla ayarlayabilirsiniz. Peki, şimdi belirli sayfalara veya yayınlara CSS uygulayabilir misiniz? Bu öğretici yardımcı oluyor mu? Bize yorumlarda söyleyin. Bu arada, ziyaret etmek isteyebileceğiniz diğer bazı makaleler: WordPress’teki gönderi türünü nasıl dönüştürür/değiştirebilirsiniz
Programlı bir WordPress özel gönderi oluşturun
Wooocommerce sepeti sayfası nasıl ayarlanır
