Zeki Can - WordPress
404 Hata Sayfası Yapımı
Web sitelerinde kullanımdan kalkmış url adresleri olabiliyor. Ya da daha yapım aşamasında olan sayfalar. Bugün size sayfanızdaki içeriğin kaldırılmasından dolayı yada kırık bir linkten dolayı daha önce sitenizde bulunan ve sonradan sildiğiniz içerikten dolayı karşımıza çıkan 404 hata sayfasını nasıl oluşturacağımızdan bahsetmek istedim.
Elimde komik olarak bir kaç dosya var. Tabi ne kadar komik olduğu tartışılır. Onları da sayfanın sonunda vereceğim.
WordPress sitenizde öncelikle Yönetici girişimizi yapalım. Tasarım menüsüne tıklayın. Buradan Tema Editörü bölümüne tıklayın. Kullanmış olduğunuz tema üzerinde bulunan 404.php isimli sayfayı editör üzerinde açın. Bu sayfada hata mesajı alanını kendinize göre düzenleyerek kaydetmelisiniz.
404 php sayfanızı mesela alttaki kodları yapıştırın.
<html><head>
<meta http-equiv="content-type" content="text/html; charset=Windows-1254">
<title>404 - ZekiCan.Net - Sayfa Bulunamadı</title>
<meta charset="utf-8">
<script type="text/javascript" src="images/jquery.js"></script>
<script type="text/javascript" src="images/swfobject.js"></script>
<style type="text/css">
/* default */
body {font-family: Helvetica, Arial, sans-serif; font-size:12px; background:#FFF; color:#323232; width:100%; height:100%; overflow:hidden;}
* {margin:0px; padding:0px; list-style:none; outline:none; border:none; text-decoration:none;}
/* clear */
.clear:before,
.clear:after {content:"."; display:block; height:0; overflow:hidden;}
.clear:after {clear:both;}
.clear {zoom: 1;}
/* clear */
#test {position:absolute; width:100%; height:100%; z-index:1;}
#overlay {width:100%; height:100%; position:absolute; background:url('images/video_pattern.png') repeat transparent; z-index:2;}
#con {width:100%; height:100%; position:absolute; z-index:3; background:transparent;}
.inner_con {width:457px; margin:0 auto; padding-top:50px;}
#img {width:457px; height:355px; background:url('images/404_opac.png'); display:block;}
.inner_con .text {padding-top:35px; font-size:14px; width:400px; margin:0 auto;}
.inner_con .text .t1 {float:left; width:270px; font-size:16px; color:#FFF; font-weight:700; padding-top:9px; text-shadow:1px 1px #000;}
.inner_con .text a {display:block; width:120px; margin:0 auto; padding:8px 0; color:#333; border-radius:4px; background:#fff000; font-weight:700; text-align:center;}
</style>
<style media="screen" type="text/css">#test {visibility:hidden}</style></head>
<body>
<div id="con">
<div class="inner_con">
<span id="img"></span>
<div class="text clear">
<a href="https://zekican.net/">ANASAYFA</a>
</div>
</div>
</div>
<div id="overlay"></div>
<object style="visibility: visible;" id="test" data="images/arkaplan.png" type="application/x-shockwave-flash" height="100%" width="100%"><param value="false" name="menu"><param value="transparent" name="wmode"><param value="always" name="allowscriptaccess"><param value="noborder" name="scale"></object>
<script type="text/javascript">
var w = $(document).width(),
h = $(document).height(),
fvars = {},
params = {
menu: 'false',
wmode: 'transparent',
allowscriptaccess: 'always',
scale: 'noborder'
};
swfobject.embedSWF("images/arkaplan.swf", "test", '100%', '100%', "9.0.0", '', fvars, params);
</script>
</body></html>
Sitenizin image klasörüne de alttaki dosyanın içindekileri atın. bu dosyanın adı arkaplan.png olmalıdır. uzantıyı png olarak değiştirin ve adını arkaplan koyun
images Bu resmi sağ tıklayıp farkı kayıt ederken ismini arkaplan olarak kayıt edebilirsiniz. Ya da kendinize istediğiniz resmi seçip ismini arkaplan.png olarak kayıt edip kullanabilirsiniz.
Bu işlemleri tamaladıktan sonra web tarayıcınızın url kısmına
http://www. sitenizin adı.com/404
yazın ve enterlayın.
Ve oluşturduğumuz hata sayfası karşınızda. Kodlarda oynama yaparak kendi istediğiniz düzenlemeleri yapabilirsiniz. Kolay gelsin. Altta bir kaç dosya daha bırakıyorum. Onları da deneyebilirsiniz.
Alttaki kodu yine 404.php sayfanıza yapıştırın.
<html><head>
<meta http-equiv="content-type" content="text/html; charset=Windows-1254">
<title>404 - ZekiCan.Net - Sayfa Bulunamadı</title>
<meta charset="utf-8">
<script type="text/javascript" src="images/jquery.js"></script>
<script type="text/javascript" src="images/swfobject.js"></script>
<style type="text/css">
/* default */
body {font-family: Helvetica, Arial, sans-serif; font-size:12px; background:#FFF; color:#323232; width:100%; height:100%; overflow:hidden;}
* {margin:0px; padding:0px; list-style:none; outline:none; border:none; text-decoration:none;}
/* clear */
.clear:before,
.clear:after {content:"."; display:block; height:0; overflow:hidden;}
.clear:after {clear:both;}
.clear {zoom: 1;}
/* clear */
#test {position:absolute; width:100%; height:100%; z-index:1;}
#overlay {width:100%; height:100%; position:absolute; background:url('images/video_pattern.png') repeat transparent; z-index:2;}
#con {width:100%; height:100%; position:absolute; z-index:3; background:transparent;}
.inner_con {width:457px; margin:0 auto; padding-top:50px;}
#img {width:457px; height:355px; background:url('images/404_opac.png'); display:block;}
.inner_con .text {padding-top:35px; font-size:14px; width:400px; margin:0 auto;}
.inner_con .text .t1 {float:left; width:270px; font-size:16px; color:#FFF; font-weight:700; padding-top:9px; text-shadow:1px 1px #000;}
.inner_con .text a {display:block; width:120px; margin:0 auto; padding:8px 0; color:#333; border-radius:4px; background:#fff000; font-weight:700; text-align:center;}
</style>
<style media="screen" type="text/css">#test {visibility:hidden}</style></head>
<body>
<div id="con">
<div class="inner_con">
<span id="img"></span>
<div class="text clear">
<a href="https://zekican.net/">ANASAYFA</a>
</div>
</div>
</div>
<div id="overlay"></div>
<object style="visibility: visible;" id="test" data="images/arkaplan.swf" type="application/x-shockwave-flash" height="100%" width="100%"><param value="false" name="menu"><param value="transparent" name="wmode"><param value="always" name="allowscriptaccess"><param value="noborder" name="scale"></object>
<script type="text/javascript">
var w = $(document).width(),
h = $(document).height(),
fvars = {},
params = {
menu: 'false',
wmode: 'transparent',
allowscriptaccess: 'always',
scale: 'noborder'
};
swfobject.embedSWF("images/arkaplan.swf", "test", '100%', '100%', "9.0.0", '', fvars, params);
</script>
</body></html>
Php sayfanızı ekledikten sonra sitenizin kök klasöründe bulunan images klasörünüze alttaki dosyanın içindekileri eklemelisiniz.
images klasörü.
Etiketler : 404, 404 Hata Sayfası, 404 Hata Sayfası Yapımı, Hata Sayfası Yapımı
