Caner Dio

WordPress & Sanayi İşleri & Web Master

Caner'in blogunda, WordPress ipuçları, web tasarımı rehberleri ve sanayi işleri hakkında yazılar bulabilir, dijital çözümlerle işinizi geliştirebilirsiniz.

SİNCE 2006

WordPress Responsive Header Menü Yapımı

  • Uyarı! Bu yazı 21.06.2016 tarihinde yazıldı. O günden bu güne bir çok şey değişmiş ve yazı geçerliliğini yitirmiş olabilir.

    Ekteki dosyayı indirip içindeki wp_bootstrap_navwalker.php dosyasını temanızın bulunduğu klasöre yükleyin. functions.php dosyasına ekleyin.admin panelinden görünüm > menü işlemi ile oluşturma yapmanızı sağlamaktadır.
    // Register Custom Navigation Walker require_once('wp_bootstrap_navwalker.php'); register_nav_menus( array( 'primary' => __( 'Üst Menü', 'canerdio' ), ) );
    header.php ye ekleyin.
    <nav class="navbar navbar-default" role="navigation"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="<?php echo home_url(); ?>"> <?php bloginfo('name'); ?> </a> </div> <?php wp_nav_menu( array( 'menu' => 'primary', 'theme_location' => 'primary', 'depth' => 2, 'container' => 'div', 'container_class' => 'collapse navbar-collapse', 'container_id' => 'bs-example-navbar-collapse-1', 'menu_class' => 'nav navbar-nav', 'fallback_cb' => 'wp_bootstrap_navwalker::fallback', 'walker' => new wp_bootstrap_navwalker()) ); ?> </div> </nav>
    navbar-fixed-top.css bunu uyguladığımızda sabit olarak kalır. örnek.
    body { min-height: 2000px; padding-top: 70px; } </pre> <strong>header.php ye ekleyin.</strong> <em>isterseniz indirip temanız içine atın.</em> <pre class="lang:default decode:true"><link href="https://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    Buraya kadar yaptıysanız başka bir işleme gerek yoktur. Kaynaklar: https://getbootstrap.com/examples/navbar-fixed-top/ https://github.com/twittem/wp-bootstrap-navwalker

    Etiketler
  • Yorumlar

    2 comments on “WordPress Responsive Header Menü Yapımı”

    • Batuhan KaygusuzBatuhan Kaygusuz

      Yardıma ihtiyacım var

      • Caner ÖzgürelCaner Özgürel
        |Site Sahibi

        Sorunuzu yazarsanız yardımcı olalım?

    Yorum Yapın

    E-posta adresiniz yayınlanmayacak.Gerekli alanlar * ile işaretlenmişlerdir

Caner Özgürel
Hakkında

Merhaba, ben Caner. Wordpress, web tasarımı, satış pazarlama, mimari tasarım, 3ds max, autocad ve sanayi sektörlerinde yeterli tecrübeye sahip ve derinlemesine bilgi sahibiyim. Yıllardır yaratıcı projeler üzerinde çalışarak, teknolojiyi iş dünyasına entegre etmeyi seviyorum. bycaner.com üzerinden WordPress ipuçları, web tasarımı rehberleri ve sanayi sektörüyle ilgili değerli bilgiler paylaşarak, dijital dünyadaki yolculuğunuzu kolaylaştırmayı hedefliyorum. Her gün daha verimli ve yaratıcı çözümler üreterek, işinizi büyütmenize yardımcı oluyorum.

214 defa görüntülendi.
21 Haziran 2016 tarihinde eklendi.
KATEGORİLER
Admin Gravatar