Ana İçeriğe Geç

Nasıl Visual Editor CSS ile bir açılır menü ekleme

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

Bu derste nasıl öğreneceksiniz Kolayca metin bağlantılarını dönüşümü çekici düğmeler WordPress'te. Bu prosedür kılavuzunu izleyerek nasıl ekleyeceğinizi bileceksiniz. WordPress'in görsel editörüne açılan bir menü bu, makalenizin içeriğine özel CSS stilleri uygulamanıza olanak tanır.

Bu özel CSS stilleri, yazılarınızdaki metinleri süslemek ve biçimlendirmek için uygulanabilir. Makaleleriniz için çekici ve göz alıcı düğmeler oluşturmak için büyük ölçüde kullanılırlar. Bu eğitimde ayrıca bir CSS stilleri düğmesi oluşturmayı da ele alacağız.

Yazılara ve sayfalara çekici düğmeler eklemenin kolay bir yolunu istiyorsanız, bu eğitim tam size göre.

Nihai sonuç.

Bu eğiticinin sonucu, makalenizdeki metni seçmenize ve ardından makale düzenleyicisinin açılır menüsü aracılığıyla ona bir stil uygulamanıza izin vermek olacaktır.

İşimiz bittiğinde, Görsel Düzenleyici şöyle görünecek ve açılır menü şeklinde bir "stiller" öğesi içerecektir:

Nasıl Yapılır-Styles-01

Yeni menüyü kullanarak, görsel kullanmadan düğme efekti oluşturmak için makalenizdeki metin bağlantısına bir CSS stili uygulamak mümkün olacak. Görünüm size bağlı olsa da bağlantılar şöyle görünebilir:

Nasıl Yapılır-Styles-02

Bu yaklaşım, yalnızca bir makale oluştururken zaman kazandırmakla kalmaz, aynı zamanda tüm blog katılımcılarınızın düğmeleri veya makalelerin diğer unsurlarını süslemek için her zaman aynı stilleri kullanabilmesini sağlar.

Güvenlik talimatları

Bu derste aşağıdaki dosyaları düzenleyeceğiz:

  • fonctions.php
  • style.css

Bu iki dosya temanızın bir parçasıdır, bu nedenle blogunuzdaki şu anda etkin olan temayla ilişkili sürümlerle çalışacağız. Her şeyden önce önemli Bu dosyaların yedeğini almak bir şeylerin ters gitmesi durumunda.

İkincisi, tavsiye edilir alt tema oluşturmak için Mevcut temanın Nasıl bir çocuk teması oluşturulacağını bilmiyorsanız. Bir alt tema kullanmak, mevcut temanızın güncellenmesini sağlayacaktır. Ayrıca temayı değiştirirseniz işaret etmeye değer. ces değişiklikler kaybolacak.

Bununla birlikte, geliştirilmekte olan bir blog üzerinde veya yerel bir WordPress kurulumu üzerinde çalışıyorsanız, bir child tema oluşturmanız gerekmez.

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

Menüye bir “Tarzlar” öğesinin eklenmesi.

"Stiller" açılır menüsü aslında WordPress Görsel Düzenleyici'nin bir parçasıdır, ancak varsayılan olarak devre dışı bırakılmıştır. Etkinleştirmek için dosyaya bazı kodlar eklemeniz yeterlidir. fonctions.php Mevcut temanın

Dosyayı açmak ve değiştirmek için menüye gidin ” Apparence ”Sonra tıklayın“yayımcı”Alt menüde. İngilizce sürümünüz varsa Git Görünüm> Düzenleyici

Nasıl Yapılır-Styles-03

Öncelikle, sayfanın sağ üst kısmındaki açılır menüden blogunuz tarafından kullanılan temanın seçili olup olmadığını kontrol edin. Şu anda dosyayı değiştiriyorum fonctions.php Yirmi Oniki tema ama sizin için farklı bir tema olabilir.

Sonra dosyasını tıklayın fonctions.php Düzenlemeye başlamak için sayfanın sağ tarafındaki dosya listesinden. Aşağıdaki kodu kopyalayıp yapıştırın. Kolaylık olması için dosyayı sonuna yapıştırmanızı tavsiye ederim, böylece dosyaya eklediklerinizi kolayca takip edebilirsiniz.

