Instala Certificados SSL de Let’s Encrypt en WordPress

/0 Comentarios/en , , /por

Hace un tiempo escribimos acerca de lo importante que es tener un Certificado SSL en nuestro sitio web, por lo que en este breve tutorial veremos como instalar un certificado de Let’s Encrypt utilizando nuestro CPanel y la configuración de WordPress para forzar la conexión HTTP a HTTPS.

Instalando el Certificado SSL de Let’s Encrypt (CPanel)

Ingresamos al Cpanel y seguimos los pasos que vemos en la siguiente captura:

[img src=»https://mundosica.com/wp-content/uploads/2018/03/01-instalar-certifiacado-SSL-Lets-Encrypt.png» align=»aligncenter» url=»https://mundosica.com/wp-content/uploads/2018/03/01-instalar-certifiacado-SSL-Lets-Encrypt.png» fancybox=»yes» effect=»fadeIn»]

  1. Vamos hasta el modulo de «Seguridad».
  2. Damos clic en «Let’s Encrypt»

 

En la siguiente pantalla lo primero que nos muestra es una lista de los dominios y subdominios en los que hemos instalado certificados, si es la primera vez que instalaremos un certificado esta lista estara en blanco, la siguiente lista es de los dominios y subdominios a los que podemos instalar un certificado, por lo que elegiremos el dominio en el cual queremos instalar y daremos clic en «Issue».

[img src=»https://mundosica.com/wp-content/uploads/2018/03/02-instalar-certifiacado-SSL-Lets-Encrypt.png» align=»aligncenter» url=»https://mundosica.com/wp-content/uploads/2018/03/02-instalar-certifiacado-SSL-Lets-Encrypt.png» fancybox=»yes» effect=»fadeIn»]

 

Marcaremos todas las casillas para incluir Cpanel y subdominios en el certificado e instalamos

[img src=»https://mundosica.com/wp-content/uploads/2018/03/05-instalar-certifiacado-SSL-Lets-Encrypt.png» align=»aligncenter» url=»https://mundosica.com/wp-content/uploads/2018/03/05-instalar-certifiacado-SSL-Lets-Encrypt.png» fancybox=»yes» effect=»fadeIn»]

[img src=»https://mundosica.com/wp-content/uploads/2018/03/03-instalar-certifiacado-SSL-Lets-Encrypt.png» align=»aligncenter» url=»https://mundosica.com/wp-content/uploads/2018/03/03-instalar-certifiacado-SSL-Lets-Encrypt.png» fancybox=»yes» effect=»fadeIn»]

 

Ahora en nuestro listado de dominios con certificados nos aparecerá el que acabamos de instalar, también podemos observar la fecha en que caduca el certificado (cada 3 meses), pero no hay de que preocuparse, los certificados Let’s Encrypt se renuevan automáticamente.

[img src=»https://mundosica.com/wp-content/uploads/2018/03/04-instalar-certifiacado-SSL-Lets-Encrypt.png» align=»aligncenter» url=»https://mundosica.com/wp-content/uploads/2018/03/04-instalar-certifiacado-SSL-Lets-Encrypt.png» fancybox=»yes» effect=»fadeIn»]

Configurando WordPress HTTP a HTTPS

Toca dar una manita a muestro WordPress para forzar la conexión segura, para esto hay que modificar el archivo .htacces, eliminar todo el contenido mixto (imágenes, audios y todos los recursos con HTTP), lo podemos hacer manualmente o hacer uso de algún par de plugins.

En esta ocasión utilizaremos plugins, ya que algunos de nosotros no nos llevamos bien con el código, iniciemos:

El primer plugin a instalar es Really Simple SSL, nos permitira forzar la conexión segura tanto a visitantes del sitio (.htacces) como a administradores (wp-config.php)

[img src=»https://mundosica.com/wp-content/uploads/2018/03/06-instalar-certifiacado-SSL-Lets-Encrypt.png» align=»aligncenter» url=»https://mundosica.com/wp-content/uploads/2018/03/06-instalar-certifiacado-SSL-Lets-Encrypt.png» fancybox=»yes» effect=»fadeIn»]

 

Una vez activo el plugin no tenemos que configurar nada, lo que si es recomendable es desactivar «Activar redirección Javascript a SSL» ubicada en Ajustes>SSL>Ajustes, esta opcion forza la conexión segura por javascript cuando no se pueden modificar los archivos .htacces y wp-config.php, por lo que si todo marcha bien no es necesario tener activada esa opcion, ya que ralentiza un poco al cargar javascript.

[img src=»https://mundosica.com/wp-content/uploads/2018/03/07-instalar-certifiacado-SSL-Lets-Encrypt.png» align=»aligncenter» url=»https://mundosica.com/wp-content/uploads/2018/03/07-instalar-certifiacado-SSL-Lets-Encrypt.png» fancybox=»yes» effect=»fadeIn»]

 

Ahora podemos comprobar que nuestro sitio cargue correctamente con HTTPS, basta con actualizar en nuestro navegador, si hasta aqui todo va correctamente podremos ver el tan aclamado candado verde junto a nuestra URL, pero aun falta por trabajar, si damos clic en dicho candado veremos una pequeña advertencia de nuestro por parte de nuestro navegador, o tal vez nos muestre un candado en amarillo, todo depende del navegador que estemos usando.

[vc_gallery type=»image_grid» images=»1201,1202″ img_size=»full» css_animation=»fadeIn»]

 

Esto es debido a todo el contenido mixto que aun tenemos en nuestro sitio, es decir imágenes, audios, vídeos, etc. Todo aquel recurso que hemos agregado manualmente y que el plugin anterior no pudo arreglar (si puede, pero esa opción es de paga), estos elementos regularmente conservan el HTTP, para cambiar a HTTPS tendriamos que ir entrada por entrada, o pagina, cambiando la URL de cada elemento, nunca acabaríamos por lo que nuestra mejor opción es hacerlo directamente desde la base de datos, lo sé, si no queremos meter mano al codigo menos a la base de datos, para eso esta Search & Replace, un plugin que nos permitira cambiar todas esas url’s en unos minutos.

[img src=»https://mundosica.com/wp-content/uploads/2018/03/09-instalar-certifiacado-SSL-Lets-Encrypt.png» align=»aligncenter» url=»https://mundosica.com/wp-content/uploads/2018/03/09-instalar-certifiacado-SSL-Lets-Encrypt.png» fancybox=»yes» effect=»fadeIn»]

 

Antes de empezar a trabajar con la base de datos, ya sea con phpMyAdmin o con un plugin, debes de hacer un respaldo por si algo no sale como queremos, Search & Replace nos permite hacer el respaldo desde WordPress, simplemente tenemos que seguir los siguientes paso:

  1. Ir a Herramientas
  2. Busca y reemplaza
  3. Dar clic en el botón Crear archivo SQL, esto genera un archivo SQL, el cual es el respaldo de nuesta base de datos.

[img src=»https://mundosica.com/wp-content/uploads/2018/03/10-instalar-certifiacado-SSL-Lets-Encrypt.png» align=»aligncenter» url=»https://mundosica.com/wp-content/uploads/2018/03/10-instalar-certifiacado-SSL-Lets-Encrypt.png» fancybox=»yes» effect=»fadeIn»]

 

Generalmente al momento de guardar el respaldo le agrego old_url al nombre del archivo para diferenciar entre el respaldo y el archivo con los cambios, quedando algo asi; mundosica_old_url.sql.

[img src=»https://mundosica.com/wp-content/uploads/2018/03/11-instalar-certifiacado-SSL-Lets-Encrypt.png» align=»aligncenter» url=»https://mundosica.com/wp-content/uploads/2018/03/11-instalar-certifiacado-SSL-Lets-Encrypt.png» fancybox=»yes» effect=»fadeIn»]

 

Viene lo mejor, cambiar la url de nuestro sitio de http://midominio.com a https://midominio.com esto eliminara el contenido mixto, esta opción la encontramos en la segunda pestaña «Busca y reemplaza» una vez ahí los pasos a seguir son:

  1. En «Buscar por» ingresamos nuestro dominio actual, con HTTP, http://midominio.com y en «Reemplazar con» con HTTPS, es decir https://midominio.com
  2. Elegimos todas las tablas, así nos aseguramos que el reemplazo de URL sea completo.
  3. Exportamos la base de datos en un archivo SQL, al archivo generado le agregamos new_url (mundosica_new_url.sql), para diferenciarla del respaldo guardado anteriormente.
    Si la base de datos es muy grande podemos usar la compresión GZ para agilizar la descarga.
  4. Finalmente damos clic en el botón «Buscar y reemplazar» para generar nuestro archivo y descargarlo.

[img src=»https://mundosica.com/wp-content/uploads/2018/03/12-instalar-certifiacado-SSL-Lets-Encrypt.png» align=»aligncenter» url=»https://mundosica.com/wp-content/uploads/2018/03/12-instalar-certifiacado-SSL-Lets-Encrypt.png» fancybox=»yes» effect=»fadeIn»]

 

El paso final es reemplazar nuestra base de datos con la base con los cambios en la URL, para estos procedemos a:

  1. Damos clic en la tercer pestaña «Importar SQL«
  2. Clic en el boton «Examinar«, buscamos el archivo SQL o GZ que descargamos en el proceso anterior (mundosica_new_url.sql)
  3. Clic en «Importar archivo SQL«

[img src=»https://mundosica.com/wp-content/uploads/2018/03/13-instalar-certifiacado-SSL-Lets-Encrypt.png» align=»aligncenter» url=»https://mundosica.com/wp-content/uploads/2018/03/13-instalar-certifiacado-SSL-Lets-Encrypt.png» fancybox=»yes» effect=»fadeIn»]

El plugin nos indicara que el proceso fue satisfactorio, ahora tienes un sitio con un Certificado SSL funcional, sin advertencias o candados naranjas, ¡Felicidades!

Automatizando la validando sintaxis y estándar de codigo WordPress mediante el sistema de enganchaje de GIT

/0 Comentarios/en , , /por

Hace poco escribí un post explicando como instalar CodeSniffer para validar estilo de codificación WordPress . Ahora me gustaría explicar como automatizar dicha validación mediante los puntos de enganche de sistema git.

 

Puntos de enganche Git Información previa

Git es un sistema de control de versiones que nos ofrece un sistema de  hooks el cual es un mecanismo que nos sirve para relacionar scripts de usuario que serán ejecutados en el momento que sucede algo relevante, los ganchos(hooks) básicamente se dividen en 2 tipos los que se ejecutan en el cliente los cuales están relacionados con operaciones como confirmación(commits), combinaciones(merge). El otro tipo son los que se ejecutan en el servidor estos están relacionados con cuestiones de recepción de confirmaciones(push).

Por ejemplo en nuestro servidor podríamos programar un script que cuando reciba una confirmación este genere un mensaje con la descripción de los cambios y lo envié por correo electrónico a un grupo de desarrolladores ó lo publique automáticamente en alguna pagina (como funcionan las contribuciones en el página del ADSL). Por otra parte en el cliente podríamos relacionar otro script que revise que nuestras contribuciones cumplan ciertas reglas, tratare de explicar este funcionamiento para esto observe el siguiente diagrama:

Diagrama gancho pre-commit del git
Diagrama gancho pre-commit del git

Como se puede ver podemos relacionar el hook pre-commit el cual se ejecuta antes de que la confirmación sea realizada, este gancho también es útil para preparar el mensaje de confirmación o para realizar pruebas.

Preparando el gacho pre-commit manos a la obra

Bueno para que un gancho sea ejecutado debe de existir un script que cumpla 2 cosas:

  1. Deberá tener el nombre y ubicación adecuada
  2. Deberá tener permisos de ejecución.

Los ganchos se encuentran ubicados en la carpeta .git/hooks/ estos son disparados en función de su nombre, en este caso deseamos definir el gancho pre-commit el cual deberá ser ejecutable, como se puede ver en las siguientes instrucciones:

# Creamos el archivo si no existe
touch .git/hooks/pre-commit

# Le damos permisos de ejecución
chmod +x .git/hooks/pre-commit

Agregando reglas de validación de wordpress Ocupando codeSninffer + git

Si bien con codeSninffer podemos validar nuestros archivos en PHP siempre es mas cómodo automatizar dicha validación, ademas que puede llegar a ser mas seguro ya que se en alguna ocasión se nos podría llegar a olvidar revisar determinado archivo y enviarlo por error.  Suponiendo que ya tenemos codeSninfer y el estándar de wordpress instalado ahora agregamos al archivo  .git/hooks/pre-commit el siguiente contenido:

 

#!/bin/bash
#
# Revisa el código cumpla simples reglas
# Mayor información: 
#

# Lista de colores a utilizar
Color_Off='\e[0m'       # Resetea el color
BRed='\e[1;31m'         # Rojo
BPurple='\e[1;35m'      # Morado
error=0;

# Revisa que el archivo no contenga espacios en blanco al final de las lineas
function revisar_espacios () {
	grep -qE '\s+$' $1
	if [ "$?" -eq "0" ]
	then
		let error=error+1
		echo -ne "${BRed}Error ${error}:${Color_Off}";
		echo -ne " ${BPurple}Espacios al final${Color_Off} -> ";
		grep -HnEo --color '\s+$' $1
	fi;
}

# Revisa que los archivos en PHP tengan sintaxis correcta.
function revisar_sintaxisPHP() {
	phpcs --standard=WordPress -s $1
}

# Concluye el script y muestra el numero de errores(si existen)
function salir_y_mostrar_errores() {
	if [ "$error" -ne "0" ]
	then
		echo -e "${BRed}Existen $error errores";
	fi;
	exit $error;
}

#################################################################################
# Apartir de la extensión vamos a validar los archivos por confirmar            #
#################################################################################
for archivo in $(git diff --cached --name-only)
do
	extension=$(basename $archivo | grep -Eo '\.[a-z0-9]+$' | sed 's/\.//g')
	case $extension in
		php)
			 revisar_espacios $archivo;
			 revisar_sintaxisPHP $archivo;
			 ;;
		js|json|sql|css|md|txt|html)
			 revisar_espacios $archivo;
			 ;;
	esac
done;

salir_y_mostrar_errores;

Puede descargar este código de:
https://gist.github.com/4123345

Saltándonos la validación

Quizás por alguna razón deseamos realizar determinada confirmación pero que no pase por la validación. Bien para hacer esto y si lo pensamos podríamos renombrar el archivo  pre-commit por pre-commit.sample(este nombre lo trae por defecto) o quitarle permisos de ejecución. Pero.. git ofrece una mejor alternativa que es realizar la confirmación sin verificaciones en la cual ni siquiera examina la existencia de hooks y mucho menos son ejecutados, veamos como se realiza esta:

git commit --no-verify

Instalando CodeSniffer para validar estilo de codificación WordPress

/0 Comentarios/en , , /por

En ocasiones cuando se desarrolla código en equipo o se desarrolla determinado código que se va a compartir, este debe de cumplir ciertas reglas que ayudan a la comunidad ha seguir una buena calidad y claridad de código.

Quizás uno de los mayores problemas de PHP es su flexibilidad ya que a diferencia de lenguajes como Python ó Ruby no define reglas de estilo de codificación en su sintaxis. Por otra parte si bien las nuevas versiones de PHP(la versiones 5 y 6) tienen gran soporte para programación orientada a objetos y programación funcional  tampoco define un tipo de programación en especifico. Al final de cuentas se termina cargando la responsabilidad de la definición de estas reglas a las comunidades PHPeras las cuales en ocasiones hacen caso omiso de dicha responsabilidad y terminan siendo todo un caos su código y con el tiempo el deterioro de sus proyectos. Desgraciadamente por unos pocos se suele generalizar a los desarrolladores PHP como malos.

Critica a php

Critica a php

PHP CodeSniffer al rescate No todo esta perdido

Pero no todo esta perdido, entre las paquetes que nos ofrece PEAR esta uno que en especial me gusta mucho y que suelo ocuparar el cual se denomina php code sninfer . El cual como su nombre nos dice «espía nuestro código en php» para determinar si cumple con determinadas reglas de estilos.

 

Instalando code Sninfer en linuxprobado en trisquel y ubuntu

Para instalar codeSninfer solo requeres dpear install PHP_CodeSniffere ejecutar las siguientes instrucciones siendo usuario privilegiado(root):

#Instalamos pear esto sólo en caso de no existir
aptitude install -y php-pear

#Mediante PEAR instalamos PHPcodeSninfer y todas sus dependencias
pear install --alldeps PHP_CodeSniffer

Listo eso es todo!. Los estilos que nos instala por defecto son los siguientes:

├── Generic
├── MySource
├── PEAR
├── PHPCS
├── PSR1
├── PSR2
├── Squiz
└── Zend

Agregando estilo de codificación en wordpress

WordPress es una de las comunidades PHP más maduras con mas de 58,024,602 sitios instalados con dicha plataforma y miles de programadores contribuyendo todos los días, por lo cual requieren de reglas para llevar un mejor control y calidad en dichas contribuciones. Por lo cual worpdress definieron su propio estándar de estilo de codificación  del cual se deriva un estándar definido en codeSninfer, veamos como instalarlo(de igual forma requires ser usuario root).

git clone git://github.com/mrchrisadams/WordPress-Coding-Standards.git \
$(pear config-get php_dir)/PHP/CodeSniffer/Standards/WordPress

Probando que todo funcione

Finalmente solo basta probar que dicho estilo funcione, imaginemos que queremos revisar que el archivo loop.php cumpla con las reglas de codificacion de worpdress, esto lo podemos hacer con el siguiente comando(este se ejecuta como usuario normal).

phpcs --standard=WordPress -s loop.php

También podemos revisar algún directorio de forma re-cursiva mire el siguiente ejemplo:

phpcs -p -s -v --standard=WordPress /ruta/proyecto_wp/plugin_x/

En ambos casos estamos especificando explícitamente el estándar a utilizar. sin embargo podemos definir el estándar de worpdress por defecto, de la siguiente forma:

phpcs --config-set default_standard WordPress

Y posteriormente podemos omitir el argumento del estándar ya que es el que se configuro por defecto:

phpcs -s loop.php

Fecha en formato bonito un plugin de jQuery corriendo en wordpress

/0 Comentarios/en , , , , /por

Hace un par de años John Resig el autor de jQuery escribió un árticulo muy bonito donde anunciaba una pequeña función que imprimía el día en un formato mas humano al cual denomino pretty-date , la función básicamente es la siguiente:

/*  prettyDate
 * 
 * recibe una fecha en formato ISO8601
 * y devuelve la fecha en formato bonito
 */

function prettyDate(time){
	// Lo primero que hace es obtener la diferencia
	// de la fecha pasada con la fecha actual
	var date = new Date((time || "").replace(/-/g,"/").replace(/[TZ]/g," ")),
	    diff = (((new Date()).getTime() - date.getTime()) / 1000),
	    day_diff = Math.floor(diff / 86400);

	//Si la diferencia es invalida, quiere decir que el argumento pasado por el
	// usuario es invalido por lo cual regresa null
	if ( isNaN(day_diff) || day_diff < 0 || day_diff >= 31 )
		return;

 //Finalmente va atrapando el rango de los las diferencias para así devolver el resultado
	return day_diff == 0 && (
			diff < 60 && "just now" ||
			diff < 120 && "1 minute ago" ||
			diff < 3600 && Math.floor( diff / 60 ) + " minutes ago" ||
			diff < 7200 && "1 hour ago" ||
			diff < 86400 && Math.floor( diff / 3600 ) + " hours ago") ||
		day_diff == 1 && "Yesterday" ||
		day_diff < 7 && day_diff + " days ago" ||
		day_diff < 31 && Math.ceil( day_diff / 7 ) + " weeks ago";
}

Posteriormente esta función se convirtió en un plugin de jQuery mantenido por jzaefferer (uno de los dev. del nucleo de jQuery). Pero… si analizamos detenidamente el código anterior del cual esta basado el  plugin nos daremos cuenta que  cuando la fechas rebasaba la semana el plugin truena, como se puede ver en el siguiente demo :S.

Este plugin lo empece a utilizar para la página de la Academia de Software Libre , sin mas me decidí a agregarle el soporte para meses y años, ademas de agregarle soporte para la lengua española (ver detalles de la confirmación), algunos de estos cambios están disponibles en la versión 1.1 disponible en el repositorio de jzaefferer sin embargo de momento la traducción completa esta disponible en mi repositorio (aunque quizás cuando lea esto mis cambios ya se hayan integrado).

Como usar este plugin es muy simple y personalizable

Una vez que obtengamos el plugin podemos usarlo de la siguiente manera:

<head>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.prettydate.js"></script>
    <script type="text/javascript" src="js/jquery.prettydate-es.js"></script>
    <script>
        jQuery(function ($) {
            $(".entryDate").prettyDate({attribute: "datetime"});
        });
    </script>
</head>
<body>
  <time datetime="2012-10-29T18:12:02+00:00" itemprop="dateCreated">
  </time>
</body>

Veamos lo primero que hacemos es cargar la librería jQuery, posteriormente el plugin (prettydate.js) y finalmente su traducción al español (jquery.prettydate-es.js ojo el orden importa).

Luego en el ready de jQuery mandamos a llamar a los elementos que pertenezcan a la clase .entryDate para aplicarles el plugin, al momento de mandarle el argumento {attribute: "datetime"} estamos indicando que el atributo a convertir sera el datetime, si no indicamos esto por defecto buscaría el atributo title

   $(".entryDate").prettyDate({attribute: "datetime"});

Hechando andar este plugin en WordPress

Bien lo primero que tenemos que hacer es mandar a llamar las librerias necesarias, por ejemplo deberíamos agregar en el header.php o footer.php de nuestra plantilla las siguientes lineas:

<?php
$rootPath = get_bloginfo('template_directory');
?>
<script src="<?php echo $rootPath; ?>js/jquery.js"></script>
<script src="<?php echo $rootPath; ?>js/jquery.prettydate/jquery.prettydate.js"></script>
<script src="<?php echo $rootPath; ?>js/jquery.prettydate/jquery.prettydate-es.js"></script>
<script language="Javascript"  type="text/javascript">
$(function() {
    $(".entry-date").prettyDate({attribute: "datetime"});
});
</script>

Una vez que tenemos esto estamos diciendo que le muestre la fecha en formato bonito a los elementos que pertenezcan a la clase entry-date y que a la vez tengan atributo datetime en formato ISO-8601 correcto, por lo cual faltaría generar dicha la salida desde nuestro tema de worpdress.

Finalmente en la cabecera del código de nuestro artículos agregamos el siguiente código en php:

<?php

printf( 
     '<a href="%1$s" title="%2$s" rel="bookmark">'.
     '<time itemprop="dateCreated" datetime="%3$s">%4$s</time></a>',
     get_bloginfo('url') . '/' . get_the_time('Y/m/d'),//Aqui la liga deberia de ir a los posts de ese día
     'Artículos del día ' . get_the_date(),
     get_the_time( 'c' ),
     get_the_date()
    );

Sólo como dato informativo la funcion

get_the_time

con el argumento ‘c’ regresa la fecha en formato ISO como lo indica en su API wordpress.
Quizás esto lo debería de meter en alguna función y agregarlo en su archivo function.php de la manera siguiente:

 if ( ! function_exists( 'mitema_pretty_date_post' ) ) :
function mitema_pretty_date_post() {
    // el código mostrado anteriormente
}
endif;

De esta forma solo bastaría con mandar a llamar la función para re-utilizarla, en el single.php o en el loop.php, content.php, etc… podría agregar:

mitema_pretty_date_post();

Generador de esquemas de microdatos para wordpress

/0 Comentarios/en , , , /por

El generador esquemas es un elemento que nos genera código HTML5 valido con microdatos. Los microdatos es meta información que permite describir de manera mas precisa el tipo de contenido de nuestras paginas de Internet.

Generador de esquemas de microdatos

Generador de esquemas de microdatos

En terminos de google:

La especificación HTML5 sobre microdatos es una forma de etiquetar contenido para describir un tipo específico de información (por ejemplo, opiniones, información sobre personas o eventos). Cada tipo de información describe un tipo de elemento específico como, por ejemplo, una persona, un evento o una opinión. Por ejemplo, un evento incluye las propiedades «venue», «starting time», «name» y «category».

Mayor Información de microdatos de google

Por otra parte google también proporciona una herramienta para validar/revisar los microdatos existentes en nuestras páginas (Bing cuenta con un servicio similar pero requiere estar logeado en bing webmaster).

Hace poco tuvimos que agregar algunos productos para un cliente y como requeríamos indexar esta información me vi tentado en modifcar un tema para wordpress sin embargo me encontré con la grata sorpresa de encontrar un plugin que es un generador de esquemas de microdatos Alguno de los esquemas que te genera son:

Desgraciadamente en el momento que conoci el plugin (version 1.031):

http://wordpress.org/extend/plugins/schema-creator/

No tenia soporte para la idioma español :(, por lo cual hice una copia del repositorio y le agregue soporte a múltiples idiomas.

Acabe de hacer una solicitud de cambios a uno de los desarrolladores referente hacia una confirmación que da soporte del plugin para multiples idiomas(con soporte en ingles/español por el momento). También se me ocurren otras ideas en la implementación de la estructura de las librerías en javaScript del plugin, que espero postear después.

Login personalizados con wordpress

/0 Comentarios/en , , /por

En ocasiones nos gustaría cambiar ciertas cuestiones del estilo en la página de login de nuestro wordpress, por ejemplo a mi se me ocurrió cambiar el logotipo y enlace de la cabecera así como, mandar a llamar a otra hoja de estilo, la librería jQuery y un script.

Login personalizados de wordpress

Login personalizados de wordpress

Primero analizamos el código html con el que vamos a trabajar, el cual es el siguiente:

 

 <div id="login">
    <h1>
        <a href="http://es.wordpress.org/" title="Funciona gracias a WordPress">
            nombre de nuestro sitio
        </a>
    </h1>
    <form ... >
        <!-- contenido del formulario -->
    </form>
</div>

Mi intensión es cambiar tanto la referencia  `href` a la vez que el titulo `title` del enlace a la vez que cambiamos la imagen de fondo y agregamos una hoja de estilo que me modifique el diseño del login, atienda al siguiente código el cual deberá agregarse en las funciones ( function.php ) de nuestra plantilla:

 <?php
/*
Configurando el login
*/
function mi_login_personalizado() {
?>
<!-- Agregando twBootstrap -->
<link rel="stylesheet" type="text/css" media="all" href="<?php 
    echo get_bloginfo( 'template_directory' );
?>css/bootstrap.css" />
<!-- Modificando el estilo del login -->
<style type="text/css">
body.login div#login h1 a {
    height: 63px;
    padding-bottom: 0;
    background-image: url(<?php 
        echo get_bloginfo( 'template_directory' );
    ?>/images/login.jpg);
}
/* aquí modificamos mas estilos, necesarios */
</style>
<!-- Agregando libreria y script restante -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="<?php
    echo get_bloginfo( 'template_directory' );
?>js/login.js"></script>
<?php }
add_action( 'login_enqueue_scripts', 'mi_login_personalizado' );

Lo que acabamos de hacer fue definir la función mi_login_personalizado y la ligamos a la pila de scripts que imprimirá worpdress en la cabecera, de esta forma lo primero que hace la funcion es agregar una hoja de estilo en este caso la hoja de estilo de twitter bootstrap, posteriormente le cambiamos el fondo al enlace que se encuentra dentro del titulo nivel 1, por una imagen con el nombre login.png ubicada en la carpeta images/ de nuestra plantilla, y finalmente cargamos la libreria de jQuery y un script con el nombre login.js ubicado en la carpeta js/ de nuestra plantilla.

La función de js/login.js va hacer la de cambiar tanto la referencia como el titulo del enlace, el script es muy simple y es el siguiente:

 jQuery(function() {
    $('#login').find('h1 a').attr({
        'title' : 'Regresar a mundosica.com',
        'href'  : 'https://mundosica.com'
    });
});

Finalmente accedemos a /wp-login.php y vemos el resultado de nuestros cambios :).

Pueden ver la referencia en la siguiente liga:

http://codex.wordpress.org/Customizing_the_Login_Form