WordPress Temalarına Slayt Paneli Menüsü Ekleme

Son zamanlarda, kullanıcılarımızdan biri bize navigasyon menülerini nasıl jQuery slayt paneli menüsüyle değiştirebileceklerini sordu. Kayar panel menüsü, mobil sitelerdeki kullanıcı deneyimini büyük ölçüde geliştirmek için kullanılabilir. Bu makalede, WordPress temalarına nasıl slayt paneli menüsü ekleneceğini göstereceğiz.

Not: Bu orta düzey bir öğreticidir ve yeterli HTML ve CSS bilgisi gerektirir.

Varsayılan menüyü WordPress’te sürgülü panel menüsüyle değiştirme

Buradaki amaç, dizüstü ve masaüstü bilgisayarlardaki kullanıcıların tam menüyü görebilmeleri için temamızın varsayılan menüsünü korurken daha küçük ekranlarda kullanıcılara bir slayt paneli menüsü görüntülemektir. Başlamadan önce, birçok farklı WordPress teması olduğunu bilmek önemlidir ve daha sonra biraz CSS ile uğraşmanız gerekecektir.

Yapmanız gereken ilk şey, bilgisayarınızda Not Defteri gibi düz bir metin düzenleyicisi açmak ve yeni bir dosya oluşturmaktır. Bu kodu kopyalayıp yapıştırın:

(işlev ($) {
$ ('# geçiş'). geçiş yap (
function () {
$ ('# popout'). animate ({left: 0}, 'yavaş', işlev () {
$ ('# geçiş'). html ('');
        });
    }, 
    function() {
        $('#popout').animate({ left: -250 }, 'slow', function() {
            $('#toggle').html('');
});
}
);
}) (jQuery);

Example.com’u kendi alan adınızla değiştirin ve temanızı gerçek tema dizininizle değiştirin. Bu dosyayı masaüstünüze slidepanel.js olarak kaydedin. Bu kod, kayan panel menüsünü değiştirmek için jQuery kullanır. Ayrıca geçiş efektini de canlandırır.

Filezilla gibi bir FTP istemcisi açın ve web sitenize bağlanın. Sonra tema dizininize gidin ve bir js klasörünüz varsa açın. Tema dizininizde js klasörü yoksa, bir tane oluşturmanız ve slidepanel.js dosyasını js klasörüne yüklemeniz gerekir.

Bir sonraki adım bir menü simgesi tasarlamak veya bulmaktır. En sık kullanılan menü simgesi üç satırlı menü simgesidir. Photoshop ile bir tane oluşturabilir veya mevcut birçok Google resminden birini bulabilirsiniz. Bu öğretici için 27×23 piksel menü simgesi kullanıyoruz. Menü simgenizi oluşturduktan veya bulduktan sonra, menu.png olarak yeniden adlandırın ve tema dizininizdeki resimler klasörüne yükleyin.

Sonraki adım, WordPress’te slayt paneli için javascript dosyasını sıralamaktır. Temel olarak, bu kodu kopyalayıp temanızın function.php dosyasına yapıştırmanız yeterlidir.

 
wp_enqueue_script( 'wpb_slidepanel', get_template_directory_uri() . '/js/slidepanel.js', array('jquery'), '20131010', true );

Artık her şey hazır olduğuna göre, temanızın varsayılan menüsünü değiştirmeniz gerekir. Genellikle, çoğu tema, gezinme menülerini temanın header.php dosyasında görüntüler. Header.php dosyasını açın ve buna benzer satırı bulun: