Tek bir Wordpress sayfasına karmaşık bir html/css/js öğesi ekleme

Question

Bir temayı kullanarak bir web sitesi (blog) oluşturdum; Web sitesinin bir birim dönüştürücü ile bir sayfaya ihtiyacı var. Bu yüzden ileriye gittim ve Codepen'de html, css ve vanilla JS kullanarak bir tane oluşturdum. http://engineeringbible.com/index.php/converter/

sorun wordpress sayfa 'üzerine' dönüştürücü almak için bir yol bulma yaşıyorum: http://codepen.io/jacobbanner/pen/oxeoqp

Codepen above ^^^ 

Ben de burada dönüştürücü kurulum için wordpress sayfa var. düzenleme sayfasını metin alanına ve ayrıca 'ek kod' bölümüne eklemeye çalıştım. Html öğeleri görüntülenir, ancak stil tamamen yanlıştır.

Eklenti veya pencere öğesi gibi ayrı bir varlık olarak oluşturmanız ve sonra sayfaya eklemesi gerekir mi? Ya da belki de sunucuda belirli bir dosya konumu var benim ayrı js ve css yerleştirmem gerekiyor?

Answer 1

Temanın css dosyasını düzenleyip özel sınıflarımı ekledim, j'leri tema js dosyasına ekledim ve html'yi sayfadaki editördeki 'ek kod' sekmesine yapıştırdım. Konumlandırma ayarlarını biraz değiştirdim, ama işe yaradı. Bunun en sağlam çözüm olduğundan emin değilim, ama benim için çalıştı.

Answer 2

Bunun nasıl yapılacağının birçok yolu vardır. Bunu gerçekleştirmenin en kolay yollarından biri - kodunuzla ayrı CSS ve JS dosyaları oluşturun ve bu dosyaları temalar header.php dosyanıza ekleyin.

Ayrıca bu sayfa için ayrı tema dosyası oluşturabilirsiniz ("Özel Sayfa Şablonları" bölümü): En functions.php yılında veya ayrı bir dosyaya

https://codex.wordpress.org/Theme_Development

Answer 3

Bu eklemek şunlardır:

//[converter_shortcode] 

add_action('init', 'register_my_script'); 
add_action('wp_footer', 'print_my_script'); 

function register_my_script() { 
    wp_register_script('converter_script', get_template_directory_uri() . '/js/converter.js', array(), '', true); 
} 

function print_my_script() { 
    global $add_my_script; 

    if (! $add_my_script) 
     return; 

    wp_print_scripts('converter_script'); 
} 

function converter_function($atts){ 
    global $add_my_script; 

    $add_my_script = true; 

    return ' 
    <div class="converter-wrapper"> 
     <h1>ENGINEERING UNIT CONVERTER</h1> 

     <form name="property_form"> 
     <span> 
      <select class="select-property" name="the_menu" size=1 onChange="UpdateUnitMenu(this, document.form_A.unit_menu); UpdateUnitMenu(this, document.form_B.unit_menu)"> 
      </select> 
     </span> 
     </form> 

     <div class="converter-side-a"> 
     <form name="form_A" onSubmit="return false"> 
      <input type="text" class="numbersonly" name="unit_input" maxlength="20" onKeyUp="CalculateUnit(document.form_A, document.form_B)"> 
      <span> 
      <select name="unit_menu" onChange="CalculateUnit(document.form_B, document.form_A)"> 
      </select> 
      </span> 
     </form> 
     </div> 

     <div class="converter-side-b"> 
     <form name="form_B" onSubmit="return false"> 
      <input type="text" class="numbersonly" name="unit_input" maxlength="20" onkeyup="CalculateUnit(document.form_B, document.form_A)"> 
      <span> 
      <select name="unit_menu" onChange="CalculateUnit(document.form_A, document.form_B)"> 
      </select> 
      </span> 
     </form> 
     </div> 
    </div>'; 

} 
add_shortcode('converter_shortcode', 'converter_function'); 

Şimdi temanızda js klasörünü oluşturun ve converter.js dosyasını bulun ve javascript'inizi ekleyin. css dosyanızda stilinizi ekleyin ve işiniz bitti.

Şimdi denedim ancak bir hata

hattı 194 üzerinde

Uncaught TypeError: document.getElementByClass is not a function

var, bu yüzden bunu kontrol etmek isteyebilirsiniz. Ama bu onun özüdür ... Bu aynı problemi yaşadım: