100 NUMARALI ADAM

Oyun Sitesi

WordPress Eklentisiz İçindekiler Tablosu

Yazar: ·

WordPresste yazdığımız yazının “H1 H2 H3 H4 H5 H6” etiketli konu başlıklarını eklenti kullanmadan yazının başında içindekiler tablosu olarak sunacağız.

Buna yabancılar TOC diyor. Açılımı Table Of Contents, Manası İçindekiler.

Bu konuyu değerli kılan etken, ağır eklenti kullanmıyoruz. Tek kullanacağımız eklenti var ki onu da herkese öneriyorum aşağıda detaylarda bulacaksınız.

Eklenti kullanmadan yapabilmemizin artısı tahmin edeceğiniz üzere sitemizin açılış hızına etki etmemesidir.

Konuya girişmeden bu terimlere yabancı olanlar için özet geçeceğim..

İçindekiler Tablosu Nedir?

İçindekiler tablosu, içerik tablosu olarak da bilinir.

İçindekiler tablosunu anlatmadan evvel, içindekilerin ne olduğunu bilmeliyiz…

Yazıları yazarken seoya önem gösteriyorsak bunu eklemeliyiz.

İçerik tablosu, düzgün çalışılan yazılarda seoya önemli derecede katkı sağlamaktadır.

Seoya önem gösteriyorsak, yani google da üst sıralarda olmayı hedefliyorsak yazılarımızı hiyeraraşik düzende yazıp içindekiler tablosu olarak göstermeliyiz;

Örnek:

Başlık(h2)

Başlık ile alakalı yazı

Alt başlık(h3)

Alt başlık ile alakalı yazılar.

Alt başlığın da alt başlığı(h4)

Alt başlığın da başlığı ile alakalı yazılar.

 

Bu şekilde yazmalıyız. Önemli olan başlığa hangi H etiketi alması gerektiğidir.

Bu şekilde yazılan çalışmalar siteyi değerli kılar.

Bu yüzden bu işi bilenler yazı içinde paragraf etiketlerini düzgün şekilde kullanırlar.

Yazının ana başlığı H1 olmalıdır. H1 etiketini zaten çoğu tema yazı başlığına otomatik olarak vermektedir.

Sizin yapacağınız bir alt başlık olan H2 den başlayarak konunun gidişine göre onun da alt başlığı olan H3 ü gerektiği yere koymaktır.

Yazıyı bitirdikten sonra bu etiketlerin toplamı bizim içerik tablomuzu belirleyecektir.

Yazıda 10 başlık var ise tablomuz 10 başlıktan oluşacaktır.

Bu şekilde düzenli tertipli oluşturulmuş yazının içerik tablosunu yazılarımızda otomatik olarak yazının başına konmasını istemez misiniz?

Bu tablolara bazı kitaplarda da rastlamış olmanız gerekir.

Açıkçası bu tabloları pek kullanan yoktur kimse sevmez.

Benim sevme nedenim seodan ziyade tablodaki başlığa tıklayınca otomatik olarak yazı içindeki yere sayfanın kaymasıdır.

Özellikle uzun yazılarda bu gerçekten işlevseldir.

Table Of Contents WordPress Functions

İçerik tablosunun yabancı adı table of contents diye de geçer.

Başlığı böyle atmamın sebebi, bu tip kod aramalarının yabancı terimde yapılmasıdır.

Başlığa bir de Functions yazdım. Bunu bilmeyenler Functions nedir nasıl eklenir konusundan ayrıntılı bilgiye ulaşsınlar.

Functions Kodu ile İçindekiler Tablosunun Eklemenin Artıları

Sizi her yere kod yazmak yerinde bırakmadan sadece functions dosyasına kod ekleterek bu yükten ömür boyu kurtarıyorum.

Ayrıca eklenti yüklemeden bunu yapabildiğiniz için: Sitenin açılış hızı eklentiye göre daha hızlı olacaktır.

Eklenti sürekli güncelleneceği için ayrıca güncellemeleri takip edip bir de güncelleme ile uğraşmamış olacaksınız.

Bu işi eklentisiz yapan diğer siteler, işlevi sağlamak adına bir kaç sayfaya kod ekletiyor (css, php,, java vs.)

Size onca kodu karman çorman ekletmeyeceğiz.

Zaten o kodları kullananlar sonradan pişman oluyorlar.

Çünkü temalarının güncelleme zamanları geldiğinde eklenmiş kodlar yok oluyor.

İerik tablosunun benim en sevdiğim artısı şudur: Bazen sorulan sorulara cevap vermek gerekiyor. İçinde cevabı barındıran bir çok yazım bulunuyor.

Misal: Yazı uzun ve sayfada 10 başlık varken sorunun cevabı 7. başlıktayken yazının linkini paylaşıp insanları yazımı okutmaya zorlamıyorum!

Sadece 7. başlığın linkini içerik tablosundan kopyalayıp paylaşıyorum.

Paylaştığım kişi linke tıklayınca otomatik olarak 7. başlığı görüyor.

İçerik Tablosu Ekleme Kodları:

Size 3 Adet kod sunacağım.

Kodlar birbirine alternatif olarak geliştirilmiştir.

Size önerilerim:
3. numarayı kullanmanızdan yanadır. Alternatif olarak 2. Numarayı kullanabilirsiniz. 1. Numarayı kullanmanızı önermem çünkü internet explorer desteği yoktur.

  1. İçerik Tablosu Functions Kodu Detailes ve Summary
    Bu kodu tercih etmenizi önermiyorum. Ben 2 ay kullandım. Sonra gördüm ki kodumuz internet explorerda çalışmıyor.
    Çalışmama sebebi css olarak girdiğimiz details ve summary akordiyon kodları!
    Bu kod sayesinde chrome da yağ gibi akıyorken internet explorerda apışıp kalıyoruz.    

    //WordPress İçindekiler
add_filter('the_content', function ($content) {	
  if ( is_single ( ) )  {		
    global $icndklr;
    $icndklr = "<details class='icindekilers'><style>summary {color: #1c5e55;font-weight: 700;cursor:pointer;text-align:center;position: fixed;background-color: #f8f8f8;width: 100%;right:0;border-top: 1px solid #d8dbd6;border-bottom: 1px solid #d8dbd6;outline-color: transparent;} summary:hover{background-color:#eeeeee;}
  
.icndklrc-h1:hover, .icndklrc-h2:hover, .icndklrc-h3:hover, .icndklrc-h4:hover, .icndklrc-h5:hover, .icndklrc-h6:hover  {
  background-color:white; !important;
}

.icndklrc-h1 a.active, .icndklrc-h2 a.active, .icndklrc-h3 a.active, .icndklrc-h4 a.active, .icndklrc-h5 a.active, .icndklrc-h6 a.active,  {
  background-color:black ; !important;color:red;
}	

  html {
  scroll-behavior: smooth;
}
@media screen and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}	


  .icindekilers {
  transition: height 1s ease;
}
.icindekilers:not([open]) { height: 2em; }
.icindekilers[open] { max-height: 25em;margin-right: -20px;overflow-y: auto; }


  </style><summary>İçindekiler</summary>";
    
    
  $icndklr .= "<p style='height:33px; visibility:hidden;' />";
      
    $index = 1;		
     }
    $content = preg_replace_callback('#<(h[1-6])(.*?)>(.*?)</\1>#si', 
             function ($matches) use (&$index, &$icndklr) {
        $tag = $matches[1];
        $title = strip_tags($matches[3]);
        $hasId = preg_match('/id=(["\'])(.*?)\1[\s>]/si', $matches[2], $matchedIds);
        $id = $hasId ? $matchedIds[2] : $index++ . '-' . sanitize_title($title);
        $icndklr .= "<a href='#$id'><div style='border-bottom: 1px solid #dddddd;' class='icndklrc-$tag'><font style='color:#1c5e55;font-weight: 500;'>#</font>$title</div></a>";
        if ($hasId) { return $matches[0];}
        return sprintf('<%s%s id="%s">%s</%s>', $tag, $matches[2], $id, $matches[3], $tag);
    }, $content); $icndklr .= '</div></details>'; return $content;});
  
