Desarrollo Web

Wordpress quitar tamaño fijo a las imagenes

2013-09-16T08:00:00.001-07:00

Las imágenes de Wordpress se muestran con un tamaño fijo si no incluímos una función que lo evite.

En este ejemplo puede ver como Wordpress muestra las imágenes con tamaño fijo:

<img class="attachment-post-thumbnail wp-post-image nailthumb-image" alt="" src="" width="200" height="200">

El width y height fijo de las imágenes hace que un diseño responsive no funcione correctamente debido a que éstas permanecen con el mismo tamaño a pesar del tamaño de la pantalla.

Para evitar esto, debemos incluir la siguiente función en el archivo functions.php de nuestro theme:

//remove images size
function remove_dimensions( $html, $post_id, $post_image_id ) {
$html = preg_replace( '/(width|height)=\"\d*\"\s/', "", $html );
return $html;
}

add_filter( 'post_thumbnail_html', 'remove_dimensions', 10, 3 );

Es muy sencillo, al incluirla verás que las imágenes ya no tendran un ancho y altura fijo, permitiendo que el css defina su tamaño.

Wordpress mostrar custom post types usando querys

2013-09-15T09:26:00.001-07:00

Si hemos creado tipos de post, seguramente necesitemos mostrar en una página solo esos post. Primero que nada debemos crear un archivo en la raíz de nuestro theme que se llame "singe-(nombre del custom type).php". Ejemplo: Si nuestro custom post type se llama "noticias" el archivo en donde se verá el post de la noticias se llamará "single-noticias.php".

El siguiente paso es dentro de la página poner el código necesario para mostrar el post, aquí un ejemplo básico:

<?php
/*
Template Name: Single Noticia
*/
?>
<?php get_header(); ?>

<div class="content">

<?
if ( have_posts() ) : while ( have_posts() ) : the_post();
$type = get_post_type( get_the_ID() );
if($type == "noticia"){
?>

<?php the_title(); //show post title?>

<?
the_content();
?>

<?
}
endwhile;
endif;
?>

</div>

<?php get_footer(); ?>

</body>

</html>

Como pueden ver de ésta manera cuando vemos un custom post type "noticia" nos llevará a este template que hemos creado. Pero ésta página solo muestra el single. Para mostrar todas las "noticias" debemos crear una pagina dentro del admin de wordpress, crear un archivo que se llame por ejemplo "noticias.php" y añadirle el template a la página.

Aquí pueden observar que seleccionamos el template que deseamos para una página en particular.

Nota: "La página que desplegará nuestros custom post types se crea en la opción 'Pages' del administrador de Wordpress"

Ahora que ya sabemos el procedimiento en el administrador, veamos el código necesario que vamos a colocar en noticias.php para poder desplegar todos los post que estén bajo el tipo de post "noticia".

<?php
/*
Template Name: Noticias
*/
?>
<?php get_header(); ?>

<?php
global $wp_query;
$temp = $wp_query;
$wp_query = null;
$wp_query = new WP_Query();
$wp_query->query('showposts=10&post_type=noticia'.'&paged='.$paged);
if ( $wp_query->have_posts() ) : while ($wp_query->have_posts()) : $wp_query->the_post();
?>
<? the_title();?>

<?php the_content();?>

<?
endwhile;
endif;
?>

<?php get_footer(); ?>

</body>

</html>

Como podemos ver la única diferencia con el loop anterior es que vamos a desplegar 10 post del tipo noticia y paginado. Esto lo hacemos con las wp_querys que nos permiten hacer las consultas que nosotros queremos fuera del clásico loop que nos trae todos los post.

Aquí es donde se cocina esto:

$wp_query = new WP_Query();
$wp_query->query('showposts=10&post_type=noticia'.'&paged='.$paged);

Eliminar una opción del menu administrador de wordpress

2013-09-14T18:58:00.002-07:00

Si necesitamos borrar una de las opciones del menu administrador de wordpress, Debemos incluir en el archivo functions.php de nuestro theme la siguiente función.

Código:

<?php

function remove_admin_menu_items() {
$remove_menu_items = array(__('Posts'));
global $menu;
end ($menu);
while (prev($menu)){
$item = explode(' ',$menu[key($menu)][0]);
if(in_array($item[0] != NULL?$item[0]:"" , $remove_menu_items)){
unset($menu[key($menu)]);}
}
}

//removemos la opción del front-end menu
add_action('admin_menu', 'remove_admin_menu_items');
?>

