5 dakikada WordPress teması yapma

5 dakikada Wordpress teması yapma

WordPress teması yapmak için temel seviyede php bilginiz olması gerekir ama hiç bilginiz yoksa da kodları kopyalayıp anlatılanları yaparakta WordPress teması yapabilirsiniz. Belki de WordPress teması yapmaya çalışmak size php öğrenmeye teşvik edebilir. Basitce bir WordPress teması nasıl oluşturulur onu anlatacağım.

Öncelikle tema için buradaki tasarımı kullanacağım.

Bootstrap Örnek Tema

Daha sonra localhost’a wordpress kuruyorum(siz hostinginize de kurabilirsiniz). Kurduktan sonra wp-content/themes dizini içine yapacağım temanın adıyla klasör oluşturuyorum. Ben okan isminde bir klasör oluşturdum.

Daha sonra aşağıdaki dosyaları tema klasörünün içine oluşturuyoruz.

index.php, header.php, footer.php, functions.php, style.css

Tema dizininde template-parts isminde klasör oluşturup içine alttaki dosyaları oluşturuyoruz.

content.php, content-page.php, content-none.php

header.php

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title><?php echo get_bloginfo('name'); ?></title>
    <?php wp_head(); ?>
  </head>
  <body>

  <header>
    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
      <a class="navbar-brand" href="<?php site_url(); ?>"><?php echo get_bloginfo('name'); ?></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarCollapse">
        <?php
          wp_nav_menu(array(
              'theme_location' => 'primary',
              'depth'          => 4,
              'container'      => 'nav',
              'container_class'=> 'navbar-nav mr-auto',
              'menu_class'     => 'navbar-nav',
              'list_item_class'=> 'nav-item',
              'walker'         => new WP_Bootstrap_Navwalker()
          ));
          ?>
      </div>
    </nav>
  </header>

    <main role="main">

footer.php

</main>

<footer class="text-muted">
  <div class="container">
    <p class="float-right">
      <a href="#">Yukarı Çık</a>
    </p>
    <p>Kodlayan: <a href="https://okantastan.com/">Okan Taştan</a></p>
  </div>
</footer>
<?php wp_footer(); ?>
</body>
</html>

functions.php

<?php

/**
 * Menü ekliyoruz
 */
require_once('class-wp-bootstrap-navwalker.php');
function register_my_menu(){
	register_nav_menu('primary', __('Birincil Menü'));
}
add_action('init', 'register_my_menu');

/**
 * css ve javascript dosyalarını import ediyoruz
 */
function okan_scripts() {
    /**css dosyaları */
    wp_enqueue_style( 'bootstrap', 'https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css' );
    wp_enqueue_style( 'album', 'https://getbootstrap.com/docs/4.0/examples/album/album.css' );
    /**javascript dosyaları */
    wp_enqueue_script( 'slim', 'https://code.jquery.com/jquery-3.2.1.slim.min.js' );
    wp_enqueue_script( 'popper', 'https://getbootstrap.com/docs/4.0/assets/js/vendor/popper.min.js' );
    wp_enqueue_script( 'bootstrap', 'https://getbootstrap.com/docs/4.0/dist/js/bootstrap.min.js' );
    wp_enqueue_script( 'holder', 'https://getbootstrap.com/docs/4.0/assets/js/vendor/holder.min.js' );

}
add_action( 'wp_enqueue_scripts', 'okan_scripts' );

//admin barı kapat
function remove_admin_bar(){
	show_admin_bar(false);
}
add_action('after_setup_theme', 'remove_admin_bar');
?>

index.php

<?php get_header(); ?>

<?php
if ( have_posts() ) :

    if ( is_home() && ! is_front_page() ) :
        ?>
        <header>
            <h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1>
        </header>
        <?php
    endif;

    /* Start the Loop */
    while ( have_posts() ) :
        the_post();

        /*
            * Include the Post-Type-specific template for the content.
            * If you want to override this in a child theme, then include a file
            * called content-___.php (where ___ is the Post Type name) and that will be used instead.
            */
        get_template_part( 'template-parts/content', get_post_type() );

    endwhile;

    the_posts_navigation();

else :

    get_template_part( 'template-parts/content', 'none' );

endif;
?>

<?php get_footer(); ?>

style.css

/*
Theme: Okan
Theme URI: https://okantastan.com
Author: Okan Taştan
Author URI: https://okantastan.com
Description: WordPress Starter Tema
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: okan
Tags: starter tema, wordpress teması
*/

template-parts/content.php

<section class="jumbotron text-center">
<div class="container">
    <h1 class="jumbotron-heading"><?php echo get_bloginfo('name'); ?></h1>
    <p class="lead text-muted"><?php echo get_bloginfo('description'); ?></p>
    <p>
    <a href="#" class="btn btn-primary my-2">Main call to action</a>
    <a href="#" class="btn btn-secondary my-2">Secondary action</a>
    </p>
</div>
</section>

<div class="album py-5 bg-light">
<div class="container">

    <div class="row">
    <div class="col-md-4">
        <div class="card mb-4 box-shadow">
        <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
        <div class="card-body">
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <div class="d-flex justify-content-between align-items-center">
            <div class="btn-group">
                <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
            </div>
            <small class="text-muted">9 mins</small>
            </div>
        </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card mb-4 box-shadow">
        <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
        <div class="card-body">
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <div class="d-flex justify-content-between align-items-center">
            <div class="btn-group">
                <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
            </div>
            <small class="text-muted">9 mins</small>
            </div>
        </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card mb-4 box-shadow">
        <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
        <div class="card-body">
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <div class="d-flex justify-content-between align-items-center">
            <div class="btn-group">
                <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
            </div>
            <small class="text-muted">9 mins</small>
            </div>
        </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="card mb-4 box-shadow">
        <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
        <div class="card-body">
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <div class="d-flex justify-content-between align-items-center">
            <div class="btn-group">
                <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
            </div>
            <small class="text-muted">9 mins</small>
            </div>
        </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card mb-4 box-shadow">
        <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
        <div class="card-body">
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <div class="d-flex justify-content-between align-items-center">
            <div class="btn-group">
                <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
            </div>
            <small class="text-muted">9 mins</small>
            </div>
        </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card mb-4 box-shadow">
        <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
        <div class="card-body">
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <div class="d-flex justify-content-between align-items-center">
            <div class="btn-group">
                <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
            </div>
            <small class="text-muted">9 mins</small>
            </div>
        </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="card mb-4 box-shadow">
        <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
        <div class="card-body">
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <div class="d-flex justify-content-between align-items-center">
            <div class="btn-group">
                <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
            </div>
            <small class="text-muted">9 mins</small>
            </div>
        </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card mb-4 box-shadow">
        <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
        <div class="card-body">
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <div class="d-flex justify-content-between align-items-center">
            <div class="btn-group">
                <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
            </div>
            <small class="text-muted">9 mins</small>
            </div>
        </div>
        </div>
    </div>
    <div class="col-md-4">
        <div class="card mb-4 box-shadow">
        <img class="card-img-top" data-src="holder.js/100px225?theme=thumb&bg=55595c&fg=eceeef&text=Thumbnail" alt="Card image cap">
        <div class="card-body">
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <div class="d-flex justify-content-between align-items-center">
            <div class="btn-group">
                <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
                <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
            </div>
            <small class="text-muted">9 mins</small>
            </div>
        </div>
        </div>
    </div>
    </div>
</div>
</div>

template-parts/content-page.php

<section class="jumbotron text-center">
<div class="container">
    <h1 class="jumbotron-heading"><?php the_title(); ?></h1>
    <p class="lead text-muted"><?php the_content(); ?></p>
</div>
</section>

template-parts/content-none.php

<section class="jumbotron text-center">
<div class="container">
    <p class="lead text-muted">İçerik bulunamadı.</p>
</div>
</section>

class-wp-bootstrap-navwalker.php dosyasını tema dizinine ekliyoruz ve temamızı hazırlamış oluyoruz.


Dilerseniz tema dosyalarını aşağıdaki linkten indirebilirsiniz.

Temayı İndir

Diğer Yazılar

Okan Taştan

Full Stack Developer

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir