14 adımda wordpress tema geliştirme kılavuzu

14 adımda wordpress tema geliştirme kılavuzu
130

Tema geliştirmeye başlamış veya başlamaya heves edenler için codeclown ekibi wordpress tema geliştirme başucu kılavuzu hazırlanmış. Bu yazıda wordpress temalarını geliştirirken sıkça kullanılan kodlar tek bir sayfada derlenmiştir.

1- Başlangıç: Style dosyasına tema detaylarını yazmak.

/*
Theme Name: Twenty Ten
Theme URI: http://wordpress.org/
Description: The 2010 default theme for WordPress.
Author: wordpressdotorg
Author URI: http://wordpress.org/
Version: 1.0
Tags: black, blue, white, two-columns, fixed-width, custom-header, custom-background, threaded-comments, sticky-post, translation-ready, microformats, rtl-language-support, editor-style, custom-menu (optional)
License:
License URI:
General comments (optional).

1

2- Standart kodlar: Sitenin ana dizininde bulunması gereken standart kodlar.

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>

<meta charset="<?php bloginfo('charset'); ?>" />

<title><?php wp_title(); ?> <?php bloginfo('name'); ?></title>

<link rel="stylesheet" type="text/css" media="screen" href="<?php echo get_stylesheet_uri(); ?>" />
<link rel="stylesheet" type="text/css" media="screen" href="<?php echo get_stylesheet_directory_uri(); ?>/custom-styles.css" />

<link rel="profile" href="http://gmpg.org/xfn/11" />
<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
<?php if(is_singular() && get_option('thread_comments')) wp_enqueue_script('comment-reply'); ?>

<?php wp_head(); ?>

</head>
<body>

<!-- ... -->

<?php wp_footer(); ?>

</body>
</html>

3- Standart Yazı Döngüsü

<?php if(have_posts()): while(have_posts()): the_post(); ?>

<div <?php post_class(); ?>>

<?php
//Post thumbnails need this in functions.php: `add_theme_support('post-thumbnails');`
if(has_post_thumbnail()) the_post_thumbnail(array(100,100));
?>

<h2 id="post-<?php the_ID(); ?>">
<a href="<?php the_permalink(); ?>" title="Permanent link to <?php the_title(); ?>"><?php the_title(); ?></a>
</h2>

<div class="post-metadata">
<p>Posted on <?php the_time('F jS, Y'); ?> by <?php the_author(); ?> in <?php the_category(', '); ?></p>
<p><?php edit_post_link('Edit','','|'); ?> <?php comments_popup_link('No Comments &raquo;', '1 Comment &raquo;', '% Comments &raquo;'); ?></p>
</div>

<div class="post-content">
<?php the_content('Read the rest of this entry &raquo;'); ?>
<?php /* the_excerpt(); */ ?>
</div>

<div class="post-tags">
<?php the_tags(); ?>
</div>

</div>

<?php endwhile; ?>

<div class="post-navigation">
<div><?php posts_nav_link('', 'Next Entries &raquo;', ''); ?></div>
<div><?php posts_nav_link('', '', '&laquo; Previous Entries'); ?></div>
</div>

<?php else: ?>
<!-- No posts found -->
<?php endif; ?>

4- Yükleniyor jQuery eklentisi: Projenize göre lazım olabilecek yükleniyor ibaresi

<?php

/* Call this before `wp_head` */
wp_enqueue_script('jquery');

?>

<!-- Add custom JavaScript from theme directory -->
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/custom-javascript.js"></script>

5- Sidebar ekleyin: Yine projeye göre lazım olabilecek kod, bu kod ile sidebar oluşturabilirsiniz.

<?php

if(function_exists('register_sidebar')) {
register_sidebar(array(
'name' => 'Left Sidebar',
'id' => 'left-sidebar',
'description' => 'This is a widgetized area.'
));
}

?>

<?php if(function_exists('dynamic_sidebar') && dynamic_sidebar('left-sidebar')): else: ?>
<!-- Show default sidebar -->
<?php endif; ?>

6- Özel Menü Oluşturun: Panelden yönetebileceğiniz özel menü oluşturmak için lazım olacak kod yapısı

<?php

//Not needed, but in case: add_theme_support('menus');

add_action('init', 'register_custom_menus');

function register_custom_menus() {
register_nav_menus(array(
'footer-links' => 'Footer Links'
));
}

/* Only <li>'s */
wp_nav_menu(array(
'theme_location' => 'footer-links',
'container' => '',
'items_wrap' => '%3$s'
));

?>

7- Yorum Sayfası: Kullanıcı odaklı bir proje geliştiriyorsanız yorum kısmı olmazsa olmaz yorum kısmı oluşturmak için ihtiyacınız olacak basit kod yapısı

<?php if('comments.php'==basename($_SERVER['SCRIPT_FILENAME'])) die('Please do not load this page directly. Thanks!'); ?>

<?php if(!empty($post->post_password) && $_COOKIE['wp-postpass_'.COOKIEHASH]!=$post->post_password): ?>
<!-- Comments are password-protected -->
<?php else: ?>
<?php if(have_comments()): ?>
<h1><?php comments_number('No comments', 'One comment', '% comments'); ?></h1>
<?php wp_list_comments('type=comment&callback=custom_comment_callback'); ?>
<?php endif; ?>
<?php endif; ?>

<?php

function custom_comment_callback($comment, $args, $depth) {
$GLOBALS['comment'] = $comment;
$GLOBALS['comment_depth'] = $depth;
?>

<?php $author_comment = ''; if($comment->user_id == 1) $author_comment = 'author-comment'; } ?>

<li id="comment-<?php comment_ID(); ?>" <?php comment_class($author_comment); ?>>

<?php echo get_avatar($comment->comment_author_email, '96', 'path_to_default'); ?>

<div class="comment-metadata">
<span class="comment-author"><?php comment_author_link(); ?></span>
<span class="comment-date"><?php comment_date(); ?></span>
</div>

<?php if($comment->comment_approved == '0'): ?>
<div class="unapproved">
Your comment is awaiting moderation
</div>
<?php endif; ?>

<div class="comment-content">
<?php comment_text(); ?>
</div>

<?php
comment_reply_link(array_merge($args, array(
'reply_text' => 'Reply',
'login_text' => 'Log in to reply',
'depth' => $depth
)));
?>

</li>

<?php
}

?>

8- Yazar Kutusu: Projenizde birden fazla yazar bulunacaksa yazar kutusuna ihtiyacınız olabilir

<div class="post-author">
<?php echo get_avatar(get_the_author_email(), '96', 'path_to_default'); ?>
<div class="post-author-name"><?php the_author_meta('display_name'); ?></div>
<div class="post-author-description"><?php the_author_meta('user_description'); ?></div>
</div>

9- Özel Sayfa Şablonu: Projenizde page.php dışında sayfa şablonu oluşturmanız için gerekecek kod yapısı

<?php
/*
Template Name: Kitten Template
*/

//...

?>

10- Özel Alanlar: Özel alan oluşturmak için ihtiyacınız olan kod yapısı

<?php

/* Return an array */
echo '<ul>';
foreach(get_post_meta($post->ID, 'sources', false) as $source) {
echo '<li><a href="'.$source.'">'.$source.'</a></li>';
}
echo '</ul>';

/* Return a string */
echo get_post_meta($post->ID, 'copyrights', true);

//Check "Custom form fields" below for adding custom fields to edit-page

?>

11- Özel Yazı Biçimleri Aşağıdaki örnek ile yazı Movie isminde özel yazı biçimi eklenmiştir.

<?php

/* A minimal example, in which a post type "Movie" is created. */

add_action('init', 'register_movie_post_type');

function register_movie_post_type() {

register_post_type('movie',array(
'labels' => array(
'name' => _x('Movies', 'post type general name'),
'singular_name' => _x('Movie', 'post type singular name')
),
'public' => true,
'menu_icon' => get_stylesheet_directory_uri().'img/movie_icon.png'
));

register_taxonomy('genres', array('movie'), array(
'label' => 'Genres',
'singular_label' => 'Genre',
'hierarchical' => true,
'rewrite' => true
));

}

//Check "Custom form fields" below for adding custom fields to edit-page

?>

12- Yazı eklerken/düzenlerken sayfaya özel kutucuk ekleyin

<?php

/* This code adds a custom input to WP admin, when adding/editing a post */

add_action('admin_init', 'register_copyrights_field');

function register_copyrights_field() {
add_meta_box('copyrights_meta', 'Post Copyrights', 'copyrights_callback', '[post_type]', 'normal', 'low');
}

function copyrights_callback() {
global $post;
$custom = get_post_custom($post->ID);
$old_value = $custom['copyrights'][0];
echo '<label>Post Copyrights:</label> <input name="post_copyrights" value="'.$old_value.'" />';
}

add_action('save_post', 'save_copyrights_meta');

function save_copyrights_meta() {
global $post;
update_post_meta($post->ID, 'copyrights', $_POST['post_copyrights']);
}

?>

13- Sayfaları, kategorileri ve arşivleri listeleme

<?php

/* Only list-items (no wrapping <ul>) */
wp_list_pages('title_li=');
wp_list_categories('title_li=');
wp_get_archives('type=monthly');

?>

14- Özel arama formu

<?php /* This is the the very barebones version of WordPress search form */ ?>
<form method="get" action="<?php echo home_url('/'); ?>">
<input type="text" name="s" />
</form>

Bu içerikte bulunan kodlar CodeClow Ekibi tarafından hazırlanmıştır.

Yorum Yap

Yapına Yorumlar (2)

  1. Nice post! thanks so much, please write more tut about theme dev bro!

    Thanks!

  2. Konuyu dahada genişletebiliriz eklenecek o kadar çok hazır kod varki.Bu kodlar sadece sanırım sayfa düzeninden bahsedebilmek en azından örnek verebilmek için yazılmış.Yinede teşekkürler en azından sayfa sayısı yada kaç sayfadan oluştuğuna dair bilgi verilmiş.