function icindekiler()
{   global $icndklr;
    return $icndklr;}
  2. İçerik Tablosu Functions Kodu Javascript Özellikli Akordiyon
    Bu kodumuz içindekilere menüsünü tıklayınca otomatik açtırmak için Javascript kullanmaktadır.
    Üç numaralı paylaştığım kod arasındaki fark, ekstra olarak java kullanmasıdır.    

    //WordPress İçindekiler
add_filter('the_content', function ($content) {	
  if ( is_single ( ) )  {		
    global $icndklr;
    $icndklr = "
<script>
var acc = document.getElementsByClassName('tocaccordion');
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener('click', function() {
    this.classList.toggle('tocactive');
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight) {
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + 'px';
    } 
  });
}
</script>

<style>
.tocaccordion {
color: #6d7896 !important;
font-weight: bold !important;
cursor: pointer;
background-color: #fefefe;
color: #444;
padding: 13px ;
width: 100%;
text-align: left;
outline: none;
border:none;
transition: 0.5s;
border-bottom: 1px solid #6d7896;
}
.tocactive, .tocaccordion:hover {
  background-color: #cccccc20;
  color:#b02125 !important;
  border-bottom: 1px solid #b02125;
}
.tocaccordion:after {
  content: '➕';
  float: right !important;
  font-size: 8px;
}
.tocactive:after {
  content: '➖';
}
.panel {
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
    div#execphp-2{
padding: 0;
} 
.icndklrc-h2 {
padding-left:15px !important;
}
.icndklrc-h3 {
padding-left:40px !important;
}
.icndklrc-h4 {
padding-left:60px !important;
}	
.icndklrc-h1:hover, .icndklrc-h2:hover, .icndklrc-h3:hover, .icndklrc-h4:hover, .icndklrc-h5:hover, .icndklrc-h6:hover  {
  background-color:#e4e4e490; !important;
}
.icndklrc-h1 a.tocactive, .icndklrc-h2 a.tocactive, .icndklrc-h3 a.tocactive, .icndklrc-h4 a.tocactive, .icndklrc-h5 a.tocactive, .icndklrc-h6 a.tocactive,  {
  background-color:black ; !important;color:red;
}	

  html {
  scroll-behavior: smooth;
}
@media screen and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}	
</style>

<button class='tocaccordion'><i class='fas fa-align-justify'></i> İÇİNDEKİLER</button>
<div class='panel'>
";
    $index = 1;		
     }
    $content = preg_replace_callback('#<(h[1-6])(.*?)>(.*?)</\1>#si', 
             function ($matches) use (&$index, &$icndklr) {
        $tag = $matches[1];
        $title = strip_tags($matches[3]);
        $hasId = preg_match('/id=(["\'])(.*?)\1[\s>]/si', $matches[2], $matchedIds);
        $id = $hasId ? $matchedIds[2] : $index++ . '-' . sanitize_title($title);
        $icndklr .= "<a href='#$id'><div style='border-bottom: 1px solid #e6e6e6;' class='icndklrc-$tag'><font style='color:#b02125;font-weight:700;'>#</font>$title</div></a>";
        if ($hasId) { return $matches[0];}
        return sprintf('<%s%s id="%s">%s</%s>', $tag, $matches[2], $id, $matches[3], $tag);
    }, $content); $icndklr .= '</div></div>'; return $content;});
  
function icindekiler()
{   global $icndklr;
    return $icndklr;}
  3. İçerik Tablosu Functions Kodu (Sadece Css Java Yok)
    Tıklayınca açılan akordion menü sadece css kullanır.
    Javascript kullanmadığı için sitenizde diğer kodlarla çakışma yapmaz.
    Çok hafif bir şekilde çalışacaktır. 
    Whatsappturk.com Sitemden Çalışan Örnek:

    //WordPress İçindekiler
add_filter('the_content', function ($content) {	
  if ( is_single ( ) )  {		
    global $icndklr;
    $icndklr = "<style>
  #tocac:target .tocac {
   display:none;
}

a.tocac {
    text-align: center;
  color:red;
}

a.tocac:hover {
  background: #009688;
  	color:white;
}

a.tockapat {
    text-align: center;
  color:white;
}




.toccollapse a {
  display: block;
  font-size: 1rem;
  font-weight: 500;
 padding: 5px;
}

.toccollapse a:before {
  position: absolute;
}

.toccollapse:target .toccontent {
  max-height: 100em;
   transition-timing-function: ease-in;
   transition: 1s;
}

.toccollapse:target a:before {
  transform: rotate(-180deg);
}

.toccollapse:hover {
  background: #009688;
}

.toccollapse a.tockapat {
  background: #009688;
  transition: 0s ease-in-out;
}

.toccontent {
  max-height: 0em;
  overflow: hidden;
  transition: 0s;
  transition-timing-function: ease-out;
  transform: translateY(0);
  opacity: 1;
}

.inner-toccontent {
  padding: auto;
}

    div#execphp-2{
padding: 0;
} 
.icndklrc-h2 {
padding-left:15px !important;color:black;
}
.icndklrc-h3 {
padding-left:40px !important;color:black;
}
.icndklrc-h4 {
padding-left:60px !important;color:black;
}	
.icndklrc-h5 {
padding-left:70px !important;color:black;
}	
.icndklrc-h6 {
padding-left:80px !important;color:black;
}	

.icndklrc-h1:hover, .icndklrc-h2:hover, .icndklrc-h3:hover, .icndklrc-h4:hover, .icndklrc-h5:hover, .icndklrc-h6:hover  {
  background-color:#009688; !important;color:white;
}
.icndklrc-h1 a.tocactive, .icndklrc-h2 a.tocactive, .icndklrc-h3 a.tocactive, .icndklrc-h4 a.tocactive, .icndklrc-h5 a.tocactive, .icndklrc-h6 a.tocactive,  {
  background-color:black ; !important;color:red;
}	

  html {
  scroll-behavior: smooth;
}
@media screen and (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}	
</style>

 <meta http-equiv='X-UA-Compatible' content='ie=edge' />
      <div class='toccollapse' id='tocac'>
        <a class='tocac' href='#tocac'><i class='fas fa-align-justify'></i> İÇİNDEKİLER</a>
        <div class='toccontent' href='#dribble'>
        <a class='tockapat' href='#tockapat'><i class='fas fa-align-justify'></i> İÇİNDEKİLER</a>
";
    $index = 1;		
     }
    $content = preg_replace_callback('#<(h[1-6])(.*?)>(.*?)</\1>#si', 
             function ($matches) use (&$index, &$icndklr) {
        $tag = $matches[1];
        $title = strip_tags($matches[3]);
        $hasId = preg_match('/id=(["\'])(.*?)\1[\s>]/si', $matches[2], $matchedIds);
        $id = $hasId ? $matchedIds[2] : $index++ . '-' . sanitize_title($title);
        $icndklr .= "<a href='#$id'><div style='border-bottom: 1px solid #e6e6e6;' class='icndklrc-$tag'><font style='color:#b02125;font-weight:700;'>#</font>$title</div></a>";
        if ($hasId) { return $matches[0];}
        return sprintf('<%s%s id="%s">%s</%s>', $tag, $matches[2], $id, $matches[3], $tag);
    }, $content); $icndklr .= '</div></div>'; return $content;});
  
function icindekiler()
{   global $icndklr;
    return $icndklr;}

Kodları functions dosyanıza eklemeniz gerekmektedir. Yukarıda da belirtmiştim yine link vereyim: Functions Ekleme

Functrions ekledikten sonra yapacağımız son bir hamle var.

<?= icindekiler()?>

İçindekiler tablosu, yazınızın neresinde gösterilsin istiyorsanız bu kodu yazının kod kısmında o bölgeye eklemeniz gerekiyor.

