Snippets Block en WordPress.org

Snippets Block en WordPress.org

El otro día comentaba que estaba haciendo un plugin para WordPress que permitiera añadir snippets como bloques en Gutenber.

Por fin el otro día aprobaron el plugin en el directorio de WordPress.org, así que ya sabéis, si os viene bien, podéis instalarlo en vuestras webs.

Por cierto, echad un ojo al script que venía incluído dentro del boilerplate que usé. Está genial para poder subir al SVN de WordPress.org los cambios realizados en GitHub. Etiqueta versiones, sube a WP.org, …

Snippets Blocks en WordPress.org

Actualiza tu theme de WordPress desde SVN

Si trabajas realizando proyectos en WordPress en el que el código se aloja en un servidor usando SVN, una forma sencilla de actualizar tu theme con los últimos cambios es mediante este sencillo y no-seguro plugin.

El plugin añade una opción de menú al Settings del Dashboard de WP, el cual te servirá para indicar el servidor SVN, usuario, contraseña y el path que corresponde a la carpeta themes de WP. El plugin se conectará al repositorio SVN y recuperará las carpetas que se encuentran en el path anterior y comprobará si las carpetas corresponden a themes instalados, mostrarás una lista con los themes encontrados junto a un botón que permite actualizar todo el theme.

Digo que no es seguro porque no controlo los permisos de los usuarios ni otras cuestiones, pero si estás interesado en ello supongo que no te costará mucho meterle mano al código:

// Adding Admin menu
if ( is_admin() ){
  add_action('admin_menu', 'svn_update_menu');
  add_action( 'admin_init', 'svn_update_register_settings' );

}

function svn_update_register_settings() {
  register_setting( 'svn_up_option-group', 'svn_username' );
  register_setting( 'svn_up_option-group', 'svn_password' );
  register_setting( 'svn_up_option-group', 'svn_repository' );
  register_setting( 'svn_up_option-group', 'svn_theme_path' );
  if ($_GET['page'] == 'svn-update/svn-update.php') {
    require ('phpsvnclient/phpsvnclient.php');
    $phpsvnclient = new phpsvnclient(get_option('svn_repository'), get_option('svn_username'), get_option('svn_password'));
    $files = $phpsvnclient->getDirectoryFiles('/');
    $svn_themes = array();

    $themes = array();

    foreach(get_themes() as $k=>$t) $themes[$t['Template']] = array($k, $t["Template Dir"]);

    if (is_array($files)) {
      foreach($files as $f) {
        if ($f['type'] == 'directory') {
          if (isset($themes[$f['path']])) $svn_themes[$f['path']] = $themes[$f['path']];
        }
      }
    }
    update_option('svn_themes', $svn_themes);
    if (isset($_GET['svn_update'])) {
      $path = $_GET['svn_update'];
      $theme_path = WP_CONTENT_DIR . '/themes/';
      $files = $phpsvnclient->getDirectoryFiles($path);
      foreach($files as $f) {
        if ($f['type'] == 'file') {
          file_put_contents($theme_path.$f['path'], $phpsvnclient->getFile($f['path']));
        }
      }
      add_action('admin_notices', 'showSVNUpdated');
    }
  }
}

function showSVNUpdated() {
  echo '

Theme updated

'; } function svn_update_menu() { add_options_page('SVN Update Options', 'SVN Update', 8, __FILE__, 'svn_update_options'); } function svn_update_options() { ?>

SVN Update Options

Username
Password
Repository
Theme path

Available Themes

No themes found in SVN repository instaled in WordPress

'; } else { echo '
    '; foreach($themes as $k=>$t) { echo '
  • /'.$k.' => '.$t[0].' Update
  • '; } echo '
'; } ?>

Este plugin necesita la librería PHP SVN Client para acceder al SVN, tan solo hay que meterlo en el mismo directorio que el plugin. Le faltan muchas cosas al plugin, pero ni tengo ganas ni tengo tiempo.

Añadir validaciones a Contact Form 7 en WordPress

Contact Form 7 es uno de los plugins de WordPress más utilizados, ya que nos permite incluir formularios de contacto de forma sencilla en nuestros blogs. El problema viene cuando queremos añadir validaciones a los campos del formulario. Una forma sencilla, quizás haya un plugin que lo haga, es editar el functions.php y añadir un action al init que compruebe los valores de $_POST y devolver el JSON oportuno:


add_action('init', 'comprueba_form', 1); // prioridad 1 para que actue antes que el plugin
function comprueba_form() {
  if ( 'POST' == $_SERVER['REQUEST_METHOD'] && 
       isset( $_POST['_wpcf7_is_ajax_call'] ) && 
       $_POST['_wpcf7'] == '1') { // _wpcf7 es el id del formulario para diferenciarlos
    // comprobaciones
    if ($_POST['campo'] != 'valor') {
      echo '{"mailSent":false,"into":"#wpcf7-f2-p813-o1","captcha":null,"message":"El campo 'campo' falla.","onSentOk":null}';
      exit();
    }
  }
}

linkNotify: plugin jQuery que indica que se carga un enlace

linkNotify es un plugin jQuery que permite modificar enlaces y mostrar un texto personalizado que indica que el enlace se está cargando. Algo que puede ser muy útil para aplicaciones en la que el usuario es algo básico y pincha y pincha en el enlace eternamente hasta que ve algún resultado sin esperar a que cargue la primera vez.

$('a').linkNotify('Espera mientras carga la pagina...');

linkNotify

Tutoriales para crear plugins en jQuery

Lista de manuales/tutoriales que nos ayudan a realizar plugins para jQuery:

jQuery Plugin Development – 10 Tutorials To Get Started

Vía / CSS Globe

Preview de imágenes en enlaces con jQuery

Curioso y sencillo plugin de jQuery que permite crear previews de imágenes enlazadas en etiquetas <a> tanto directamente en el atributo href como en el rel. Permite añadir estilos, un contenedor e incluso eventos (onload, onhide, onshow).

imagepreview.png

$('ul#fourth a').imgPreview({
containerID: 'imgPreviewWithStyles',
imgCSS: {
// Limit preview size:
height: 200
},
// When container is shown:
onShow: function(link){
$('' + $(link).text() + '').appendTo(this);
},
// When container hides:
onHide: function(link){
$('span', this).remove();
}
});

New jQuery plugin: ‘imgPreview’

Tutorial para crear un plugin jQuery

En varias ocasiones he mencionado plugins para jQuery, pero en esta ocasión se trata de cómo hacer un plugin para jQuery.

Independientemente de la complejidad propia del plugin, crear un plugin para jQuery es bastante sencillo, y en el tutorial nos indican paso a paso cómo desarrollarlo:

  • Primeros pasos
  • Propiedades de configuración
  • Constructor
  • Métodos adicionales

The Definitive Guide to Creating a Practical jQuery Plugin