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. Basitce bir WordPress teması nasıl oluşturulur onu anlatacağım.
Öncelikle tema için buradaki tasarımı kullanacağım.
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.
