WordPress alt temasında özel bir 404 sayfası nasıl yapılır

Web siteniz ne kadar iyi tasarlanmış ve tasarlanmış olursa olsun, kullanıcılar bir noktada bir 404 sayfasıyla karşılaşacaktır. Yazım hatası olan bir URL'yi yazmak kadar basit bir şey olabilir. Örneğin, www.website.com/contact adresinde bir iletişim sayfanız varsa ve birisi www.website.com/contacts'a ulaşmaya çalışırsa, 404 sayfasına yönlendirilme olasılığı yüksektir. Ayrıca, web sitesi içerik ayarlamaları, bağlantılar yeniden yönlendirilmeden taşınmış olabilecek sayfaları her zaman hesaba katmayabilir. Umarım, bu deneyim kullanıcılarınızın başına çok sık gelmez, ancak gerçekleştiğinde, yardım sunmak ve markanıza özel bir şey yapmak için bir fırsattır.

Muhtemelen web'deki 404 sayfaya yabancı değilsiniz, bu nedenle zaten bir tasarımınız olabilir. Değilse, "harika 404 sayfa" Google'da arama yaparak her türlü ilhamı bulacaksınız. Tasarım, ciddiden komik, metin ağırlıklı veya minimalist ya da ikisinin arasında herhangi bir şey olabilir.

Aşağıda favorilerimden bazıları var. Sayfa tasarımında yaratıcılığın nasıl kullanıldığına dair güzel örnekler.

Figma

Figma basit bir 404 sayfasıdır, ancak grafik vektör noktalarına çok uygundur. Ne kadar basit ve cesur olduğunu seviyorum; gerçekten gereken tek şey bu.

Airbnb

Bu örnek içerik açısından biraz daha fazlasını sunuyor. Açıklayıcı yaklaşım, bir mizah unsuru sunar. Bu, bazı ana bağlantıları içerir. Bir kullanıcı bir şeyi yanlış yazmışsa, aradıklarını listede bulabilirler.

MailChimp

MailChimp sitesinde tasarım her zaman eğlencelidir, özellikle son yeniden tasarımla. Hem metinde hem de resimde bir mizah unsuru var.

Genesis Framework ve StudioPress temalarını ücretsiz edinin!

Sitelerinizi Flywheel'de barındırdığınızda, doğrudan keyifli panomuzdan 30'dan fazla premium WordPress temasına (Genesis dahil!) erişebileceksiniz. Bu, ayda sadece 15$'a başlayabileceğiniz 2.000$'ın üzerinde bir değer! Daha fazlasını buradan öğrenin.

Özel bir 404 sayfası oluşturma

Her şeyden önce: Tüm özelleştirmeler bir alt temada yapılmalıdır. Bu şekilde, herhangi bir değişiklik, normal temadaki güncellemeler tarafından geçersiz kılınmayacaktır. Bu 404 sayfası, alt temada bir dosya olacak, tam olarak 404.php adlı dosya.

WordPress alt temalarını özelleştirmek için CSS değişkenleri nasıl eklenir

CSS özel özellikleri olarak da adlandırılan CSS değişkenleri, CSS stil sayfalarınızda kolayca yeniden kullanıma izin verir. WordPress alt temaları ile çalıştıysanız, muhtemelen kendinizi çok fazla şey yaparken buluyorsunuzdur...

Ayrıca, bunu bir test ortamında yapmayı unutmayın. Tema dosyaları değiştirilirken, siteyi çökertebilecek sözdizimi hataları olasılığı her zaman vardır.

1. Yeni bir dosya oluşturun

Alt temaya sahip olduğunuzda, ilk adım, çalışmaya başlamak için yeni bir dosya oluşturmaktır. Alt temayı oluşturduğunuz klasörü açmak ve bir 404.php dosyası eklemek isteyeceksiniz.

2. Dosyayı düzenleyin

Temel örnek

Bu örnek, metin ve resim içeren bir sayfa için geçerlidir. Buradaki tasarım fikri, resimli bir grafik gerektiren basit bir şey yaratmaktır.

