AUTHOR ARCHIVES :

Cómo funcionan las imágenes destacadas en wordpress

WordPress viene con 3 tamaños predefinidos a la hora de guardar las imágenes, ese tamaño por defecto es configurable desde Ajustes > Medios. Son del más pequeño a más grande (thumbnail, medium y large).

imagenes-por-defecto-en-wordpress

A veces, según cómo maquetamos un theme en wordpress, necesitaremos añadir algunos tamaños. Para ello buscamos functions.php y añadimos la siguiente función según si queremos un tamaño fijo de alto y ancho o un tamaño variable en altura pero fijo en el ancho:

if ( function_exists( 'add_image_size' ) ) {
add_image_size( 'nombre1', 175, 9999 ); // fijamos el ancho - 175px - pero dejamos abierto el alto
add_image_size( 'nombre2', 220, 275, true); // le damos un tamaño fijo de 220x275px
}

Luego para llamar a cualquiera de los tamaños en el php (normalmente single.php) utilizamos la función the_post_thumbnail tal que así según queramos sacar una imagen u otra:

<?php the_post_thumbnail('thumbnail'); ?> // La imagen pequeña que fijamos en el panel
<?php the_post_thumbnail('medium'); ?> // La imagen mediana que fijamos en el panel
<?php the_post_thumbnail('large'); ?> // La imagen pequeña que fijamos en el panel
<?php the_post_thumbnail('nombre1'); ?> // La imagen que hemos definido en functions.php

Evidentemente esto funcionará para las nuevas imágenes que se suban desde el momento del cambio, si necesitáis que la modificación funcione para las imágenes ya subidas en wordpress habrá que regenerar los thumbnails con algún plugin como este:

Regenerador de imágenes

Tenéis más info sobre las variables que afectan a the_post_thumbnail en el codex de wordpress:

The_post_thumbnail en Codex

¿A qué resolución de pantalla diseño una web?

Cuando nos planteamos el diseño de una web normalmente el primer paso que tenemos que decidir es la elección de si la página será fluida o fija, y, aún así, en ambos casos muchas veces debemos marcar un tamaño máximo de lienzo como mínimo durante la fase de boceto… Hasta hace unos años, aunque dependía del sector en el que la web fuera a competir, las visitas previas o el manejo del cliente de su propia web, la elección era común: cogíamos como estándar el lienzo de 960px, divisible por los suficientes números como para plantear diseños distintos.

Sin embargo a día de hoy, si cogemos nuestras estadísticas y miramos las resoluciones de las visitas entrantes podemos deducir que cada vez más el planteamiento de hacer el tamaño mínimo a 960px se nos queda corto… Esta mañana me ha dado por comparar las 3 webs con más visitas a las que tengo acceso, de sectores distintos y no competidoras entre ellas.

Calculadora en mano, un 73% de las visitas totales (de una muestra de más de 25.000 visitas) tenían una resolución de más de 1280px de ancho, lo que significa que podríamos ampliar ese lienzo mínimo hasta otra cantidad igual de divisible que 960px sin riesgo a que aparezca scroll horizontal, como por ejemplo, 1200px.

1200-grid-system

Esta nueva resolución nos da la misma divisibilidad y, sobre todo, más espacio para mejorar la disposición de contenidos, aumentar el tamaño de la tipo o hacer contenedores más grandes sin necesidad de hacerlos fluidos. Para las resoluciones restantes siempre podremos adaptar el diseño a medidas relativas pero lo que presentemos al cliente se ajustará a la realidad de la mayoría de visitantes.

Para los que trabajéis con photoshop o illustrator os dejo ambos grids como plantillas ya preparados para trabajar:

960.GS 1200PX

Cómo reemplazar texto rápidamente en wordpress accediendo a la base de datos

A veces la liamos parda migrando un wordpress de servidor y nos damos cuenta que, al hacerlo, nos hemos dejado por el camino todas las imágenes porque la ruta ya no es la misma.

Esto puede ocurrir si la instalación previa estaba dentro de una carpeta con nombre distinto y al hacerla de cero en otro servidor, has pensado para ti mismo, voy a cambiar el nombre de esa carpeta por… seguridad, porque ya existe esa carpeta o para trabajar en modo de pruebas… El caso es que para volver a ver las fotos necesitas acceder a phpMyAdmin y plantear una sencilla consulta en SQL (query):

UPDATE wp_posts SET post_content = REPLACE(post_content, 'http://www.dominio.com/wp-content/uploads/', 'http://www.dominio.com/wp/wp-content/uploads/');

En este caso le decimos que en la tabla wp_posts, en la parte de contenido (post_content) reemplace una ruta por la otra… cambiando el nombre de la tabla o seleccionado toda la base de datos lo haría para todo lo que encuentre… os dejo una captura de dónde se hace si accedéis a phpMyAdmin por web.

Cómo hacer responsive tu badge de google plus con CSS

El badge de google plus lo podemos sacar fácilmente desde esta página. Definimos los parámetros, si lo queremos vertical u horizontal, con más o menos información y el ancho… Y aquí viene el problema del responsive.

Cuando maquetamos como responsive ese bagde que normalmente suele ir en el lateral lo acoplamos a la medida del sidebar, pero cuando lo vemos en tablet o móvil, seguramente ese sidebar haya cambiado de ancho y por tanto sobresalga o se quede corto. Para ello podemos crear 3 divs cuyo contenido sea exactamente igual pero en el que sólo cambie el ancho, algo así:

<div class="google-desktop">

<div data-href="https://plus.google.com/ID" data-width="180" data-rel="author" data-layout="portrait" ></div>
</div>

<div class="google-tablet">
<div data-href="https://plus.google.com/ID" data-width="430" data-rel="author" data-layout="portrait" ></div>
</div>

<div class="google-movil">
<div data-href="https://plus.google.com/ID" data-width="270" data-rel="author" data-layout="portrait" ></div>
</div>

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>

Y en el CSS, mediante media queries, ocultar o no los divs que nos interesen con la propiedad display:

.google-desktop {display:block;}
.google-movil, .google-tablet {display:none;}

@media only screen and (max-width: 479px) {

.google-tablet {display:block;}
.google-desktop, .google-movil {display:none;}

}

@media only screen and (max-width: 320px) {

.google-movil {display:block;}
.google-desktop, .google-tablet {display:none;}

}

El problema de esta solución es que sólo funciona si las medidas que hemos aplicado en nuestro css a los cambios por responsive son fijas, es decir, en píxels.

¿A alguien se le ocurre cómo hacerlo con medidas relativas?

Cómo cambiar en wordpress el custom post type de la URL

Hay veces que necesitamos simplemente cambiar el slug de un tema que hemos instalado pero que no hemos creado nosotros. A veces ese tema tiene un custom_post_type llamado portfolio y nosotros queremos aprovecharlo para mostrar un contenido distinto como servicios, trabajos o productos.

Cuando utilizas un custom_post_type normalmente está definido también su slug, lo que aparece en la URL, como por ejemplo: http://url.com/portfolio/

Para cambiarlo tenemos que buscar la creación de ese custom dentro de functions.php del theme, algo parecido a esto:

function create_portfolio_post_types() {
register_post_type( 'portfolio',
array(
'labels' => array(
'name' => __( 'Portfolio', 'framework'),
'singular_name' => __( 'Portfolio', 'framework'),
'add_new' => __( 'Añadir Nuevo', 'framework' ),
...
),
'menu_icon' => get_template_directory_uri() . '/admin/images/photos.png',
'public' => true,
)
);
}
add_action( 'init', 'create_portfolio_post_types' );

y añadirle la función rewrite al final de todo:

...
'menu_icon' => get_template_directory_uri() . '/admin/images/photos.png',
'public' => true,

'rewrite' => array('slug' => 'servicios'),

)
);
}
add_action( 'init', 'create_portfolio_post_types' );

Más info en Codex

Cómo hacer condicionales sencillos en wordpress. 2/2

Continuando con los condicionales en wordpress recogidos en un post anterior, ahora voy a poner un par de ejemplos para hacer cosas un poco más complejas con estos condicionales.

La manera más fácil de hacer condicionales sin encontrar complicaciones de código o sintaxis es mostrar el if, el else y el elseif por separado, algo así:

<?php if ( is_home() ) : ?>
<h2><?php the_title(' '); ?></h2>

<?php elseif ( is_category () ): ?>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(' '); ?></a></h2>

<?php else : ?>
<h1><?php the_title(' '); ?></h1>

<?php endif; ?>

