Wordpress quitar tamaño fijo a las imagenes

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

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

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

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

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

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

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.