Crear tabs para cualquier sitio con jQuery (Parte II)

ikcam — Mon, 13 Oct 2008 08:03:00 +0000

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)

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

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

A continuación nos dirigimos a editar el archivo style.css (Hoja de estilos) para definir el estilo de nuestro widget.

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.

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:

 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 . 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:


//Mostrar cateogrías
wp_list_categories('orderby=name&title_li=');
?>
 
//Mostrar archivo
wp_get_archives('type=monthly'); 
?>

//Ultimos 10 posts
get_archives('postbypost', 10); 
?>

//Blogroll
wp_list_bookmarks('title_before=&title_after=&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.

Entradas relacionadas:

Agrega un botón de Ayuda Blogs a tu navegador

ikcam — Thu, 10 Jul 2008 22:17:12 +0000

A través de este botón podrás reducir un poco de tiempo para enviar noticias o novedades a Ayuda Blogs. Tome como principio el botón de TinyURL para acortar direcciones y lo apliqué para Ayuda Blogs y funcionó de maravilla.

Para agregar el botón sigue los siguientes pasos.

Puedes agregarlo como marcador a tu lista de marcadores, ya sea creándolo o arrastrarlo hasta tus marcadores.
En caso desees crearlo haz clic derecho en tu barra de marcadores y haz clic en “Nuevo marcador…” a continuación:

Puedes establecer el título que gustes lo que si debes mantener es la localización que debe ser la siguiente:

javascript:void(location.href=’http://www.ayudablogs.com/submit.php?url=’+location.href).

La otra opción, es arrastrar el siguiente enlace hasta tu barra de marcadores: Votar en AB Blogs

Si tienes alguna otra idea o este manual contiene algún error coméntalo y lo solucionaré o publicaré en caso sea otra idea.

Enlace | Ayuda Blogs

xploit29 - Tecnología al alcance de tus manos » Widgets

Crear tabs para cualquier sitio con jQuery (Parte II)

Entradas relacionadas:

Agrega un botón de Ayuda Blogs a tu navegador

Entradas relacionadas: