Ya hemos visto varias formas para mostrar el contenido de un feed en cualquier lugar del blog, pues ahora veremos otra forma que es mucho más efectiva y rápida, utilizando WordPress.
Este método lo tengo implementado en la sección "Blogs de Ayuda" desde hace unos días y realmente funciona mucho más rápido que utilizando FeedBurner.
Podemos hacerlo de 3 formas, una donde sólo mostraremos el título del post con su url, mostrar el título y un extracto del contenido o mostrar el título y todo el contenido.
Para mostrar sólo el título utilizaremos este código:
include_once(ABSPATH.WPINC.'/feed.php');
$feed = fetch_feed('http://feeds2.feedburner.com/Ayuda-Blogs');
$limit = $feed->get_item_quantity(7); // Especificar el número de links
$items = $feed->get_items(0, $limit); // Crea un "array" con los links
}
if ($limit == 0) echo '<div>No hay artículos en el feed o es inaccesible.</div>';
else foreach ($items as $item) : ?>
<div class="titulo">
<li><a href="<?php echo $item->get_permalink(); ?>"
title="<?php echo $item->get_title(); ?> | <?php echo $item->get_date('j F Y'); ?>">
<?php echo $item->get_title(); ?>
</a></li>
</div>
<?php endforeach; ?>
Para mostrar el título y un extracto utilizaremos este otro código:
include_once(ABSPATH.WPINC.'/feed.php');
$feed = fetch_feed('http://feeds2.feedburner.com/Ayuda-Blogs');
$limit = $feed->get_item_quantity(7); // Especificar el número de links
$items = $feed->get_items(0, $limit); // Crea un "array" con los links
}
if ($limit == 0) echo '<div>No hay artículos en el feed o es inaccesible.</div>';
else foreach ($items as $item) : ?>
<div class="titulo">
<li><a href="<?php echo $item->get_permalink(); ?>"
title="<?php echo $item->get_title(); ?> | <?php echo $item->get_date('j F Y'); ?>">
<?php echo $item->get_title(); ?>
</a></li>
</div>
<div class="extracto">
<?php echo substr($item->get_description(), 0, 200); ?>
<span>[...]</span>
</div>
<?php endforeach; ?>
Podemos elegir la extensión que tendrá el extracto en caracteres, que por defecto trae 200 y que puedes modificar donde dice:
Y por último podemos mostrar el título y el contenido del feed completo, utilizando este código:
include_once(ABSPATH.WPINC.'/feed.php');
$feed = fetch_feed('http://feeds2.feedburner.com/Ayuda-Blogs');
$limit = $feed->get_item_quantity(7); // Especificar el número de links
$items = $feed->get_items(0, $limit); // Crea un "array" con los links
}
if ($limit == 0) echo '<div>No hay artículos en el feed o es inaccesible.</div>';
else foreach ($items as $item) : ?>
<div class="titulo">
<a href="<?php echo $item->get_permalink(); ?>"
title="<?php echo $item->get_title(); ?> | <?php echo $item->get_date('j F Y'); ?>">
<?php echo $item->get_title(); ?>
</a>
</div>
<div class="contenido">
<p><?php echo $item->get_content(); ?></p>
</div>
<?php endforeach; ?>
Este último muestra el artículo completo, siempre y cuando el feed esté configurado para mostrarse completamente, ya que algunos sólo muestran extractos.
Para modificar el feed que se mostrará deben modificar la tercera línea y agregar el feed que quieran, en este caso se muestra el de Blogs de Ayuda.
]]>
Mostrar imágenes transparentes es una buena técnica en diseño, sí, se ven bien. Esta técnica la utilizo en la sidebar, donde están las imágenes 125x125.
En este post les mostraré como hacerlo utilizando CSS. Las imágenes estarán transparentes de forma predeterminada y al pasar el mouse sobre ellas volverán a su estado normal.
Para hacerlo crearemos un class en CSS, que puede tener cualquier nombre. El código que agregaremos a nuestra hoja de estilos será el siguiente:
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
-khtml-opacity: 0.6;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /*Internet Explorer 8*/}
a.transparencia:hover img {
filter:alpha(opacity=100);
-moz-opacity: 1.0;
opacity: 1.0;
-khtml-opacity: 1.0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /*Internet Explorer 8*/}
Para lograr el efecto debemos agregar el class a la imágen, de esta forma:
Si quires usarlo en las imágenes dentro de tus posts, debemos hacerlo de esta forma:
filter:alpha(opacity=60);
-moz-opacity: 0.6;
opacity: 0.6;
-khtml-opacity: 0.6;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; /*Internet Explorer 8*/}
En este caso sólo se mostrará la transparencia, sin el efecto hover.
Con esto será suficiente y ya podremos observar el efecto en nuestras imágenes.
]]>
Esa imagen muestra 1 de mis backups, que pesa solamente 21 megabytes.
Este backup incluirá todos nuestros archivos, no solo los de WordPress.
Las opciones del plugin son muy faciles de configurar, aunque tiene 2 modos:
- EasyMode (Modo Fácil)
- AdvancedMode (Modo Avanzado)
Modo Facil
Con solo ver la imagen podremos darnos cuenta que cambiar al modo avanzado en tan simple como presionar un enlace.
Backup Path: este es el directorio en donde se encontrarán nuestros backups. Puedes elegir cualquier lugar para guardarlos, pero debes crear el directorio. No se creará automáticamente. Luego presionamos save.
Basic Scheduling:
Backup Type:
- Full Backup Weekly: nos permite configurar un backup semanalmente. Por defecto viene desactivado, pero activarlo es tan simple como presionar activate >>.
- SQL Only Backup Daily: nos permite hacer un backup automático de nuestra base de datos. Al igual que el anterior viene desactivado por defecto.
Mail Setup
Nos permite agregar direcciones de email, separadas por "coma" (,), para que nos envía nuestro backup por mail y no tengamos que hacerlo de forma manual.
Modo avanzado
Backup Path: ahora tenemos un control total sobre la dirección donde queremos guardar nuestros backups. Igual que antes debemos crear el directorio para que funcione.
Basic Scheduling: es exactamente igual que el anterior, no debemos hacer nada diferente.
Mail Setup: igual que antes agregamos direcciones de email, separadas por coma. Es exactmente igual que arriba.
Exclude Lists: podemos agregar archivos o directorios que no queramos que sean incluidos en nuestro backup, por ejemplo: wp-includes. Al hacerlo esa carpeta no se agregará en el backup.
Enlace: Backup WordPress
Descarga: Directa
Nota: el plugin lo llevo probando desde hace 2 semanas, funciona correctamente en la versión 2.7.1 de WordPress.
]]>Para empezar debemos loggearnos en FeedBurner (si no tienes una cuenta debes registrarte) y presionar en "Publicize".
Y ahora debemos entrar en "BuzzBoost".
Ahora debemos configurar como queremos que se vea nuestro Widget que tendrá las url de nuestro Blog. Estas son las opciones que nos muestra:
Ahora veamos para que sirve cada opción.
Feed Settings
- Number of items to dislay: seleccionamos un número, el cual será la cantidad de post a mostrar, en este caso 3.
- Open links in: New Window: abrir en una nueva ventana. Same Window: abrir en la misma ventana.
Feed Content to Display
- Display feed title (or provide your own): Mostrará el título que elijamos como link hacia tu Blog.
- Display favicon: mostrará nuestro favicon, siempre y cuando la imagen esté en la siguiente url: http://www.direccionurl.com/favicon.ico
- Display item author name: mostrará el nombre del autor del post.
- Display item content:
- Item Content Format:
- Plain Text: mostrará el "texto plano", es decir sin ningún tipo de enlaces ni estilos, como puede ser la negrita.
- Plain Text Excerpt Length: cantidad de palabras que se mostrará como texto plano.
- Full HTML: mostrará el texto con las etiquetas HTML funcionales, es decir, mostrará enlaces y negritas.
- Display item publication date:
- Date format: elegimos el estilo de como se mostrará la fecha.
- Date Location: lugar en el cual se mostrará la fecha. Above: antes de contenido. Below: debajo del contenido.
- Show linked media from a podcast: mostrará una url para ver o escuchar un podcast, pueden ser videos o archivos de sonido.
- Display link to feed: mostrará un enlace hacia tu Feed, el único problema es que lo muestra en Inglés.
Ahora solo presionamos Activate y nos brindará un código para mostrar el Feed.
Se verá de esta forma: ejemplo.
Ahora que tenemos listo nuestro Widget, podemos darle estilos CSS y acomodarlo al diseño de nuestro Blog.
En esta página nos enseñan como se forma este widget, y también nos muestra los "divs" y "class" que utilizan para darle CSS, que nosotros podemos editar.
La imágen que se muestra debajo de los post la podemos ocultar utilizando el siguiente código:
Podemos editar los titulos de esta forma, ya que se muestran utilizando la etiqueta "li":
Con esto mostraremos una imágen en vez del punto tradicional y se elimina el espacio que está antes de el.
El tamaño y estilo de las fuentes del contenido lo podemos editar de la siguiente forma:
Aquí elegimos como fuenta la Verdana y de 13 px de tamaño.
Dejense llevar por su imaginación 
Espero que les sirva este pequeño tutorial, como a mí.
]]>
¿Te gustaría integrar un enlace o botón para que tus lectores puedan imprimir tus artículos?
Esto es muy simple de hacer gracias a un simple código JavaScript.
Les mostraré 2 opciones, pero sin utilizar plugins.
- Con enlace: Imprimir este Artículo
- Con imágen:
(La imágen puede ser de cualquier tamaño, pero con esta se hace menos intrusivo.)
Enlace
Para insertar el enlace, lo debemos hacer en el archivo single.php o en algún lugar de tu página que normalmente sería al final del artículo.
Debemos insertar este simple link:
Simple no? :B
Con Imágen
Debemos ponerlo en el mismo lugar que el enlace. Este código es un poco más largo, pero la unica diferencia con el otro, es que se hace un llamado a una imágen.
Lo bueno de utilizar esto en tu página o blog, es que el contenido se hace más facil de manipular, ya que hay gente que prefiere leer en papel.
Espero les sea útil
Pues ahora podrás implementarlos sin tener que utilizar ningún plugin, solo editando código.
Primero que nada deberemos hacer una copia de los siguientes archivos, en caso de error:
- index.php
- sidebar.php
Ahora crearemos una categoría llamada minipost o asides, o lo que tu quieras, que se vea en pequeño.
Ahora debemos saber cual es su ID.
La forma de hacerlo es simple:
Debemos poner el mouse encima de la categoría y en la barra de estado del navegador nos mostrará una URL en donde se muestra la ID. (En cada blog es distinta, recuerdenlo)
Ahora en sidebar.php pondremos este código:
<div id="minipost">
<?php query_posts('cat=142&showposts=5'); while (have_posts()) { the_post(); ?>
<li id="minipost-<?php the_ID(); ?>">
<?php echo wptexturize($post->post_content); ?>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Enlace Permanente a <?php the_title(); ?>">#</a>
<?php comments_popup_link('(0)', '(1)', '(%)'); ?>
<?php edit_post_link('(e)'); ?>
</li>
<?php } ?>
</div>
Con esto haremos que se abra un nuevo Loop en donde sólo mostraremos las últimas 5 entradas (showposts=5) de nuestro blog con la Categoría Asides (ID=142).
Ahora debemos hacer que las entradas de la categoría asides no se muestren junto a las demás entradas. Para hacer esto debemos editar nuestro archivo index.php y buscar las línes que abren el Loop, que es el encargado de mostrar todas nuestras entradas:
y
Ahora solo debemos editarlas para que queden de esta forma:
y
Con esto hacemos que sólo se muestren las entradas de todas las categorías excepto la categoría Asides (ID=142).
Otro metodo para hacer que no se muestre una categoría en el index es utilizando un plugin, que es el que yo uso, ya que por alguna razón no pude hacerlo con estos códigos.
Este plugin se llama Advanced Category Excluder.
Para instalar el plugin debemos:
- Descargarlo desde el Directorio de WordPress
- Descom'pimirlo y subirlo a la carpeta
wp-content/plugins. - Activarlo desde el Panel de Administración
- Configurarlo en ACE que se encuentra debajo de Opciones
Ahora solo debemos darle toques con CSS utilizando la etiqueta minipost (#minipost).
Espero les resulte y les guste, como a mí .
Vía: tikitak-o-rama
]]>
¿Qué es un Mapa de Web?
Un Mapa de Web es similar a un Sitemap con la diferencia de que el Mapa de Web está diseñado para ser visitado por los usuarios, mientras que un Sitemap está diseñado más para los Buscadores.
En un Mapa de Web encontraremos todos los enlaces a Páginas y Entradas que estén en el blog, ordenadas.
Puedes leer nuestro tutorial para crear un Sitemap en WordPress.
Hasta ahora conozco solamente 2 formas de crear un Mapa de Web y son las siguientes:
A través de un Plugin:
Esta es la mas simple y la que la mayoría de las personas utilizan.
La idea es instalar un Plugin que nos cree automáticamente este mapa con solo insertar un código especial en la página utilizada.
Este plugin se llama Dagon Design Sitemap Generator.
Para instalarlo solo debemos:
- Descargar el plugin desde el Directorio de WordPress
- Activar el plugin en el Panel de Administración.
Ahora solo debemos crear una nueva Página:
- Le pones el nombre que quieras, por ejemplo: Mapa Web (que original :B)
- Activas el modo HTML y escribes el siguiente código:
Ahora veamos otro metodo para crear un Mapa Web.
A través de una Plantilla:
Este metodo lo recomiendo y es el que utilizo.
Consta en crear una Plantilla y agregar el siguiente código:
/*
Template Name: Sitemap
*/
?>
<?php get_header(); ?>
<div id="content">
<div id="subnavbar">
<ul id="subnav">
<?php wp_list_categories('sort_column=name&title_li=&depth=3&'); ?>
<li><a href="http://www.descargasoft.co.cc/">Descargas Gratis</a></li>
</ul>
</div>
<div class="entry">
<h2><?php the_title(); ?></h2>
<h3>Todas las Páginas:</h3>
<ul>
<?php wp_list_pages('title_li='); ?>
</ul>
<h3>Todos las Entradas:</h3>
<ul>
<?php $archive_query = new WP_Query('showposts=1000');
while ($archive_query->have_posts()) : $archive_query->the_post(); ?>
<li><a href="<?php the_permalink() ?>" rel="bookmark" title="Permalink para <?php the_title(); ?>"><?php the_title(); ?></a> <strong><?php comments_number('0', '1', '%'); ?></strong></li>
<?php endwhile; ?>
</ul>
<h3>Archivos Mensuales:</h3>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
<h3>Archivos por Categoría</h3>
<ul>
<?php wp_list_categories('title_li=0'); ?>
</ul>
<h3>Feed del Blog:</h3>
<ul>
<li>Feed RSS de tu Blog</li>
<li>URL suscripcion por mail a tu blog</li>
</ul>
<h3>Sitemap</h3>
<ul>
<li>URL de tu sitemap.xml</li>
</div></div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
Para implemenar esta plantilla, debes crear una nueva página y en Atributos->Plantilla debes seleccionar Sitemap y crear tu página, no escribas nada. Solo publicala.
Al usar este código nos dividira de esta forma la página:
- Todas las Páginas
- Todas las Entradas
- Archivos Mensuales
- Archivos por Categorías
- Feed del Blog
- Sitemap (Aquí puedes poner la url hacia tu sitemap.xml)
Es muy simple y funciona correctamente
Espero les sea útil este pequeño tutorial 
Para insertar esta Barra en Foroactivo es muy simple.
Esta barra solo la verán los usuarios que no esten Logueados, o no registrados. La barra desaparecerá automáticamente luego de que Logueen.
Primero que nada necesitaremos 2 códigos.
El código CSS lo debemos agregar en:
Panel de Administración-> Visualización-> Imágenes y Colores-> Colores-> CSS Stylesheet.
Si no haz agregado ningún código antes, esta estará en Blanco.
Código CSS
#topbar{
position: fixed;
top: 0px;
left: 0px;
padding: 10px 7px 3px 37px;
border-bottom: 1px solid black;
background: honeydew url('http://upload.wikimedia.org/wikipedia/commons/thumb/2/24/Gtk-dialog-warning.svg/35px-Gtk-dialog-warning.svg.png') no-repeat 3px;
width: 100%;
color: black;
font-size: 18px;
text-align: justify;
height: 25px;
}
#topbar:hover{
background-color: lightskyblue;
width: 100%;
color: white;
text-decoration: none;
}
El código JavaScript lo debemos agregar en:
Panel de Administración-> Visualización-> Templates-> General-> overall_footer.
Debes agregar el código al comienzo de esta plantilla, antes de <-- BEGIN html_validation -->. Haz varios ENTER para separar los códigos.
Código JavaScript
<script type="text/javascript">
/* Script simplificado y hecho por BlAcKDoZzEr666
http://inforo.xtreme-foros.com
Original por Bourne
http://xtreme-foros.com
© No remover este comentario */
function Conexion() {
var a, b;
a = document.getElementById("i_icon_mini_login") ;
b = document.getElementById("i_icon_mini_logout") ;
if (a != null) { // No conectado
return false ;
} else { // Conectado
return b.getAttribute("alt") ;
}
}
if (Conexion()) {
document.write("") ;
}
else {
document.write("<a href=\"profile.forum?mode=register\" id=\"topbar\">\n") ;
document.write("<div>Hola! Parece que no estas registrado. Hazlo y Comparte con los demás.</div>") ;
document.write("</a>") ;
}
</script>
Ahora lo único que debemos hacer es adaptar el tamaño de fuente y el color en elcódigo CSS.
Pueden ver el Funcionamiento de esta Barra en Descarga Soft
¿Muy simple verdad?