Este es el viejo ejemplo para adaptar contenido a SEO mostrando H1 o H2 según la página que muestre para evitar que no haya más de un H1, por ejemplo, pero puede aplicarse en infinitos casos. Hay que tener en cuenta que introducir funciones en php dentro de los condicionales sólo es posible de esta manera sin recurrir a redefiniciones de variables.

Os dejo un par de enlaces relacionados:

Todos los condicionales en wordpress Ejemplos sencillos de condicionales

Cómo hacer condicionales sencillos en wordpress. 1/2

Una de las funciones que más utilizaremos si desarrollamos bajo wordpress son los condicionales. Hay veces que queremos mostrar un contenido u otro según la página, mostrar algo sólo en algunas entradas, añadir una imagen o clase  a un div cuando es un usuario concreto o cuando queremos que analytics no se muestre si entramos a nuestra propia página como admin… para ello están los condicionales y wordpress ya tiene bastantes funciones predefinidas.

Los condicionales podemos mostrarlos dentro de un mismo php, y aunque en siguientes entradas explicaré cómo hacer cosas más complejas, este de momento será útil si sólo queremos añadir un texto o una imagen:

<?php
if( is_home() ):
echo 'Bienvenido a la página de inicio';

else:
<!-- vacio -->
endif;
?>

El mecanismo es sencillo, si está en la página home muestra el echo de debajo, para las demás no mostrará nada pero podemos complicarlo un poco, añadiendo dos condiciones, como por ejemplo:

<?php
if( is_home() ):
echo 'Bienvenido a la página de inicio';

elseif (is_page('Contacto') ):
echo 'Ponte en contacto conmigo';

else:
endif;
?>

En este caso la primera condición es la misma pero añade una segunda, en caso de que no se cumpla la primera muestra un texto distinto para la página contacto… y para el resto no muestra nada.

También podemos combinar condicionales:

<?php
if( is_single() AND is_author('Dam')):
echo '<img src="ruta/imagen1.jpg" alt="" />';

elseif (is_page('Contacto') OR is_page('Sobre mi')):
echo '<img src="ruta/imagen2.jpg" alt="" />';

elseif (is_page('Contacto') || is_page('Sobre mi')):
echo '<img src="ruta/imagen2.jpg" alt="" />';
else:
endif;
?>

En este tercer ejemplo el AND dice que si se cumplen las dos condiciones de estar en una entrada (single) y el autor es Dam aparecerá la imagen 1. Si por el contrario estamos en la página Contacto o (OR) Sobre mi, en cualquiera de las dos mostrará la imagen 2.

OR y || son lo mismo. AND y && son equivalentes también.

Para conocer todas las funciones predefinidas puedes consultar el códex de wordpress:

Todos los condicionales en wordpress

Personaliza una web en función del dispositivo con media queries (breakpoints)

Os dejo un listado de los comúnmente llamados breakpoints en media queries para darle distintas propiedades al CSS según la resolución de pantalla. No son otra cosa que reglas que afectan a la visualización de la página según la resolución y se pueden combinar como queramos, siempre teniendo en cuenta que al ser en cascada los de abajo sustituirán los estilos de arriba.

Los ejemplos siguientes hacen referencia al ancho del navegador pero también se puede utilizar la propiedad min-device-height o max-device-height. Las medidas en píxeles se corresponden con las más utilizadas pero pueden modificarse según nos interese e incluso usar porcentajes o em. Haced más pequeña la ventana de vuestro navegador mientras consultáis esta web para comprobar el efecto.

/* Smartphones (vertical y horizontal) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
}

/* Smartphones (horizontal) ----------- */
@media only screen
and (min-width : 321px) {
}

/* Smartphones (vertical) ----------- */
@media only screen
and (max-width : 320px) {
}

/* iPad2 (vertical y horizontal) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
}

/* iPad2 (horizontal) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
}

/* iPad2 (vertical) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
}

/* Ipad3 (horizontal) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio : 2) {
}

/* Ipad3 (vertical) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio : 2) {
}

/* Grandes resoluciones ----------- */
@media only screen
and (min-width : 1824px) {
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
}

