DATE ARCHIVES : diciembre 2013

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.