 |
| Wordpress Tema Yapımı |
WordPress Tema Yapımı
WordPress dünyada en çok kullanılan Blog Scripti dir. dünyadaki sitelerin %35 ini oluşturur. WordPress ile istediğiniz tarzda bir site oluşturabilirsiniz. örnek vermek gerekirse alışveriş sitesi,haber sitesi,magazin sitesi,indirme sitesi,film sitesi gibi bir çok site yapılabiliyor..
En güzel özelliklerinden biriside tamamen ücretsiz olmasıdır. WordPress'in şuan 55.142 tane eklentisi mevcut her geçen günde artmakta, bir çok kişi WordPress tema yapından parada kazanıyor. yani tema yapmamız için bir çok neden mevcut, isterseniz hemen dersimize başlayalım...
Öncelikle wp-content -> themes klasörünün içinde bitane klasör oluşuturuyorsunuz bu klasöre istediğiniz bir ismi verebilirsiniz farketmez. klasörün içinde iki tane dosya oluşturuyoruz bu dosyalar index.php ve style.css bu iki klasörü oluşturduğunuzda wordpress temalar bölümüne temamız geliyor...
 |
tema dosyamız
gördüğünüz gibi tema bu kısma geliyor ama resim gözükmüyor resim eklemek için temanın olduğu bölüme istediğiniz bir resmi koyup isminide screenshot.png olarak ayarlıyorsunuz. bunu yaptığınız zaman direk gözükecektir..
|
,
şimdi style.css dosyamızı açıyoruz ve açıklama satırı olarak aşağıdaki kodu giriyoruz..
/*
Theme Name: Test tema
Author: mehmet
*/
Bunu yazdığımız zaman temanın ismini ve yazan kişiyi ayarlamış oluyoruz. temanın bilgilerinde gözükür.. şimdide temanın diğer dosyalarını oluşturalım bu dosyalar page.php,single.php,archive.php,footer.php,header.php,functions.php,front-page.php bu dosyaları oluşturuyoruz gerekirse daha fazlada oluşturacağız. aşağıdan da bakabilirsiniz..
devam ediyoruz şimdi header.php dosyasını açarak standart html kodlarımızı buraya yazıyoruz. hedar bölümü sayfanın üst kısmıdır.. <head></head> kodları arasında ise wp_head() fonskiyonunu giriyoruz bu özelliğin çalışması için body arasına da body_class() fonksiyonunu giriyoruz..<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test tema</title>
<?php wp_head();?>
</head>
<body <?php body_class();?>>
burda kapanan </body> ve </html> kodlarını kesip footer.php kısmına yapıştırıyoruz footer da sayfanın alt bölümü oluyor burda bide wp_footer() fonksiyonunu yazıyoruz. <?php wp_footer();?>
</body >
</html>
şuan Anasayfayı açtığımızda ekranda hiç bir şey gözükmez çünkü sitenin anasayfası front-page.php içinden gözükür bu iki dosyayı alt ve üst olmak üzere front-page sayfasına dahil ediyoruz. bir fonksiyon yardımıyla çağırılıyor kodları aşağıda verdim..<?php get_header();?>
<div class="container pt-5 pb-5">
</div>
<?php get_footer();?>
yukarda bide .container divi ekledim sayfayı ortalaması için container çalışması için bootsrap kütüphanesini sayfamıza dahil etmemiz gerekiyor biz bu projede Bootstrap'ı kullanacağız.. temanın ana dizinine bootstrap dosyalarını atıyoruz.. bootsrapı burdan indirebilirsiniz..
 |
| bootstrap dosyaları |
bu dosyları sayfamıza dahil etmek için functions.php dosyasını açıp aşağıdaki kodları yapıştırıyoruz.bu kodlarda bizim style.css dosyamızda sayfaya dahil edilmiştir..functions stil()
{
wp_register_style("bootstrapcss", get_template_directory_uri() . "/css/bootstrap.min.css", array(), false, "all");
wp_enqueue_style("bootstrapcss");
wp_register_style("style", get_template_directory_uri() . "/style.css", array(), false, "all");
wp_enqueue_style("style");
}
add_action("wp_enqueue_scripts","stil");
şimdi front-page.php dosyamızı açıyoruz ve konuları göstermek için aşağıdaki kodları kopyalıyoruz.burda yaptığımız işlemler bloginfo("name") fonksiyonu sitenin adını gösterir.. if ile gönderileri kontrol ediyoruz, while ile döngüye sokuyoruz ve döngü içinde the_title() fonskiyonu ile konu başlıklarını getiriyoruz, the_excerpt() fonksiyonuyla konun bir kısmını gösteriyoruz ve son olarak the_permalink() de konun devamına götüren linki oluşturuyoruz..<?php get_header();?>
<div class="container pt-5 pb-5">
<h3><?php bloginfo("name");?></h3>
<?php if(have_posts()) : while(have_posts()) : the_post();?>
<div class="card mb-3">
<div class="card-body">
<h3><?php the_title();?></h3>
<?php the_excerpt();?>
<a href="<?php the_permalink();?>" class="btn btn-primary">Devamı</a>
</div>
</div>
<?php endwhile; endif;?>
</div>
<?php get_footer();?>
Burdaki kodları page.php,single.php ve archive.php dosyalarınada yapıştırın single.php de bloginfo kullanmanıza gerek yok onu silebilirsiniz. the_excerpt() fonksiyonu yerinede the_content() fonksiyonunu kullanın konunun tamamını gösterir.. page.php de de aynı işlemi yapın archive.php de ise bloginfo() yazan yere single_cat_title() fonskiyonunu kullanın..
şimdide menüyü yapalım bunun için öncelikle WordPress'in yönetim panelinden menu oluşturmanız gerekiyor. öncelikle menü linkinin gözükmesi için functions.php ye aşağıdaki kodu kopyalayın sayfanın en altına yapıştırabilirsiniz....add_theme_support("menus");
Menün nerde gözüküceğiniz ayarlamak için yine fonksiyon.php de kodlarımızı yazıyoruz bu kodları yazdığımızda menu kısmında hemen altta üst ve alt menu diye ı kısım gözükür üst kısmı seçip kayededin..register_nav_menus(
array(
"top-menu" => __("üst menu", "theme"),
"footer-menu" => __("alt menu", "theme")
)
);
anasayfada gözükmesin içinde kod eklememiz gerekiyor öncelik menü yeri için bir css yazalım style.css açın ve aşağıda kodları yazın..header {
background: black;
width:100%;
height: 100px;
}
Tabi kodların çalışması için header.php en altında <header></header> kodu oluşturun içinede kodlarımızı yazıyoruz..<header>
<div class="container">
<?php
wp_nav_menu(
array(
"theme_location" => "top-menu",
"menu_class" => "menu"
)
);
?>
</div>
</header>
Sayfayı yenileyip baktığımızda menuler gelecektir, ama menulerin dikey olduğunu görüyoruz menu_class özelliği ile menuye, menu isminde class atadık bunu hemen css dosyamızda çekip display:flex verdiğimiz zaman menuyu yan olarak gösterebiliyoriz. bu arada yukarıda söyledim mi bilmiyorum ama body kısmına bide gri bir arka plan rengi verin, konular daha iyi gözükecektir. gri renk kodu #e7e7e7 style.css içinde yazıcaksınız...menu {
display: flex;
list-style: none;
}
.menu li a {
color: #fff;
padding: 10px;
line-height: 100px;
}
Menüyü de ayarlamış olduk şimdi de konuların Sayfalamasını yapalım, sayfalama için şu kodları yazmanız yeterli..<?php previous_posts_link();?>
<?php next_posts_link();?>
alttaki kod ileri sayfaya gider üstteki ise bir önceki sayfayı gösterir bu kodları front-page.php ve archive.php dosyalarınızın en altına ekleyin..
farkettiyseniz konuların resimleri yok bunlara resim eklemek için öncelikle functions.php ye aşağıdaki kodları ekleyin. üstteki kod konu eklerken görsel ekleyebilmemizi sağlar. alttaki kodlarda ise resmin boyutunu ayarlıyoruz anasayfa da 300pixel gözükecek konu devamında ise 800pixel gözükecek şekilde ayarlıyoruz..add_theme_support("post-thumbnails");
add_image_size("büyük", 800, 800, true);
add_image_size("küçük", 300, 300, true);
konular içinde gösterilicek kodlarda aşağıdadır. önce if ile kontrol ettiriyoruz görseli (thumbnail) varmı diye, sonra varsa ise resmi gösteriyoruz..<?php if(has_post_thumbnail()): ?>
<img src="<?php the_post_thumbnail_url("küçük");?>" class="img-fluid" alt="">
<?php endif;?>
front-page.php kısmında küçük yazıyoruz single.php de ise büyük olarak belirtiyoruz. yani bu şekilde <?php the_post_thumbnail_url("büyük");?> bü işlem bukadar..
Son olarak bide search yani arama bölümünü yapalım, bunun için bir tane search.php dosyası oluşturmamız gerekiyor. bu dosyayı oluşturduktan sonra front-page.php de arama kısmının gözükmesini istediğimiz yere şu kodu yazıyoruz.. <?php get_search_form();?>
Bu kodu yazdığımızda arama formu gözükecektir. bur da bir kelime arattığımızda search.php içinde arama yapıyor.. bu dosyanın içine front-page.php de kodların aynısını kopyalayın. sadece üst kısımdaki bloginfo("name") yerine bu kodu yazın<?php the_search_query();?>
gözükmesini istemediğiniz kısımlar varsa kaldırabilirsiniz.. arama yaptığınızda, aradığınız kelimelere ait konular çıkıcaktır. yalnız bu arama bölümünde bir sıkıntı var eğer aramayla ilgili sonuç çıkmassa boş döndürüyor bunun için bir else kontrolu yapabiliriz endwhile; kısmında hemen sonra else: yazınyani şu şekilde aynısını yapın<?php endwhile; else:
?>
<div class="alert alert-warning">Aradığınız kelimeye ait sonuç bulunamadı</div>
<?php
endif;?>
search.php tam görünümü bu şekilde olucak<?php get_header();?>
<div class="container pt-5 pb-5">
<h3><?php the_search_query();?></h3>
<div style="clear:both;"></div>
<?php if(have_posts()) : while(have_posts()) : the_post();?>
<div class="card mb-3">
<div class="card-body">
<?php if(has_post_thumbnail()): ?>
<img src="<?php the_post_thumbnail_url("küçük");?>" class="img-fluid" alt="">
<?php endif;?>
<h3><?php the_title();?></h3>
<?php the_excerpt();?>
<a href="<?php the_permalink();?>" class="btn btn-primary">Devamı</a>
</div>
</div>
<?php endwhile; else:
?>
<div class="alert alert-warning">Aradığınız kelimeye ait sonuç bulunamadı</div>
<?php endif;?>
<?php previous_posts_link();?>
<?php next_posts_link();?>
</div>
<?php get_footer();?>
eklediğimiz kodu kırmızı ile gösterdim bu yazıda anlatacaklarım bukadar eğer anlamadığınız kodlar varsa projenin indirme linkini aşağı bıraktım bu dosyayı tema bölümüne atıp etkinleştirirseniz çalışır.Tema Dosyası İndirme Linki : http://bit.ly/37tp9KMBu yaptığımız temayla ilgili birde video çektim yalnız bunu ücretli olarak veriyorum aşağıdaki linkten satın alabilirsiniz satın alma işlemini yaptıysanız bana facebook adresimden ulaşın. bende size videoyu göndereyim. tamamen güvenli bir yöntemdir siz ödemeyi yapsanız bile onaylamadığınız sürece onaylanmaz. mailinize gelen onay linkine tıkladığınız zaman onaylanıyor.. ben size videoyu vericem sizde onaylıcaksınız..
Worpress tema yapımı videosunu satın almak için tıklayın
