WordPress Blogunuzu Tazelemenin 5 Yolu

admin Haberler Leave a comment 5 Views

Yenileyin + Blogunuzla Yaratıcı Olun

Bu gönderide, iThemes blogunda uyguladığımız birkaç fikirle blogunuzu canlandırmanın birkaç yolunu ele alacağız.

• Eklentiler – Eklentiler, kodlama konusunda rahat değilseniz blogunuzun işlevselliğini genişletmeye ve tasarım öğeleri eklemeye yardımcı olabilir.
• Tasarım Öğeleri – Birkaç temel tasarım öğesi eklemek, web sitenizi tamamen yeniden tasarlamak zorunda kalmadan blogunuzun genel görünümünü tamamen değiştirebilir.
• Kod Parçacıkları – Bazı HTML, CSS ve düzenleme kodları konusunda rahatsanız, içeriğinizi görüntülemeniz için size yeni yollar sağlayacak birkaç kod parçacığı ekleyebilirsiniz.

1. Fotoğrafları ve Öne Çıkan Görselleri Güncelleyin

Fotoğraflar ve grafikler, blogunuzun genel estetiği üzerinde büyük bir etki yaratır. Bir blog gönderisi, gönderide yer alan görselleri veya kullandığınız öne çıkan görselleri değiştirerek yeni bir hayat alabilir. Kimse geri dönüp eski gönderilerdeki fotoğrafları ve öne çıkan görselleri güncelleyemeyeceğinizi söylemez.

Önceki gönderilere yeni, modern fotoğraflar ekleyerek veya öne çıkan görselleri stil veya renk düzeninde daha tutarlı hale getirerek blogunuzun tüm görünümünü tazeleyebilirsiniz. Çoğu tema demosunun bu kadar etkileyici görünmesinin bir nedeni, tüm görüntülerin web sitesinin genel tasarımıyla uyumlu ve tamamlayıcı olacak şekilde seçilmesidir. Aynı stratejiyi blogunuza uygulayın.

Blog Resmi İpuçları:

• Dosya boyutlarını küçük tutun. Web sitesi grafikleri, retina ekranlar için bile 300K'yı geçmemelidir. Dosya boyutu, bir sayfanın yüklenmesi için geçen süreyi belirler, bu nedenle resimlerinizin web için optimize edildiğinden emin olun. Ziyaretçilerin uzun web sayfası yüklemelerini bekleyecek sabrı yoktur, bu nedenle dosya boyutlarınızı düşük tutmak web sayfanıza erişim sürenizi hızlandırır. Sayfa hızı SEO'nuzu da etkiler.
• Resimlere alt etiketler ekleyin ve dosya adlarını güncelleyin. Blogunuzda kullandığınız resimlere uygun dosya adları ve alt etiketler eklemeyi alışkanlık haline getirin. Google Görsel Arama bu bilgileri görselleri görüntülemek için kullanır, bu nedenle görsellerinizi SEO için optimize etmeyi ihmal etmeyin.
• Stok fotoğrafları kullanın – sorun değil, gerçekten! Kendiniz fotoğraf çekmek veya grafik tasarlamak için zamanınız yoksa, sevimsiz veya açıkça stok fotoğrafçılığı olmayan bir dizi mükemmel stok fotoğraf sitesi var. Instagram'dan ilham alan stok fotoğraf sitelerini ücretsiz veya uygun fiyatlı ve cömert lisanslı bulabilirsiniz. Stocksnap.io, Unsplash.com, VisualHunt.com, Pexels.com ve Photodune.com'a göz atın.

2. Başlıkları Kullanın

Acemi blog yazarlarının çoğu, blog başlıklarını veya bunları nasıl ve neden kullanacaklarını bilmiyor olabilir. Şu anda blog gönderilerinizde başlık kullanmıyorsanız, bunları kullanmaya başlayın. Başlıklar, blog gönderilerinizi düzenlemenize, gönderilerinizi daha sindirilebilir bölümlere ayırmanıza ve SEO değeri eklemenize yardımcı olur.

Başlık nedir? Başlıklar, WordPress yazı/sayfa düzenleyicisinde bulunan h1, h2, h3, h4, h5, h6 öğeleridir. Editör ekranının üst kısmındaki bir açılır menüde başlıkları bulacaksınız. Bunları kullanmak için başlık oluşturmak istediğiniz metni seçin ve açılır menüyü kullanarak başlık seçeneğini uygulayın.

Ayrıca metin düzenleyici görünümünü kullanabilir ve aşağıdaki gibi başlıkları manuel olarak ekleyebilirsiniz:

<h2>This Is An Awesome Heading</h2>

Başlık İpuçları:

• Onları kullan! Özellikle h2 ve h3 (ama h1 DEĞİL) – Yeni bir blog yazısı yazmadan veya yayınlamadan önce, ana hatlarını çizip çizemeyeceğinize bakın. Bir anahat yaklaşımı kullanmak, başlık eklemek için doğal yerleri görmenize yardımcı olacaktır. Sadece aşırıya kaçmayın. Not: h1 blog yayınınızın başlığı için ayrılmalıdır, bu nedenle sayfanızın veya yayınınızın asıl içeriğinde h1> kullanmayın.
• Kısa ve Özlü Tutun – Başlıklar genellikle uzun cümleler değildir. Başlıklarınızı yazmak için gazete manşetlerini düşünün.
• Anahtar Kelimeleri h2s'ye dahil edin – Başlıklar bir SEO amacına hizmet eder. Arama motorlarına içeriğinizin düzenli ve okunabilir olduğunu söylemeye yardımcı olurlar. Gönderiniz veya sayfanız için bir anahtar kelime odağınız varsa, bunu gönderinin bir noktasında h2'de kullandığınızdan emin olun.
• Başlık Tipografisi ile Yaratıcı Olun – Başlıklar, farklı yazı tipi stilleri, renkler, ağırlıklar, harf aralığı vb. eklemenin bir yolu olabilir. Temanızın stil sayfası her başlık öğesi için stiller içermelidir, bu nedenle CSS'yi düzenleme konusunda kendinizi rahat hissediyorsanız bunları değiştirin.

3. Düğmelerle Harekete Geçirici Çağrılar Ekleyin

Blog içeriğinize yeni bir özellik eklemenin bir başka yolu da tıklanabilir düğmeler eklemektir. Düğmeler, tıklanacak yerleri vurgulamaya yardımcı olur ve ziyaretçileri bir eylem için görsel bir ipucuna yönlendirir. Yayınladığınız her blog yazısı, ziyaretçilerinizden bir işlem yapmalarını istemek için bir fırsattır. "Şimdi satın alın", "Bize Ulaşın", "Şimdi İndirin" veya "Daha fazlasını okuyun" gibi şeyler için tıklanabilir düğmeler eklemek, web sitenizdeki etkileşimi ve tıklamaları artırmanın harika bir yoludur.

Düğme İpuçları

• Gönderilerin Sonuna Düğmeler Ekleyin – Bir düğmeyle bir blog gönderisini sonlandırın. Ziyaretçinin bir sonraki adımda ne yapmasını istersiniz? Bu eylemi bir CTA (Harekete Geçirici Mesaj) düğmesine dönüştürün.
• CTA'ları Kısa ve Özlü Tutun – Başlıklar gibi, buton CTA'ları da kısa ve öz olmalıdır; sadece birkaç kelime ile sınırlayın.
• Kısa Kodlu (eklenti) HTML Gönderi veya Ekleme Kullanın – Blogunuza düğmeler eklemek için temanıza eklenen bir HTML/CSS kombinasyonunu kullanabilir veya kısa kodlu bir eklenti kullanabilirsiniz.

Düğmeler için Örnek CSS

İşte temanızın style.cc dosyasına ekleyeceğiniz bir CSS örneği.

.button {
	display: inline-block;
	padding: 0.75em 1.125em;
	margin: 1.125em auto;
	background: #f8572d;
	border-bottom: 2px solid #a22b0c;
	color: #fff;
	font-size: 1.125em;
	line-height: 1.2;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	border-radius: 3px;
	-webkit-transition: all .1s linear;
	-moz-transition: all .1s linear 0s;
}

.button:hover {
	background:#FF3900;
}

Bu CSS eklendikten sonra, düğme eklemek için blog gönderinizin metin düzenleyicisinde HTML kullanabilirsiniz.

<a class="button" href="#">Register for the webinar</a>

Düğme Eklentileri

Kodlama düğmeleri konusunda kendinizi rahat hissetmiyorsanız, yardımcı olması için bir eklenti kullanabilirsiniz. Kontrol etmek için WordPress.org Eklenti Deposu'ndan birkaç ücretsiz eklenti:

• WordPress Düğme Eklentisi MaxButtons
• Düğme Oluşturucu – Düğmeler X

4. Alıntıları Vurgulayın

Özellikle çoğu okuyucu yalnızca içeriği taradığından, önemli alıntılar bir blog gönderisine kolayca gömülebilir. Alıntıları ve blok alıntıları vurgulayarak önemli cümlelere veya paragraflara dikkat çekin .

Bu bir "çekme teklifi"dir. Bunları da blogunuza ekleyebilirsiniz.

Kısa alıntılar genellikle dergilerde kullanılan baskı tekniklerini taklit etmek için metni sağa veya sola hizalar. Alıntıları vurgulamaya yönelik bu tasarım yaklaşımı, kısa alıntılar biçiminde de web'e geçti.

Bu bir "blok alıntı". WordPress'e bayıldım.

Blok tırnak işaretleri, varsayılan olarak WordPress'te bulunan öğelerdir. Temanız, metni daha büyük veya italik hale getirmek için alıntıları engellemek için uygulanan ve ona normal gövde yazı tipinden/stilinden daha fazla kontrast veren belirli bir stile sahip olmalıdır.

Blok alıntılar:

Kısa alıntılar:

Alıntı İpuçları

• Alıntılar: Sadece Başkalarının Sözleri Değil – Alıntılar genellikle başkalarının sözlerine ayrılmış olsa da, kendinizden alıntı yapmaktan korkmayın. Gönderinizde harika bir noktaya değiniyorsanız, kısa alıntı veya blok alıntı olarak kullanmak üzere bir cümle seçin.
• WordPress'in Yerleşik Blok Alıntı Kısa Kodunu kullanın. Metin düzenleyiciden kullanmak istediğiniz metni seçin ve metni blok alıntı kısa koduna sarmak için blok alıntı düğmesine tıklayın.
• HTML/CSS veya bir Eklenti ile Özel “Çekin Alıntıları” kullanın.

Örnek CSS

Mevcut temanızda herhangi bir blok alıntı stiliniz yoksa, işte bazı örnek CSS:

blockquote {
	font-size: 1.2em;
	color: #5E7078;
	margin: 1.5em 0;
	padding: 19px 30px;
	background: #ffffff;
	border-left: 8px solid #C8F57A;
	-webkit-transition:  all .2s linear;
	-moz-transition:  all .2s linear 0s;
}

Ardından, metni blok alıntı kısa koduna aşağıdaki gibi kaydırırsınız:

<blockquote>This is a blockquote.</blockquote>

Çekme teklifleri için süreç benzerdir.

.pull-quote {
    max-width: 35%;
    border-top: none;
    border-bottom: none;
    border-left: 7px solid #0084CC;
    background: transparent;
    text-indent: 0;
    margin: 10px 0 30px 40px;
    padding-left: 30px;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    color: #77868E !important;
    font-style: italic;
    font-size: 1.4em;
    float: right !important;
}

Ve sonra HTML:

<span class="pull-quote">This is a "pull quote." You can add these to your blog, too.</span>

Alıntı Eklentilerini Çekin

• güzel tırnaklar
• Mükemmel Kısa Alıntılar
• BP Güzel Alıntı

5. Önemli Metni “Açıklamalar” ile Vurgulayın

Alıntılara benzer şekilde, metnin bir blog gönderisinin veya sayfasının geri kalanından öne çıkması için vurgulamak istediğiniz paragrafların veya cümlelerin tamamı olabilir. Burada iThemes blogunda, önemli bilgilerin veya bildirimlerin kaybolmamasını sağlamak için "içerik açıklamaları" ve "kupon açıklamaları" uyguladık.

İçerik Açıklaması

İşte bir içerik belirtme çizgisi örneği. Bunları, belirli paragraflara veya cümlelere dikkat çekmek için blog yazınız boyunca kullanabilirsiniz. Ayrıca uzun gönderileri ayırmaya ve görsel ilgi eklemeye yardımcı olurlar.

İşte temanızın style.css dosyasına ekleyebileceğiniz CSS:

.callout-text {
	background: #e3eef6;
	padding: 20px;
	border: 1px solid #9fd0f1;
}

Ve gönderinizin veya sayfanızın metin düzenleyicisinde kullanacağınız HTML:

<div class="callout-text">Put your callout text here.</div>

Kupon Açıklaması

İçerik açıklamalarında olduğu gibi, gönderilerinizde veya sayfalarınızda kuponları veya özel teklifleri öne çıkarmak için özel bir stil ekleyebilirsiniz.

İşte temanızın style.css dosyasına ekleyebileceğiniz CSS:

.callout-coupon {
	border: 2px dotted #95c83c;
	border-radius: 3px;
	font-size: 1.25em;
	padding: 2em;
	text-align: center;
}

<div class="callout-coupon">Use coupon code SEPTEMBER35 to save 35% off everything site-wide.</div>

Şimdi Git Blogunu Yenile

Umarım bu yazı, tamamen yeniden tasarlamak zorunda kalmadan blogunuzu yenilemek için size bazı fikirler vermesine yardımcı olmuştur. Fotoğraf ekleyerek veya değiştirerek, başlıklar kullanarak, düğmeler ekleyerek, alıntıları vurgulayarak ve belirtme çizgileri ekleyerek blogunuza yeni bir hayat verebilir ve umarım yeni gönderiler eklemek için ilham alabilirsiniz.

Kristen Wright

Kristen, 2011'den beri WordPress kullanıcılarına yardımcı olmak için eğitimler yazıyor. Onu genellikle iThemes blogu için yeni makaleler üzerinde çalışırken veya #WPprosper için kaynaklar geliştirirken bulabilirsiniz. Kristen iş dışında günlük tutmaktan (iki kitap yazdı!), doğa yürüyüşü yapmaktan ve kamp yapmaktan, yemek pişirmekten ve daha güncel bir hayat yaşamayı umarak ailesiyle günlük maceralardan hoşlanıyor.