0

estoy aprendiendo a hacer plugins para wordpress, lo que quiero lograr es que con el input tome un setAttribute pero no tengo idea de como hacerlo, les agradezco la ayuda y si tienen alguna duda pueden preguntar sin ningún problema, les dejo el código completo por si necesitan más información(He de mencionar que el plugin será gratuito y el código totalmente visible publicamente en GitHub)

<?php
/*
Plugin Name: Footerdit
Plugin URI: diweb.website
Description: Editing the footer text
Version: 1.0
Author: Liam Redes
Author URI: diweb.website
License: GPLv2
*/

register_activation_hook(__FILE__, 'default_options');

function default_options()
{
  if (get_option('class') == false)
  {
    add_option('class', 'footer_text');
  }
}



function menu()
{
  $page = add_options_page('Footerdit', 'Footerdit', 'manage_options', 'Footerdit-conf', 'process_page');
}
add_action('admin_menu', 'menu');

add_action('admin_post', 'save');

  function save()
  {
    if(!current_user_can('manage_options'))
    {
      wp_die('Not Allowed');
    }

    check_admin_referrer('token');

    $code = sanitize_text_field($POST['code']);

    update_option('account', $code);

    wp_redirect(add_query_arg('page', 'Footerdit-conf', admin_url('option-general.php')));
    exit;
  }

  function process_page()
{
  $code = get_option('class');
  ?>

  <div class="wrap">
    <h2>Footerdit</h2>
    <form action="admin-post.php" method="post">
      <input type="hidden" name="action" value="save">

      <?php wp_nonce_field('token'); ?>

      <input type="text" placeholder="Enter the name class of your footer" value="<?php echo esc_html($code); ?>">
      <input type="text" id="f_text" placeholder="Enter the new Footer Text" value="<?php echo esc_html($code); ?>">
      <input type="submit" class="button-primary" value="Save">
    </form>
  </div>
  <?php
}

add_action('wp_footer', 'footer_script');

function footer_script()
{
  echo '<script type="text/javascript">'
   , 'document.addEventListener("DOMContentLoaded", () => {'
   , ' var footer_text = document.getElementsByClassName("powered-by")[0];'
   , 'footer_text.setAttribute("id", "footer_text");'
   , 'footer_text_id = document.getElementById("footer_text");'
   . 'footer_text_id.innerHTML = "<p> Nuevo contenido </p>";'
   , '});'
   , '</script>';
} 

?>

Quiero que el value del input lo tome mediante javascript y al guardarlo se genere el nuevo innerHTML, eso es lo que estoy buscando, no duden en preguntar cualquier cosa(reitero) no hay ningún problema, gracias de ante mano

1

1 respuesta 1

1

Puedes escuchar los envíos del formulario, para ello haremos lo siguiente:

En el HTML daremos un id al botón del formulario.

HTML

<form action="admin-post.php" method="post">
  <input type="hidden" name="action" value="save">

  <?php wp_nonce_field('token'); ?>

  <input type="text" placeholder="Enter the name class of your footer" value="<?php echo esc_html($code); ?>">
  <input type="text" id="f_text" placeholder="Enter the new Footer Text" value="<?php echo esc_html($code); ?>">
  <input type="submit" class="button-primary" value="Save" id="btnSave">
</form>

Javascript

Y en el código Javascript, escucharemos los clicks del botón y haremos el cambio que requieres.

La función footer_script() deberá ser modificada de este modo:

function footer_script()
{
  echo '<script type="text/javascript">'
   , 'document.addEventListener("DOMContentLoaded", () => {'
   , 'var btnSave = document.getElementById("btnSave");'
   , 'btnSave.addEventListener("click", function(e){
   , 'e.preventDefault();'
   , 'var footer_text = document.getElementsByClassName("powered-by")[0];'
   , 'footer_text.setAttribute("id", "footer_text");'
   , 'var f_text = document.getElementById("f_text");'
   , 'footer_text_id = document.getElementById("footer_text");'
   , 'footer_text_id.innerHTML = f_text.value;'
   , '});'
   , '});'
   , '</script>';
} 

Post-Data

Debo decir que esta forma de escribir scripts como cadenas es poco elegante y poco práctica, además de exponer el código a errores. Cuando esto funcione considera usar otras herramientas de Wordpress como enquee para incluir archivos. Así, escribirías un archivo Javascript y lo conectarías con el plugin. Esto, además de permitir un código limpio, te permite re-utilizar tus scripts en otras partes y tener todo mejor ordenado.

10
  • De esta manera obtengo el value del input y reemplaza el innerHTML según lo que puse en el Input? el 6 ago. 2021 a las 3:28
  • @DavidZaramoza de esa manera, cuando hagas click en el botón del formulario, debería hacerse el cambio, si es que no hay otros errores.
    – A. Cedano
    el 6 ago. 2021 a las 3:28
  • El cambio se hace, pero yo lo que busco es que se haga el cambio según lo puesto en el Input el 6 ago. 2021 a las 3:29
  • @DavidZaramoza ¿cómo según lo puesto en el input? ¿Según lo puesto en cuál de los input?
    – A. Cedano
    el 6 ago. 2021 a las 3:34
  • En el segundo el que tiene la id="f_text" el 6 ago. 2021 a las 3:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.