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.

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 bir açılır menü biçiminde bir "stiller" öğesi içerecektir:

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:

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 oluşturmanıza izin verir Kolay ve Ücretsiz profesyonel bir görünüme sahip herhangi bir web sitesi veya blog tasarımı. Kendiniz yapabileceğiniz bir web sitesi için çok fazla ödeme yapmayı bırakın.

Menüye "Stiller" öğesinin eklenmesi.

"Stiller" açılır menüsü aslında WordPress Görsel Düzenleyicinin 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  »Ardından« düğmesini tıklayın yayımcı Alt menüde. İngilizce sürümünüz varsa Git Görünüm> Düzenleyici

Ö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.

Ürünlerinizi internet üzerinden mi satmak istiyorsunuz?

Fiziksel ve dijital ürünlerinizi WordPress'te satmak ve çevrimiçi mağazanızı kolayca oluşturmak için en iyi e-ticaret eklentileri olan WooCommerce'i ücretsiz indirin. Yeni başlayanlar için mükemmel.

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.

Ş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 nedenle siteyi ziyaret edin ve hızlıca bir düğme oluşturun ve ardından CSS'yi kopyalayın. Ardından "Görünüm" e ve ardından "Düzenleyici" ye gidin ve dosyayı 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 başvurur.
  • 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 gönderi düzenleyicisine gidin ve değişikliklerin etkili olması için pencereyi yenileyin. Ardından "Stiller" açılır menüsünü tıklayın ve "başlıklı bir giriş görmelisiniz. linkbutton".

 

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:

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.

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.

%d bu sayfayı beğendi blogcular: