Author Pro, es una plantilla hija (o child theme) de Genesis Framework, inspirada y optimizada para autores o escritores que deseen difundir y vender sus obras en Internet, así como para pequeñas y medianas librerías, ya que adicionalmente al tema, se puede descargar un plugin que actúa como una completa base de datos de libros y autores.

En esta vídeo-guía te enseñaré a configurar la plantilla para que se vea muy similar al ejemplo que propone la demo de StudioPress, ya que una vez instalada de primeras aparece todo vacío y desconfigurado y muchos se pueden perder o verse confusos en su configuración.

Si quieres colaborar con mi blog, puedes adquirir la plantilla Author Pro + Genesis Framework desde mi enlace de afiliado. No te costará ni un céntimo más, pero me darán una pequeña comisión que me ayuda a seguir dedicando tiempo a crear contenidos:

• COMPRAR AUTHOR PRO + GENESIS FRAMEWORK: http://bit.ly/2M3CO38

Aquí tienes el vídeo completo:

Sin más, espero que disfrutéis de la video-guía lo mismo que yo he disfrutado creándola, y recuerda que si tienes alguna duda, puedes dejarla en la caja de comentarios y te responderé lo antes posible.

Hasta el próximo post! 

Si hemos creado un formulario externo para que usuarios colaboradores puedan enviar contenidos al sitio web sin necesidad de acceder al Dashboard, veremos que al cargar el editor de WordPress (wp_editor), no aparece el botón de Añadir Objeto para acceder a la Biblioteca de Medios:

Sería muy interesante (y nos ahorraría mucho trabajo), que nuestros usuarios colaboradores pudieran subir imágenes y contenidos para ilustrar sus contenidos, evitando tener que hacerlo nosotros a la hora de revisar la entrada.

Para ello tendremos que darle al usuario colaborador (contributor) permisos o capacidad para añadir archivos a WordPress. Por internet he encontrado en numerosos posts el siguiente código:

if ( current_user_can('contributor') && !current_user_can('upload_files') )
    add_action('admin_init', 'allow_contributor_uploads');
function allow_contributor_uploads() {
    $contributor = get_role('contributor');
    $contributor->add_cap('upload_files');
}

Pero este código NO FUNCIONA en versiones recientes de WordPress. Aparecerá el botón de Añadir Objeto, pero en el momento que intentes cargar un archivo, te dirá que no tienes permisos para añadir archivos a esta entrada.

Y tiene que ver con la forma en la que ahora WordPress trata a los archivos de medios, dándoles las características cómo de un custom post o estilo de entrada. Para que funcione tienes que dotar al usuario colaborador de otros permisos adicionales como, editar páginas publicadas, editar otras páginas, editar entradas publicadas y editar otras entradas, además por supuesto, de subir archivos:

//Permitir al colaborador subir imágenes
    function update_caps() {
 $role = get_role( 'contributor' );
 $caps_to_add = array(
 'edit_others_posts',
 'edit_published_posts',
 'edit_others_pages',
 'edit_published_pages',
 'upload_files'
 );
 foreach( $caps_to_add as $cap )
 $role->add_cap( $cap );
 }
  add_action('init', 'update_caps');

Con este código si he conseguido que un usuario colaborador pueda cargar imágenes desde un formulario externo en el Frontend de WordPress.

ACTUALIZACIÓN DESDE WORDPRESS 5.0

En versiones recientes de WordPress (desde la 5), no he necesitado añadir permisos de edit_others_posts, edit_others_pages, edit_published_posts y edit_published_pages. Simplemente agregando la capacidad «upload_files», ha funcionado.

En el siguiente post veremos cómo hacer que un usuario colaborador solo pueda ver sus archivos en la Biblioteca de Medios.

Ya que vamos a tener una página o sección exclusiva para colaboradores, lo lógico sería que sólo este tipo de rol tuviera acceso a esta página.

Usaremos este pequeño script situado al principio de nuestra página o template (ver post cómo crear un formulario externo para colaboradores) page-colaboradores.php:

<?php 
 $user = wp_get_current_user();
 
 if(!empty($user) && !in_array("contributor", (array) $user->roles)){ ?>
 <script>
 alert('Esta zona es solo para colaboradores. Por favor, inicia sesión para acceder.');
 location.href='http://www.mi-sitio.com/';
 </script>"
<?php } ?>

Lo primero que hacemos es recoger (wp_get_current_user) las propiedades o características del usuario en cuestión y comprobamos si este tiene asignado el rol de colaborador (contributor).

De no ser así, redirigiremos mediante un simple script a la página principal del sitio web.

Este script serviría igualmente para comprobar cualquier otro rol, administrador (admin), autor (author), editor (editor), suscriptor (suscriber)…solo tenemos que cambiarlo en el if.

