WordPress Eklentisiz Manşet Yapımı

WordPress eklentisiz manşet yapımı belkide en fazla uğraştığım konu oldu. Çok uzun zaman araştırdım fakat internette yeterince Türkçe kaynak yok. Bazı arkadaşlarımız bilgiler paylaşıyorlar fakat bu yeterli değil maalesef. Bende o kadar çok uğraştım ki. başka webmasterların da bu kadar uğraşmaması için bu siteyi kurdum. Yorum alanlarından bize ulaşabilirsiniz.

Öncelikle WordPresste manşet yapımını bilmek için döngü mantığını bilmek gerek. Nedir bu döngü. WordPressin çalışma mantığı döngü üzerine kuruludur. single.php, page.php arşiv, kategori sayfası, etiket sayfası ve dahası hep döngü içine alınarak kodlanır.

Manşette yine döngü ile yapılır. WordPress kod sisteminde buna The Loop diyor. Ayrıntılı bilgiyi Wordpresin codexinde bulabilirsiniz.
Gelelim konumuza, aşağıda döngü yani manşet kodlarını verdim ve onları nasıl kullanacağımızı anlatacağım. Tabi wordpressin döngü kodları biraz daha sade ama size vereceğim kod bloğu daha fazla işinize yarayacaktır.

 <?php if (have_posts()) : while (have_posts()): the_post(); the_content(); endwhile; else: endif; ?> 

Görüldüğü gibi

 <?php the_content(); ?> 

içeriği çekiyor. En temel haliyle manşet yapımı yani döngü sistemi bu şekilde yapılmaktadır. Biraz daha açalım isterseniz.
Aşağıda bir temanın manşet kodları var. Bunları WordPresse entegre edelim.


<div class="fixed-main">
  
<div class="fixed-main-wrapper main-wrapper">
    
<div class="main-content mag-content clearfix">

        
<div class="row blog-content">
          
<div class="col-md-12">
            
<div class="flexslider slider-one">
  
<div class="featured-slider">

    
<div class="slider-item">
      
<div class="row">
        
<div class="col-md-12">
          
<article class="featured-big box-news box-big">
            <a href="#">
              <img src="img/big-thumb/slider_thumb1.jpg" alt="">
            </a>
            
<header class="featured-header">
              <a class="category bgcolor3" href="#">Advice</a>
              
<h2><a href="#">7 Tips for Creating a Functional Home Workspace</a></h2>

              

                by <a href="#"><b>John Doe</b></a> -  
                <span class="article-date">2 hours ago</span>
              

            </header>

          </article>

        </div>

      </div>

    </div>

<!-- .slider-item -->

    
<div class="slider-item">
      
<div class="row">
        
<div class="col-md-12">
          
<article class="featured-big box-news box-big">
            <a href="#">
              <img src="img/big-thumb/slider_thumb2.jpg" alt="">
            </a>
            
<header class="featured-header">
              <a class="category bgcolor2" href="#">Design</a>
              
<h2><a href="#">9 Steps to Staying Motivated for Creative Freelancers</a></h2>

              

                by <a href="#"><b>John Doe</b></a> -  
                <span class="article-date">3 hours ago</span>
              

            </header>

          </article>

        </div>

      </div>

    </div>

<!-- .slider-item -->

    
<div class="slider-item">
      
<div class="row">
        
<div class="col-md-12">
          
<article class="featured-big box-news box-big">
            <a href="#">
              <img src="img/big-thumb/slider_thumb3.jpg" alt="">
            </a>
            
<header class="featured-header">
              <a class="category bgcolor3" href="#">Advice</a>
              
<h2><a href="#">50 Books to Read Before You Die</a></h2>

              

                by <a href="#"><b>John Doe</b></a> -  
                <span class="article-date">4 hours ago</span>
              

            </header>

          </article>

        </div>

      </div>

    </div>

<!-- .slider-item -->

  </div>

<!-- .featured-slider -->
</div>

<!-- .flexslider .slider-one -->          </div>

        </div>

        

Öncelikle slider saysını bire düşürelim ve döngü kodlarını yerleştirelim.


<div class="fixed-main">
  
<div class="fixed-main-wrapper main-wrapper">
    
<div class="main-content mag-content clearfix">
        
<div class="row blog-content">
          
<div class="col-md-12">
            
<div class="flexslider slider-one">
  
<div class="featured-slider">

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

    
<div class="slider-item">
      
<div class="row">
        
<div class="col-md-12">
          
<article class="featured-big box-news box-big">
            <a href="#">
              <img src="img/big-thumb/slider_thumb1.jpg" alt="">
            </a>
            
<header class="featured-header">
              <a class="category bgcolor3" href="#">Advice</a>
              
<h2><a href="#">7 Tips for Creating a Functional Home Workspace</a></h2>

              

                by <a href="#"><b>John Doe</b></a> -  
                <span class="article-date">2 hours ago</span>
              

            </header>

          </article>

        </div>

      </div>

    </div>

<!-- .slider-item -->

  <?php endwhile; else: endif;?> 

  </div>

<!-- .featured-slider -->
</div>

<!-- .flexslider .slider-one -->          </div>

        </div>

Yukarıda tek kalan sliderı döngü içine aldık. Devam edelim.
Bu Kodu

<?php query_posts('showposts=5&cat=1'); ?>

döngü başlangıcına yerleştirelim.


<div class="fixed-main">
<div class="fixed-main-wrapper main-wrapper">
<div class="main-content mag-content clearfix">
<div class="row blog-content">
<div class="col-md-12">
<div class="flexslider slider-one">
<div class="featured-slider">

 <?php 
query_posts('showposts=5&cat=1'); 
 if (have_posts()) :
  while (have_posts()):
   the_post();
?>

    
<div class="slider-item">
<div class="row">
<div class="col-md-12">
<article class="featured-big box-news box-big">
            <a href="#">
              <img src="img/big-thumb/slider_thumb1.jpg" alt="">
            </a>
            
<header class="featured-header">
              <a class="category bgcolor3" href="#">Advice</a>
              
<h2><a href="#">7 Tips for Creating a Functional Home Workspace</a></h2>
 by <a href="#"><b>John Doe</b></a> -  
                <span class="article-date">2 hours ago</span>
            </header>
          </article>
        </div>
      </div>
    </div>
<!-- .slider-item -->
  <?php endwhile; else: endif;?> 
  </div>
<!-- .featured-slider -->
</div>
<!-- .flexslider .slider-one -->
          </div>
        </div>

Bu koddaki [php]<?php query_posts(‘showposts=5&cat=1’); ?>[/php] 5 slider(manşet) sayısını 1 de çekilecek kategoriyi belirliyor. Manşette görülmesini istediğiniz kategorinin ID sini cat=1 deki 1 rakamının yerine yazıyoruz. Devam edip sliderı bitirelim.


<div class="fixed-main">
<div class="fixed-main-wrapper main-wrapper">
<div class="main-content mag-content clearfix">
<div class="row blog-content">
<div class="col-md-12">
<div class="flexslider slider-one">
<div class="featured-slider">

 <?php 
query_posts('showposts=5&cat=1'); 
 if (have_posts()) :
  while (have_posts()):
   the_post();
?>

    
<div class="slider-item">
<div class="row">
<div class="col-md-12">
<article class="featured-big box-news box-big">
            <a href="<?php the_permalink(); ?>">
<?php if ( has_post_thumbnail()) : ?>
              <img src="<?php echo get_the_post_thumbnail_url();?>" alt="<?php the_title(); ?>">
       <?php else: ?>
                                   <?php endif;?>    
 </a>
            
<header class="featured-header">
              <a class="category bgcolor3"><?php the_category(', '); ?></a>
              
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
 by <a><b><?php the_author(''); ?></b></a> -  
                <span class="article-date"><?php the_time('F j, Y'); ?></span>
            </header>
          </article>
        </div>
      </div>
    </div>
<!-- .slider-item -->
  <?php endwhile; else: endif;?> 
  </div>
<!-- .featured-slider -->
</div>
<!-- .flexslider .slider-one -->
          </div>
        </div>

Tüm kısa kodları yerleştirdik ve manşetimiz bitti. Buradaki can alıcı nokta döngüydü. Gerisi kopyala yapıştır zaten. Bu yöntemi tüm slider sistemlerine uygulayabilirsiniz. Sormak istediğiniz bir şey olursa yorum alanından sorabilirsiniz.


Bunlar da İlginizi Çekebilir
WordPress Tema Kodlama Eğitimi Ücretsiz

Bu sayfada ücretsiz tema Kodlama eğitimini paylaşacağız. Bunun için html bir şablonu kullanacağız. Sırayla eğitimler tek tek eklenecektir.   Ders 1: WordPress Temasını Tanıyalım  

WordPress The requested URL was not found on this server Hatasının Çözümü

WordPress 404 not found hatası karşılaşabileceğiniz en yaygın hatalardan biridir. Bu hatanın çözümü için farklı yollar var. Yollardan hangisi size uyarsa onu kullanabilirsiniz.

WordPress Yönetim Paneli Footer Alanındaki Versiyon Bilgisini Kaldırmak

WordPress sitenizdeki footer kısmında yer alan versiyon bilgisini gizlemek isteyebilirsiniz. Bunun için iki kod paylaşacağım. Birinci kod Yönetici dahil tüm kullanıcılardan kaldırıyor. İkinci kod ise yönetici hariç diğer kullanıcılardan kaldırıyor. 1. Kod: Yönetici dahil tüm kullanıcılardan kaldırır. function my_footer_shh() { remove_filter( ‘update_footer’, ‘core_update_footer’ ); } add_action( ‘admin_menu’, ‘my_footer_shh’ ); 2. Kod: Yönetici hariç diğer kullanıcılardan […]

Yorum Yok
Yazımız ile ilgili fikirlerinizi paylaşırsanız mutlu oluruz.

+ 58 = 60