Son olarak kendi sitemde kullandığım yöntemi de anlatayım…

<?= icindekiler()?>

Bu kodu bileşenler kısmına ekleyerek sidebar kısmında içerik tablosu gösterebilirsiniz.

Sidebarı biliyorsunuz sitenin yan kolonları 🙂

DİKKAT: Normalde Sidebar kısmına php kod girerseniz kesinlikle çalışmaz. Bunun için hafif bir eklenti mevcut ki bu sorunu çözüyor.

Bunu eklemeden sidebarda bu php kodunu yazamazsınız.

Bu hafif eklenti sayesinde wordpress e php kod ekleyebilirsiniz.

Eklentimizin adı ve Linki:

Adı: Php Code Widget

Linki: https://wordpress.org/plugins/php-code-widget/

Bu eklenti sayesinde bileşenler kısmından <?= icindekiler()?> bu php kodunu ekleyebileceksiniz.

Bileşenler kısmını da biliyorsunuz. WordPress admin panelinde Görünüm / Bileşenler kısmında…

Sizin de sidebar bölgesini her zaman üstte tutuyor ise kodu sidebar kısmına eklerseniz yazı içinde dolaşsanız dahi içindekiler menüsü her zaman gözükür.

Bu gayet kullanışlı olacaktır.

Yazar: utquick

Merhaba, Bu site 2017 senesinde kurulmuştur: Kemal SUNAL 'ın 100 Numaralı Adam filminden feyz alınarak kurulan sitemiz, filmdeki Halk Kahramanı rolünü de bünyesine katarak dürüst paylaşımlarda bulunmaktadır. Bizi takip ediniz. Büyük bir aile oluyoruz. Tek güvencemiz paylaşımlarımızın samimiliğidir.

Ana Sayfa | Hakkında |

Bunlar da hoşunuza gidebilir...

4 Cevaplar

  1. Erhan dedi ki:
    11 Kasım 2020, 13:56

    Selamlar.
    Konu dışı olacak biraz ama anasayfaya seo eklentisi kullanmadan nasıl description ekleyebilirim?

    Yanıtla
    • utquick dedi ki:
      12 Kasım 2020, 16:11 
      function meta_desc_add(){
    if( is_home() || is_front_page() ){
    $meta_des = "Açıklama alanı";
    echo '<meta name="description" content="' . $meta_des . '" />'; 
        }
     }
    add_action( 'wp_head', 'meta_desc_add', 4 );
    
    function meta_single_add() {
 
     global $post;
 
    if (!is_singular()) {return; }
    elseif(!empty( $post->post_excerpt)) {
    echo "<meta name='description' content='$post->post_excerpt' />";
    } 
    else 
    { $meta = apply_filters('the_content', $post->post_content);
        $meta = strip_tags($meta);
        $meta = strip_shortcodes($meta );
        $meta = str_replace(array("\n", "\r", "\t"), ' ', $meta);
        $meta = substr($meta, 0, 160);
        echo "<meta name='description' content='$meta' />";
    } 
} 
    add_action('wp_head', 'meta_single_add');
      Yanıtla
    • utquick dedi ki:
      12 Kasım 2020, 16:14

      Verdiğim kodlar sadece açıklama içindir.

      Eklenti kullanmadan geniş çaplı seo işlemi için hazır yazılmış olan şu siteyi inceleyebilirsiniz:
      https://ibocan.net/wordpress-eklentisiz-seo/

      Buradaki kodlar functions içinde kullanılır.

      Functions nedir bilmiyorsanız:
      https://100numaraliadam.com/wordpress-functions-kodu-nedir-ve-nasil-eklenir/

      Yanıtla
      • Erhan dedi ki:
        12 Kasım 2020, 21:54

        Çok teşekkür ederim. Verdiğiniz linkleri detaylı incelemeye başlıyorum.
        İyi çalışmalar 🙂

        Yanıtla

Bir yanıt yazın

Cevabı alabilmek için E-Posta adresinizi doğru yazmaya özen gösteriniz.