Kategori: Web Tasarım

WordPress Admin Paneli Hatası

Az önce yaşadığım bir problemin çözümünü sizlerle paylaşmak istiyorum çünkü araştırdığım kadarıyla bu problemi yaşama konusunda yalnız değilim. WordPress altyapısıyla kurduğunuz bir websiteniz var ve bu sitenin yönetim paneli durup dururken bozuldu. Önceden siteadi.com/wp-admin şeklinde girdiğiniz panele girmeye çalıştığınızda sizi siteadi.com/wp-login.php?redirect_to=http%3A%2F%siteadi.com%2Fwp-admin%2F&reauth=1 gibi bir adrese yönlendirdi. İşte bu sorunun çözümü; wp-login.php dosyasının değişmiş olan dosya iznini tekrardan düzelterek 644 yapmak. Yani bu hatanın sebebi wp-login.php dosyasının dosya iznindeki değişiklik. Zaman zaman bu tarz problemler çıkarabiliyor wordpress fazla takılmamak lazım çünkü kolay çözümleri var ve çok kullanışlı bir altyapı.

Esnek Web Tasarım

Google’ın yeni aldığı bir kararla esnek tasarımlar arama sonuçlarını etkilemeye başladı bu sebeple çoğu websitesi esnek tasarıma geçti. Websiteleri artık sadece bilgisayardan kullanılmıyor tabletlerden ve telefonlardan da kullanılıyor hatta mobil cihazlardan yapılan Google aramaları 10 ülkede bilgisayarları geçmiş. Bu da tasarımcılar için demek oluyor ki artık tasarımlar esnek olmalı. Bu durumda css framework kullanmak en mantıklısı ve en yaygın olan Bootstrap‘ı tavsiye ederim. getbootstrap.com üzerinden framework hakkındaki bütün bilgileri bulabilirsiniz. Yakın zamanda aktif ettiğim lyrcs.net şarkı sözü sitesinde de Bootstrap kullandım. İlerleyen zamanlarda sizlerle esnek tasarım hakkında bilgi verici yazılar paylaşmayı düşünüyorum.

Css ve Javascript Dosyalarını Yenileme

Bir önceki yazımda bahsettiğim konuya bir ek daha yapmak istiyorum. Değişik bir yöntem geldi aklıma uyguladım ve gayet sorunsuz çalışıyor sizle de paylaşmak istedim. Yalnız vereceğim yöntem sadece php kullananlar için geçerli.

Öncelikle php’deki time() fonksiyonundan bahsedeyim. Bu fonksiyon geçerli unix zaman damgasını döndürür. Yani

<?php echo time();?>

Kodunun döndüreceği değer 31556926 tarzı bir değer oluyor. Bu fonksiyon hakkında ayrıntılı bilgi almak isteyenler buraya tıklayabilir.

Şimdi gelelim bizim konumuza. Kullanıcıların sayfayı yenilemeden güncellenmiş css ve javascript dosyasını nasıl görebileceğini anlatmıştım. Özetlemek gerekirse link href bağlantısındaki dosya isminin sonuna versiyon bilgisi giriyorduk ve tarayıcı da hafızasına aldığı dosyadan daha güncel bir dosya olup olmadığını burdan anlıyordu. Örnek aşağıdaki kod

<link href=’css/style.css?ver=0.1.1′ rel=’stylesheet’ type=’text/css’ media=’screen’ />

Biz bir güncelleme yaptığımız zaman versiyonu da arttıracağız ve tekrardan

<link href=’css/style.css?ver=0.1.2′ rel=’stylesheet’ type=’text/css’ media=’screen’ />

yapacağız. İşte bu yükten kurtulmak için time() fonksiyonunu kullanarak kodu şu şekle getireceğiz ve sorunsuz bir şekilde dosya güncellemesini saniyelik hale getireceğiz.

<link href=’css/style.css?ver=0.1.<?php echo time();?>′ rel=’stylesheet’ type=’text/css’ media=’screen’ />

Css ve Javascript Dosyalarını Yenileme

Tasarımla uğraşan arkadaşlar sık sık karşılaşıyordur bu sorunla. Siteyi aktif ettikten sonra css veya javascript dosyaları üzerinde herhangi bir değişiklik yaptığınız zaman siteye giren kullanıcılar F5 ya da Ctrl+F5 tuşlarına  basıp siteyi yenilemeden yapılan değişikliği göremezler. İşte buna çözüm olarak bir yöntem paylaşacağım sizinle.

Dosyalara sürüm vereceğiz ve herhangi bir değişiklik yaptığımız zaman sürümü değiştirerek tarayıcının dosyanın değiştiğini anlamasına yardımcı olacağız. Bu da ek bir zahmet gerektiriyor tabi ki ama en azından css dosyasının adını değiştirip bir de sayfalardaki dosya bağlantı yolunu değiştirmek daha zahmetli bir yöntem olduğu için bu yöntemi tavsiye ediyorum.

Gel gelelim bu yönteme. Sayfalarınızda css ve javascript bağlantıları aşağıdaki gibi yapıyorsunuz. Herhangi bir değişiklik yaptığınızda da sürümünü değiştiriyorsunuz.

<link href=’css/style.css?ver=0.1.1′ rel=’stylesheet’ type=’text/css’ media=’screen’ />

<script src=”js/site.js?ver=0.2″ charset=”UTF-8″></script>

Text-indent nedir?

Paragraflarınıza paragraf boşluğu eklemek için kullanabileceğiniz bir özellik. Diyelim elinizde bir paragraf var ve siz buna paragraf boşluğu eklemek istiyorsunuz. Normalde bu görevi html tagı olarak blockquote yapıyor fakat elimizdeki paragraf uzadığında bu tag yeterli olmuyor. Aşağıdaki gibi bir kodda paragraf normal şekilde görünür.

<p>

Merhaba bu bir deneme yazısıdır. bu yazı http://www.siyanuraltes.com adresine aittir.
Paragraf boşluk konusu hakkında bilgi içermektedir.
Text-indent özelliğine değinilmektedir. Text-indent yazılara paragraf
boşluğu eklemek için
kullanılır.
</p>

Bu paragrafın text-indent özelliği atanmamış hali şu şekilde olur:

Merhaba bu bir deneme yazısıdır. bu yazı http://www.siyanuraltes.com adresine aittir. Paragraf boşluk konusu hakkında bilgi içermektedir. Text-indent özelliğine değinilmektedir. Text-indent yazılara paragraf boşluğu eklemek için kullanılır.

Şimdi bu paragrafa css kodları ile text-indent özelliği atarsak çıktısı şu şekilde olur:

Merhaba bu bir deneme yazısıdır. bu yazı http://www.siyanuraltes.com adresine aittir. Paragraf boşluk konusu hakkında bilgi içermektedir. Text-indent özelliğine değinilmektedir. Text-indent yazılara paragraf boşluğu eklemek için kullanılır.

Css kodları ise şu şekilde olur :

p{

  text-indent : 20px;
}
20 px olan yere istediğiniz uzunlukta değer girebilirsiniz. Bu şekilde paragraflarınıza istediğiniz iç boşluğu vermiş olursunuz.

Css height:100% problemi

Yeni bir tasarımda height:100% problemiyle karşılaştım. Biraz araştırmadan sonra sorunumu çözdüm ve bunu da sizlerle paylaşayım.

Sayfada height:100% tanımlaması yapılmasına rağmen hala işlem yapılan div 100% yüksekliğini almıyorsa css dosyasında gerekli yerlere şu eklemeleri yapması gerek.

html { height:100%; }

body { height:100%; }

bundan sonra 100% yüksekliği verilmek istenen yere height:100% değerini verdikleri zaman belirlenen alanın 100% yüksekliği aldığını göreceklerdir ve bu yöntemi bütün tarayıcılar desteklemektedir.