Aşağıdaki kodu 404.php sayfasına yapıştırın. Bu temel bir başlangıç. İşleri gerçekten kendinize ait kılmak için farklı bir yapıya dönüştürebilirsiniz (yani, bir kenar çubuğu istemiyorsanız, bu kaldırılabilir).

<?php get_header(); ?>
<div id="main-content">
<div class="container">
<div id="content-area" class="clearfix">
<div id="left-area">
<article id="post-0" <?php post_class( 'post_not_found' ); ?>>
<img src="/images/image.jpg">
<h1><?php esc_html_e('404'); ?></h1>
<h2><?php esc_html_e('Oops, this page cannot be found.','WP Loop'); ?></h2>
</article> <!-- .post_not_found -->
</div> <!-- #left-area -->
<?php get_sidebar(); ?>
</div> <!-- #content-area -->
</div> <!-- .container -->
</div> <!-- #main-content -->
<?php get_footer(); ?>

Yapmanız gereken birkaç değişiklik var. Biri görüntünün yolunu değiştirmek ve istediğiniz başlığı eklemektir. Özel bir mesaj yazmayı ve ardından değişikliklerinizi kaydetmeyi unutmayın.

Talimatları buraya kadar izlediyseniz, resim, mesaj ve standart üst bilgi, kenar çubuğu ve alt bilgi içeren özel bir şablon oluşturdunuz. (Bu diğer sayfalarda da olabilir.)

Widget yaklaşımı

Bu isteğe bağlıdır, ancak birçok tasarımcı widget alanlarıyla çalışmayı tercih eder. Değişiklik yapmak daha kolay ve daha sürdürülebilir. Örneğin, bir pencere öğesi, en yeni ve popüler blog makalelerini görüntülemenin etkili bir yoludur.

Widget'ı ekleme

Widget'ı 404.php file eklemek için yeni bir widget'lı alan oluşturmanız gerekir. Bir alt temanın bir functions.php dosyasına ihtiyacı vardır, bu yüzden şimdi alt temanın bir tane olup olmadığını iki kez kontrol etmenin zamanı geldi.

functions.php dosyasında, sayfaya yeni bir widget eklemek için bir snippet'e ihtiyaç duyulacaktır.

function widget_area_404() {
register_sidebar( array(
'name' => '404 Page',
'id' => '404',
'description' => __( 'Widgets for 404 error page.' ),
'before_widget' => '<div class="et_pb_post">',
'after_widget' => '</div>',
'before_title' => '<h4 class="widgettitle">',
'after_title' => '</h4>',
) );
}
add_action( 'widgets_init', 'widget_area_404' );

Bu snippet yalnızca widget'ı ekler. Gerçekten kullanmaya başlamak için bu işlevin çağrılması gerekir. 404.php dosyasında çağrılır. Bu widget alanını istediğiniz yere dikkat edin.

Aşağıdaki kodu kopyalayıp yeni widget'ları göstermek istediğiniz yere yapıştırın (örneğin, başlık ve metinden sonra):

<?php dynamic_sidebar( '404' ); ?>

Artık yeni pencere öğesinin nerede görüntüleneceğini belirlediğinize göre, Görünüm > Pencere Öğeleri seçeneğine giderek pencere öğesi içeriğini eklemenin zamanı geldi. 404 sayfası için bir HTML bloğu, Popüler Gönderiler veya diğer herhangi bir widget gibi şeyleri buradan seçebilirsiniz.

İster basit bir şey, ister birçok bağlantı içeren bir sayfa oluşturuyor olun, özel bir 404 sayfası oluşturmak oldukça basittir. Bir alt tema kullanarak ve widget'ları kullanarak, sınırsız tasarım olanakları vardır.

Sitenizi özelleştirmek için daha fazla yol mu arıyorsunuz? Bu eğiticilere göz atın:

• WordPress alt temalarını özelleştirmek için CSS değişkenleri nasıl eklenir
• Genesis alt temanız için basit özelleştirmeler
• WordPress'te özel alanlar nasıl oluşturulur ve kullanılır?