En éste ejemplo estamos borrando del menú la opción 'Posts' que sirve para publicar los post comunes y corrientes de Wordpress. Si nosotros publicamos post utilizando solo custom post types, remover esta opción es una buena idea para no marear al administrador.

Para borrar otras opciones simplemente modifica ésta línea $remove_menu_items = array(__('Posts')); donde 'Posts' será modificado por la opción que tu desees, por ejemplo 'Media' o 'Comments'.

Crear Menu para Custom Post Types en Wordpress

2013-09-14T18:52:00.000-07:00

Para darles un ejemplo podemos crear esto:

Como pueden observar, es el menú del administrador de Wordpress, pero en el figuran los tipos de post en diferentes opciones "Artists, Exhibitions, News". Son los tipos de post que necesita nuestro sitio de ejemplo.

Vayamos al código, para crear las opciones del menú haremos lo siguiente:

Nota "Debes insertar éste código en el archivo functions.php de tu theme, de lo contrario no funcionará"

<?php

// Registramos Custom Post Type
function news_post_type() {

$labels = array(
'name' => _x( 'News', 'Post Type General Name', 'text_domain' ),
'singular_name' => _x( 'News', 'Post Type Singular Name', 'text_domain' ),
'menu_name' => __( 'News', 'text_domain' ),
'parent_item_colon' => __( 'Parent News:', 'text_domain' ),
'all_items' => __( 'All News', 'text_domain' ),
'view_item' => __( 'View News', 'text_domain' ),
'add_new_item' => __( 'Add New News', 'text_domain' ),
'add_new' => __( 'New News', 'text_domain' ),
'edit_item' => __( 'Edit News', 'text_domain' ),
'update_item' => __( 'Update News', 'text_domain' ),
'search_items' => __( 'Search News', 'text_domain' ),
'not_found' => __( 'No News found', 'text_domain' ),
'not_found_in_trash' => __( 'No News found in Trash', 'text_domain' ),
);

$rewrite = array(
'slug' => 'new',
'with_front' => true,
'pages' => true,
'feeds' => true,
);
$args = array(
'label' => __( 'News', 'text_domain' ),
'description' => __( 'News information pages', 'text_domain' ),
'labels' => $labels,
'supports' => array( 'title', 'editor', 'thumbnail'),
'taxonomies' => array('category'),
'hierarchical' => false,
'public' => true,
'show_ui' => true,
'show_in_menu' => true,
'show_in_nav_menus' => true,
'show_in_admin_bar' => true,
'menu_position' => 5,
'menu_icon' => '/wp-content/themes/Solomon/img/icon.png',
'can_export' => true,
'has_archive' => true,
'exclude_from_search' => false,
'publicly_queryable' => true,
'query_var' => 'News',
'rewrite' => $rewrite,
'capability_type' => 'post',
);
register_post_type( 'news', $args );

}

add_action( 'init', 'exhibition_post_type', 0 );

?>

Como pueden observar he resaltado en negrita la parte del código de registro de custom post types, que está encargada de definir la opción que figura en nuestro menú.

menu_name: para darle un nombre a nuestro menu
'supports': para definir las opciones que tendrá el editor de nuestro custom post type. En se le pasa un array que contiene array( 'title', 'editor', 'thumbnail'), eso quiere decir que el editor permitirá al usuario ingresar el título del post, el contenido y la imagen destacada o featured image.

Por último llamamos a add_action( 'init', 'exhibition_post_type', 0 ); para ejecutar la función.

Podemos utilizar una herramienta online y gratuita que genera el código que necesitamos llenando algunos campos de formulario. Aquí el enlace: http://generatewp.com/post-type/

Crear Custom Post Types en Wordpress

2013-09-14T18:34:00.000-07:00

Los desarrolladores de Wordpress necesitan crear en multitples ocasiones diferentes tipos de post, para que el administrador pueda manipular las entradas de diferentes secciones del sitio de una forma ordenada.

Para ellos en el archivo functions.php de nuestro theme debemos ubicar funciones que le digan al core de Wordpress que necesitamos Custom Post Types.

Para ello simplemente debemos colocar una función de este estilo.

Código:

<?php

// Registramos el Custom Post Type
function artists_post_type() {

$labels = array(
'name' => _x( 'Artists', 'Post Type General Name', 'text_domain' ),
'singular_name' => _x( 'Artist', 'Post Type Singular Name', 'text_domain' ),
'menu_name' => __( 'Artists', 'text_domain' ),
'parent_item_colon' => __( 'Parent Product:', 'text_domain' ),
'all_items' => __( 'All Artists', 'text_domain' ),
'view_item' => __( 'View Artists', 'text_domain' ),
'add_new_item' => __( 'Add New Artist', 'text_domain' ),
'add_new' => __( 'New Artist', 'text_domain' ),
'edit_item' => __( 'Edit Artist', 'text_domain' ),
'update_item' => __( 'Update Artist', 'text_domain' ),
'search_items' => __( 'Search artist', 'text_domain' ),
'not_found' => __( 'No artists found', 'text_domain' ),
'not_found_in_trash' => __( 'No artists found in Trash', 'text_domain' ),
);

$rewrite = array(
'slug' => 'artist',
'with_front' => true,
'pages' => true,
'feeds' => true,
);

$args = array(
'label' => __( 'Artists', 'text_domain' ),
'description' => __( 'Artists list', 'text_domain' ),
'labels' => $labels,
'supports' => array( 'title', 'editor', 'thumbnail', ),
'hierarchical' => false,
'public' => true,
'show_ui' => true,
'show_in_menu' => true,
'show_in_nav_menus' => true,
'show_in_admin_bar' => true,
'menu_position' => 5,
'menu_icon' => 'icon url',
'can_export' => true,
'has_archive' => true,
'exclude_from_search' => false,
'publicly_queryable' => true,
'query_var' => 'artist',
'rewrite' => $rewrite,
'capability_type' => 'post',
);

register_post_type( 'Artists', $args );

}

// Llamador de la función
add_action( 'init', 'artists_post_type', 0 );

?>

Como se puede ver en el código es una función para una supuesta sección de "Artistas", éste código permite crear el tipo de post "Artists". Y de esa manera organizar mejor tu sitio Wordpress.

Como ven se le envían parámetros a la función register_post_type();

Recomiendo utilizar esta herramienta online y gratuita para generar el código solo llenando campos en un formulario. Aquí el link: http://generatewp.com/post-type/

Cualquier duda a consulta no dudes en dejar tu comentario en el post con gusto te ayudaré.

Efectos con Javascript Jquery

2012-08-14T18:54:00.000-07:00

Veamos algunos efectos con Jquery en esta entrada. Para comenzar y no perder tiempo veamos como hacer que un elemento html aparesca y desaparezca en un efecto de Slide.

Código:

$('#identificador').slideUp(); //desaparece el objeto

$('#identificador').slideDown(); // aparece le objeto

En el código se puede observar que primero con el signo de $ colocamos la "id" del elemento html y luego le asignamos la función slideUp para que desaparezca y slideDown para que aparezca.

Veamos otro ejemplo:

$('#identificador').show(); // aparece le objeto

$('#identificador').hide(); // desaparece le objeto

En el código lo mismo, se hace referencia al identificador y luego el elemento aparece ocn un efecto de agrandamiento.

Para más efectos, dirijanse a la documentación de Jquery aqui

Sumar y Restar fechas en PHP

2012-08-13T13:14:00.004-07:00

En muchas ocasiones necesitamos sumar o restar días, meses,años u horas a una fecha. La función que mejor se adapta a este tipo de requerimiento es mktime y strtotime.

mktime(): Funciona con el mismo algoritmo que utiliza Linux, es decir, genera horas Unix que son sinónimo de un número entero, esto permite poder comparar fechas.

strtotime(): Nos permite manipular fechas, restar y sumar días, meses o años.

Para restarle un día a una fecha, ver código de ejemplo:

<?php

$fecha_cambiada = mktime(0,0,0,date("m"),date("d")-1,date("Y"));
$fecha = date("d/m/Y", $fecha_cambiada);
echo $fecha; //devuelve fecha menos un día

?>

Como podemos ver con la función mktime podemos crear una fecha actual y restarle un día "date("d")-1";

Pero solo con eso obtendremos un número de varias cifras, para transformar eso en una fecha, con la función date creamos la fecha con formato d/m/Y.

Número aleatorio en PHP

2012-08-13T12:43:00.001-07:00

Para conseguir un número aleatorio en PHP lo único que tenemos que hacer es utilizar la función rand();

El siguiente código explica claramente cómo se utiliza:

<?php
$numero_aleatorio = rand(1,100);
?>

La función rand asigna a la variable $numero_aleatorio un número entre 1 y 100 rand(1,100).

Luego podemos utilizar esta variable en lo que queramos, generalmente se utiliza un número random cuando queremos generar un código aleatorio, o mostrar imágenes de forma aleatoria.

Por ejemplo, para mostrar una imagen de forma aleatoria podemos hacer lo siguiente:

Si disponemos de 5 imágenes:

<?php
$numero_aleatorio = rand(1,5);
?>
<img src="<? echo 'img' . $numero_aleatorio . '.jpg'; ?>">

En este caso se asigna un número entre el 1 y el 5 aleatoriamente a la variable $numero_aleatorio y luego en la propiedad "src" del elemento img, se designa que el nombre del archivo a mostrar sea "img1.jpg" o "img2.jpg" y así hasta la imágen número 5.

Espero que les sirva, cualquier consulta, la contestaré a la brevedad.

Formulario de contacto Joomla

2012-08-13T12:29:00.001-07:00

Para los que trabajan en Joomla, le comento que un buen complemento para implementar formularios de contacto en esta plataforma es Breezing Forms.

Se trata de un complemento muy completo, ya que permite en pocos pasos confeccionar un formulario prolijo y además muy customizable.

Pueden conseguir este complemento en la siguiente página aquí.

Luego de instalado el complemento, en Extensiones/Gestor de Extensiones, pueden acceder al mismo desde el menú Componentes/BreezingForms.

Luego de crear un nuevo formulario, pueden asignarlo a una opción del menú, en Gestor de Menú, allí cuando crean la nueva opción de menú seleccionan Add Form, y en nombre de formulario colocan el mismo nombre que asignaron en la creación del formulario.

Si tienen alguna duda o pregunta no duden en dejar un comentario, lo contestaré rápidamente.

Mostrar lista de autores en Wordpress

2012-08-10T09:03:00.000-07:00

Es sabido por todos los desarrolladores que la plataforma para la creación de blogs más famosa es Wordpress. Siendo open source y fácil de modificar, es una potente herramienta para la creación de blog y por que no, sitios web auto administrables.

En este caso les muestro cómo mostrar la lista de autores del blog en donde nos plasca, puede ser en el sidebar, footer o debajo de cada post. Para ello debemos insertar las siguientes líneas de código:

<?php
list_authors( true, true, true,true, $feed, $feed_image );
?>

De esta manera se despliega una lista con los nombres de los autores y la cantidad de post que tienen en el blog. Puedes cambiar las variables a false para ver las opciones que ofrece, esta configuración es la que a mi me agrada.

Este es el primer post de varios en los que hablaré sobre Wordpress. Por si acaso dejo el link al codex de Wordpress en donde puedes encontrar muchas más funciones aquí.

Librería Jquery de Google

2012-08-08T08:29:00.001-07:00

El archiconocido framework de javascript Jquery, ya es practicamente un estándar en lo que tiene que ver con el frontend development. Es por esto que Google desde hace un buen tiempo ofrece a los desarrolladores la posibilidad de acceder a esta librería mediante un link externo.

Existe la posibilidad de guardar el jquery.js en nuestro servidor pero la carga será 2 veces más lenta. Lo digo por experiencia, si llamamos al script de Google el tiempo de carga baja considerablemente.

El enlace que deberíamos colocar en la web sería algo así:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Dejo entonces el link a la web de Google aquí donde encontraremos el enlace a la ultima versión de Jquery y otro monton de framework y herramientas, entre las cuales se encuentra Mootools, Prototype, Sciptacolous, etc.

Cpanel Fantástico Deluxe

2012-08-08T08:14:00.000-07:00

Fantástico Deluxe es una herramienta desarrollada por la empresa alemana Netenberg que trabaja en la plataforma Cpanel (Conocido sistema de gestión remota de servidores web).

Fantástico Deluxe permite al usuario instalar automáticamente diferentes scripts muy conocidos como Wordpress, Joomla, Drupal sin tener que descargarlos e instalarlos vía FTP.

Lamentablemente este sistema no está actualizado y por ejemplo, instala la versión 1.5 de Joomla que es bastante antigua (actualmente se utiliza la versión 2.5). Sin embargo en poco tiempo saldrá a la luz Fantástico Deluxe 3.0 con la última versión de todos los scripts que ofrece.

Si desean mas información visiten la web oficial http://netenberg.com/fantastico.php

Nginx soporte .htaccess

2012-08-08T07:53:00.001-07:00

Nginx es un servidor web que viene tomando popularidad cada vez más. Se utiliza en servidores en los que la trasferencia de datos es muy alta. El problema surge cuando queremos instalar una aplicación que utiliza .htaccess en este tipo de servidor.

Para lograr que la aplicación funcione debemos traducir el contenido del archivo .htaccess al archivo default que se encuentra en la carpeta /etc/nginx/sites-available.

Las redirecciones del archivo .htaccess que usualmente se hacen mediante los famosos rewrites en este caso deben hacerse mediante el uso de librerias fastcgi que en otra oportunidad explicaremos mejor.