Formularios

estilos-wordpress.php

<?php
/*
Plugin Name: Estilos WordPress
Description: Aprendiendo a utilizar la UI de WordPress.
*/

add_action( 'admin_menu', 'dp_ew_create_menu' );
function dp_ew_create_menu(){
  add_menu_page( 'WordPress UI', 'WordPress UI', 'manage_options', 'dp_ew_main_menu', 'dp_ew_main_menu_settings' );
}

function dp_ew_main_menu_settings(){
?>
<div class="wrap">
  <!-- Títulos
  <h1>Encabezado de tipo 1</h1>
  <h2>Encabezado de tipo 2</h2>
  <h3>Encabezado de tipo 3</h3>
  <h4>Encabezado de tipo 4</h4>
  <h5>Encabezado de tipo 5</h5>
  <h6>Encabezado de tipo 6</h6>
  -->

  <!-- Texto
  <p>Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut <a href="#">enim ad minim</a> veniam, quis <em>nostrud exercitation</em> ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in <code>reprehenderit in voluptate</code> velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

  <p class="screen-reader-text">Hola este texto no se ve pero hace que nuestra web sea más accesible.</p>
  -->

  <!-- Avisos
  <div class="notice notice-error">
    <p>Mensaje de error.</p>
  </div>
  <div class="notice notice-warning">
    <p>Mensaje de aviso.</p>
  </div>
  <div class="notice notice-success is-dismissible">
    <p>Mensaje de éxito.</p>
  </div>
  <div class="notice notice-info">
    <p>Mensaje informativo.</p>
  </div>
  -->

  <!-- Botones
  <p>
    <input class="button" type="submit" name="button-1" value="Botón básico">
    <input class="button button-primary" type="submit" name="button-2" value="Botón primario">
  </p>
  <p>
    <button class="button" type="button" name="button-3">Botón básico</button>
    <button class="button button-primary" type="button" name="button-3">Botón primario</button>
  </p>
  <p>
    <a href="#">Enlace normal</a>
    <a class="button" href="#">Botón básico</a>
    <a class="button button-primary" href="#">Botón primario</a>
  </p>
  -->

  <!-- Formularios -->
  <form action="" method="post">
    <table class="form-table">
      <tbody>
        <tr>
          <th scope="row">
            <label for="option-1">Opción 1</label>
          </th>
          <td>
            <input class="regular-text" type="text" name="option-1" id="option-1" value="">
            <p class="description">Texto explicativo. Con un <a href="#">enlace</a>.</p>
          </td>
        </tr>
        <tr>
          <th scope="row">
            <label for="option-2">Opción 2 con el texto más largo</label>
          </th>
          <td>
            <textarea class="regular-text" name="name" rows="3"></textarea>
          </td>
        </tr>
      </tbody>
    </table>
    <h2>Más opciones</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <textarea class="large-text" name="name" rows="3"></textarea>
    <p class="submit">
      <input class="button button-primary" type="submit" name="button-2" value="Guardar cambios">
    </p>
  </form>
</div>
<?php
}