1
2
3
4
5
6
7
8
9
// Enable the Styles dropdown menu item
// Callback function to insert 'styleselect' into the $buttons array
function my_mce_buttons_2( $buttons ) {
array_unshift( $buttons, 'styleselect' );
return $buttons;
}
// Register our callback to the appropriate filter
add_filter('mce_buttons_2', 'my_mce_buttons_2');
// end of part I

Kod dosyaya eklendiğinde, değişiklikleri kaydetmek için güncelle düğmesine tıklayın. Her şey yolunda giderse, stil seçimi açılır menüsünün WordPress görsel yazı düzenleyicisine eklendiğini görmelisiniz.

Ancak henüz bitirmedik. Bu yeni açılır listedeki menü öğelerini incelerseniz, bunların diğer düğmelerin Görsel düzenleyicisiyle ilgili stiller olduğunu fark edeceksiniz.

Biz istiyoruz Listeye kendi stillerimizi ekleyin.

Düğmelerinizin CSS Stillerini oluşturun.

Bu eğitimde, metin bağlantılarımız için bir düğme oluşturacağız, ancak diğer herhangi bir öğe türü için de dekorasyon ve biçimlendirmeyi aynı şekilde kolayca oluşturabilirsiniz.

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

Şimdi düğmeler için CSS stilleri oluşturacağız. Kendi CSS'nizi oluşturabilir veya birçok çevrimiçi düğme oluşturucu uygulamasından birini kullanabilirsiniz. CSS Düğme Üreticisi iyi bir seçimdir, bu yüzden siteyi ziyaret edin ve hızlı bir şekilde bir düğme oluşturun ve ardından CSS'yi kopyalayın. Ardından “Görünüm”e, ardından “Editör”e gidin ve dosyaya tıklayın. style.css sağ taraftaki dosya listesinde. İngilizce'de Görünüm> Düzenleyici sayfası> style.css'ye sahip olacaksınız.

