WordPress, wp_editor Kullanımı (Using wp_editor)

Bu dersimizde WordPress editörunu kullanarak konu nasıl ekleyebiliriz. bunun anlatımını yapacağız. vakit kaybetmeden dersimize başlayalım.

WordPress editorunu çağırmak için wp_editor fonksiyonunu kullanıyoruz. önceki dersimizde bir form oluşturmuştuk bu forma wp_editor fonksiyonunu parametreleriyle birlikte ekliyoruz..

<?php 

/**

Template Name: sayfa

*/ 
  get_header();
   
?>
  <div style="width:700px" class="konu_ekle">
           <h2>Konu Ekle</h2>
           <input type="text"  style="width:500px" name="title" placeholder="başlık"> <br> <br>
     <?php wp_editor('','test',array(
        'textarea_rows' => 10
     ));?>
    <br> 
           <button  id="btn">Gönder</button>
   </div> 

 <?php  
get_footer();
?>

Yukardaki kodları tema dosyanızın içinde sayfa.php yada farklı bir isimdede oluşturabilirsiniz. oluşturduğunuz dosyanın içine ekleyin daha sonra yönetim panelinden bir sayfa oluşturun yan taraftaki şablon bölümünden sayfayı seçip kaydedin zaten önceki derste bunu anlatmıştık 

Bu editor tiny mce editorudur wordpress bu editoru kullanıyor.. php kısmında editor içindeki değeri çekmek için yani name değerini almak için fonksiyon içinde yazılan test parametresini çekme yeterlidir önrek göstermek gerekirse 

  if($_POST){
   
     echo $_POST['test'];

   }

yukarda gördüğünüz gibi kodları çekebilirsiniz. javascriptte bu değerleri almak biraz farklı tiny editorun bunun için oluşturduğu fonksiyonlar var. aşağıda gösterildi..

tinymce.get("test").getContent()

name değerini belirterek çekebilirsiniz. örnek kullanımıda bu şekilde

 <script>
             var button  = document.getElementById('button');

             button.addEventListener('click',function(){

                 var icerik = tinymce.get("test").getContent();
             });
  </script>

şimdi de önceki derste konu ekleme yaptığımız kodları wp_editore konu eklenecek şekilde değiştirelim zaten çok basit sadece content bölümüne editor kodlarını ekliyoruz..

var btn = document.querySelector('#btn');
  if(btn){

      btn.addEventListener('click',function(){

             var icerik = tinymce.get("test").getContent(); 

              var post = {
                        'title': document.querySelector('.konu_ekle [name="title"]').value,
                        'content': icerik, 
                        'status': "publish"
              }

        var ajax = new XMLHttpRequest();
        ajax.open('POST', 'http://localhost/wp-json/wp/v2/posts');
        ajax.setRequestHeader('X-WP-Nonce', token.nonce);
        ajax.setRequestHeader("Content-Type",'application/json;charset=UTF-8');
        ajax.send(JSON.stringify(post));
     
        ajax.onreadystatechange = function(){
             if(ajax.readyState == 4){

              if(ajax.status == 201){
              
               document.querySelector('.konu_ekle [name="title"]').value = '';
               
               tinymce.get("test").setContent("");
               
    
              } else {
               
                alert('hata');

              }

             }
        }

      });

  }

eklenen kodları kırmızı ile gösterdim hepsi bukadar. videolu anlatımıda aşağıdadır.. kafanıza takılan yerler olursa bize yorum olarak yazabilirsiniz. ben bütün yorumları görüyorum hangi konuya eklenmiş olursa olsun farketmez hepsi yönetim panelinde gözükür. herkese iyi günler dilerim..

arkadaşlar önceki derste anlattığım için değinmemişim ama function.php dosyasınada bu kodları eklemeniz gerekli yinede burda paylaşayım. burdaki kodlar hem js dosyasını wordpresse dahil eder hemde token oluşturur..

 <?php
 function _js()
 {
    wp_enqueue_script('js', get_template_directory_uri() . '/js/setting.js',null,1.0,true);

    wp_localize_script('js','token',array(
      'nonce' => wp_create_nonce('wp_rest')  
    ));

 }

 add_action('wp_enqueue_scripts','_js');

 ?>