/* iPhone 5 ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio : 2) {
}

La información está extraída de:

ResponsiveDesign.is CSS Tricks

Podéis encontrar más información sobre media queries en:

W3.org

Efecto de movimiento un poco más complejo con CSS3: La propiedad animation

Si hace poco vimos cómo animar mediante transition ahora os pongo un ejemplo con animation, para animar elementos sin necesidad de javascript. Una de las particularidades de la propiedad de CSS3 es que todavía no es estándar, lo que nos obliga a definirla prácticamente para todos los motores de renderizado en navegadores. Por ejemplo:

#santa{
position:relative;
left:110%;
-moz-animation:volar 20s infinite;
-webkit-animation: volar 20s infinite;
-o-animation:volar 20s infinite;
-ms-animation:volar 20s infinite;
-khtml-animation:volar 20s infinite;
animation:volar 20s infinite;
}

Donde aparte de los motores definimos el nombre de la animación, volar, el tiempo, 20s, y si añadimos infinite se reproducirá indefinidamente en el tiempo.

Podemos determinar los keyframes donde la animación cambia de posición, tamaño, color, etc. Es decir, en qué momento de la animación se produce un cambio… donde en definitiva establecemos qué propiedad de CSS va a actuar en cada momento. Al carecer de estandarización hay que definirlo también para cada navegador. Por supuesto el nombre de la animación debe coincidir con el nombre anterior, os pongo un ejemplo:

@-moz-keyframes volar{
0%{
left:-150px;
top:5px;
width:80px;
}
25%{
top:220px;
width:50px;
}
50%{
top:90px;
width:40px;
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}
75%{
top:230px;
width:65px;
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
}
100%{
margin-left:100px;
top:90px;
width:25px;
}
}

@-webkit-keyframes volar{
0%{
left:-150px;
top:5px;
width:80px;
}
25%{
top:220px;
width:50px;
}
50%{
top:90px;
width:40px;
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}
75%{
top:230px;
width:65px;
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
}
100%{
margin-left:100px;
top:90px;
width:25px;
}
}

@-o-keyframes volar{
0%{
left:-150px;
top:5px;
width:80px;
}
25%{
top:220px;
width:50px;
}
50%{
top:90px;
width:40px;
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}
75%{
top:230px;
width:65px;
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
}
100%{
margin-left:100px;
top:90px;
width:25px;
}
}

@-ms-keyframes volar{
0%{
left:-150px;
top:5px;
width:80px;
}
25%{
top:220px;
width:50px;
}
50%{
top:90px;
width:40px;
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}
75%{
top:230px;
width:65px;
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
}
100%{
margin-left:100px;
top:90px;
width:25px;
}
}

@-khtml-keyframes volar{
0%{
left:-150px;
top:5px;
width:80px;
}
25%{
top:220px;
width:50px;
}
50%{
top:90px;
width:40px;
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}
75%{
top:230px;
width:65px;
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
}
100%{
margin-left:100px;
top:90px;
width:25px;
}
}

@keyframes volar{
0%{
left:-150px;
top:5px;
width:80px;
}
25%{
top:220px;
width:50px;
}
50%{
top:90px;
width:40px;
-moz-transform:rotate(-45deg);
-webkit-transform:rotate(-45deg);
}
75%{
top:230px;
width:65px;
-moz-transform:rotate(0deg);
-webkit-transform:rotate(0deg);
}
100%{
margin-left:100px;
top:90px;
width:25px;
}
}

Por último sólo quedará darle la clase o ID al elemento que queremos animar:


<img id="santa" alt="" src="img/santa-volador2.png" />

Pongo como ejemplo el Papá Noel volador que sale en esta página. Las propiedades left y position de #santa son para que funcione el efecto de la animación correctamente.

Cómo evitar aparecer en tus propias estadísticas en wordpress

Yo particularmente soy de los que no para de entrar y salir en las páginas que voy actualizando, compruebo, compruebo y vuelvo a comprobar, el problema: que altero las estadísticas reales.

Lo primero es localizar el script de analytics, si las has puesto tú mismo sabrás dónde encontrarlo, para este caso podemos crear un condicional en el archivo footer.php para que muestre el código si no eres un usuario registrado en la página.

<?php if (!$user_ID) : ?>

<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

ga('create', 'UA-xxxxxxxxxx-1', 'damasogonzalez.com');
ga('send', 'pageview');
</script>

<?php endif; ?>

Para los casos en los que pongamos google analytics a través de un plugin, opción del theme o directamente no tengamos ni idea de dónde encontrarlo podemos crear una excepción en la página de google analytics.

Cuenta > Administrador > Filtros.
Os dejo 2 imágenes del proceso.

Evita aparecer en las estadísticas de google