Yine dosyanın sonuna gidin ve aşağıdaki düğmeden CSS'yi içine yapıştırın veya kendi CSS'nizi kullanın:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
.linkButton {
-moz-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
-webkit-box-shadow:inset 0px 1px 0px 0px #bbdaf7;
box-shadow:inset 0px 1px 0px 0px #bbdaf7;
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #79bbff), color-stop(1, #378de5) );
background:-moz-linear-gradient( center top, #79bbff 5%, #378de5 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#79bbff', endColorstr='#378de5');
background-color:#79bbff;
-webkit-border-top-left-radius:0px;
-moz-border-radius-topleft:0px;
border-top-left-radius:0px;
-webkit-border-top-right-radius:0px;
-moz-border-radius-topright:0px;
border-top-right-radius:0px;
-webkit-border-bottom-right-radius:0px;
-moz-border-radius-bottomright:0px;
border-bottom-right-radius:0px;
-webkit-border-bottom-left-radius:0px;
-moz-border-radius-bottomleft:0px;
border-bottom-left-radius:0px;
text-indent:0;
border:1px solid #84bbf3;
display:inline-block;
color:#ffffff;
font-family:Trebuchet MS;
font-size:15px;
font-weight:bold;
font-style:normal;
height:40px;
line-height:40px;
width:100px;
text-decoration:none;
text-align:center;
text-shadow:1px 1px 0px #528ecc;
}

.linkButton:hover {
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #378de5), color-stop(1, #79bbff) );
background:-moz-linear-gradient( center top, #378de5 5%, #79bbff 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#378de5', endColorstr='#79bbff');
background-color:#378de5;
}

.linkButton:active {
position:relative;
top:1px;
}

/* This button was generated using CSSButtonGenerator.com */

Değişiklikleri kaydetmek için dosyayı güncelleyin.

Açılır Menüye Stiller Ekleyin.

Şimdi dosyayı tekrar tıklayın fonctions.php  ve aşağıdaki kodu dosyanın altına yapıştırın.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// Add the Button CSS to the Dropdown Menu
// Callback function to filter the MCE settings
function my_mce_before_init_insert_formats( $init_array ) {

// Define the style_formats array
$style_formats = array(

// Each array child is a format with it's own settings
array(
'title' => 'Link Button',
'selector' => 'a',
'classes' => 'linkButton',
),
);

// Insert the array, JSON ENCODED, into 'style_formats'
$init_array['style_formats'] = json_encode( $style_formats );
return $init_array;
}

// Attach callback to 'tiny_mce_before_init'
add_filter( 'tiny_mce_before_init', 'my_mce_before_init_insert_formats' );
// end of part II

Tablonun içindeki şu satırlara dikkat edin:

  • başlık - bu, açılır menüde görüntülenecek olan başlıktır
  • seçici - "a", bu stilin bağlantılar için olduğunu belirten bağlantıya atıfta bulunur.
  • sınıflar - bu bizim CSS düğmemizin sınıf adıdır

Kendi CSS'nizi kullandıysanız, sınıf adı, kendi CSS sınıfınızın adı olarak verdiğiniz şey olacaktır. Yukarıdaki örnekte, CSS stil düğmesi linkButton olarak adlandırılır.

Kodu içine yapıştırdıktan sonra, değişiklikleri kaydetmek için güncelle düğmesini tıklayın. Dosya kaydedilir kaydedilmez, WordPress yayın düzenleyicisine gidin ve değişikliklerin etkili olması için pencereyi yenileyin. Ardından “Stiller” açılır menüsüne tıklayın ve “ başlıklı bir giriş görmelisiniz.linkbutton".

 

Nasıl Yapılır-Styles-05

CSS stilini uygulamak ve düğmeyi oluşturmak için içinde bir metin bağlantısı oluşturun makale, metni seçin ve ardından menüden düğmenize vermek istediğiniz stili seçin. Stiller, kayıt düzenleyici penceresinde görünmez. Aşağıdaki gibi görünmesi gereken makaleyi önizlemelisiniz:

Nasıl Yapılır-Styles-06

Artık yazılarınıza veya sayfalarınıza akılda kalıcı ve çekici bir düğme eklemeniz gerektiğinde, bir metin bağlantısı oluşturun ve ardından açılır menüden stilini seçin.

Gelişmiş seçenekler

Bu özelliğin başka kullanımlarını düşünebileceğinizi umuyoruz. Örneğin, menüye ek stiller ekleyebilirsiniz. Metnin görünümünün biçimlendirilmesi veya CSS ile yapabileceğiniz herhangi bir şey olabilir.

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

Açılır listeye eklenecek ek bir düğme stili oluşturmak istiyorsanız, tabloda başka bir giriş oluşturmanız yeterli olacaktır ( fonctions.php) Ve hatları ve sınıf başlığını değiştirin:

1
2
3
4
5
array(
'title' => Bigger Button',
'selector' => 'a',
'classes' => 'biggerButton',
),

Ardından dosyaya yeni bir CSS stili ekleyin style.css. Bağlantı olmayan öğeler için stiller oluşturmak istiyorsanız, bunu da yapabilirsiniz. Bu, stili uygulamak istediğiniz alana bağlı olarak ikinci satırın değiştirilmesini gerektirir.  

Kısayollar.

Yukarıdakilerin tümü sizin için harika bir teori ise, yine de kodu düzenlemek zorunda kalmadan bu teoriyi uygulamanın daha hızlı bir yolunu istiyorsanız, bu iki eklenti ilginizi çekebilir:

Sonuç .

Artık, WordPress yayın düzenleyicisindeki açılır menüden bir seçeneği belirleyerek WordPress'te kolayca harika arama düğmeleri oluşturabilirsiniz.

Umarız bu eğitici yazı editörünüzde bir stil seçici tasarlamanıza yardımcı olmuştur. Belli kısımları atladıysak veya daha fazla ayrıntı getirmeyi düşünüyorsanız, yorumlarınızı bu son bölümler için ayrılan bölümde bize bırakmaktan çekinmeyin.

Bu makale yorumları 0 içeriyor

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
11 hisseleri
hisse10
cıvıltı1
Enregistrer