Hinzufügen eines komplexen html/css/js-Elements zu einer einzelnen Wordpress-Seite

Question

Ich habe eine Website (Blog) mit einem Thema erstellt; Die Website benötigt eine Seite mit einem Einheiten-Converter, also habe ich weitergemacht und eine mit HTML, CSS und Vanilla JS auf Codepen erstellt. http://codepen.io/jacobbanner/pen/oxeoqp

Codepen above ^^^ 

Ich habe auch die Wordpress-Seite für den Konverter Setup hier: http://engineeringbible.com/index.php/converter/

Ich habe Probleme, einen Weg zu finden den Konverter ‚auf‘ Wordpress-Seite zu gelangen. Ich habe versucht, es der bearbeiten Seite Textbereich hinzufügen, und auch den Abschnitt "zusätzlichen Code". Die HTML-Elemente werden angezeigt, aber das Styling ist völlig falsch.

Muss ich es als separate Einheit wie ein Plugin oder ein Widget erstellen und dann in die Seite einfügen? Oder gibt es einen bestimmten Speicherort auf dem Server und ich muss meine separate js und css platzieren?

Answer 1

Ich hatte das gleiche Problem. Am Ende bearbeitete ich die CSS-Datei des Themas und fügte meine benutzerdefinierten Klassen hinzu, fügte meine js zur js-Datei des Themas hinzu und fügte html in den Tab "zusätzlicher Code" im Editor auf der Seite ein. Ich musste die Positionierungseinstellungen ein wenig anpassen, aber es hat funktioniert. Nicht sicher, dass dies die robusteste Lösung ist, aber es hat für mich funktioniert.

Answer 2

Es gibt viele Möglichkeiten, dies zu tun. Einer der einfachsten Wege, dies zu erreichen - erstellen Sie einfach separate CSS- und JS-Dateien mit Ihrem Code und fügen Sie diese Dateien in Ihre themes-Datei header.php ein.

Sie können auch separate Themendatei für diese Seite ("Custom Page Templates" -Abschnitt) erstellen:

https://codex.wordpress.org/Theme_Development

Answer 3

In Ihrem functions.php oder in separaten Datei, die Sie hierfür sind hinzuzufügen:

//[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'); 

Jetzt in Ihrem Thema js Ordner erstellen converter.js Datei und fügen Sie Ihr Javascript. Fügen Sie in Ihrer Datei css Ihr Styling hinzu und Sie sind fertig.

Jetzt habe ich versucht es, aber ich habe einen Fehler

Uncaught TypeError: document.getElementByClass is not a function

auf der Linie 194, so dass Sie vielleicht, dass out überprüfen möchten. Aber das ist das Wesentliche davon ...