Currently browsing: themes

Themes para WordPress similares a webs "famosas"

Beware: This post was published 6 years ago and its content may be outdated.

Themes famosos

Esta tarde dando vueltas por la red me he encontrado con un listado de lo más curioso: Themes para WordPress basados en páginas webs bastante conocidas. El listado está formado por 28 themes para WordPress con los cuales puedes conseguir un diseño muy parecido a de páginas como la de Apple, la CNN, Digg, Facebook o incluso WordPress.org.

Si bien es cierto que no son idénticos, estos themes son realmente muy similares, y muchos de ellos son gratuitos.

Podéis ver la lista completa aquí.

Muestra los artículos en dos columnas

Beware: This post was published 7 years ago and its content may be outdated.

Problamente habréis visto alguna web hecha en Joomla! o algún theme para WordPress que tenga algunos artículos en una única columna y otros dispuestos en dos columnas.

Esto no es muy complicado de hacer, y puede ser útil para hacer diseños para revistas con WordPress, así que voy a explicar cómo adaptar el theme default para mostrar artículos en dos columnas.

A lo largo del tutorial modificaremos el archivo index.php y style.css. Comenzaremos por este último:

style.css

Abrimos el archivo style.css y nos situamos al final del mismo. En este archivo añadiremos dos clases nuevas: col-left y col-right, que servirán para definir el aspecto de ambas columnas.

Las dos clases tendrá una anchura (width) de 49% y la columna derecha flotará hacia la derecha. En código quedaría así:

.col-left {
width:49%;
}
.col-right {
float:right;
width:49%;
}

Bien, con esto hemos acabado de modificar el archivo.

index.php

Ahora pasamos a modificar el archivo index.php. En este archivo haremos más modificaciones que en el anterior, pero antes, repasemos un poco lo que vamos a hacer:

Actualmente, este archivo hace lo siguiente:

  • Muestra la cabecera
  • Comprueba si hay artículos
    • Si hay artículos
      • Crea un bucle y los muestra
    • Si no hay artículos
      • Muestra un mensaje de error y el formulario de búsqueda
  • Muestra la sidebar
  • Muestra el pie de página

Nosotros vamos a modificar esta secuencia, y la vamos a dejar de la siguiente forma:

  • Muestra la cabecera
  • Comprueba si hay artículos
    • Si hay artículos
      • Crea la variable $articulos_mostrados, con valor 0.
      • Crea la variable $alternar, con valor true.
      • Crea un bucle que a cada repetición muestra un artículos
        • Comprueba si se han mostrado X artículos (por ejemplo, 2)
          • Si se han mostrado:
            • Comprueba si la variable $alternar es true
              • Si es true:
                • Cambia el valor de $alternar a false
                • Muestra el artículo en la columna derecha
              • Si no es true (es false):
                • Cambia el valor de $alternar a true
                • Muestra el artículo en la columna izquierda
                • Inserta una capa (div) que reajuste las columnas para evitar que el contenido se salga del sitio donde debería estar
          • Si no se han mostrado:
            • Los muestra e incrementa el valor de $articulos_mostrados en 1 por cada artículo que muestra
      • Finaliza el bucle
    • Si no hay artículos
      • Muestra un mensaje de error y el formulario de búsqueda
  • Muestra la sidebar
  • Muestra el pie de página

Dejemos la teoría de lado y pasemos a modificar el archivo.

Nos situamos en la línea 12, y creamos las variables que aparecían antes:

<?php $alternar = true; ?>
<?php $articulos_mostrados = 0;  ?>

Ahora vamos a añadir la condición que comprobará si se han mostrado los 2 artículos que queremos que ocupen toda la página. Añadimos en la línea 16 (después de while (have_posts(…) :

<?php if($articulos_mostrados < 2): ?>

Ahora tenemos que finalizar la condición. Añadiremos el código siguiente en la línea anterior al endwhile (sobre la línea 30):

<?php $articulos_mostrados++; ?>
<?php else : ?>
<?php endif; ?>

Bien, ahora ya mostrará sólo 2 artículos (puedes cambiar el dos que hemos añadido antes por el número que quieras, pero ten en cuenta que tiene que ser un número par para que las columnas estén equilibradas), pero tenemos que hacer que muestre los otros 8 artículos en dos columnas, a 4 artículos por columna.

Nos situamos entre el <?php else : ?> y el <?php endif; ?>, y añadimos el siguiente código:

<?php if ($alternar): ?><div class="col-right"><?php else : ?><div class="col-left"><?php endif; ?>
<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
<div class="entry">
<?php the_content('Read the rest of this entry &raquo;'); ?>
</div>
<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
</div>
</div>
<?php if (!$alternar): ?><div class="clear"></div><?php endif; ?>
<?php $alternar = !$alternar; ?>

Este código dependiendo del valor de la variable $alternar mostrará el código de la columna derecha o de la izquierda, mostrará el contenido, cerrará la columna, mostrará el código de reajuste de las columnas cuando es necesario y por último cambiará el valor de $alternar.

Conclusión

Con esto ya hemos adaptado el theme para dos columnas. La verdad es que en el theme default no queda demasido bien, ya que las columnas acaban siendo algo pequeñas, pero sin duda es algo útil cuando se usa un theme con un ancho más grande.

Por último, os dejo el theme default modificado por si habéis tenido problemas durante el tutorial.

proSilver para SMF Beta 2

Beware: This post was published 7 years ago and its content may be outdated.

Desde comienzos de mes no ha habido grandes novedades en proSilver para SMF (nombre provisional), y después de tres semanas de poca actividad, he acabado la primera fase del desarrollo del theme: todas las páginas están adaptadas.

Ahora viene la segunda fase, en la que se corregirán todos los errores y fallos que hay en las versiones anteriores. En esta fase es necesaria la ayuda de todos para poder corregir todos los errores, ya sea reportándolos (tanto en los comentarios de este artículo como en este post) o explicando cómo arreglarlos.

Por último, podéis descargar el theme aquí o en este post.

Crea redirecciones en WordPress

Beware: This post was published 7 years ago and its content may be outdated.

Hay muchas webs que tienen foros y otras secciones que WordPress no puede gestionar, y para tratar de integrarlas un poco más en WordPress y de paso hacerlas más accesibles, se suele añadir un link al foro y a las demás secciones en el menú de WordPress.

Esto lo podemos hacer de dos formas:

  1. Editamos el theme y añadimos manualmente los links a las demás secciones
  2. Añadimos una redirección al menú de WordPress

El primer método tiene una gran desventaja: tenemos que editar el theme para añadir más elementos o para modificar los existentes, y si no tenemos permisos para modificar los archivos (como por ejemplo, si tenemos un blog en wordpress.com), no podemos recurrir a este método.

El segundo método es el que me parece más interesante, y del que voy a tratar aquí.

Antes de nada, tenemos que tener configurado WordPress de forma que las URL tengan la siguiente estructura: http://miweb.com/articulo . Para poder activar esta opción es necesario el mod_rewrite, que seguramente estará activado en el servidor que uséis. Si no es así, basta con ponerse en contacto con los proveedores de hosting y pedirles que lo habiliten.

Nota: Para hacer la redirección no es necesario en mod_rewrite, pero al modificar los Permalinks, todos los artículos cambiarán la URL por una que sí que necesita mod_rewrite para funcionar. Si no tienes mod_rewrite activado, las redirecciones funcionarán, pero los artículos y las demás páginas no se verán.

Redirecciones en WordPressVamos al Panel de Administración de WordPress, y allí vamos a Opciones » Permalinks.

Elegimos la opción Estructura personalizada, y en el cuadro de texto que hay a la derecha, escribimos: /%postname%/

Con esto deberíamos tener la página como en la siguiente imagen:

Redirecciones en WordPress

Una vez hayamos completado estas modificaciones, le damos a Guardar cambios y vamos a Páginas » Crear.

A continuación vamos a crear una redirección de prueba.

Escribimos de título de la página “Administración“, y ponemos de texto “Vas a acceder al Panel de Administración“. Publicamos la página.

Ahora nos aparecerá debajo del cuadro para escribir el título, el permalink de la página. Le damos a Editar y en lugar de “administracion” escribimos “wp-admin“.

Redirecciones en WordPress

Guarda los cambios de la página y haz trata de acceder a la página desde el inicio del blog. Verás como en lugar de ver la página, te lleva al Panel de Administración.

Con este método puedes añadir redirecciones de forma fácil y rápida, y puedes editarlas cuando quieras.

Añade una descripción a los links del menú

Beware: This post was published 7 years ago and its content may be outdated.

Menú con descripción

En algunas páginas webs los links del menú principal tienen una descripción añadida, algo como “Inicio – Vuelve al inicio de la web”, y además de ser un detalle más, puede ayudar al visitante a conocer por encima el contenido de cada página de tu web.

Hay muchas plantillas para diversos CMS (sobretodo para Joomla) que permiten añadir una descripción a los elementos de cada menú, pero aún no he visto ninguna que lo permita en WordPress, y he decidido redactar un tutorial para explicar cómo añadir estas descripciones a nuestro theme.

En primer lugar, explicaré el proceso que usaremos para añadir estas descripciones a los links del menú:

WordPress genera el menú de forma automática: crea una lista de las páginas del blog. Cada página puede tener campos personalizados, y utilizaremos uno de estos para almacenar las descripciones. Así que editaremos cada página del blog y le añadiremos el campo personalizado subtitle, y le daremos un valor que describa el contenido de la página.

Añadiendo el campo personalizado

Lo siguiente que haremos será crear una función que edite el listado de páginas del blog y a cada página le asigne la descripción que le corresponde, para luego pasar a mostrar el listado de páginas con descripciones.

Esta función estará definida en functions.php, así que abrimos el archivo, nos situamos al final y añadimos el siguiente código:

function create_main_menu() {
$pages = wp_list_pages('echo=0');
$pages = explode('<ul>', $pages);
$pages = explode('</ul>', $pages[1]);
$pages_array = explode('</li>', $pages[0]);
foreach ($pages_array as $value) {
$value_2 = explode('page-item-', $value);
$value_2 = explode('"><a href="', $value_2[1]);
$value_2 = str_replace('current_page_item', '', $value_2[0]);
$meta = get_post_meta($value_2[0], 'subtitle', true);
$value = str_replace('</a>', ' <span class="subtitle">'. $meta .'</span></a>', $value);
echo $value;
}
}

¿Qué hace el código? Bien, lo explico línea a lína:

  1. Comienza la definición de la función create_main_menu
  2. Se crea la variable pages, que contiene el código HTML que devuelve la función wp_list_pages (la que crea el menú en WordPress)
  3. Se le da una nuevo valor a pages, esta vez en forma de matriz que contiene los diversos trozos resultantes de dividir la variable pages original cada vez que aparece un elemento <ul>
  4. Se le da de nuevo un nuevo valor a pages, en forma de matriz que contiene los diversos trozos resultantes de dividir el trozo 1 de la varible pages anterior cada vez que aparece un elemento </ul>
    Estas dos líneas nos permiten centrarnos en el contenido que hay entre el <ul> y </ul>, es decir, en la lista de links del menú en sí
  5. Se crea la variable pages_array, en forma de matriz, que contiene en cada índice un link del menú. Se usa las etiquetas </li> para distinguir cuando acaba un link del menú
  6. Comienza un bucle foreach, en el que la variable pages_array pasa a ser la variable value
  7. Se crea la variable value_2, fruto de descomponer en trozos cada link del menú usando de separador page-item-, el texto que hay antes de la ID de la página del link en cuestión
  8. Se le da un nuevo valor a la varaible value_2, de nuevo es fruto de dividir en trozos la parte 1 de la separación anterior, esta vez usamos de separador “><a href=”, el texto que hay inmediatamente después de la ID de la página del link
  9. Le damos un nuevo valor a value_2, esta vez eliminamos el texto current_page_item, que aparece después de la ID de la página del link que se está visitando en cada momento
    Las tres líneas anteriores nos dejan aislado la ID de cada página, de modo que ahora tenemos el link y la ID de la página del link
  10. Se crea la variable meta, que almacena la descripción del link. Si os dijáis, se usa la función get_post_meta, que tiene 3 parámetros: el primero es la ID de la cual busca los campos personalizados, el segundo es el nombre del campo y el tercero es para elegir entre que la función devuelva un único elemento o una matriz con varios elementos
  11. Se modifica el contenido de la variable value, añadiendo antes del final del link la descripción de la página
  12. En esta línea se muestra cada link
  13. Ahora se cierra el bucle foreach
  14. Y por último se da por definida la función

Ahora en nuestro theme debemos sustituir la función wp_list_pages por create_main_menu y ya tendremos un menú con descripciones.

Nota: Faltaría el código CSS para hacer que el menú quede como en la imagen del comienzo del artículo, pero el problema es que los themes que vienen por defecto en WordPress no tienen un menú apto para añadir esta descripción del modo que aparece en la imagen.

Añade una línea separadora entre cada artículo

Beware: This post was published 7 years ago and its content may be outdated.

Vía el formulario de contacto, Omar me ha preguntado cómo añadir una línea para separar cada artículo del siguiente en WordPress. He pensado que es un tutorial interesante, así que a continuación explico cómo hacerlo.

Vamos a modificar el theme Default, y los archivos que modificaremos serán el index.php y el style.css.

Abrimos el primero y nos situamos entre las lineas 13 y 26. En estas líneas se encuentra el bucle encargado de mostrar los artículos de la página de inicio. El código que encontramos es el siguiente:

<?php while (have_posts()) : the_post(); ?>

<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">
<?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>

<div class="entry">
<?php the_content('Read the rest of this entry &raquo;'); ?>
</div>

<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> |
 <?php edit_post_link('Edit', '', ' | '); ?>
<?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>

</div>

<?php endwhile; ?>

El código es sencillo:

  • La primera y la última línea inician y concluyen el bucle (respectivamente).
  • La línea 15 comienza la capa (div) que contendrá el artículo.
  • La 16 muestra el título del artículo.
  • La 17 muestra la fecha.
  • La línea 18 está en blanco.
  • La 19 comienza la capa que contiene el texto del artículo.
  • La 20 muestra el contenido del artículo.
  • La 21 cierra la capa abierta dos líneas más arriba.
  • La línea 22 está en blanco.
  • La 23 muestra los tags del artículo, la categoría en la que está incluído, el link para editarlo (sólo usuarios con permisos adecuados) y por último el número de comentarios.
  • La 24 cierra la capa abierta en la línea 15.
  • La línea 25 está en blanco.

Ahora tenemos que decidir dónde poner la línea separadora. Yo he decicido añadirla después de la línea 23, pasados los links referentes a las tags, las categorías y los comentarios.

Así que vamos a la línea 24 y añadismos una nueva línea, en la que escribimos:

<hr class="separator" />

Con esto tendremos un código similar al siguiente:

<?php while (have_posts()) : the_post(); ?>

<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
<h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>

<div class="entry">
<?php the_content('Read the rest of this entry &raquo;'); ?>
</div>

<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>

<hr class="separator" />
</div>

<?php endwhile; ?>

Si entramos ahora al blog, podremos ver una línea que separa cada artículo, pero esta línea no es demasiado bonita, y debemos darle algo de estilo y aquí es donde entra en acción el archivo style.css.

Abrimos el archivo style.css y nos situamos al final del mismo, donde añadimos el siguiente código:

hr.separator {
border:none;
border-top:1px dashed #9E9E9E;
}

Este código CSS afectará sólo a los elementos hr con clase separator, así que sólo modificará el estilo de la línea separadora.

Y así tenemos una bonita línea separadora, para añadirla a cualquier theme basta con seguir los mismos pasos, siempre teniendo en cuenta en lugar donde añadir la línea.

Por último, podéis descargar el theme Default modificado directamente desde aquí, por si tenéis problemas con el tutorial.

Aprende a crear themes para Simple Machines Forum: Parte II

Beware: This post was published 7 years ago and its content may be outdated.

Nota: Este artículo es una continuación de la serie “Aprende a crear themes para Simple Machines Forum“. Antes de leer esta parte es recomendable que leas la Parte I.

En esta parte vamos a analizar lo que hace cada archivo del theme. Creo que este va a ser el último artículo acerca de teoría, ya que en las próximas partes iré explicando más detalladamente cada archivo, y además iremos haciendo modificaciones y creando un nuevo theme.

A continuación os dejo una tabla con las funciones de cada archivo del theme Core (el Default de SMF 2.0 RC1):

Read more →