Si tenemos varias páginas exclusivas para un rol determinado, podríamos pegar este script en un archivo aparte (redigirir.php), y llamarlo al principio de cada una de las páginas o templates que solo sean accesibles a ese rol determinado:

<?php include('redirigir.php'); ?>

Existen multitud de plugin que dan dinamismo y funcionalidad a las galerías, como Jquery Lightbox o la propia que se integra en JetPack.

Pero en este artículo vamos a ver cómo integrar Fuidbox de forma manual, un módulo para galerías WordPress que destaca por su sencillez y elegancia.

En la página principal de Fuidbox podéis ver el efecto aplicado a varias imágenes, las cuales se amplían con un suave zoom al hacer clic y vuelven a su estado inicial haciendo otro clic.

Para integrarlo en nuestra plantilla de WordPress debemos descargar los archivos desde el enlace a GitHub o cdnjs. En el artículo lo haremos desde GitHub.

Una vez dentro de GitHub localizamos el botón Clone or Download y descargamos el módulo Fluidbox en ZIP.

Una vez extraídos los archivos, los que nos interesan se encuentran en la carpeta Dist, donde hay otras dos carpetas: css y js.

Y copiamos los archivos:

• fluidbox.min.css
• jquery.fluidbox.min.js

Tanto el archivo css como el JavaScript debemos copiarlos en la plantilla de nuestro proyecto web, cada uno dentro de su sub-carpeta corresponiente (/css para el archivo de estilos y /js para el JavaScript). Muy importante que estén en las rutas indicadas ya que vamos a hacer referencia a ellas más adelante y no funcionarán si los archivos se encuentran en otro sitio. Ahora creamos un nuevo archivo al que llamaremos por ejemplo: iniciar-fluidbox.js. Copiamos dentro el siguiente código y lo guardamos también dentro de la carpeta /js en nuestra plantilla principal, junto al jquery.fluidbox.min.js.

2. Código javascript para iniciar Fluidbox.

$ = jQuery.noConflict();

$(document).ready(function(){
    $('.gallery a').each(function(){
        $(this).attr({'data-fluidbox' : ''});
    });
 
    if($('[data-fluidbox]').length > 0){
        $('[data-fluidbox]').fluidbox();
    }
});

Esto hará que el efecto Fluidbox se aplique a todos los elementos <a href> dentro de la clase .gallery que es la usada por las galerías WordPress, con lo cual se aplicará a cada una de las imágenes.

Seguidamente accedemos al archivo functions.php de nuestra plantilla y más o menos al final del código añadimos la siguiente función para llamar tanto al css de fluidbox, como a los JavaScript creados.

Código PHP para el archivo functions.php

<?php
    function cargar_fluidbox(){
        wp_enqueue_style("fluidboxcss", get_template_directory_uri()."/css/fluidbox.min.css", array(), "2.0.0");
        wp_enqueue_script("fluidboxjs", get_template_directory_uri()."/js/jquery.fluidbox.min.js", array(), "2.0.0", true);
        wp_enqueue_script("iniciarfluidbox", get_template_directory_uri()."/js/iniciar-fluidbox.js", array(), "1.0.0", true);
    }
    add_action("wp_enqueue_scripts", "cargar_fluidbox");
?>

Y eso es todo. Ahora tus galerías deberían disfrutar del efecto Fluidbox.

Si no te funciona, revisa que todos los nombres de archivos estén correctos y en las rutas especificadas anteriormente. Además comprueba que las imágenes de la galería apunten a Archivo multimedia, de lo contrario es posible que no funcionen.

Además es una de las principales reglas que Google valora en su test PageSpeed Insights y no tenerlo activado seguramente penalizará nuestro posicionamiento.

Para habilitar la compresión web podemos hacer uso de dos métodos dependiendo del tipo de servidor que usemos, Gzip y DEFLATE.

Gzip

Gzip es un módulo de Apache que debe estar habilitado en tu hosting para que funcione. Muchos hostings compartidos pueden no tenerla habilitado, bien por ahorrar recursos o bien por prevenir que ciertas funcionalidades del servidor interfieran en el funcionamiento de las páginas de otros usuarios (de ahí a que se llame hosting compartido).

Si nuestro hosting dispone de compresión Gzip (podemos consultarlo al soporte técnico), solo tenemos que acceder al archivo .htaccess de nuestro servidor. Este archivo se encuentra en la carpeta raíz y comienza con un punto (.) porque se trata de un archivo oculto, que solo podremos ver si en las opciones de exploración tenemos habilitada la opción «mostrar archivos ocultos» o usamos algún tipo se aplicación FTP como Filezilla.

Para activar la compresión Gzip, hacemos primeramente una comprobación para saber si el módulo Gzip está o no habilitado, y en caso de estarlo ejecutar la función:

# Compresión GZIP con mod_gzip

<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

Guardamos los cambios y para saber si funciona podemos acudir a una web que checkea si la compresión Gzip está habilitada en nuestro sitio web:

https://checkgzipcompression.com/

Introducimos nuestra URL y si la compresión Gzip se ha habilitado correctamente aparecerá el resultado:

De lo contrario mostrará:

Si no podemos activar la compresión Gzip en nuestro hosting podemos intentarlo con la compresión DEFLATE.

DEFLATE

DEFLATE es otro método de compresión web que podemos usar si nuestro hosting no permite habilitar Gzip.

Básicamente se activa de igual modo que Gzip, accediendo al archivo .htaccess, comprobando si el módulo está habilitado y tal caso ejecutar la función:

{IfModule mod_deflate.c}
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

# Especificaciones para algunos navegadores
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
BrowserMatch \bOpera !no-gzip

{/IfModule}

Para asegurarnos de que se ha habilitado correctamente, podemos hacer el test de PageSpeed Insights y comprobar si la regla «Habilitar compresión» continúa entre los Elementos que debes corregir (en rojo):

O si de lo contrario ha pasado a Elementos que puedes plantearte corregir (naranja) o Reglas aprobadas (verde):

Si el mensaje a pasado a Elementos que puedes plantearte corregir significa que la compresión web está habilitada, pero que existen ciertos elementos que no se han podido comprimir. Esto sucede por ejemplo, cuando utilizados plugins que llaman a archivos CSS o javascript de terceros, elementos que no se encuentran físicamente en nuestro servidor y no es posible comprimir.

Por ejemplo, en una de las webs que gestiono tenemos un servicio de Chat en línea implementado por un plugin. Un archivo externo utilizado por este plugin es el que provoca que la Compresión web no aparezca como Regla aprobada 100% en el test:

Aunque si nos fijamos, el ahorro tras la compresión sería de tan solo 1,4 KB.

Terminando…

Si tras probar ambos métodos de compresión aún no podéis habilitar la compresión web, poneos en contacto con vuestro proveedor de hosting a fin de que os faciliten una solución o alternativa, y si no os lo solucionan podéis plantearos cambiar de hosting.

Gracias a la compresión, conseguí reducir el peso de mi web de 1,2 MB a 886 KB.

Podéis hacer la comprobación con vuestras webs utilizando la herramienta PingDom.

Y eso es todo, espero que este artículo os sea de mucha utilidad.

TablePress permite diseñar tablas y hacerlas dinámicas e interactivas para nuestros usuarios, ofreciendo opciones tales como búsquedas dentro de la tabla, organizarlas por algún determinado filtro, paginarlas, etc.

Al instalarlo, lo tendremos como un elemento más dentro del menú principal de WordPress.

Si queremos crear una tabla, nos vamos al menú Agregar Nueva, le damos un nombre y una descripción opcional, y especificamos de cuántas columnas y filas va a constar, aunque luego podemos agregar más o eliminarlas.

En el apartado Contenido de tabla rellenamos los datos (por defecto la primera fila será el encabezado de la tabla).

Debajo tenemos opciones para manipular nuestra tabla, como agregar nuevas filas y columnas, combinar celdas, insertar imágenes o enlaces dentro de una celda, etc.

Las opciones de tabla permiten configurar algunos aspectos sobre el diseño de nuestra tabla, por ejemplo:

• Especificar que la primera fila sea el encabezado y la última fila sea el píe de tabla.
• Que las filas se muestren con colores alternos para diferenciarlas mejor.
• Especificar dónde mostrar el nombre de la tabla.
• Opciones CSS adicionales.

Conviene ir probando hasta encontrar la configuración que más se adapte a nuestras necesidades.

Las siguientes opciones tienen que ver con la interactividad de la que vamos a dotar nuestra tabla.

Algunas opciones permiten que nuestros usuarios puedan ordenar los datos de la tabla, paginarlos (por ejemplo a 10 resultados por página), realizar búsquedas, filtrar, etc.

Igualmente conviene ir probando para ver las posibilidades con las que contamos y adaptarlo a nuestras necesidades.

Una vez terminemos de definir nuestra tabla y sus opciones guardamos los cambios y nos dirigimos a la entrada o página donde queremos insertar nuestra nueva tabla.

Veremos el nuevo icono de TablePress en el editor de textos de WordPress.

Haciendo clic en el icono de TablePress podemos insertar una tabla de forma rápida.

Nos abrirá en una ventana modal un listado de las tablas que ya tenemos creadas para seleccionar la que necesitemos:

Una vez localizada la tabla hacemos clic en el botón Insertar código abreviado y guardamos los cambios.

Y vemos cómo ha quedado nuestra nueva tabla, totalmente dinámica e interactiva, con posibilidad de realizar búsqueda, seleccionar los registros a mostrar por página, posibilidad de filtrar por campos, etc.