Yanıtlandı Tema Editörü Ek Yapılandırma?

merhaba editöre ek alanlar eklemek istiyorum

Bilmeniz Gereken
İpucu
Gerçek Senaryo
Yaygın Hata
Dikkat
Profesyonel İpucu

Bunlar için BB Kodu ekle alanından denedim olmadı eklenti yazmadan bunları eklemenin bir yolu var mi bunu makale alanında kullanacağım ÖRNEK

 

[XFSkins]

Eklenti yazmadan yapılabilir, ama “editöre ek alan” gibi özel kutular eklemekten ziyade özel BB kod mantığıyla yapılır.

Admin panelden:

İçerik > BB kodu > Özel BB kodları > BB kodu ekle

Örneğin:

BB kod etiketi: bilmeniz_gereken

Başlık: Bilmeniz gereken

HTML değişimi:

<div class="articleNotice articleNotice--info">
    <div class="articleNotice-title">🟦 Bilmeniz Gereken</div>
    <div class="articleNotice-body">{text}</div>
</div>

Örnek kullanım:

[bilmeniz_gereken]Buraya içerik gelecek.[/bilmeniz_gereken]

Sonra görünüm için stilin extra.less alanına CSS eklenir:

.articleNotice
{
    margin: 12px 0;
    padding: 12px 14px;
    border-radius: 6px;
    border-left: 5px solid;
}

.articleNotice-title
{
    font-weight: 700;
    margin-bottom: 6px;
}

.articleNotice-body
{
    line-height: 1.6;
}

.articleNotice--info
{
    background: #eef6ff;
    border-left-color: #2f80ed;
}

Diğerleri için de aynı mantıkla ayrı BB kod açarsın:

[ipucu]...[/ipucu]
[senaryo]...[/senaryo]
[yaygin_hata]...[/yaygin_hata]
[dikkat]...[/dikkat]
[pro_ipucu]...[/pro_ipucu]

Her birinin HTML’inde sadece class ve başlık değişir. Örneğin ipucu için:

<div class="articleNotice articleNotice--tip">
    <div class="articleNotice-title">🟩 İpucu</div>
    <div class="articleNotice-body">{text}</div>
</div>

CSS:

.articleNotice--tip
{
    background: #eefaf2;
    border-left-color: #27ae60;
}

.articleNotice--scenario
{
    background: #fff9e6;
    border-left-color: #f2c94c;
}

.articleNotice--error
{
    background: #fff0f0;
    border-left-color: #eb5757;
}

.articleNotice--alert
{
    background: #fff7e8;
    border-left-color: #f2994a;
}

.articleNotice--pro
{
    background: #f4f0ff;
    border-left-color: #8e44ad;
}

Kısaca: görüntü doğru; sadece her kutu türü için ayrı BB kod + extra.less ile daha düzgün hale getirmen gerekiyor. Editör araç çubuğuna özel buton eklemek istenirse o kısım eklentisiz biraz daha sınırlı kalır.

Örnek Görsel: