Uyarı! Bu yazı 24.05.2016 tarihinde yazıldı. O günden bu güne bir çok şey değişmiş ve yazı geçerliliğini yitirmiş olabilir.
İlk dersimizde wordpress tema yapımına giriş yapmış ve style.css dosyamızı oluşturmuştuk. İlk dersimizde kodlayacağımız temayı aynı olsun beraber kodlayalım demiştim. İndirdiğiniz dosya içeriğinde resimdeki gibi dosyalar göreceksiniz.
İndirdiğimiz template içeriği..
Header.php için alacağımız kodlar.
Header.php Yapımı
İçindekiler
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "DTD/xhtml1-strict.dtd"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254" /> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9" /> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <title><?php bloginfo('name'); ?> <?php bloginfo('description'); ?> <?php if ( is_single() ) { ?> <?php } ?> <?php wp_title(); ?></title> <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats --> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" /> <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<?php bloginfo('rss2_url'); ?>" /> <link rel="alternate" type="text/xml" title="RSS .92" href="<?php bloginfo('rss_url'); ?>" /> <link rel="alternate" type="application/atom+xml" title="Atom 0.3" href="<?php bloginfo('atom_url'); ?>" /> <?php wp_head(); ?> </head><body> <div id="templatemo_background_section_top"> <div class="templatemo_container"> <div id="templatemo_header"> </div> <!-- end of headder --> <div id="templatemo_menu_panel"> <div id="templatemo_menu_section"> <ul> <li><a href="index.html" class="current">Home</a></li> <li><a href="#">Archives</a></li> <li><a href="#">Recent Posts</a></li> <li><a href="#">Photo Gallery</a></li> <li><a href="#">Company</a></li> <li><a href="#">Contact Info.</a></li> </ul> </div> </div> <!-- end of menu --> </div> <!-- end of container--> </div> <!-- end of templatemo_background_section_top--> <body> <div id="templatemo_background_section_top"> <div class="templatemo_container"> <div id="templatemo_header"> </div> <!-- end of headder --> <div id="templatemo_menu_panel"> <div id="templatemo_menu_section"> <ul> <li><a href="<?php bloginfo('url'); ?>" class="current">Ana Sayfa</a></li> <?php wp_list_pages('title_li'); ?> </ul> </div> </div> <!-- end of menu --> </div> <!-- end of container--> </div> <!-- end of templatemo_background_section_top-->İndex.php Yapımı 1.Aşama
Sadece alttaki kodu index.php'yeekleyin.<?php get_header(); ?>
Gördüğünüz gibi buraya kadar bir sorun gözükmüyor. Ana sayfa ile yan yana olan sayfalar sitenizdeki sayfa linklerini otomatik çeker.
İndex.php Yapımı 2.Aşama ve Sidebar.php'yi Çağırmak
İndex.php' ye eklediğimiz kodun geri kalan işlevlerini ve anasayfada gelecek yazılarımızı listeyeceğiz. Template içerisindeki kodlar.<div id="templatemo_background_section_middle"> <div class="templatemo_container"> <div id="templatemo_left_section"> <div class="templatemo_post"> <div class="templatemo_post_top"> Blog Post Title One goes here </div> <div class="templatemo_post_mid"> <p><img alt="Free Blog Template" src="images/templatemo_064_blackmedia.jpg" />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec dui. Donec nec neque ut quam sodales feugiat. </p> <p>Nam vehicula dapibus lectus. Integer imperdiet pretium dolor. Vivamus felis. Vivamus vulputate vehicula mi. Maecenas consectetur purus. </p> <p>Vestibulum id mi vitae nunc vulputate ullamcorper. Donec feugiat orci sed sapien. Fusce risus sem, egestas quis, imperdiet id, pellentesque vel, tortor. Fusce ante. Nunc at mi nec urna mollis ullamcorper.</p> <p>Quisque ut odio. Etiam fringilla vestibulum nulla. Suspendisse venenatis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi dapibus dolor sit amet metus suscipit iaculis. Quisque at nulla eu elit adipiscing tempor. </p> <p>Nunc at lectus. Curabitur eros massa, auctor sed, viverra vel, vestibulum vitae, leo. Mauris sapien est, placerat vitae, rhoncus eu, feugiat id, elit. Suspendisse auctor accumsan ipsum. Etiam pretium. Duis id turpis in massa vulputate ultrices.</p> <div class="clear"></div> </div> <div class="templatemo_post_bottom"> <span class="post">Posted By: <a href="#">Site Admin</a></span> <span class="post">Category: <a rel="nofollow noopener" href="https://www.flashmo.com" target="_parent">Flash Templates</a></span> <span class="post">Date: 20 September 2024</span> </div> </div><!-- end of templatemo_post--> <div class="templatemo_post"> <div class="templatemo_post_top_yellow"> Blog Post Title Two goes here </div> <div class="templatemo_post_mid"> <p><img alt="Blog Templates" src="images/templatemo_063_greenblog.jpg" />Pellentesque lectus justo, fermentum in, ornare vitae, vehicula eu, felis. Duis faucibus, massa vitae dictum facilisis, ipsum nibh facilisis nisi, ut scelerisque metus enim in tortor. </p> <p>Mauris in sapien in massa pellentesque viverra. Quisque venenatis fringilla eros. Etiam in lorem ac nulla imperdiet sodales. Phasellus in justo at lectus pulvinar ultrices. Mauris ultrices sollicitudin turpis. Fusce non lacus et lorem ornare interdum. </p> <p>Nunc eget urna. Mauris vestibulum felis eget tortor. Praesent mattis varius quam. Vestibulum ullamcorper ipsum nec augue. Vestibulum auctor odio eget ante. Nunc commodo, magna pharetra semper vehicula, dui ligula feugiat elit, et euismod nunc orci ut libero.</p> <div class="clear"> </div> </div> <div class="templatemo_post_bottom"> <span class="post">Posted By: <a href="#">TemplateMo</a></span> <span class="post">Category: <a href="#">CSS Templates</a></span> <span class="post">Date: 15 August 2024</span> </div> </div><!-- end of templatemo_post--> </div><!-- end of left section--> <div id="templatemo_background_section_middle"> <div class="templatemo_container"> +++++++++ <div id="templatemo_right_section"> <div class="templatemo_section_box"> <?php get_sidebar(''); ?> </div> </div> +++++++++ <div id="templatemo_left_section"> <div class="templatemo_post"> <?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <div class="templatemo_post_top_yellow"> <a href="<?php the_permalink() ?>"><?php the_title(); ?></a> </div> <div class="templatemo_post_mid"> <p><?php if ( has_post_thumbnail() ) {the_post_thumbnail();} else {}?> <?php wpn_content_limit(get_the_content(),550); ?> </p> <div class="clear"> </div> </div> <div class="templatemo_post_bottom"> <span class="post">Yazar: <a href="<?php the_author(); ?>"><?php the_author(); ?></a></span> <span class="post">Kategori: <?php the_category(', ') ?></span> <span class="post">Tarihi: <?php the_time('m-d-y') ?></span> <span class="post">Yorum: <?php comments_popup_link(__('Yorum Yok'), __('1 Yorum Var'), __('% Yorum Var'), '', __('Yorumlara kapalı')); ?></span> </div> <div class="temizle"></div> <div class="temizle"></div> <div class="temizle"></div> <div class="temizle"></div> <?php endwhile; ?> <?php endif; ?> <div class="temizle"></div> <?php wp_pagenavi(); ?> </div> </div></div></div> Sidebar.php İçerik Yapımı
Template içeriğindeki yan menü(sidebar) kodları.<div id="templatemo_right_section"> <div class="templatemo_section_box"> <div class="templatemo_section_box_top_yellow"> Advertisements </div> <div class="templatemo_section_box_mid"> <img alt="Advertisement" src="images/templatemo_ads.jpg" /> <img alt="Advertisement" src="images/templatemo_ads.jpg" /> <img alt="Advertisement" src="images/templatemo_ads.jpg" /> <img alt="Advertisement" src="images/templatemo_ads.jpg" /> <div class="clear"> </div> </div> <div class="templatemo_section_box_bottom"></div> </div><!-- end of section box --> <div class="templatemo_section_box"> <div class="templatemo_section_box_top"> Categories </div> <div class="templatemo_section_box_mid"> <ul> <li><a href="#">Web Design</a></li> <li><a href="#">JavaScripts</a></li> <li><a href="#">CSS Templates</a></li> <li><a href="#">Flash Templates</a></li> </ul> </div> <div class="templatemo_section_box_bottom"></div> </div><!-- end of section box --> <div class="templatemo_section_box"> <div class="templatemo_section_box_top_yellow"> About This Blog </div> <div class="templatemo_section_box_mid"> <p>This is a free website <a href="#">blog template</a> provided by TemplateMo. Feel free to download, modify and use this layout for any blog templates.<br /><br /> <a href="https://validator.w3.org/check?uri=referer"><img height="31" alt="Valid XHTML 1.0 Transitional" src="https://www.w3.org/Icons/valid-xhtml10" width="88" vspace="8" border="0" /></a><a href="https://jigsaw.w3.org/css-validator/check/referer"><img alt="Valid CSS!" src="https://jigsaw.w3.org/css-validator/images/vcss-blue" vspace="8" border="0" /></a></p> <br /><br /> </div> <div class="templatemo_section_box_bottom"></div> </div><!-- end of section box --> </div><!-- end of right Section --> <div id="templatemo_right_section"> <div class="templatemo_section_box"> <div class="templatemo_section_box_top_yellow"> Sponsor / Reklam </div> <div class="templatemo_section_box_mid"> <img alt="Advertisement" src="<?php bloginfo('template_url'); ?>/images/templatemo_ads.jpg" /> <img alt="Advertisement" src="<?php bloginfo('template_url'); ?>/images/templatemo_ads.jpg" /> <img alt="Advertisement" src="<?php bloginfo('template_url'); ?>/images/templatemo_ads.jpg" /> <img alt="Advertisement" src="<?php bloginfo('template_url'); ?>/images/templatemo_ads.jpg" /> <div class="clear"> </div> </div> <div class="templatemo_section_box_bottom"></div> </div><!-- end of section box --> <div class="templatemo_section_box"> <div class="templatemo_section_box_top"> Kategoriler </div> <div class="templatemo_section_box_mid"> <ul> <?php wp_list_cats('title_li='); ?> </ul> </div> <div class="templatemo_section_box_bottom"></div> </div><!-- end of section box --> <div class="templatemo_section_box"> <div class="templatemo_section_box_top_yellow"> Arşivler </div> <div class="templatemo_section_box_mid"> <ul><p><?php wp_get_archives('title_li=') ?></p></ul> <br /><br /> </div> <div class="templatemo_section_box_bottom"></div> </div><!-- end of section box --> </div>Etiketler
2016 sıfırdan wordpress tema yapımı, 2016 wordpress dersleri, bootstrap, css, header yapımı, html, index yapımı, sidebar yapımı, sıfırdan wordpress tema yapımı, wordpress, wordpress dersleri, wordpress detaylı tema yapımı, wordpress şablon yapımı, wordpress tema, wordpress tema nasıl yapılır, wordpress tema yapımı, wordpress theme wp, wp tema, wp theme
Videolu anlatımları vardı denk gelmiştim ama çok fazla kodları takip edemediğim için anlamamıştım. Şu kısma kadar mantığı anladım.. Devamını bekliyorum emeğine sağlık 🙂
Bende zamanında yabancı bir forumda kısa bir makale ile öğrenmiştim, üzerine koymak zaman almıştı o sıralar… Şimdi anlatırken de o günleri anımsıyorum ve bu yüzden detaylı ve basit metodla anlatıyorum. Devamı olacak tabi takip edin.
guzel miş