Estas viendo: Inicio > Archivo por Etiqueta 'Wordpress'
BETA

Simple Tags en WordPress 2.9

Simple Tags es uno de los mejores plugins para la administración de Tags en nuestro blog de WordPress, pero al actualizar WordPress a la versión 2.9 este deja de funcionar pues no es compatible con la versión. Este problema se puede solucionar de forma muy sencilla a través de los siguientes pasos:

  1. Nos dirigimos a la opción Plugins en nuestro panel de control de WordPress.
    image
  2. Clic en la opción editar del plugin Simple Tags.
     image
  3. En el recuadro de edición del código del plugin buscamos la siguiente línea:
    if ( strpos($wp_version, '2.7') !== false || strpos($wp_version, '2.8') !== false) {

    La reemplazamos por:

    if ( strpos($wp_version, '2.7') !== false || strpos($wp_version, '2.8') !== false || strpos($wp_version, '2.9') !== false ) {

  4. Guardamos y listo, el plugin funcionará perfectamente en la versión 2.9 de WordPress.

Sitio | Simple Tags
Fuente | Foros WordPress

Como solucionar la actualización automática de WordPress 2.7

wordpress-logo Si actualizaron a WordPress 2.7 desde una versión anterior, los plugins que tenían anteriormente seguiran en la carpeta de instalación, lo que puede generar problemas al intentar instalar/actualizar automáticamente un theme (en un futuro, el mismo WordPress también se actualizará así), si al tratar de utilizar la funcionalidad de actualización automática de plugins,  les da error en la línea 5498 del archivo class-pclzip.php, diríjanse al Tablero de WordPress, y en la sección plugins desactiven el plugin WordPress Automatic Updates, que se encargaba de esto en versiones anteriores y genera conflictos con las nuevas funciones de actualización de WordPress.

Disponible WordPress 2.7 versión Final

hace unos minutos me acabo de enterar a través de Punto Geek que la versión final de WordPress 2.7 ya se encuentra disponible para su descarga y así mismo ya podemos actualizar nuestros blogs a esta nueva y recargada versión de WordPress la cual sería redundante hablar de sus novedades y mejoras pues como lo dijo Juanguis ya muchos blogs lo han hecho.

wp27

Una recomendación antes de actualizar es realizar una copia de seguridad de nuestro blog, tanto de la base de datos como de los archivos (plug-ins, imágenes, etc.).

Enlace | WordPress
Descarga | WordPress 2.7 Final

Windows Vista WordPress Theme

Existen mucho temas para WordPress con la apariencia de Windows Vista; sin embargo unos son mejores que otros pero nunca imaginé encontrar un tema que se asemeje tanto como el que verán a continuación. Aquí algunas capturas:

wp-vista-1

El botón del menú inicio, realmente funciona:

wp-vista-2

Al posar el cursor sobre el texto de cualquiera de las opciones del menú inferior se muestra una pequeña ventana con el contenido del botón del menú:

wp-vista-3

Posibilidad de cambiar la combinación de colores que usa la plantilla, múltiples opciones:

wp-vista-4

El nombre exacto del tema es Inanis Glass WordPress Theme y es compatible con WordPress 2.6 a superior.

Enlace | Inanis Glass WordPress Theme
Descarga | Inanis Glass WordPress Theme

Moderator, modera comentarios de WordPress desde AIR

moderatormainscreen Moderator, es un plug-in y un cliente para Adobe AIR con el cual podemos moderar los comentarios que llegan a nuestro blog teniendo la opción de descartar aquellos que no cumplan con nuestras normas en los comentarios o también podemos marcar como “spam” a otros; y claro aceptarlos. Alguna características adicionales de este plug-in son las siguientes:

  • Muestra el número de comentarios por moderar
  • El cliente AIR se puede alojar entre los íconos del sistema evitando la recarga de la barra de tareas.
  • Muestra el Gravatar del usuario que ha enviado el comentario (en caso se trate de un avatar poco apropiado)

Moderator es un plug-in muy preciso y enfocado a lo que debe hacer: “moderar comentarios” sin embargo, le falta que muestre la IP de las personas que comentan para así comparar las IP entre comentarios y revisar si se trata de un “spammer”. Sin embargo, el plug-in aún se encuentra en una fase de pruebas (beta) de la cual saldrá pronto.

Luego de activar el plug-in es necesario dirigirse a la opciones del mismo, estas se encuentran dentro de “Opciones” > “Moderator” desde allí podremos instalar el cliente AIR.

moderator_install

Una vez instalado simplemente iniciamos sesión con nuestros datos de WordPress y listo.

Enlace | Moderator
Descargar | Plug-in Moderator
Vía | Ayuda WordPress

Page Link Manager, administrar lista de páginas de WordPress

Page Link Manager es un plug-in para WordPress el cuál modifica las lista de páginas que se muestran por defecto a través de la función wp_list_pages. Por ejemplo el nuevo tema para WordPress que he diseñado no se muestra en el menú superior, pero si hacemos clic en su enlace en el pie de la página veremos su enlace.

Aquí se muestra la lista de página que se desean más no las ocultas:

xploit29-menu

En nuestro panel de administración de WordPress escogemos cuáles son las páginas que deseemos que se muestren:

xploit29-plugin

Sin embargo, también podemos escoger que páginas deseemos sin la necesidad de éste plug-in editando la plantilla del blog:

  1. Buscamos la función correspondiente: wp_list_pages
  2. Por defecto, la función se mostrará de la siguiente manera:
    wp_list_pages();
  3. Lo siguiente será agregar el comando y las ID de las páginas a excluir:

    wp_list_pages(exclude=3,4);
  4. Guardamos los cambios y listo.

Es por ello que Page Link Manager nos facilita el trabajo de excluir ciertas páginas que no deseamos que se muestren de la función principal que muestra las páginas de WordPress.

Enlace | Page Link Manager
Descarga | Page Link Manager
Vía | Il Maistro

Liberado “X-Blue” Theme para WordPress por xploit29

x-blue-preview

X-Blue es el nombre que le he dado a la plantilla que he diseñado y maqueteado para WordPress. Es una plantilla de 1 columna, pero ésta columna es lo suficientemente ancha para poder soportar widgets con pestañas las cuáles son muy llamativas y por lo tanto se realizará un ahorro de la rueda de desplazamiento para poder visualizar todo el contenido de la barra lateral.

La plantilla cumple con todo los estándares web tanto de XHTML & CSS. En caso realices éstas comprobaciones en mi sitio verás que los errores de XHTML & CSS son generados por plug-ins de terceros más no por parte de la plantilla.

Principales características:

  • 100% Fácil de leer
  • Fácil integración con banners de publicidad, la que posee una posición no intrusiva
  • Incluye botones para compartir el contenido (gracias a KNXDT Bookmarks)
  • Compatible con Windows Live Writer
  • Separación de forma automática de Pingbacks o Trackbacks de los Comentarios
  • Ancho total de 990px, con 640px de contenido y 310px en el sidebar
  • Plantilla 100% en español
  • Cumple estándares web.

Descarga:

Descargar X-Blue Theme para WordPress (con plug-in para pestañas)
Descargar X-Blue Theme para WordPress (sin plug-in para pestañas)

Instalación:

El archivo de descarga incluye el plug-in para los tabs, lo importante de este plug-in es que se deben mantener el archivo uitabs.css (es muy importante usar el archivo CSS modificado para esta plantilla)

  • Debes subir la carpeta del theme dentro de la carpeta /wp-content/themes/
  • Una vez subido el theme recuerda activarlo en tu Panel de Administración de WordPress en “Diseño” > “Temas
  • Si también has descargado el archivo que contiene el plug-in recuerda que tienes que activarlo para que funcione correctamente.

Preguntas y comentarios:

Si tienes cualquier tipo de pregunta o comentario, déjalo en la parte inferior del blog o también puedes contactarme.

Permisos y legalidad:

Esta obra se encuentra bajo licencia Creative Commons y puede ser modificada y distribuida sin fines comerciales siempre que se mantenga el crédito al autor original. Cualquier modificación al plug-in editando el crédito de su reconocimiento (línea 156 del código) editando la URL destino no está permitida.

Creative Commons License
X-Blue WordPress Theme by xploit29 is licensed under a Creative Commons Reconocimiento-Compartir bajo la misma licencia 2.5 Perú License.
Based on a work at www.xploit29.com.

Donaciones:

Si deseas apoyar al desarrollo y evolución de X-Blue quizás desees considerar realizar una donación voluntaria a través de PayPal.

Problemas en los enlaces entrantes de WordPress

Hace ya un par de días se me hacía curioso al revisar mi panel de administración de WordPress y ver que la frecuencia de enlaces entrantes ha aumentado de forma inusual. Empiezo explicando de lo que me refiero, el siguiente recuadro:

wp-inlinks

Este recuadro solía mostrar los backlinks provenientes de los post de otros blogs, sin embargo, en los últimos días ya no funciona de esa manera.

Los enlaces entrantes que se muestran en esa lista son recopilados por Google a través de Google Blog Search, a través del cual tenemos la opción de recopilar los resultados a través de RSS.

googleblogsearch

¿De donde provienen estos misteriosos backlinks?

Pues éstos backlinks provienen del blogroll (lista de enlaces), si alguien tiene tu blog en su blogroll, entonces este enlace será tomado como un backlink.

De momento, no sabría si existe algún tipo de solución a esto pues ello era una buena forma de saber quien tomaba información de nuestros posts para escribir el suyo, supongo que se trata de un error por parte de Google Blog Search más no de un error en WordPress.

Crear tabs para cualquier sitio con jQuery (Parte II)

Continuando con este tutorial para incorporar “TABS” o pestañas a nuestro sitio web, ahora vamos a aprender a incorporarlos a WordPress, que pasos debemos seguir y que hay que tener en cuenta. Antes de comenzar es necesario que revisen el primer tutorial de esta serie para que tengan una idea de lo que me refiero con algunos términos.

Para incorporarlos a nuestra plantilla debemos seguir lo siguientes pasos,

  • Nos dirigimos a nuestro panel de administración en WordPress, luego al editor de temas y editamos el archivo header.php (Encabezado)

tabs-edit

Dentro de la edición de este archivo añadimos las siguientes líneas entre las etiquetas <head> y </head>

  <script src="http://code.jquery.com/jquery-latest.js">
  	 <!--mce:0-->
  </script>
  <script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js" type="text/javascript">
     <!--mce:1-->
  </script>
  <script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.tabs.js" type="text/javascript">
     <!--mce:2-->
  </script>
  <script type="text/javascript">
     <!--mce:3-->
  </script>
  • A continuación nos dirigimos a editar el archivo style.css (Hoja de estilos) para definir el estilo de nuestro widget.

tabs-editcss

A este archivo le tenemos que añadir las líneas de código de CSS del tutorial anterior, lo mejor es que ingresen su hoja de estilos propias, verán que no es muy difícil editarla. Pero en caso deseen practicar, aquí tienen el ejemplo que tienen que añadir al final del archivo style.css

.estilo {
			margin:0 0 15px 0;
			padding:0;
			width:310px;
		}
		.ui-tabs-nav{
			margin:0;
			padding:0;
			list-style:none;
		}
		.ui-tabs-nav li {
			margin:0 2px 0 0;
			padding:0 5px 0 5px;
			float:left;
			height:30px;
			border-top:1px #3399FF solid;
			border-right:1px #3399FF solid;
			border-left:1px #3399FF solid;
			font-family:Verdana, Arial, Helvetica, sans-serif;
			font-size:12px;
			line-height:30px;
			text-transform:uppercase;
		}
		.ui-tabs-nav li:hover {
			background:#EBEBEB;
			color:#333333;
		}
			.ui-tabs-nav li:hover a {
				color:#333333;
			}
		.ui-tabs-nav li {
			background:#FFFFFF;
		}
			.ui-tabs-nav li a {
				color:#336699;
				text-decoration:none;
			}
		.ui-tabs-panel {
			margin:0;
			padding:5px;
			float:none;
			clear:both;
			border:#3399FF solid 1px;
			width:298px;
			font-family:Verdana, Arial, Helvetica, sans-serif;
			font-size:12px;
			color:#333333;
		}
			.ui-tabs-panel ul {
				margin:0;
				padding:0 0 0 15px;
			}
			.ui-tabs-panel ul li {
				margin:0 0 5px 0;
			}
		.ui-tabs-panel a {
			color:#336699;
			text-decoration:none;
		}
			.ui-tabs-panel a:hover {
				color:#3399FF;
				text-decoration:underline;
			}
		.ui-tabs-hide {
			margin:0;
			padding:5px;
			float:none;
			clear:both;
			display:none;
			border:#3399FF solid 1px;
			width:298px;
			font-family:Verdana, Arial, Helvetica, sans-serif;
			font-size:12px;
			color:#333333;
		}
			.ui-tabs-hide ul {
				margin:0;
				padding:0 0 0 15px;
			}
			.ui-tabs-hide ul li {
				margin:0 0 5px 0;
			}
		.ui-tabs-hide a {
			color:#336699;
			text-decoration:none;
		}
			.ui-tabs-hide a:hover {
				color:#3399FF;
				text-decoration:underline;
			}
  • Lo siguiente, es editar el archivo sidebar.php (Barra lateral) para poder añadir nuestros “widgets” en código bruto PHP (que más adelante verán) ya que al usar esta sidebar con pestañas no pueden usar el sistema de WordPress para añadir “widgets” a sus recuadros con pestañas.

tabs-editsidebar

Dentro de la edición de este archivo, tenemos que añadir las siguientes líneas de código, si lo deseamos visualizar en la parte superior de nuestra plantilla lo tenemos que añadir antes de la siguiente línea de código:

<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>

Pero si lo desea visualizar en la parte inferior, lo tenemos que poner antes del final del sidebar, es decir, antes de la última etiqueta </div>. La líneas de código a añadir son las siguientes:

    <div id="EJEMPLO" class="estilo">
    <ul>
        <li><a href="#tab-1">Título 1</a></li>
        <li><a href="#tab-2">Título 2</a></li>
    </ul>
    <div id="tab-1">
            Aquí el contenido</div>
    <div id="tab-2">
            Aquí el contenido</div>
    </div>

Debemos recordar mantener la estructura que se mencionó en el tutorial anterior para así evitar que nuestro código no funcione.

  • Finalmente, nuevamente nos dirigimos al archivo header.php para una última adición. Tenemos que añadir lo siguiente tantas veces se hallan añadido recuadros en la edición del archivo sidebar.php manteniendo los nombres de los respectivos id. La línea de código a añadir es la siguiente:
  <script type="text/javascript">
  $(document).ready(function(){
    $("#EJEMPLO > ul").tabs();
  });
  </script>

Repito, debemos repetir, tantas veces sea necesario.

Luego de realizar todas esas modificaciones, nuestro widget con pestañas se mostrará en nuestra barra lateral de WordPress. A continuación, les daré una lista de funciones en PHP que llamarán algunos widgets sin la necesidad de llamarlos a través de nuestro panel de administración de WordPress:

<?php
//Mostrar cateogrías
wp_list_categories('orderby=name&title_li=');
?>
<?php 
//Mostrar archivo
wp_get_archives('type=monthly'); 
?>
<?php
//Ultimos 10 posts
get_archives('postbypost', 10); 
?>
<?php
//Blogroll
wp_list_bookmarks('title_before=<span style="display:none;">&title_after=</span>&title_li=&category_before=&category_after=');
?>

En caso, tengas alguna duda acerca de este tutorial, déjanos un comentario y recuerda que respecto a la edición de la barra lateral, cada barra lateral es distinta en cada plantilla así que ten cuidado.

Crear tabs para cualquier sitio con jQuery (Parte I)

jQuery es una tecnología que simplifica muchas cosas a la hora de realizar el trabajo de estructura de un sitio web, como verán, anteriormente en el desarrollo de esta plantilla, los “TABS” del Sidebar se establecían a través del script de DOMTAB, sin embargo estos me presentaron problemas al incorporarlos a WordPress, así que decidí usar jQuery y en realidad ha sido muy sencillo el insertarlo a la plantilla.

Para iniciar el proceso, entre las etiquetas <head> y </head> debemos añadir las siguientes líneas:

  <script src="http://code.jquery.com/jquery-latest.js">
  	 <!--mce:0-->
  </script>
  <script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.core.js" type="text/javascript">
     <!--mce:1-->
  </script>
  <script src="http://dev.jquery.com/view/tags/ui/latest/ui/ui.tabs.js" type="text/javascript">
     <!--mce:2-->
  </script>
  <script type="text/javascript">
     <!--mce:3-->
  </script>

A continuación, insertaremos entre las etiquetas <body> y </body> el contenido del recuadro, más adelante, veremos como agregar más recuadros también.

    <div id="EJEMPLO" class="estilo">
    <ul>
        <li><a href="#tab-1">Título 1</a></li>
        <li><a href="#tab-2">Título 2</a></li>
    </ul>
    <div id="tab-1">
            Aquí el contenido</div>
    <div id="tab-2">
            Aquí el contenido</div>
    </div>

Podemos agregar tantas pestañas como deseemos sin ningún problema, pero hay que intentar mantener el órden así que es mejor no recargar de pestañas un recuadro. El siguiente paso será la hoja de estilos (el mismo al que uso para esta plantilla) para poder asignarle un diseño al recuadro que contiene la pestañas:

.estilo{
			margin:0 0 15px 0;
			padding:0;
			width:310px;
		}
		.ui-tabs-nav{
			margin:0;
			padding:0;
			list-style:none;
		}
		.ui-tabs-nav li {
			margin:0 2px 0 0;
			padding:0 5px 0 5px;
			float:left;
			height:30px;
			border-top:1px #3399FF solid;
			border-right:1px #3399FF solid;
			border-left:1px #3399FF solid;
			font-family:Verdana, Arial, Helvetica, sans-serif;
			font-size:12px;
			line-height:30px;
			text-transform:uppercase;
		}
		.ui-tabs-nav li:hover {
			background:#EBEBEB;
			color:#333333;
		}
			.ui-tabs-nav li:hover a {
				color:#333333;
			}
		.ui-tabs-nav li {
			background:#FFFFFF;
		}
			.ui-tabs-nav li a {
				color:#336699;
				text-decoration:none;
			}
		.ui-tabs-panel {
			margin:0;
			padding:5px;
			float:none;
			clear:both;
			border:#3399FF solid 1px;
			width:298px;
			font-family:Verdana, Arial, Helvetica, sans-serif;
			font-size:12px;
			color:#333333;
		}
			.ui-tabs-panel ul {
				margin:0;
				padding:0 0 0 15px;
			}
			.ui-tabs-panel ul li {
				margin:0 0 5px 0;
			}
		.ui-tabs-panel a {
			color:#336699;
			text-decoration:none;
		}
			.ui-tabs-panel a:hover {
				color:#3399FF;
				text-decoration:underline;
			}
		.ui-tabs-hide {
			margin:0;
			padding:5px;
			float:none;
			clear:both;
			display:none;
			border:#3399FF solid 1px;
			width:298px;
			font-family:Verdana, Arial, Helvetica, sans-serif;
			font-size:12px;
			color:#333333;
		}
			.ui-tabs-hide ul {
				margin:0;
				padding:0 0 0 15px;
			}
			.ui-tabs-hide ul li {
				margin:0 0 5px 0;
			}
		.ui-tabs-hide a {
			color:#336699;
			text-decoration:none;
		}
			.ui-tabs-hide a:hover {
				color:#3399FF;
				text-decoration:underline;
			}

El significado de cada una de las etiquetas de estilo CSS:

  • estilo: Es el estilo de todo el recuadro con el cual trabajaremos
  • ui-tabs-nav: Es la lista que alojará a los títulos de las pestañas
  • ui-tabs-panel: Es el recuadro que aloja el contenido de un recuadro. Este es el estilo del recuadro visible
  • ui-tabs-hide: Es el recuadro que aloja el contenido de un recuadro. Este es el estilo del recuadro oculto que más adelante al pulsar sobre el título del recuadro se verá y convertirá en ui-tabs-panel

El agregar otro recuadro con contenido no es difícil, simplemente duplicamos el anterior recuadro y realizamos lo siguiente:

  • id: modificamos este atributo del primer div para asignarle un identificador al recuadro
  • href: modificamos este atributo por otro que identifique a otro título (manteniendo el símbolo de numeral)
  • Añadimos entre las etiquetas <script> y </script> que usamos en el primer paso lo siguiente:
    	$(document).ready(function(){
        $("#EJEMPLO2 > ul").tabs();
      });

    En donde editamos la palabra EJEMPLO por el nombre que le asignamos al segundo recuadro (el atributo id)

Definitivamente, este es un uso básico de esta herramienta y existen uso m´ñas complejos que se le pueden asignar, tal y como se puede observar en el sitio de jQuery.

Actualización: Si tienes un blog en WordPress, puede seguir el siguiente manual para integrarlo.


Join My Community at MyBloglog! Blogalaxia Peru Blogs BlogsPeru.com Add to Technorati Favorites Blogesfera Bitacoras.com Creative Commons License