Guía Definitiva Para Personalizar y Editar las Imágenes de Blogger (BlogSpot)

Few polaroid photos in a hand

Aunque los más veteranos aconsejan una plataforma WordPress autoalojada, la plataforma Blogger de Google también es una excelente opción para un gran número de blogueros. La gente suele quejarse de la limitada flexibilidad disponible en esta última plataforma de blogging. Pero esta afirmación es parcialmente correcta. Hay muchas funciones ocultas de Blogger que el usuario general desconoce. Y una de esas características potentes y extremadamente flexibles es la posibilidad de personalizar las imágenes utilizadas en las entradas del blog. Aquí estamos hablando de diferentes tipos de optimizaciones y efectos que podemos aplicar a las imágenes subidas. Afortunadamente, las imágenes subidas en la plataforma de Blogger se alojan internamente en Google App Engine. Esta última plataforma cuenta con potentes capacidades de procesamiento de imágenes que pueden ser utilizadas por los usuarios de Blogger con bastante facilidad. Y eso es lo que vamos a aprender hoy. Una vez que te familiarices con estas opciones de procesamiento de imágenes, podrás hacer tus publicaciones en el blog, mucho mejor que antes. Empecemos y dominemos las flexibles técnicas de manipulación de imágenes de la plataforma Blogger.

Después de aprender las técnicas de procesamiento de imágenes que se comentan a continuación, debes actualizar las imágenes de tus archivos de publicaciones según tus necesidades exactas. Si el archivo de tu blog es enorme, esto puede ser una tarea que lleve mucho tiempo.


Para reducir la carga, actualice un número fijo de entradas, cada día.

Antes de empezar, te recomiendo encarecidamente que pruebes estas técnicas de procesamiento de imágenes en un post de demostración. Una vez que te hayas familiarizado con las técnicas, no dudes en aplicarlas en las entradas reales del blog. Así que, ¡aquí vamos!

Redimensionamiento y recorte de imágenes

Comenzaremos la primera sección con varias opciones de redimensionamiento y recorte de imágenes disponibles para los usuarios de Blogger. Pero antes de eso, echaremos un vistazo a la estructura genérica de la URL de una imagen subida a la plataforma de Blogger. Así es como se ve.

https://1.bp.blogspot.com/xxxxxxxx/xxxxxxxx/xxxxxxxx/s320/baby.png
Lenguaje del código: JavaScript (javascript)


Aquí, el valor s320 es donde ocurre toda la magia. En su caso, el valor numérico puede ser mayor o menor. Sólo tenemos que manipular esta parte de la URL para personalizar las imágenes. Comencemos.

s0 (dimensiones de la imagen original)

A menudo sólo necesitamos mostrar la imagen cargada con sus dimensiones originales dentro de una entrada de blog. Para ello, basta con añadir un cero al parámetro s. Por ejemplo, s0 obtendrá la imagen subida con su tamaño original.

s000 (000 píxeles de imagen en la dimensión más grande)

Si utiliza un número con el parámetro s, por ejemplo, s350, obtendrá una imagen con una dimensión de 350 píxeles.

w000 (imagen con ancho personalizado)

Para obtener una imagen con un ancho de píxel fijo, utilice este parámetro. Por ejemplo, w500 le da una imagen de 500 píxeles de ancho.

h000 (imagen con altura personalizada)

Para una imagen de altura fija (en píxeles), utilice este parámetro. Por ejemplo, h250 recupera una imagen de 250 píxeles de altura.

Si especifica tanto la anchura como la altura, por ejemplo w500-h150, entonces, para preservar la relación de aspecto de la imagen, el parámetro de la altura tiene prioridad y anula el parámetro de la anchura.

Obsérvese que los parámetros múltiples se unen con un guion.

c (recortar la imagen a las dimensiones especificadas)

Este es un simple parámetro de recorte de la imagen y se utiliza junto con los parámetros de anchura y altura.

Por ejemplo, w500-h150-c recortará la parte superior de la imagen a las dimensiones proporcionadas.

n (recortar la imagen desde el centro)

Este es similar al parámetro c con una sola diferencia. En lugar de recortar desde arriba, este parámetro recorta una imagen (por ejemplo w500-h150-n) desde el centro.

p (recorte cuadrado inteligente)

Este parámetro intenta recortar la parte importante de la imagen empezando por el centro. La relación de aspecto no se conserva. Un ejemplo es, w500-h150-p.pp (forma alternativa al recorte cuadrado inteligente)Es exactamente similar al parámetro anterior. A pesar de haber hecho pruebas enérgicas, no he podido encontrar una diferencia de recorte notable con este parámetro.

pa (conservar la relación de aspecto de la imagen)

Este parámetro de recorte inteligente (por ejemplo w500-h150-pa) es similar al parámetro p. La única diferencia es que preserva la relación de aspecto. Naturalmente, el parámetro de altura también tiene prioridad en este caso.

pf (recorte inteligente con reconocimiento facial)

Este también intenta un recorte inteligente con detección de rostros. La relación de aspecto no se conserva y el recorte comienza desde el centro. Un ejemplo es w500-h150-pf.

cc (recorte circular de la imagen)

Y, si está interesado en el recorte circular (véase la imagen de abajo), utilice este parámetro. Si también se proporcionan los parámetros de anchura y altura, este último tiene prioridad cuando se trata de la parte recortada.

A toddler

El área fuera de la parte recortada se devuelve como fondo transparente. Un ejemplo del mismo es w200-h150-cc.

ci (recorte de imagen cuadrada simple)

Este parámetro (por ejemplo w700-h150-ci) devuelve una imagen circular recortada perfectamente cuadrada con la dimensión más pequeña posible cerca de los parámetros de anchura o altura más bajos especificados. No es necesario especificar los dos parámetros, si necesitas una imagen circular de 200 pixeles de ancho puedes utilizar w200-ci, h200-ci o s200-ci.

lf (recorte de cara suelta)

Después de muchas pruebas, este parámetro (por ejemplo w700-h150-lf) simplemente devuelve una imagen con la altura especificada manteniendo la relación de aspecto intacta.

nu (evita el cambio de tamaño más allá de las dimensiones originales)

Este útil parámetro puede utilizarse para desactivar el redimensionamiento de una imagen mayor que sus dimensiones originales. Por ejemplo, si la anchura original de la imagen es de 600 píxeles, a pesar de especificar una anchura mayor w1600-nu, la imagen no se escalará más allá de la anchura original debido a la presencia del parámetro nu.

Con esto terminamos todos los parámetros comunes y útiles disponibles para el cambio de tamaño de la imagen y el recorte. Siéntase libre de probar estos parámetros a través de una entrada de demostración.

Efectos, filtros y ediciones diversas

Después de familiarizarnos con los aspectos básicos, pasemos a las técnicas avanzadas de personalización de imágenes para editar o mejorar las imágenes subidas. Algunas de estas opciones se utilizan raramente o nunca, mientras que otras pueden utilizarse a diario.

Vamos a familiarizarnos con estas opciones, una por una.

Voltear la imagen verticalmente

Para voltear una imagen, verticalmente, utilice la opción fv. Por ejemplo, s0-fv volteará la imagen con las dimensiones originales verticalmente.

Voltear la imagen horizontalmente

Para un giro horizontal, utilice la opción fh. Un ejemplo sencillo, una vez más, es s0-fh.

Girar la imagen

Si quieres rotar la imagen, utiliza la opción r. Hay tres ángulos de rotación disponibles: 90, 180 y 270 grados. Por ejemplo, s0-r180 es esencialmente un giro vertical.

Obtener el formato JPG

Utilice la opción rj para obtener la imagen en formato JPG. Por ejemplo, una imagen PNG con los parámetros s0-rj le dará la misma imagen en formato JPG.

Obtener el formato PNG

Para recuperar la imagen en formato PNG, utilice la opción rp, por ejemplo s0-rp.

Obtener el formato WebP

Para obtener una imagen en el formato WebP de Google, utilice la opción rw, por ejemplo s0-rw.

Obtener el formato GIF

Para convertir la imagen en un formato GIF, utilice la opción rg, por ejemplo s0-rg.

Aplicar opciones de formato

Generalmente, las imágenes JPEG son de 3 tipos, a saber, Línea de base estándar, Línea de base optimizada y Progresiva. Podemos utilizar estos tipos mediante la opción v con los números 0, 1, 2 y 3.

Por ejemplo, s0-v0 o s0-v1. A medida que aumentamos el número a 2 y 3, la degradación de la calidad es sustancial y no se recomienda para uso en la web.

Obtener MP4 de un GIF animado

Si quieres incrustar un GIF animado en forma de archivo de vídeo MP4, utiliza la opción rh. He aquí un ejemplo.

 <video width="480" controls autoplay loop><source src="https://1.bp.blogspot.com/-ZhJRljC9zUE/YIJJvPgOmiI/AAAAAAAAZwU/hVxth7ITBFUb95RG1oKBbjxIytJldSP_QCLcBGAsYHQ/s200-rh/boom.gif" type="video/mp4"> </video>
Lenguaje del código: HTML, XML (xml)

GIF

2078 kb

MP4

287 kb

La anchura se puede cambiar según sus necesidades. Como habrás notado, hemos utilizado la etiqueta <video> de HTML5 en lugar de utilizar la etiqueta <img> normal.

Para el ejemplo he tomado una imagen GIF con transparencia y evidentemente no se ve bien en formato de video MP4, pero, considerando la inmensa diferencia en tamaño de los archivos resultante si tienes un GIF sin transparencias definitivamente deberías pasarlo a formato de video con el parámetro rh si te interesa que tu web cargue mas rápido.

Deshabilitar animación GIF

Si quiere deshabilitar la animación de la imagen GIF y quiere la versión estática de la misma, utilice la opción k. Por ejemplo, s0-k devuelve la forma estática de una imagen GIF animada. Este parámetro muestra la imagen con un botón de play o reproducir superpuesto, podría utilizarlo para enlazar al gif animado, alternativamente si quieres la imagen estática sin botón puedes utilizar el parámetro rj.

https://1.bp.blogspot.com/-ZhJRljC9zUE/YIJJvPgOmiI/AAAAAAAAZwU/hVxth7ITBFUb95RG1oKBbjxIytJldSP_QCLcBGAsYHQ/s200-k/boom.gif
Lenguaje del código: JavaScript (javascript)

Establecer un borde/marco personalizado

Generalmente, para aplicar un borde personalizado o un marco alrededor de una imagen, utilizamos reglas CSS. Pero, ¿y si podemos hacerlo sin usar ningún código CSS?

A smiling toddler

Afortunadamente, se puede obtener fácilmente un borde personalizado (ejemplo mostrado arriba) mediante la combinación de dos parámetros. El primer parámetro b añade a la imagen un borde de un grosor determinado de píxeles.

El segundo parámetro c se utiliza para especificar el color del borde en formato hexadecimal. El ejemplo anterior utiliza los parámetros s320-b10-c0xff4B0082. Aquí, el grosor del borde es de 10 píxeles y el color está en el formato 0xAARRGGBB, el color del marco está definido en los últimos 6 caracteres de la variable en este caso utilicé el color #4B0082.

Comprimir una imagen JPEG

-Si se preocupa por la velocidad del sitio, servir imágenes voluminosas a los visitantes no es nada recomendable. La compresión de imágenes puede reducir el tamaño del archivo, lo que a su vez reduce el tamaño total de la página web.

Existe un parámetro de compresión de imagen l que reduce el tamaño del archivo pero que afecta a la calidad de la imagen al mismo tiempo. Un ejemplo del mismo es s0-rj-l85 que comprime el archivo en un 15%.

Establecer tiempo de cache de la imagen

El almacenamiento en caché de los activos por parte del visitante es una de las características importantes para ofrecer una experiencia de navegación rápida a los lectores. Para ello, hay que especificar el tiempo de caducidad de los archivos.

Para ello, utilice el parámetro e. Por ejemplo, s0-e30 almacenará la imagen en la caché del navegador del visitante del sitio durante 30 días.

Desenfoque de imagen

Por lo general, no difuminamos las imágenes cuando las utilizamos para el contenido de la web. Pero, en algunos casos, podemos necesitar hacerlo. Afortunadamente, también hay un parámetro para desenfocar las imágenes.

https://1.bp.blogspot.com/-RogZQuougII/YIJVvzRT9HI/AAAAAAAAZwc/jhJ3sWC7zzsR5Q1MZiE-JgUiPHUhDRAeACLcBGAsYHQ/w320-h200-pp-b10-c0xff4B0082-fSoften=1,17,0/30.jpg
Lenguaje del código: JavaScript (javascript)
A blurred image of a smiling toddler

Utilice la opción fSoften que toma 3 parámetros numéricos para añadir el efecto de desenfoque. Para la imagen de muestra mostrada arriba, he utilizado fSoften=1,17,0 para añadir el efecto de desenfoque deseado. Aquí, el número del medio se puede cambiar de 0 a 100 para ajustar la intensidad del efecto de desenfoque.

Añadir gradiente y sombra en el borde

Y ahora viene el efecto de degradado combinado con un color de sombra de borde personalizado. Sí, ¡también puedes hacerlo!

An of a smiling toddler with a gradient effect

Utilice la opción fVignette para añadir estos dos efectos a la imagen. Para la imagen de demostración, he utilizado fVignette=1,100,1.5,0,4b0082 para añadir el degradado y la sombra del borde.

Aquí el número de punto flotante (3er parámetro) puede ser usado para ajustar el área de cobertura del gradiente y el código de color hexadecimal (último parámetro) puede ser usado para especificar el color de la sombra del borde.

Así pues, estos son los 29 parámetros de manipulación de imágenes disponibles para los usuarios de la plataforma Blogger BlogSpot. Aprovecha estas opciones para servir mejores imágenes a los lectores de tu blog.

En color verde he marcado las secciones que debes tener en cuenta a la hora de optimizar las imágenes de tu sitio para mejorar la velocidad y puntaje en speed insights.

Fuente

Este artículo es una traduccíon del post The Ultimate Guide to Customize and Edit Blogger (BlogSpot) Images de freshtechtips.com.

Creación de fuentes RSS personalizadas en WordPress – La manera correcta

Hay un montón de tutoriales flotando por Internet que describen cómo crear un feed RSS personalizado en WordPress. La mayoría de ellos te hacen crear una nueva plantilla de página, copiando el código que WordPress utiliza para generar fuentes en la plantilla de página, y añadiendo y modificando el código allí.

Además de todo el código RSS duplicado en la plantilla, y la carga de mantenimiento que crea, la mayoría de estos tutoriales muestran prácticas de codificación pobres, vulnerabilidades de seguridad, y no hacen uso de la funcionalidad básica de WordPress. Habiendo estado frustrado con todos los malos tutoriales que hay, decidí hacer algo al respecto y escribir mi propio tutorial mostrando cómo crear un feed RSS personalizado en WordPress de la manera correcta.

Si sólo quieres ver el código, dirígete al repositorio de ejemplo de este post en GitHub. De lo contrario, sigue leyendo.

Inicio

Voy a construir esta funcionalidad como un plugin. La mayoría de los tutoriales te hacen construir esto directamente en tu tema, pero casi siempre deberías estar construyendo cosas como esta en un plugin personalizado para que puedas cambiar de tema en cualquier momento sin perder toda tu funcionalidad personalizada.

Crea un nuevo archivo custom-rss-feed-example.php en el directorio de plugins y añade la cabecera del plugin.

<?php
/**
 * Plugin Name: Ejemplo Feed RSS personalizado
 * Plugin URI:  https://philipnewcomer.net/2016/08/creating-custom-feeds-wordpress-right-way/
 * Description: un plugin de ejemplo para demostrar la forma correcta de implementar fuentes RSS personalizadas o feeds personalizados en WordPress.
 * Version:     1.0
 * Author:      Philip Newcomer
 * Author URI:  https://philipnewcomer.net
 * License:     GPL-2.0+
 * License URI: http://www.gnu.org/licenses/gpl-2.0.txt
 */

namespace PhilipNewcomer\CustomRSSFeedExample;
Lenguaje del código: HTML, XML (xml)

Usted notará en este tutorial que estoy usando namespaces de PHP, los cuales pueden ser desconocidos para usted. Los namespaces reemplazan la necesidad de prefijos en los nombres de sus funciones, y son mejores que los prefijos por varias razones. Sin embargo, pocos desarrolladores de WordPress están familiarizados con los namespaces, a pesar de que han estado disponibles desde PHP 5.3. Parte de la razón puede ser que el núcleo de WordPress todavía soporta PHP 5.2, por lo que no puede usar namespaces hasta que supere su versión mínima soportada por PHP a por lo menos 5.3. Sin embargo, la mayoría de la gente (y los hospedajes web) están usando ahora una versión de PHP que soporta namespaces, por lo que debería estar bien usarlos en su propio código.

Registrar el Nuevo Feed de WordPress

Mi plugin de ejemplo creará un nuevo feed idéntico al feed por defecto, sin embargo con la imagen destacada del post incluida. Sin embargo, este ejemplo bastante trivial puede ser reutilizado para hacer casi cualquier cosa para la que necesites un feed personalizado.

Ahora, vamos a registrar un nuevo feed, llamando a add_feed() en el gancho de acción init.

/**
 * Registra nuestro feed personalizado
 */
function register() {
   add_feed( 'rss2-with-featured-images', __NAMESPACE__ . '\generate_content' );
}
add_action( 'init', __NAMESPACE__ . '\register' );
Lenguaje del código: PHP (php)

La funcion add_feed() registrará un nuevo feed.

El primer parámetro es el nombre del feed, que es también el punto final de la URL en la que el feed será accesible. Como he utilizado rss2-with-featured-images como nombre del feed, nuestro nuevo feed será accesible en http://domain.com/feed/rss2-with-featured-images/.

El segundo parámetro es el nombre de una función que generará el marcado para el nuevo avance. Veremos esa función en la siguiente sección.

Generar el Contenido del Feed Personalizado

Ahora que nuestro nuevo feed está registrado, sólo tenemos que escribir una función para generar el contenido del feed. En lugar de construir un feed completo desde cero, utilizaremos el código RSS2 de WordPress existente para hacer el trabajo pesado por nosotros.

El código que WordPress utiliza para generar un feed RSS2 se encuentra en feed-rss2.php en el directorio de inclusión de WordPress (normalmente /wp-includes). Aunque podríamos simplemente copiar el contenido de ese archivo en nuestro plugin y modificarlo para adaptarlo, eso requeriría que mantuviéramos todo ese código en el futuro. En su lugar, simplemente incluiremos el archivo en nuestra función desde el directorio de inclusión de WordPress.

/**
 * Genera el contenido del feed personalizado
 */
function generate_content() {
   if ( file_exists( ABSPATH . WPINC . '/feed-rss2.php' ) ) {
      require( ABSPATH . WPINC . '/feed-rss2.php' );
   }
}
Lenguaje del código: PHP (php)

Si incluye un archivo de fuera de su plugin o tema, ¡siempre compruebe primero que existe!

Aunque todavía no hemos añadido imágenes destacadas al feed, lo creas o no, ahora tenemos un completo y completamente funcional feed RSS personalizado además de nuestro feed regular. Eso fue mucho más limpio que copiar todo el archivo feed-rss2.php en su plugin o tema sólo para crear un nuevo feed, ¿no?

Adelante, activa el plugin y pruébalo. (Añadiremos las imágenes destacadas en la siguiente sección.) Ten en cuenta que después de activar el plugin, tendrás que eliminar las reglas de reescritura de tu sitio (visitando la página Configuración > Enlaces permanentes en el admin) para «activar» la nueva URL del feed. Sólo tendrás que hacer esto una vez después de añadir un nuevo feed, o cambiar el nombre de un feed registrado previamente.

Añadir Imágenes Destacadas a la Fuente RSS Personalizada

Ahora que tenemos una fuente RSS separada y completamente funcional, sigamos adelante y agreguemos las imágenes destacadas, teniendo cuidado de que sólo afecten a nuestra fuente personalizada. Podemos hacerlo añadiendo un filtro en los ganchos the_content_feed y the_excerpt_rss inmediatamente antes de incluir el archivo feed-rss2.php, añadiendo la imagen destacada con una función de filtro y eliminando los ganchos después de la inclusión. Esto hará que los filtros se apliquen al código de feed-rss2.php sólo cuando se incluya en nuestro feed personalizado.

Modifique la función generate_content() para añadir y eliminar los filtros:

/**
 * Genera el contenido de nuestro feed personalizado
 */
function generate_content() {

   add_filter( 'the_content_feed', __NAMESPACE__ . '\prepend_thumbnail' );
   add_filter( 'the_excerpt_rss',  __NAMESPACE__ . '\prepend_thumbnail' );

   if ( file_exists( ABSPATH . WPINC . '/feed-rss2.php' ) ) {
      require( ABSPATH . WPINC . '/feed-rss2.php' );
   }

   remove_filter( 'the_content_feed', __NAMESPACE__ . '\prepend_thumbnail' );
   remove_filter( 'the_excerpt_rss',  __NAMESPACE__ . '\prepend_thumbnail' );
}
Lenguaje del código: PHP (php)

Añadir el filtro inmediatamente antes del include (y quitarlo después) permitirá que el filtro se aplique sólo al código entre las llamadas add_filter() y remove_filter().

Quitar el filtro después de la inclusión probablemente no es estrictamente necesario en este ejemplo, pero siempre es bueno tener el hábito de limpiar después de hacer algo. En otros contextos, no quitar un filtro cuando se ha terminado puede introducir errores difíciles de encontrar.

Estamos usando los ganchos the_content_feed y the_excerpt_rss para que no importe si hemos elegido (en Configuración > Lectura) mostrar el contenido completo, o sólo el extracto en el feed, la imagen destacada será incluida. Hay un filtro diferente para el extracto y el contenido completo, y al usar ambos, habremos cubierto ambos escenarios.

Por último, tenemos que crear la función a la que se hace referencia en nuestras llamadas add_filter() y remove_filter() anteriores, que en realidad añadirá la imagen destacada al contenido:

/**
 * Agrega la imagen destacada al contenido del feed.
 *
 * @param string $content The feed content.
 *
 * @return string The filtered content.
 */
function prepend_thumbnail( $content ) {

   if ( ! has_post_thumbnail() ) {
      return $content;
   }

   $thumbnail_html = sprintf( "<p>%s</p>\n",
      get_the_post_thumbnail()
   );

   return $thumbnail_html . $content;
}
Lenguaje del código: PHP (php)

Regresamos antes de tiempo si la publicación actual no tiene una imagen destacada. Si hay una imagen destacada, tomamos la etiqueta de la imagen usando la función get_the_post_thumbnail(), la envolvemos en un conjunto de etiquetas de párrafo, añadimos un carácter de nueva línea para mantener el marcado limpio, y la añadimos al contenido.

Para Finalizar

¡Eso es! Carga tu URL de feeds personalizados de nuevo (asegurándote de que el plugin está activado, y de que has actualizado tus permalinks si todavía no lo has hecho), y mira tu feed personalizado en acción.

Es posible que quieras hacer algo más que añadir la imagen destacada a un feed. En ese caso, intenta encontrar un filtro que te permita hacer lo que quieras y úsalo en lugar de los filtros de este ejemplo.

El código completo del artículo está disponible en GitHub. En realidad es un plugin completamente funcional. Siéntete libre de usarlo y construir algo por tu cuenta.

Código Completo Feed RSS Personalizado en WordPress

<?php
/**
 * Plugin Name: Custom RSS Feed Example
 * Plugin URI:  https://philipnewcomer.net/2016/08/creating-custom-rss-feeds-wordpress-right-way/
 * Description: An example plugin to demonstrate the right way to implement a custom RSS feed in WordPress.
 * Version:     1.0
 * Author:      Philip Newcomer
 * Author URI:  https://philipnewcomer.net
 * License:     GPL-2.0+
 * License URI: http://www.gnu.org/licenses/gpl-2.0.txt
 *
 * Copyright (C) 2016 Philip Newcomer
 *
 * This program is free software; you can redistribute it and/or
 * modify it under the terms of the GNU General Public License
 * as published by the Free Software Foundation; either version 2
 * of the License, or (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 */

namespace PhilipNewcomer\CustomRSSFeedExample;

/**
 * Registers our custom feed
 */
function register() {
	add_feed( 'rss2-with-featured-images', __NAMESPACE__ . '\generate_content' );
}
add_action( 'init', __NAMESPACE__ . '\register' );

/**
 * Generates the content of our custom feed
 */
function generate_content() {

	add_filter( 'the_content_feed', __NAMESPACE__ . '\prepend_thumbnail' );
	add_filter( 'the_excerpt_rss',  __NAMESPACE__ . '\prepend_thumbnail' );

	if ( file_exists( ABSPATH . WPINC . '/feed-rss2.php' ) ) {
		require( ABSPATH . WPINC . '/feed-rss2.php' );
	}

	remove_filter( 'the_content_feed', __NAMESPACE__ . '\prepend_thumbnail' );
	remove_filter( 'the_excerpt_rss',  __NAMESPACE__ . '\prepend_thumbnail' );
}

/**
 * Prepends the post's featured image to the feed content
 *
 * @param string $content The feed content.
 *
 * @return string The filtered content.
 */
function prepend_thumbnail( $content ) {

	if ( ! has_post_thumbnail() ) {
		return $content;
	}

	$thumbnail_html = sprintf( "<p>%s</p>\n",
		get_the_post_thumbnail()
	);

	return $thumbnail_html . $content;
}
Lenguaje del código: HTML, XML (xml)

Preguntas Frecuentes

¿Cual será la url del feed personalizado?

En el ejemplo del plugin la url sería http://domain.com/feed/rss2-with-featured-images/ puedes personalizarla utilizando algo diferente en la funcion register() al inicio del código.

¿Porque no funciona me feed personalizado?

Tienes que regenerar las reglas del .htaccess para que funcione, vas a Configuración > Enlaces permanentes y guardas tu configuración de enlaces, no es necesario cambiarla, simplemente da click en el boton guardar y debería funcionar.

Fuente

Este articulo es una traducción del post «Creating Custom RSS Feeds in WordPress – The Right Way» de » Philip Newcomer «.

Como Agregar Botones Para Compartir de Facebook y Twitter en Blogger

https://www.youtube.com/watch?v=TbO-JcHpPps
Video Tutorial Botones Facebook y Twitter en Blogger

Condicional de blogger para mostrar algo solamente en las entradas.

<b:if cond='data:blog.pageType == "item"'>

</b:if>
Sitios De Videos En Internet

Sitios De Videos En Internet, Promociona Tu Web Con Videos

Aquí te dejo una lista de sitios de videos en Internet en los que puedes ver y cargar videos. Colgar un video en la web es una buena forma de promocionar cualquier cosa, una web, un producto, un servicio o cualquier otra cosa. Cuando subas un video tuyo es recomendable que lo marques con la dirección de tu web, si el sitio lo permite puedes colocar un enlace en la descripción de la web para que las personas que vean el video pueden visitar tu web también, la verdad no se si en todos los sitios se puede hacer, pero en youtube se pueden colocar enlaces en la descripción de los videos simplemente escribiendo la url completa, es decir, incluyendo la parte que dice http://, por ejemplo para que visitaran mi página yo colocaria en la descripcion del video la dirección URL de mi página http://www.fernandobenito.com. En otros sitios de videos en Internet es necesario colocar el código html del enlace y en algunos simplemente no se permite. El hecho de colocar enlaces en la descripción de los videos no solamente sirve para que las personas que vean el video visiten tu página, adicionalmente esto tiene un efecto positivo en cuanto a posicionamiento en buscadores.