Wordpress tema yapımı gerekli fonksiyonları yazıp üst menü ekleme ders 2 (turkish tutorial)

sinankarayaman (53)in #utopian-io • 7 years ago (edited)

English

Hello guys my name is Sinan Karayaman. I have been working on wordpress and other web services for few years now.

How to create wordpress theme (lesson 2) ?

Türkçe

Merhaba arkadaşlar ben Sinan KARAYAMAN.Sizlerle 'sıfırdan wordpress teması nasıl yazılır?' konusunu adım adım uygulamalı ders şeklinde anlatacağım.Geçen dersimizde gerekli programları kurup temamıza başlangıç için gereken işlemleri yapmıştık.Bugünkü dersimizde gerekli fonksiyonları oluşturup temamıza navbar menü yapacağız ve wordpresse entegre edeceğiz.

1- Wordpress temalar sekmesinde menüler bölümünü oluşturabilmemiz için tema klasörümüze functions.php adlı dosya oluşturuyoruz.

2- Menümüz için gerekli olan php dosyasını https://github.com/wp-bootstrap/wp-bootstrap-navwalker linkinden indiriyoruz ve içerisinde yer alan wp-bootstrap-navwalker.php dosyasını localhostumuzdaki tema klasörümüze atıyoruz.

2.5.png

3- Menümüzü aktif etmek için gerekli kodları https://github.com/wp-bootstrap/wp-bootstrap-navwalker linkinden alıp functions.php dosyamıza yapıştıracağız

<?php
register_nav_menus( array(
    'primary' => __( 'buraya menü isminizi yazabilirsiniz', 'buraya tema isminizi yazabilirsiniz' ),
) );

3.5.png

Php dosyamızı çekmesi için gerekli kodu yine https://github.com/wp-bootstrap/wp-bootstrap-navwalker linkinden alıp functions.php içerisine yazıyoruz.

require_once get_template_directory() . '/wp-bootstrap-navwalker.php';

3.6.png

3.7.png

4- Şimdi kodlarımızı kontrol edelim.

functions.php yazılmadan önce;

4 önce.png

functions.php yazıldıktan sonra;

4 sonra.png

5- Localhosttaki wordpresste menüler bölümüne gelip primary adlı menümüzü oluşturuyoruz.

6- Php kodlarımızı almak için https://getbootstrap.com/docs/3.3/components/ linkinde sağ tarafta bulunan navbar yazısına tıklıyoruz ve gerekli kodlarımızı alıp index.php ye yazıyoruz.

6.1.png

7- Bir önceki adımda yazdığımız kodlardan gereksiz yerleri siliyoruz.

(html comment removed: Collect the nav links, forms, and other content for toggling ) açıklamasının yazdığı satırdan (html comment removed: /.navbar-collapse ) satırına kadar siliyoruz.

7.1.png

8- Php kodlarımızı https://github.com/wp-bootstrap/wp-bootstrap-navwalker linkinden alıyoruz ve index.php dosyasına yazıyoruz.

    <?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(),
) );
        ?>

8.1.png

9- Artık menümüz gözükür ama css, javascript ve jquery kodlarını index.php ye çağırmadımız için görüntü bozuk olacaktır.Kontrolü yapalım;

10- Menü görünümünü düzeltmemiz için <head> etiketleri arasına javascript, css ve jquery kodlarını eklememiz gerekiyor.Css dosyalarımızı ekleyelim;

<link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/css/bootstrap.css">
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_directory'); ?>/css/font-awesome.css">
    <link rel="stylesheet" type="text/css" href="<?php bloginfo('stylesheet_url'); ?>">
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/bootstrap.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/npm.js"></script>

11- Görünümün düzelip düzelmediğini kontrol edelim;

12- Menümüze örnek bir bağlantı ve icon ekleyelim.Ben test amaçlı https://twitter.com u ekleyeceğim.

Bir adet özel bağlantı menüsü ekliyoruz ve url yi https://twitter.com yazıyoruz.Ardından bağlantı metnimizi twitter olarak giriyoruz.

Gördüğünüz gibi twitter menüsü wordpress sitemize eklendi;

12.1.png

Menümüze logo eklemek için http://fontawesome.io sitesine giriyoruz.Üst menüden icons yazısına tıklıyoruz ve twitter diye yazıp aramamızı yapıyoruz.Kırmızı ok işareti ile gösterdiğim twitter bağlantısına tıklıyoruz.

12.2.png

Karşımıza aşağıda bulunan görüntüdeki gibi kodlar çıkıyor.Bu kodlardan classımızı fa fa-twitter alıp wordpress menümüzün başlık özelliğine ekliyoruz.

12.3.png

12.4.png

Kontrolümüzü yapıyoruz;

12.5.png

Logolu menümüz hazır.

Github link : https://github.com/wp-bootstrap/wp-bootstrap-navwalker

Posted on Utopian.io - Rewarding Open Source Contributors

#wordpress-tema #ders #tr

7 years ago in #utopian-io by sinankarayaman (53)

Sort:

sedatyildiz (57) 7 years ago

Thank you for the contribution. It has been approved.

You can contact us on Discord.
[utopian-moderator]

$1.97

3 votes

[-]

sinankarayaman (53) 7 years ago

thank you :)

$0.02

1 vote

[-]

utopian-io (71) 7 years ago

Hey @sinankarayaman I am @utopian-io. I have just upvoted you!

Achievements

You have less than 500 followers. Just gave you a gift to help you succeed!
Seems like you contribute quite often. AMAZING!

Suggestions

Contribute more often to get higher and higher rewards. I wish to see you often!
Work on your followers to increase the votes/rewards. I follow what humans do and my vote is mainly based on that. Good luck!

Get Noticed!

Did you know project owners can manually vote with their own voting power or by voting power delegated to their projects? Ask the project owner to review your contributions!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

Vote for my Witness With SteemConnect
Proxy vote to Utopian Witness with SteemConnect
Or vote/proxy on Steemit Witnesses

Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x

$0.00

STEEM 0.17

TRX 0.16

JST 0.029

BTC 74021.49

ETH 2621.74

USDT 1.00

SBD 2.42