Johan de Bruin » header hook wordpress

Crear y configurar un widget de wordpress

Johan de Bruin — Fri, 29 Jan 2010 16:17:42 +0000

Para crear un widget con wordpress solo debemos definirlo en el archivo donde alojemos el plugin de wordpress, no obstante, un widget permite ajustar una serie de opciones, en el siguiente codigo de programación aprenderemos a aprovechar el potencia de widgets de wordpress para que podamos añadir facilmente aplicaciones en los sidebar de tu blog.

  function miplugin_Widget($args = array())
  {
      global $user_ID, $user_identity, $wp_wall_plugin_url;
      // extract the parameters
      extract($args);
 
      // get our options
      $options = get_option('miplugin');
      $titulo= $options['miplugin_titulo'];
 
      // Estas variables son por cuestión de compatibilidad del theme
      echo $before_widget;
      echo $before_title . $titulo. $after_title;
 
      // El texto y código que inluirá nuestro widget
      echo "HOLA MUNDO!";
 
      echo $after_widget;
  }
 
//Desarrollamos lo que debe hacer el plugin al activarse
function miplugin_init()
{
     register_sidebar_widget('Nombre plugin','miplugin_Widget');
     register_widget_control('Nombre plugin','miplugin_WidgetControl');
}
//Acción que indica la función de activación del plugin
add_action('init','miplugin_init');

Con estas lineas de código podemos cambiar las opciones del plugin con tal de que podamos establecer el título del widget que aparecerá en el sidebar.

function miplugin_WidgetControl()
{
      // Obtenemos los valores preestablecidos
      $options = get_option('miplugin');
      // Cambiamos las opciones en caso de que haya un post
      if ($_POST["miplugin_submit"]) {
          // retireve wall title from the request
          $options['miplugin_titulo'] = strip_tags(stripslashes($_POST["miplugin_titulo"]));
          // update the options to database
          update_option('miplugin', $options);
      }
      $titulo = $options['titulo'];
      // Lo que se imprime en las opciones del widget
      ?>

Titulo:  echo $titulo; ?>" />


     
}

Integrar jquery con wordpress

Johan de Bruin — Sun, 24 Jan 2010 20:01:13 +0000

WordPress permite gracias a su api usar códigos de jquery, con esta libreria de javascript permitirás establecer una nueva forma de funcionamiento de las páginas web. Para usar jquery tendremos que invocar su código contenido en un archivo .js gracias a una serie de funciones que wordpress nos proporciona.

Para poder invocar el directorio del plugin, podemos usar el siguiente snnipet de wordpress:

$root_codigo = trailingslashit( WP_PLUGIN_URL.'/'. dirname( plugin_basename(__FILE__) ));

Ahora que ya tenemos establecida la url de la base donde se mantendrán distintos códigos, (como el .js con el jquery), podemos decir a wordpress que incluya susodicho código entre sus códigos:

function codigo() {
wp_enqueue_script('jquery');
wp_enqueue_script('un_nombre_script', $root_codigo.'/codigojquery.js', array('jquery'));
//Linea de código para pasar parametros al jquery
wp_localize_script('un_nombre_script', 'clase', array('algun_parametro' =&gt; 'valor'));
}
add_action('wp_print_scripts', 'codigo');

Usamos wp_localize_script para pasar los parámetros a la función jquery, en este caso la ruta del plugin, si quisieramos acceder en el jquery a dicho parámetro podemos usar la clase que enviamos asi: clase.algun_parametro.

Por último, un ejemplo de la estructura que podria tener codigojquery.js:

$(document).ready(function())
{
     $("a").click(function()
     {
          alert("Gracias por tu visita!");
     });
});

Por último, aquí un video de introducción sobre jquery:

Añadir codigos al header en wordpress

Johan de Bruin — Sun, 17 Jan 2010 19:20:57 +0000

A menudo querremos integrar dentro de la estructura distintos códigos para poder añadir comportamientos a la página web, (como algo de CSS o Javascript). Si no queremos andar añadiendo código al header.php del theme, podemos añadirselo gracias a un fabuloso hook que integra la API de WordPress.

function estilo_css() {
     body { background-color:#ffffff !important; }
}
add_action('admin_head', 'estilo_css');