WordPress Gelişmiş HTML

1000sofDesignElements

WordPress Gelişmiş HTML

WordPress Gelişmiş HTML’e bazı temel aşinalık ve anlayışınız varsa , Visual düzenleyicinin varsayılan biçimlendirmesini geçersiz kılan bazı HTML eklemek için HTML düzenleyicinizi kullanabilirsiniz . İşte bazı öneriler.

Not : Bu kaynak, tek tek gönderilerin ve sayfaların biçimlendirilmesinde basit değişiklikler yapmak için HTML’yi kullanmak içindir. Yazı tipi stilini veya rengini değiştirmek gibi temanıza battaniyede değişiklikler yapmak istiyorsanız  , WordPress.com Premium ve WordPress.com İş planlarında bulunan Özel Tasarım özelliğine ihtiyacınız olacaktır .

Biçimlendirilmiş metin

Bazı blog yazıları türleri için (özellikle şiir), satır aralıkları ve girinti üzerinde Visual düzenleyicinin normalde sunduğu özelliklerin üzerinde daha fazla kontrol isteyebilirsiniz.

Düzenleyiciyi girintilerinizi ve aralıklarınızı korumak için zorlamak için, <pre>etiketi kullandığımız yöntemi kullanmayı deneyin .

Örneğin, aşağıdaki şiiri çekin:

AH, altın kase kırıldı! 
     Sonsuza dek uçan ruh! 
 Bell verelim! - Aziz bir ruh 
     Stygian nehri kayar! 
         Ve mezar ayin okunacak izin - 
             cenaze şarkı söylenecek - 
         En güzel Ölüler için bir mersiye 
             hiç bu kadar genç yaşta öldü ki! 
                 Ve, Guy De Vere, 
                 Sen hiç gözyaşı görmedin mi? 
                     Şimdi ağla ya da yok artık! 
                 Bakın, yon drear'da 
                Ve sert bier, 
                    Düşük sevgilin yatıyor Lenore!

Bu biçimlendirme efektini elde etmek için aşağıdaki kodu kullanmalısınız:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<pre>AH, broken is the golden bowl!
     The spirit flown forever!
 Let the bell toll! — A saintly soul
     Glides down the Stygian river!
         And let the burial rite be read —
             The funeral song be sung —
         A dirge for the most lovely dead
             That ever died so young!
                 And, Guy De Vere,
                 Hast thou no tear?
                     Weep now or nevermore!
                 See, on yon drear
                And rigid bier,
                    Low lies thy love Lenore!</pre>

Ayrıca <pre>, Visual düzenleyicideki açılır menü stilini ve “Ön” seçeneğini belirleyerek etiketi uygulayabilirsiniz .

Ekstra satır sonları

Görsel editör, varsayılan olarak her paragrafın arasına bir boş satır bırakır. “Enter” veya “return” tuşunu kullanarak ek satır sonu eklemeye çalışırsanız, bu boşluklar yayınlandığınızda silinir.

Düzenleyiciyi bu boşlukları saklamaya zorlamak için, Metin düzenleyicisine aşağıdaki kodu ekleyebilirsiniz:

&nbsp;

Bunu, boş satırlar istediğiniz kadar eklemek isteyebilirsiniz. Dolayısıyla, iki paragraf arasında üç boş satır istiyorsanız, Metin düzenleyicinizde aşağıdakileri ekleyin:

&nbsp;
&nbsp;
&nbsp;

Bu, kırılmayan bir alan için HTML’dir. Ama uyarı kelimesi! Bu alanları ekledikten sonra yayınınızı yayınlamadan veya güncellemeden önce Visual düzenleyicisine geri tıklarsanız, bu alanlar tekrar silinir.

Bu boşlukların kalması konusunda sorun yaşıyorsanız, fazladan satır sonları eklemek için satır içi CSS’leri de kullanabilirsiniz.

Bunu yapmak için, paragrafınızı aşağıdaki koda kaydırın:

<p style="padding-top:14px;">Your paragraph of text here.</p>

Bu, paragrafın üstünde 14 piksel alan bırakması için editöre bildirir. Daha fazla alan için sayıyı artırabilir veya daha az alan için onu azaltabilirsiniz. Bir paragrafın üst kısmında değil de altına ilave alan eklemek için “dolgu üstü” yerine “dolgu altını” kullanabilirsiniz.

  WEB YAZILIM Hakında Detaylı Bilgiler

Bu, yukarıda tartışılan bölünmez alan kodundan biraz daha karmaşık gözüküyor, ancak daha fazla esneklik ve kontrol sağlıyor.

Sütunlar

Tek bir yayın veya sayfada sütun oluşturmak için <div>etiketi styleözellikle birlikte kullanabilirsiniz .

Örneğin, içeriğinizi iki sütunda bölmek için şu kodu kullanmanız gerekir:

1
2
3
4
5
6
7
8
9
10
11
12
13
<div style="width:40%;padding:0 10px 0 0;float:left;">
Your content for your column #1
Your content for your column #1
Your content for your column #1
</div>
<div style="width:40%;padding:0 10px 0 0;float:right;">
Your content for your column #2
Your content for your column #2
Your content for your column #2
</div>
<hr style="clear:both; visibility: hidden;" />

Bu, böyle bir şey yaratacaktır:

# 1 sütun
içeriğiniz # 1 sütun
içeriğiniz # 1 # 1 sütun içeriğiniz
# 2
sütununuza
ilişkin içeriğiniz # 2 numaralı sütununuzdaki içeriğiniz # 2 numaralı sütununuz için olan içeriğiniz

Sütunlarınızın değerleriyle oynayabilir widthve paddingsütunlarınızı değiştirebilirsiniz. Bu, aralarındaki aralığı ayarlamanıza, farklı genişliklerde sütunlar oluşturmanıza ve onları eklediğinizde postanıza veya sayfanıza daha fazla sütun sığmasını sağlamanıza izin verir.

Örneğin, üç sütun için aşağıdaki kodu kullanırsınız:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div style="width:30%;padding:0 10px 0 0;float:left;">
Your content for your column #1
Your content for your column #1
Your content for your column #1
</div>
<div style="width:30%;padding:0 10px 0 0;float:left;">
Your content for your column #2
Your content for your column #2
Your content for your column #2
</div>
<div style="width:30%;padding:0 10px 0 0;float:right;">
Your content for your column #3
Your content for your column #3
Your content for your column #3
</div>
<hr style="clear:both; visibility: hidden;" />

widthBaşka bir sütuna sığabildiğimizden emin olmak için bu özelliği% 30’a nasıl değiştirdiğimizi not edin .

Tablolar

Tabloları kopyalayıp diğer uygulamalardan (Microsoft Word gibi) posta veya sayfanıza yapıştırmak çalışmıyor. Bununla birlikte, metin düzenleyicisinde doğrudan basit HTML tabloları oluşturabilirsiniz.

Bunu yapmak için, aşağıdakine benzer bazı HTML deneyin:

<table> 
<tr> 
<td> Tablo sayısı </ td> 
<td> 1 </ td> 
<td> 2 </ td> 
</ tr> 
</ table>

Bu, aşağıdaki gibi bir tablo oluşturacaktır:

Tabloların sayısı 1 2

Tablonuz için ihtiyacınız olan sayıda satır ve sütun için bunu genişletin.

Sizin için HTML tabloları oluşturmak için üçüncü taraf bir hizmet kullanabilirsiniz, böylece metin düzenleyicinize yapıştırabileceksiniz. Windows Live Writer bunu yapacak bir programdır ve bu Table Generator web sitesi başka bir programdır .

Not: Tablolar, basit bir liste adı, tarih veya sayı gibi tablo verilerini görüntülemek için en iyisidir. Tablolar, sütunlu bir sayfa düzeni oluşturmak için önerilmez. Bunun yerine sütunlar kullanmanızı öneririz .

Katlanabilir İçerik (akordeon efekti)

Bir akordeon öğesi ayarlamak , WordPress.com’da izin verilmeyen komut dosyası etiketini gerektirir . Bunun yerine, <ayrıntılar> öğesi kullanılabilir, ancak şimdilik Kenar tarayıcısında desteklenmediğini unutmayın .

Sosyal Medyada Paylaş

Peki Siz Bu Konuda Ne Düşünüyorsunuz?