En el proceso de crear un tema para WordPress podemos empezar por la creación o migración de un sitio en HTML / CSS y JS o desde una plantilla HTML de terceros. Aunque existe el plugin HTML Import 2 aquí veremos cómo crear un tema propio para WordPress a partir de una plantilla HTML / CSS y JS.
Básicamente debemos de encontrar en ese HTML aquello que debe ser dinámico, aquello que debe cambiar según la configuración de WP o que debe ser editable desde el backend y sustituir ese HTML por PHP.
En esta primera parte de una serie de artículos sobre la creación de temas para WordPress veremos:
De HTML a WordPress (Preparando el entorno de desarrollo)
Diseccionando el index.html
Encolar los archivos CSS y JS
Sustituir lo estático por lo dinámico (template tags)
El Loop
Resto de páginas (distintos Loops)
Contenido dinámico
En el siguiente artículo publicaremos el proceso de conversión de una una plantilla HTML / CSS / JS a un tema de WordPress gratuito que subiré al repositorio.
Empezamos
1. De HTML a WordPress (Preparando el entorno de desarrollo)
Importamos contenido dummy (falso) para poder trabajar. Nos descargamos el archivo XML del Codex. En nuestro WP –> Herramientas –> Importar –> WordPress –> Instalamos plugin –> Ejecutar importador –> subimos el archivo XML que nos hemos descargado –> Dejamos los autores tal como están pero marcamos la casilla de importar los datos adjuntos.
Para no trabajar desde cero comenzaremos con un starter theme, nos descargamos el tema http://underscores.me/ (de código abierto, gratuito y creado por Automattic) En las opciones marcamos la opción Sassify para tener los archivos SASS. Lo instalamos en nuestro WP –> Apariencia –> Temas –> Añadir nuevo.
Abrimos la carpeta de nuestro tema en nuestro editor (Brackets, Sublime Text o mejor VS Code).
En esa misma carpeta metemos los archivos HTML / CSS y JS a convertir.
2. Diseccionando el index.html
La mayoría de las plantillas para WordPress actuales tienen la opción de mostrar un diseño diferente en la home de nuestro sitio que en las páginas de su interior. En nuestra plantilla HTML el archivo index.html sería la home. Lo tienes que dividir en 4 partes: header, contenido, footer y sidebar (este último es opcional).
El header.php contiene desde <!doctype HTML> hasta aquello que se va a repetir en todas las páginas, normalmente hasta el menú.
El contenido (index.php, single.php, archive.php, front-page.php…) es aquello que dinámicamente muestra según la página que se visite (una entrada, una página, un producto…)
El footer.php contiene aquello que se repite al final de todas las páginas, termina con </html>
El sidebar.php contiene el código que muestra la barra lateral, si no vas a usarla puedes omitirlo
El tema Underscores trae por defecto creados ya los acrhivos header.php, index.php, footer.php y sidebar.php Debes editar cada uno para poner el marcado HTML que has creado, con sus clases CSS.
3. Encolar los archivos CSS y JS
Si la plantilla HTML tiene archivos CSS y JS lo ideal es sustituir sus llamadas en el HTML a una función dinámica de WP que encola esos archivos. En el tema Underscores, en el archivo functions.php ya tienes la función creada, sólo tienes que añadir los archivos.
Ejemplo para encolar el archivo main.css (*) y el jquery.scrollex.min.js dependiente de jQuery de esta forma:
* Nota: como seguramente utilices SASS lo mejor es que compiles ese archivo junto a los de Underscores y los que tú añadas en el style.css y así sólo cargas un CSS.
4. Sustituir lo estático por lo dinámico (template tags)
Aquello que sea dinámico se marca con PHP <php código PHP ?> para ello utilizamos las templates tags.
Como WP trabaja con PHP vimos cómo en el mismo archivo conviven perfectamente estos dos lenguajes HTML y PHP, de forma que aquello que queremos que sea dinámico lo cambiamos a PHP, por ejemplo para poner el título del sitio en vez de poner
<h1>El título de mi sitio</h1>
ponemos
<h1><?php blogingo(‘name’); ?></h1>
Son lo que llamamos las “template tags”. La sintaxis básica será:
Abrimos PHP
<?php
Nombre de la template tag + () + ; <- en algunas ocasiones dentro de los paréntesis indicaríamos uno o varios parámetros por ejemplo ‘name’
bloginfo(‘name’);
Cerramos PHP
?>
Ejemplos:
<?php blogingo('name'); ?> <- Imprime el Título del sitio indicado en Ajustes –> Generales
<?php get_header(); ?> <- Inserta el archivo del tema llamado header.php
Hay algunos template tags que no imprimen el resultado, normalmente se diferencian de otras porque empiezan por get, por ejemplo tenemos the_title() y get_the_title(), si queremos imprimirlo (que se muestre en el navegador) utilizaríamos “echo” pudiendo concatenar con puntos HTML y PHP
<?php echo '<h1>El título de esta entrada es '. get_the_title() . '</h1>'; ?>
Nota: Si queremos que el texto sea traducible utilizaremos la función _e() para imprimir las cadenas de texto.
_e( 'El título de esta entrada es', 'textdomain' );
Por ejemplo para referenciar la ruta a una imagen subida a tu tema a la carpeta img pondrías
Luego está la parte que carga dinámicamente el contenido (entradas, productos o ítems de portfolio), es lo que se conoce como el Loop, tiene esta sintaxis:
Es un condicional que accede a la BBDD para ver si hay contenido. Si hay contenido mostrará uno de los contenidos (máximo el número indicado en ajustes, por defecto 10) con la plantilla del acrhivo «content-home.php» que está en la carpeta «template-parts». En ese archivo tendrás que utilizar otras template tags como the_title, the_permalink (el enlace a ese contenido), the_excerpt (el extracto o resumen).
6. Resto de páginas (distintos Loops)
En las partes donde se muestran artículos (o productos si fuera una tienda) seguimos utilizando el Loop de WordPress, dependiendo de qué página sea visitada se mostrarán el loop devolverá de la BBDD algo distinto. Por ejemplo en la página de una categoría se muestran sólo los que pertenecen a esa categoría, en la de fecha sólo de esa fecha, etc. El loop de un artículo tiene la misma sintaxis que cualquier otro pero lo que muestre de la BBDD será distinto del que usarás en la home.
El loop siempre tiene la misma sintaxis:
<?php if (have_posts()) : ?>
<!—Se comprueba que existan entradas publicadas. -->
<?php while (have_posts()) : the_post(); ?>
<!—En el caso de que existan se crea un bucle por el número de publicaciones que hayamos definido en Ajustes – Lectura, por defecto son 10 entradas. -->
<!—Aquí se pone lo que queramos que se muestre de cada publicación, por ejemplo el título, la imagen destacada, el autor, la fecha, etc. En vez de ponerlo aquí podemos ponerlo en un archivo vinculado con get_template_part(). Por ejemplo get_template_part( 'template-parts/content', 'single' ); -->
<!—Cargamos el archivo content-none.php con lo que queramos que aparezca si no hay ninguna entrada publicada. -->
<?php endif; ?>
El proceso es el mismo, sólo tendrás que cambiar la ruta del archivo PHP en get_template_part() en single.php a por ejemplo a get_template_part( 'template-parts/content', 'single' );
En el archivo content-single.php en vez de mostrar el excerpt mostrarás todo el contenido de ese artículo con la template tag the_content().
Puedes ayudarte del plugin What The File para ver qué archivo de tu tema es el que se está cogiendo, para la portada te aconsejo que hagas un archivo front-page.php, si recuerdas la jerarquía de WP cuando no existe un archivo más específico se tira de index.php por eso hacemos uno específico para la portada si buscamos un diseño único.
7. Contenido dinámico
La home o página de inicio además de poder tener un diseño distinto, de mostrar las últimas entradas, testimonios, portafolio puede tener algún contenido (texto + multimedia) propio. Para que sea editable y dinámico creas una página en WP y esa página la pones en los Ajustes -> Lectura como página de portada.
Otra forma de añadir contenido dinámico es con los Custom Fields. Puedes crearlos para hacer editable los títulos y textos que ahora son Lorem puedes añadir a la página que pongas como inicio Custom Fields, puedes crearlos con este plugin y luego los llamas en front-page.php con
En próximos artículos publicaremos el caso práctico real donde convertiremos una plantilla HTML / CSS / JS a un tema de WordPress que pondré a vuestra disposición para que podáis ver el código y/o utilizarlo de forma gratuita en vuestro WordPress.
Los recursos de tu servidor son finitos, el espacio en disco que tienes contratado puede acabarse si no gestionas bien la librería multimedia de tu WordPress. Seguramente cuando haces copias de seguridad es cuando eres consciente del enorme tamaño de tu sitio.
Un altísimo porcentaje de ese tamaño es por la carpeta «uploads» donde se guardan por defecto las imágenes y los archivos que subes a tu WordPress.
Claro que esto es lógico si consideramos que el 53% del peso de una web tipo son imágenes. Aunque no tan lógico cuando descubramos que muchas de las imágenes que guarda nuestro WordPress no sirven para nada.
En este artículo vamos a tratar de reducir en lo posible el tamaño de nuestra carpeta «uploads». Como más que un artículo me ha salido un libro os dejo un pequeño índice y si tienes prisa ve directamente a las conclusiones:
El primer problema es que el tamaño de esas imágenes puede no ser el adecuado, debes optimizarlas, así que lo primero que debes hacer es tener optimizadas esas imágenes, previa subida o mediante plugins como EWWW Image Optimizer o con ShortPixel cuyos brutales resultados explico en Cómo optimizar las imágenes de tu WordPress
El segundo problema, que es el que vamos a tratar en este artículo, es que puedes tener muchas imágenes en tu servidor que nunca se utilizan en tu sitio web, así que veremos cómo identificarlas y cómo deshacerte de imágenes que no sirven para absolutamente nada y están ocupado un preciado espacio.
Lo primero que tenemos que hacer es una copia de seguridad, no sólo de la carpeta uploads sino también de la BBDD.
1. Cómo guarda WordPress la información de las imágenes en la BBDD
La tabla wp_posts además de guardar la info de entradas, páginas, revisiones y CPT guarda la info de cada imagen donde:
post_type será attachment,
post_parent será el ID de la publicación a la que se adjunta
guid se guarda la ruta absoluta al archivo.
Y en la tabla wp_postmeta es donde se almacenan otros metadatos:
_wp_attachment_image_alt guarda el contenido del atributo ALT
_wp_attached_file guarda la ruta relativa dentro de «uploads»
_wp_attachment_metadata guarda la información sobre distintos tamaños de imagen, algo de lo que hablaremos más adelante.
2. Identificar y eliminar las imágenes inútiles de nuestro WordPress
Depende del tipo y edad de tu proyecto:
este sitio, un simple blog de 11 años que tiene 8.649 elementos multimedia que ocupan 2,2 GB
mientras que elfinalde.com con sólo 2 años tiene ya 70.476 elementos que ocupan 26,5 GB
En este artículo veremos cómo reducir el tamaño de esa carpeta:
Identificar esas imágenes inútiles y
Cómo eliminarlas.
2. 1. Cómo identificar imágenes que no usamos
Hay dos tipos de imágenes que debemos identificar:
las imágenes que por algún motivo subimos a nuestro WordPress pero que no utilizamos, serían las imágenes sin adjuntar
una misma imagen suele tener distintas versiones, debemos identificar cuáles usamos y cuáles no
2.1.1.- Identificar elementos multimedia sin adjuntar
Imágenes, vídeos o audios o archivos PDF que subiste pero que no añadiste a ninguna publicación. Estos elementos puedes verlos desde Medios > Biblioteca y en el primer desplegable donde pone «Todos los medios» elegir «Sin adjuntar».
Debes revisarlo de vez en cuando, aquí quedan esas imágenes que subimos desde la biblioteca para un posible artículo pero que nunca llegamos a publicar o imágenes de publicaciones que han pasado a mejor vida porque aunque las hayas eliminado de la papelera los archivos adjuntos no se eliminan.
Pero mucho cuidado, que aunque aparezcan como medios «Sin adjuntar» no siempre significa que no lo utilices. Una imagen sólo se adjunta a una publicación (Entrada, página o Custom Post Type) Va a ser una imagen «Sin adjuntar» aunque útil cuando:
una imagen subida a la biblioteca la usas sólo como Imagen destacada
una imagen subida a la biblioteca la uses en algún widget
subas una imagen desde la edición un widget, aunque la uses en el mismo
Y por último también puede ocurrir que haya archivos adjuntos que no uses. Si escribiendo una entrada subes 10 imágenes pero luego no las insertas serán imágenes «adjuntas» pero inútiles.
Una solución parcial es instalar el plugin Find Posts Using Attachment que nos mostrará un listado de las publicaciones y la forma en que un medio está siendo usado (contenido o imagen destacada) o no usado. La info la tendremos en una nueva columna de la Biblioteca pero también en la página individual de cada imagen. Es una forma mucho más segura de saber si es una imagen útil que simplemente ver si está sin adjuntar aunque no detecta si la imagen se usa en un widget o shortcode.
Otro plugin interesante para la gestión de medios aunque todavía en beta es Media Usage. Este plugin nos muestra en una nueva columna las distintas versiones de una imagen, iconos con la inicial del ID del tamaño. Al hacer clic en ellos accedemos a las estadísticas de uso de esa imagen, por IP y desde qué página. Ojo, como te habrás imaginado una imagen sin visitas no tiene porqué ser inútil.
En cualquier caso antes de eliminar cualquier imagen y como medida extra de seguridad os aconsejo activar la papelera en la Biblioteca de Medios añadiendo esto a wp-config.php
2.1.2. Identificar los tamaños de imagen que me sobran
Todo WordPress crea por defecto distintas versiones de una misma imagen. El número de archivos y sus tamaños vienen definidos por:
Imagen original
La configuración de medios
Imágenes responsive añadidas por el propio Core
El tema que utilices
Algún plugin
2.1.2.1. Imagen original
El archivo original lógicamente ocupa se guarda y ocupa espacio, no deberíamos subir archivos mayores del tamaño máximo que vayamos a necesitar. Es decir, si el tamaño mayor de imagen que vamos a utilizar es de 1024px de ancho lo ideal es subir todas las imágenes a ese ancho, no más.
Debemos tener en cuenta que si subimos una imagen de menor resolución a otras versiones que necesitamos no se crearán dichas versiones, es decir, WordPress puede escalar una imagen reduciendo su tamaño pero nunca ampliando. Siguiendo el ejemplo anterior si subimos una imagen de 1023 píxeles de ancho la imagen de 1024px no se creará.
2.1.2.2. Imágenes creadas por los ajustes de WordPress
En Ajuste > Medios se especifican 3 tamaños: miniatura, medio y grande que luego puedes utilizar desde el editor, que se creen los 3 dependerá del tamaño del original como explicado en el apartado anterior.
Tendrás que pensar si utilizas estos 3 tamaños cuando:
publicas desde el editor
desde el tema (ver en 1.2.4 cómo averiguarlo)
2.1.2.3. Imágenes responsive añadidas por el propio Core
Desde la versión 4.4 WordPress añade a la etiqueta HTML <img> los atributos scrset y sizes sirviendo un tamaño acorde con la resolución del dispositivo de todos los tamaños disponibles de una imagen. Ahorramos ancho de banda y ganamos en velocidad.
Además se añadió una función para crear un tamaño extra, llamado medium_large para resoluciones de 768px de ancho.
2.1.2.4. Imágenes que crea el propio tema
El tema que utilices puede añadir nuevos tamaños a través de add_image_size haz una búsqueda de esta función en los archivos de tu tema para saber qué tamaños añade.
Por ejemplo el tema Twenty Seventeen añade dos nuevos tamaños en su archivo functions.php
Para saber dónde se utilizan estas imágenes podemos volver a hacer una búsqueda pero esta vez por el nombre del tamaño de imagen. Generalmente los distintos tamaños de imagen se pintan usando
the_post_thumbnail( 'nombre del tamaño de imagen: thumbnail | medium | medium-large | full | twentyseventeen-featured-image | ... ' );
Aunque también se pueden usar otras resoluciones no registradas:
Siguiendo con el tema Twenty Seventeen si buscamos «twentyseventeen-featured-image" lo encontramos en 8 archivos, en header.php, en los de front page y en todos los archivos de loop de single incluidos los formatos de entrada. En resumen, el tema utiliza este imagen de 2000×1200 como imagen de cabecera.
Ahora busquemos la otra imagen, la llamada twentyseventeen-thumbnail-avatar y ¡sorpresa! no hay ningún archivo que pinte esta imagen de 100×100, hemos encontrado una imagen completamente inútil.
2.1.2.5. Imágenes creadas por plugins
Los plugins también pueden utilizar add_image_size Por ejemplo:
el plugin Featured Image Admin Thumbañade una imagen de 60×60 desde add_image_size( $this->fiat_image_size, 60, 60, array( 'center', 'center' ) );
El plugin Jetpack añade una de 50×50 para el módulo de portafolios con add_image_size( 'jetpack-portfolio-admin-thumb', 50, 50, true );
El widget del plugin SiteOrigin Post Carousel añade uno de 272×182 con add_image_size('sow-carousel-default', 272, 182, true);
Puedes escanear tu carpeta de plugins en busca de «add_image_size» para ver qué plugins añaden versiones de imágenes. Ten en cuenta que si desactivas y borras el plugin las imágenes que haya creado no se eliminarán.
Nota: Las imágenes que crean los plugins puede que no se guarden con la misma estructura de año/mes y lo hagan en una carpeta independiente cuyo nombre probablemente haga alusión al del plugin.
Nota 2: El bloque de Imagen del proyecto Gutenberg (versión 1.9.1 del plugin) lista todos los tamaños de una imagen, no sólo el original y los 3 por defecto. Podemos elegir también cualquier otro tamaño que haya sido creado desde el tema o desde un plugin.
2.2. Cómo eliminar y dejar de crear las imágenes inútiles
Una vez que detectamos aquellas imágenes inútiles que no hacen más que consumir recursos debemos eliminar las que tengamos ya creadas y decirle a WordPress que deje de crearlas.
2.2.1. Eliminar imágenes inútiles
Si tu WP es nuevo puedes saltarte este paso pero si llevas un tiempo con él lo más probable es que tengas un montón de imágenes inútiles en tu servidor.
Veremos cómo deshacernos de todas esas imágenes que se han estado creando y que sólo sirven para ocupar espacio.
Digamos que has cambiado los ajustes de medios o has cambiado de tema. Surgirán dos problemas:
El nuevo tema utiliza tamaños de imagen nuevos, por ejemplo uno de 275×275
El tema viejo utilizaba tamaños de imagen que ya no necesitas, por ejemplo uno de 450×250
El plugin Regenerate Thumbnails Reminder te advertirá si surge algún problema del tipo 1, si detecta algún tamaño nuevo te recomendará que regeneres ese nuevo tamaño para las imágenes que ya tenías subidas. El plugin que ya hemos comentado Media Usage muestra con iconos las versiones de cada imagen de forma que puedes comprobar si hay variaciones entre los tamaños nuevos y los antiguos.
Vamos a ver cómo regenerar estos nuevos tamaños.
2.2.1.2 Cómo volver a crear los nuevos tamaños útiles en imágenes antiguas
Para que todas tus imágenes antiguas tengan las versiones nuevas de tamaño útiles, en nuestro caso el nuevo tamaño 275×275 tenemos muchos plugins, el más famoso y clásico ya Regenerate Thumbnails. Hace exactamente lo que pedimos regenerar en lote o individualmente los nuevos tamaños sin borrar ningún tamaño antiguo. Veamos otras opciones:
Plugins que regeneran y también eliminan imágenes inútiles
Image Regenerate & Select Crop: Divide la acción de regenerar por tamaño, tipo de publicación a la que se ha adjuntado, calidad para regenerarla, además si es un tamaño recortado puedes elegir el punto de anclaje. Puedes desactivar el tamaño que quieras y también eliminar todas las imágenes pertenecientes a ese tamaño para luego regenerarlas. Muy, muy completo.
reGenerate Thumbnails Advanced: elimina todos los tamaños que no estén activos además de regenerar los nuevos tamaños, puedes elegir el período de tiempo de las imágenes a regenerar. Tendremos información del proceso así como un log de errores, por ejemplo si hay algún medio que no es una imagen.
Force Regenerate Thumbnails: elimina todos los tamaños que no estén activos además de regenerar los nuevos tamaños, te muestra un resumen de esos tamaños eliminados y regenerados.
ONet Regenerate Thumbnails: Puedes regenerar las imágenes en lote como muchos otros pero además puedes elegir el ratio de compresión, añadir un botón al lado del uploader del editor de publicaciones y crear nuevos tamaños de imagen. No elimina ninguna imagen.
Simple Image Sizes: Este plugin mejora la página Ajustes > Medios mostrando todos los tamaños disponibles y pudiendo crear los nuestros. De cada tamaño puedes editar su tamaño, recorte e incluso dando la opción de que un tamaño añadido por un tema, un plugin o creado por nosotros esté disponible en el editor. Por último permite regenerar aquellos tamaños que seleccionemos. No elimina ningún archivo.
Thumbnails (Miniaturas): en vez de regenerar todas las imágenes, las crea y cachea cuando se necesitan evitando procesar una gran cantidad de imágenes. Además puede añadir la Imagen Destacada a entradas que no tengan ninguna asignada. Es muy útil cuando un tema o plugin crea un tamaño sin ID, por ejemplo los plugins de sliders suelen usar tamaños específicos.
2.2.2.2 Cómo eliminar los tamaños inútiles de imágenes antiguas
Otra opción es hacerlo de forma manual, aunque no es aconsejable puedes usar por ejemplo Filezilla. Haces una búsqueda recursiva (icono prismáticos) en la carpeta uploads de archivos que contengan «-300x» y te devolverá todos los archivos cuyo ancho es 300px. Ej: imagen-inutil-300x127.jpg
Si tienes acceso por SSH a tu servidor puedes hacer lo mismo yendo al directorio wp-content/uploads y luego ejecutando
find . -name "*-300x*" -type f -delete
Bonus: Actualizar el HTML después de regenerar y eliminar
Regenerar y eliminar las imágenes no modifica el contenido de tus publicaciones, si pusiste una imagen de tamaño grande en una página y luego cambiaste su tamaño esa página seguirá buscando la imagen antigua. Afortunadamente tenemos una solución:
Regenerate Thumbnails HTML: Muy útil sobre todo cuando los cambios son en los ajustes de Medios. Digamos que en mis entradas he añadido imágenes de tamaño medio durante meses cuyo tamaño máximo son 300px y ahora decido cambiarlo a 250px, si vamos a la pestaña HTML de una de esas entradas vemos que WP ha estado generando este código
Donde la ruta del archivo será aquella versión de ancho 300, lo sabemos por el sufijo del nombre del archivo «nombre-archivo-anchoxalto.jpg» y que el atributo width toma como valor también los 300px. WordPress no actualiza este HTML aunque hayamos cambiado el tamaño medio, sigue llamando a la imagen anterior incluso si la eliminamos lo que puede resultar en enlaces rotos.
Este plugin te permite hacer una búsqueda de etiquetas img según el atributo ancho y el ID del tamaño. Si da resultados puedes actualizar el HTML de tus publicaciones.
2.2.1.3. Eliminar imágenes sin adjuntar
Las podemos eliminar desde la misma Biblioteca de medios como hemos visto antes o pero mejor utilizando el plugin gratuito Media Cleaner, DNUI o incluso mejor el plugin Theia Upload Cleaner for WordPress que trae funciones extras. Estos plugins escanearán más a fondo la BBDD que un simple filtro de imágenes sin adjuntar que como vimos en el apartado sobre identificar imágenes sin adjuntar no siempre te asegura que sea inútil.
Entre las ventajas de estos plugins están:
que cuando eliminas las imágenes además de enviarla a la papelera las mueve a otro directorio (uploads/wpmc-trash en el caso de Media Cleaner) y Theia Upload Cleaner además te crea una copia de seguridad. Si envías una imagen a la papelera desde la Biblioteca de Medios los archivos se quedarán en el mismo sitio
también escaneará posibles imágenes utilizadas en widgets, galerías o shortcodes
detectará como inútil aquellas imágenes adjuntadas pero que realmente no se utilizan
Theia Upload Cleaner permite eliminar tamaños inútiles de imagen
Image Cleanup ofrece una interfaz más pobre que los otros, de hecho no tenemos una miniatura de la imagen aunque es muy potente indexando todas las imágenes posibles.
Como dijimos al principio del artículo recuerda que antes de eliminar cualquier imagen debemos hacer una copia de seguridad de la carpeta uploads y de la BBDD.
2.2.2. Dejar de crear tamaños de imagen inútiles
Añadiendo esta función evitarás que se creen tamaños de imagen especificados tanto en los ajustes, en el Core, en un plugin o en un tema.
function no_crear_useless_image_sizes ($sizes) {
unset( $sizes['medium']); /* tamaño por defecto (ver otro método 2.2.1) */
unset( $sizes['medium_large']); /* tamaño responsive (ver 2.2.2) */
unset( $sizes['jetpack-portfolio-admin-thumb']); /* tamaño del plugin Jetpack (ver 2.2.3) */
unset( $sizes['twentyseventeen-thumbnail-avatar']); /* tamaño del tema Twenty Seventeen (ver 2.2.3) */
return $sizes;
}
La función se la pasamos al hook intermediate_image_sizes_advanced que filtra todos los tamaños que genera WP automáticamente cada vez que subamos una imagen.
En principio puedes añadirlo a tu archivo functions.php o mejor al functions.php de un tema hijo o como plugin.
Si no quieres meterte en código puedes utilizar el plugin que hemos comentado antes Image Regenerate & Select Crop para desactivar tamaños de imagen.
Otra opción es usar el plugin gratuito Optimize Images Resizing lo que hace es generar los tamaños sólo cuando se necesitan, no cuando se sube una imagen, es decir, este plugin evitaría que se generara el tamaño twentyseventeen-thumbnail-avatar del tema Twenty Seventeen porque jamás se va a necesitar. También puedes eliminar con él las imágenes inútiles antiguas.
Me parece muy interesante para algunos tipos de proyectos que por ejemplo utilicen muchos tamaños y tengan una enorme librería de medios. Para un sitio al uso es un poco arriesgado dejar que WP genere el tamaño X cuando un usuario visite tu esa página.
2.2.2.1. Dejar de crear tamaños por defecto
Para que WordPress no genere alguna o todas las versiones que por defecto crea (thumbnail, medium y large) de cada imagen podemos ir a Ajustes > Medios y definir en cero los anchos y altos de las imágenes que nos sobren.
Con esta configuración no se crearían imágenes de tamaño medio (‘medium’)
2.2.2.2. Dejar de crear el tamaño responsive medium-large
Igual quieres que WP no cree una versión de 768px de ancho de todas tus imágenes, quizás no porque no te preocupa esto de las imágenes responsive sino porque tu tema ya crea una imagen de este tamaño o casi y ves absurdo tener dos.
2.2.2.3. Dejar de crear tamaños de plugins y temas
Podemos evitar que se creen imágenes inútiles desde plugins o temas, simplemente conociendo el nombre de esa imagen. Si la función que hemos visto antes la añades al archivo functions.php debe estar después de que se haya definido el tamaño con add_image_size de ahí que os recomiendo hacerlo mejor desde un tema hijo.
3. Conclusiones
Tener optimizado tu WordPress es un trabajo de detalles, hay muchos factores en los que pensar, uno de ellos son los archivos. Como empezamos el artículo, tu servidor tiene un espacio finito.
Resumen de pasos facilito y con plugins:
Hagas una copia de seguridad
Instales Image Regenerate & Select Crop y veas todos los tamaños que se están generando por cada imagen ¿De verdad los necesitas todos? Imagino que si estás leyendo esto es porque piensas que no
Elimina las imágenes de los tamaños que no necesitas
Desactiva los tamaños que no necesites para que no se vuelvan a crear
Opcional: Si ves que alguno de los tamaños al margen de Miniatura, Medio y Grande te pueden ser útiles para incluirlos en alguna publicación en vez de tener que recortar o escalar la imagen instala el plugin Simple Image Sizes para añadirlo a los tamaños de inserción de imágenes del editor.
Además si has cambiado de tema o los ajustes de medios
Regenera los tamaños que han sido afectados
Instala el plugin Regenerate Thumbnails HTML para actualizar los cambios en el HTML de inserciones de imágenes de tamaños que han cambiado.
Las herramientas para desarrolladores de Google Chrome pueden mejorar el flujo de trabajo de un desarrollo web. Digamos que estás trabajando en el diseño de un tema de WordPress y usas el preprocesador Sass.
Normalmente estarás trabajando en local, para ello tendrás instalado algún software para tener un servidor local en tu equipo que corra Apache, MySQL y PHP: XAMP, AMPPS, MAMP o cualquier otro. En el artículo Cómo instalar WordPress en local paso a paso explico cómo hacerlo.
Y trabajarás con algún editor o IDE en el que irás editando los archivos PHP del tema. En este artículo vamos a ver cómo editar en vivo el CSS o Javascript desde el navegador y poder guardar los cambios realizados aunque trabajes con un preprocesador.
Las herramientas para desarrolladores de los navegadores son parte fundamental del proceso, utilizamos la consola, analizamos, etc. pero cuando editamos algo los cambios no se guardan y tenemos que reproducir esos cambios en nuestro IDE.
Google Chrome permite que le demos permiso para que cuando editemos algo esos cambios se guarden gracias a los Workspaces (espacios de trabajo).
Añadir Workspaces
El proceso es muy sencillo:
Abre en el navegador Google Chrome tu proyecto web y las herramientas para desarrolladores
En Settings > Workspace añade el directorio de tu proyecto, si trabajamos con WP, añade la ruta al tema en el que estás trabajando. Te aparecerá un mensaje pidiendo arriba «DevTools solicita acceso completo a (tu directorio). Asegúrate de no revelar información confidencial». Pincha en «Permitir»
Una vez añadido este Workspace debes mapear tus archivos locales con los de red, introduce la url de tu sitio, por ejemplo: localhost/wordpress y en la derecha no tienes más que poner / .
Si actualizas la página ya podrás editar en vivo y verás que los cambios que hagas en tu CSS se están guardando, en la consola tienes un historial de cambios que siempre puedes revertir.
Algunas consideraciones, estos cambios no se van a guardar:
los cambios en el DOM,
los estilos que añadas como inline,
las nuevas reglas que hagas a no ser que los insertes en el panel Sources.
Trabajando con un preprocesador como Sass en Chrome
Claro que seguramente estés trabajando con un preprocesador CSS, digamos que es Sass aunque puede ser otro como Less o Stylus o alguno de Javascript (ver preprocesadores soportados). Si es así no querrás editar el archivo CSS sino el archivo .scss que corresponda, el archivo donde has incluido esa regla CSS.
Chrome es capaz de detectar estos archivos de origen gracias al archivo de mapa de origen (.map), un archivo en formato JSON que establece la relación de cada declaración de CSS y la línea correspondiente del archivo de origen (.scss)
En Settings > Preferences asegúrate que en Sources tienes activada la opción «Enable CSS source maps», por defecto lo está.
Cada archivo CSS compilado hace referencia a ese mapa de origen en forma de comentario especial en la última línea del archivo.
Ejemplo:
/*# sourceMappingURL=estilos.css.map */
Si te manejas con Sass pero no con la línea de comandos puedes usar Koala, un software multiplataforma de código abierto y gratuito que además de compilar Sass, Less, Compass y CoffeeScript tiene la opción de crear este mapa de origen y añadir esa línea en el CSS compilado.
Por último te aconsejo que actives un par opciones experimentales de Chrome que pueden ayudarte. Primero activa las opciones experimentales en chrome://flags/#enable-devtools-experiments
Experimentos de Herramientas para desarrolladores Mac, Windows, Linux, Chrome OS
Habilita los experimentos de Herramientas para desarrolladores. Utiliza el panel de configuración de este servicio para activar experimentos individuales.
En Settings > Experiments activa Live Sass y Source diff
Live Sass te permite editar en vivo variables de Sass y Source diff añadirá una ayuda visual de colores a los cambios que vayas haciendo. Las líneas borradas se marcarán en rojo, las modificadas en púrpura y las nuevas en verde.
Una vez hecho esto podrás editar CSS (o Sass) directamente desde el navegador.
Hay muchas formas de crear un portafolio en WordPress para mostrar tu trabajo. Hay temas que vienen preparados para crear directamente esta sección, si no usas uno de estos temas puedes utilizar un plugin o crear un portafolio con código.
Bonus: Al final veremos otros plugins para crear portafolios con los trabajos que tenemos publicados en Instagram, Flickr, Behance o devianArt.
Añadir una sección Portafolio sin plugins
Hay sitios que directamente crean una página y añaden una galería con sus trabajos, a veces con algún efecto de lightbox pero lo habitual es que un portafolio esté asociado a un Tipo de entrada personalizada (Custom Post Type).
Para crearla añade este código al archivo functions.php de tu tema y si no es tuyo le creas un tema hijo primero para no perder las posibles actualizaciones que haga el autor del tema original.
Si te da error 404 cuando vas a visitar la página del proyecto o la de portafolio (tudominio.com/portafolio/) ve a Ajustes > Enlaces Permanentes y pincha en Guardar cambios para que se actualicen.
Verás que tu página tudominio.com/portafolio/ tiene el mismo aspecto que la de cualquier otra página de Archivos, y la de un proyecto el mismo aspecto que un artículo. Eso es por la jerarquía de WP, al no encontrar ningún archivo específico para este tipo de entrada tira de archive.php y en los proyectos individuales de single.php
Si quieres darle un aspecto personalizado puedes crear en tu tema estos 2 archivos. Te recomiendo que partas del código de tu tema archive.php y single.php
archive-portafolio.php y cambiar lo que se muestra por ejemplo en el loop y
single-portafolio.php para la página de cada proyecto un archivo
Para personalizar las categorías o etiquetas de tus trabajos el proceso es el mismo, crea tantos archivos como necesites: category-grafico.php, category-web.php y/o tag-web.php, tag-fotografia.php, etc. O también puedes crear una taxonomía personalizada «tipos de proyectos» para no mezclarlo con las categorías y etiquetas generales de tu WP.
Con este código añadirás una nueva taxonomía similar a las categorías llamada «Tipos de Proyecto» asociada únicamente a tu Portafolio.
if ( ! function_exists( 'custom_taxonomy_portafolio' ) ) {
// Register Custom Taxonomy
function custom_taxonomy_portafolio() {
$labels = array(
'name' => _x( 'Tipos de proyectos', 'Taxonomy General Name', 'text_domain' ),
'singular_name' => _x( 'Tipo Proyecto', 'Taxonomy Singular Name', 'text_domain' ),
'menu_name' => __( 'Tipos de proyectos', 'text_domain' ),
'all_items' => __( 'Todos los tipos de proyectos', 'text_domain' ),
'parent_item' => __( 'Tipo superior', 'text_domain' ),
'parent_item_colon' => __( 'Tipo superior:', 'text_domain' ),
'new_item_name' => __( 'Nuevo Tipo de proyecto', 'text_domain' ),
'add_new_item' => __( 'Añadir Nuevo Tipo de proyecto', 'text_domain' ),
'edit_item' => __( 'Editar Tipo de proyecto', 'text_domain' ),
'update_item' => __( 'Actualizar Tipo de proyecto', 'text_domain' ),
'view_item' => __( 'Ver Tipo de proyecto', 'text_domain' ),
'separate_items_with_commas' => __( 'Separar tipos con comas', 'text_domain' ),
'add_or_remove_items' => __( 'Añadir o quitar Nuevo Tipos de proyecto', 'text_domain' ),
'choose_from_most_used' => __( 'Elegir entre los más usados', 'text_domain' ),
'popular_items' => __( 'Tipos de proyecto populares', 'text_domain' ),
'search_items' => __( 'Buscar Tipos de proyecto', 'text_domain' ),
'not_found' => __( 'No se encuentra', 'text_domain' ),
'no_terms' => __( 'No hay Tipos de proyecto', 'text_domain' ),
'items_list' => __( 'Lista de Tipos de proyecto', 'text_domain' ),
'items_list_navigation' => __( 'Navegación Tipos de proyecto', 'text_domain' ),
);
$args = array(
'labels' => $labels,
'hierarchical' => true,
'public' => true,
'show_ui' => true,
'show_admin_column' => true,
'show_in_nav_menus' => true,
'show_tagcloud' => true,
);
register_taxonomy( 'tipo_proyecto', array( 'portafolio' ), $args );
}
add_action( 'init', 'custom_taxonomy_portafolio', 0 );
}
Si estás satisfecho con el contenido que tu tema ofrece para el portafolio puede que sólo necesites aplicarle CSS. Normalmente los temas añaden funciones para que se añadan clases CSS según la página que se sirve, lo vimos en Cómo añadir clases CSS a los Custom Post Types en WordPress.
De forma que:
tudominio.com/portafolio/ tendrá en el body la clase post-type-archive-portafolio y cada proyecto la clase type-portafolio
En la página de cada proyecto el body tendrá la clase single-portafolio
Está en ti darle los últimos toques pero con esto ya tienes un portafolio totalmente funcional.
7 Plugins para crear portafolios en WordPress
Si no quieres editar código siempre puedes utilizar un plugin
Jetpack
Puede que ya tengas instalada esta navaja suiza o megaplugin de WordPress, en la versión wordpress.com todos lo tienen instalado. La función de Portafolio no es un módulo que puedes activar en la Configuración de Jetpack, para activarla debes ir a Ajustes > Escritura
Tendrás un nuevo Tipo de Entrada Personalizada (CPT) que han traducido como «Carpeta».
Luego tendrás que utilizar el shortcode [portfolio] en la página o entrada que lo quieras mostrar, puedes utilizar todos estos atributos para personalizarlo:
display_types: muestra los Tipos de proyecto. (true/false)
display_tags: muestra las etiquetas de proyecto. (true/false)
display_content: muestra el contenido del proyecto. (true/false)
include_type: incluye Tipos de proyecto, por defecto se muestran todos pero puedas especificar las que quieras separando sus slugs con comas.
include_tag: incluye las etiquetas de proyecto, por defecto se muestran todas pero puedas especificar las que quieras separando sus slugs con comas.
columns: Número de columnas, por defecto 2. (número, 1-6)
showposts: número de proyectos a mostrar, por defecto todos. (número)
order: elige entre orden ascendente ASC (por defecto) o descendente DESC
orderby: orden por el que se muestra, por defecto por fecha (author, date, title, rand)
Este plugin genera dinámicamente capturas de tus proyectos web si tienes cuenta en ShrinkTheWeb. Si no tienes cuenta también puedes utilizarlo subiendo tus propias imágenes.
WordPress Portfolio Plugin ( Career Portfolio ) ofrece funciones básicas pero suficientes y un sólo layout en su versión gratuita, la comercial ofrece 3, lazy load, estilos de animación, filtro por categoría y muchas más características interesantes.
Un plugin básico con el puedes añadir mucha información a cada proyecto, descripción, descripción corta, el día de entrega, más de una imagen, etc.
Plugins para mostrar proyectos publicados en sitios externos
Digamos que tienes tus trabajos publicados fuera de tu WordPress, en Instagram, Dribble, YouTube, Pinterest, Flickr, Behance o devianArt, con estos plugins puedes mostrarlos e incluso venderlos en tu WordPress.
Con los plugins comerciales tendrás acceso a soporte personalizado, os dejo también opciones gratuitas.
Lubith es un generador gratuito de temas para WordPress WYSIWYG. Debes crearte una cuenta con tu email o con alguna de tus redes y ya puedes empezar a crear tu tema para WordPress.
Se parte de un tema por defecto en el que vas seleccionando cada elemento para editarlo, cambias la fuente, el color, lo mueves arrastrando y soltando, etc. En el editor verás un contenido para testearlo, una vez creado tu tema puedes descargarlo y usarlo como quieras, incluso para venderlo.
Hay una opción premium de pago que te permite crear más de un tema al mismo tiempo y volver a editar los que ya hayas creado, con la cuenta gratuita sólo lo conservarás en Lubith 7 días.
Lo he conocido a través de Soft & Apps pero es un proyecto que nació hace ya unos años, lástima que a pesar de seguir activo no haya evolucionado mucho porque son pocas las opciones de edición. Lamentable no ofrece todo lo que un tema gratuito puede ofrecerte desde el mismo Customizer ni otros frameworks.
En WordPress hay dos etiquetas de WordPress que añaden automáticamente clases CSS de forma condicional. En este tutorial veremos cómo personalizar el diseño de nuestro sitio con estas clases CSS. Podemos utilizarlas para dar un aspecto distinto a algún elemento de la página de inicio, de alguna o todas las categorías, a un artículo concreto, etc.
En este tutorial vamos a centrarnos en los Custom Post Types (CPT) o tipos de entradas personalizadas, digamos que tienes un sitio donde has creado tres tipos de entradas personalizadas llamados «pelicula», «serie» y «libro» y quieres darle un diseño distinto a cada una.
DEMO: Puedes ver un ejemplo de esto en la home de elFinalde.com, los iconos son distintos según se trate de una película, serie o libro.
Clase CSS según la página
Con body_class se añadirá la clase CSS según la página que se sirva, si estamos en la página de una película se añadirá la clase single-{posttype}, en nuestro caso single-pelicula, en la de una serie será serie-tv y en la de libro single-libro
En nuestro tema aparecerá así
<body <?php body_class(); ?>>
Clase CSS en el loop según la entrada
En el loop podemos utilizar post_class que añadirá en forma de clase CSS todas las taxonomías predeterminadas y personalizadas asociadas con cada entrada devuelta, es decir todas sus etiquetas, categorías y todas las que les hayas creado.
<?php post_class(); ?>
De esta forma en un mismo loop donde se muestran diversos Custom Post Types podemos diferenciarlos mediante CSS porque el de la película tendrá la clase type-pelicula, una serie type-serie y un libro type-libro.
Así podemos por ejemplo añadir una imagen o icono distinto según sea una película, serie o libro con un simple CSS.
El problema es que si tenemos muchas etiquetas por ejemplo, podemos encontrarnos con un HTML muy pesado con muchas clases CSS que no nos van a servir para nada. Además lo normal es que a los Custom Post Types les creemos también taxonomías personalizadas.
En el caso de elFinalde.com cada película por ejemplo tendrá una clase CSS por cada actor puesto que tiene una taxonomía de actores, otra para los personajes, guionistas, etc.
Para solucionar esto puedes crear una función que sustituya a post_class en tu archivo functions.php.
Con un condicional imprimimos el nombre de la clase que queramos según sea un tipo u otro de entrada personalizada.
Seguimos ampliando la colección de plugins gratuitos para Photoshop, ya vamos por la parte VIII y con esta llegamos a los 82 plugins, extensiones y acciones para Photoshop. Para mejorar la productividad, para diseño web, para crear iconos 3D, para fotografía… Espero que os sean útiles.
Un plugin para Lightroom, Photoshop, Photoshop Elements y Corel PaintShop Pro que mejora la exposición y el contraste de una fotografía. Viene con 8 ajustes preestablecidos para que mejores los detalles de tu fotografía de una forma más fácil y rápida.
Una estupenda colección de plugins gratuitos para Photoshop y Sketch desarrollado por InVision ( Styles, Type, Photos, y Duplicate) para mejorar la productividad de nuestros diseños.
Un panel que ye va a permitir insertar datos e imágenes rápidamente en tus mockups, de tu equipo, de Dropbox o de Unsplash. Imagina que quieres hacer una lista de usuarios, con esta herramienta creas una con foto, nombre y email y la duplicas las veces que quieras con contenido aleatorio. Que quieres fotos de animales, sin problema y sin salir de Photoshop, con un clic la tienes. También sincronizas estilos, fuentes, en fin, mejor que veas el vídeo.
5. Pyroclasm
Con esta acción para Photoshop arderá tu fotografía.
Actualización
Agradezco a mi amigo Diego Mattei que me avisara que esta acción de Pyroclasm no es gratuita, cuesta 5 dólares.
No more banding es una excelente acción para Photoshop que elimina ese maldito efecto de banding en los degradados, esas horrorosas barras en las transiciones de color.
Esta acción lo corregirá aunque hará que el archivo pese mucho más porque lo convierte a un documento de 16 bits. Cuando exportes se recomienda que vuelvas a convertirlo a 8 bits.
5 plugins más para aumentar tu productividad con variables, renombrar capas masivamente, escalar archivos y para trabajar con código HTML y CSS dentro de Photoshop.
Con este plugin puedes meter código HTML y CSS dentro de tu PSD, lo representa con el motor WebKit de forma que puedes ver por ejemplo cualquier recurso externo: fuentes web, imágenes externas, css externo como por ejemplo Bootstrap, etc.
Podrás cambiar el tamaño de los elementos sin problemas. Una de las grandes ventajas es por ejemplo cuando diseñamos un formulario, en vez de crear los elementos simplemente añade el HTML.
Photoshop CC 2015, de momento sólo disponible para Mac OS
Crea y usas variables en Photoshop y úsalas poniendo #nombrevariable como nombre de la capa. Por ejemplo para colores con el valor hexadecimal, tamaño de la fuente, visibilidad, etc.
