Planeta WordPress

Aparte de una bonita frase, es una declaración que nos hacen en WordPress.com para animarnos a la actualización de CSS para su servicio de sitios con WordPress.

Y es que si haces la actualización de CSS no solo tendrás la posibilidad de aplicar un CSS preparado previamente por ti en tu editor favorito sino que también te ofrecen un par de funcionalidades extra por si quieres modificar el CSS desde WordPress.com.

La primera es el “selector de fuentes“, con el que puedes definir fácilmente las tipografías a emplear en tu CSS, eligiéndolas de entre más de 50, sin tener que “picar” código manualmente, y la segunda es un editor CSS integrado, con el que puedes guardar reglas de estilo utilizadas o incluso previsualizar como quedará tu sitio antes de hacer el pago por la actualización o los cambios a tu diseño.

Para rematar, si quieres aprender CSS, puedes visitar la página especialmente creada de CSS Basics, con los selectores y clases principales para dar tus primeros pinitos en este bonito “arte” del CSS.

Si te animas solo tienes que ir al escritorio de tu WordPress.com en el menú “Apariencia -> Custom design” y empezar a diseñar tu sitio con CSS.

Ya casi no queda nada que no se pueda hacer con WordPress pero ¿un juego?, pues si. Eso es WordPress Jeopardy, una idea que surgió en WordCamp Suiza este año, la de hacer un juego con una instalación de WordPress, usando sus funciones y hooks.

Y, ni cortos ni perezosos, en Septiembre de este año empezó la primera tanda del WordPress Jeopardy, que para el que no lo sepa es un juego basado en un popular concurso de televisión norteamericano que surgió allí por 1964, hace nada menos que 47 años.

La idea es genial; cada respuesta es una entrada, con sus metadatos como preguntas y puntos de cada pregunta. El sitio es una instalación de WordPress simple, con un tema personalizado. Lo único que necesita es una lista de categorías de entradas y las entradas, que van en la categoría correspondiente de este modo:

<?php
$x = 1;
$cat_args = array( 'parent' => 0 );
$categories = get_categories( $cat_args );
foreach ( $categories as $category ) :
	// Muestra la cabecera de la categoría
	$y = 1;
	$post_args = array( 'category' => $category -> term_id );
	$posts = get_posts( $post_args );
	foreach ( $posts as $post ) :
		// Muestra la entrada de respuesta, aquí va la pregunta y los puntos
	endforeach;
endforeach;
?>

Luego se aplica un poco de CSS y a correr.

Ya hace tiempo que se introdujeron las miniaturas de entrada en WordPress, en concreto en la versión 2.9. Y, posiblemente, te haya pasado como a mi, que actualizaste tu tema para que soportara las miniaturas de entrada y ¡mira por donde que putada!, ahora resulta que todas tus entradas anteriores no tienen miniatura y quedan feuchas en tu sitio recién tuneado.

Bueno, pues no te preocupes, que es fácil arreglar ese pequeño problema, como siempre … 

Si te ha pasado algo así, o simplemente no quieres andar metiendo miniaturas manualmente en cada entrada sino que prefieres poner una por defecto, hay solución sencilla.

Puedes hacerlo de dos maneras, como siempre:

1. Añadir miniatura por defecto mediante código

Aquí la idea es como añadir una especie de gravatar por defecto. Lo que tienes que hacer es localizar el “loop” y añadir lo siguiente, por supuesto con el CSS que más te guste o se adapte a tu tema:

<?php if ( has_post_thumbnail() ) {
the_post_thumbnail();
} else { ?>
<img src="<?php bloginfo('template_directory'); ?>/imagenes/miniatura-por-defecto.png" alt="<?php the_title(); ?>" />
<?php } ?>

2. Añadir miniatura por defecto mediante plugin

Si no te apañas con el código, o simplemente prefieres la facilidad de gestionar visualmente la miniatura por defecto, puedes usar el plugin Default post thumnbail, que te facilita la tarea.

Una vez activo tiene una página de ajustes en la que elegir la miniatura que irá por defecto, y cambiarla cuando te apetezca.

¡Hala, ya está!, que lo disfrutes

Si quieres animarte a empezar a programar, o tocar, código en tu WordPress no estará de más conocer al menos los básicos, y esta entrada va de eso.

Lo que tienes a continuación es una relación de las clases CSS utilizadas por defecto por WordPress, que encontrarás en la inmensa mayoría de los temas WordPress que uses, así que toma nota y empieza a practicar. Si te animas a crear un tema WordPress luego me lo cuentas y lo promocionamos aquí.

Clases por defecto para el “body”

La etiqueta más importante en el contenido es body, y aquí hay ejemplos de las clases más comunes que WordPress suele añadir a este elemento:

.rtl {}
.home {}
.blog {}
.archive {}
.date {}
.search {}
.paged {}
.attachment {}
.error404 {}
.single postid-(id) {}
.attachmentid-(id) {}
.attachment-(mime-type) {}
.author {}
.author-(user_nicename) {}
.category {}
.category-(slug) {}
.tag {}
.tag-(slug) {}
.page-parent {}
.page-child parent-pageid-(id) {}
.page-template page-template-(template file name) {}
.search-results {}
.search-no-results {}
.logged-in {}
.paged-(page number) {}
.single-paged-(page number) {}
.page-paged-(page number) {}
.category-paged-(page number) {}
.tag-paged-(page number) {}
.date-paged-(page number) {}
.author-paged-(page number) {}
.search-paged-(page number) {}

Si quieres añadir estilo a la página de resultados de búsqueda, por ejemplo, puedes usar la clase “search-results” para añadir tu estilo ahí. WordPress solo añade esta clase a la etiqueta body cuando la página de resultados de búsqueda está activa, de modo que no afecta a otras páginas.

Estilos de entrada por defecto

Al igual que con el body, WordPress añade también clases dinámicas a los elementos de las entradas. En esta lista tienes los más utilizados:

.post-id {}
.post {}
.page {}
.attachment {}
.sticky {}
.hentry {}
.category-misc {}
.category-example {}
.tag-news {}
.tag-wordpress {}
.tag-markup {}

La idea es mostrar las entradas de manera dinámica, de acuerdo al formato que elijas. WordPress, de este modo, añade clases dinámicas usando la función post_class (), la cual te permite crear tus propios estilos para cada formato. Esta función añadirá una clase del tipo “.format-cosa” donde “cosa” es cualquier formato de entrada que hayas elegido, ya sea galería, minientrada, etc:

.format-image {}
.format-gallery {}
.format-chat {}
.format-link {}
.format-quote {}
.format-status {}
.format-video {}

Estilos por defecto para menús

De nuevo, podemos personalizar los estilos, en este caso para los menús de navegación:

#header .main-menu{} // clase del contenedor
#header .main-menu ul {} // clase del contender de la primera lista no ordenada (ul)
#header .main-menu ul ul {} //lista no ordenada (ul) dentro de una lista no ordenada (ul)
#header .main-menu li {} // cada elemento de navegación
#header .main-menu li a {} // cada texto de enlace de los elementos de navegación
#header .main-menu li ul {} // lista no ordenada si hay elementos desplegables
#header .main-menu li li {} // cada elemento de navegación desplegable
#header .main-menu li li a {} // cada texto de enlace de los elementos de navegación desplegables

.current_page_item{} // class para la página actual
.current-cat{} // class para la categoriá actual
.current-menu-item{} // class para cualquier otro elemento del menú
.menu-item-type-taxonomy{} // clase para una categoría
.menu-item-type-post_type{} // clase para las páginas
.menu-item-type-custom{} // clase para cualquier elemento personalizado que añadas
.menu-item-home{} // clase para el enlace a la portada

Observa que cuando creas un menú en WordPress automáticamente se envuelve en un div. Este div solo tiene un nombre de clase si lo especificas (por ejemplo main-menu). A partir de ahí ya puedes tu añadir estilo a cada elemento.

Estilos por defecto para el editor visual

El editor visual WYSIWYG es quizás uno de los elementos más utilizados de WordPress, y también de los más queridos. Así que no parece mala idea disponer de estilos por defecto para lo que añadimos en nuestro WordPress, como imágenes, citas, esas cosas. Las siguientes clases CSS son las que añade automáticamente WordPress a estos elementos y que, por supuesto, puedes identificar en tu hoja de estilos – normalmente style.css – y modificar a tu gusto:

.entry-content img {}
.alignleft, img.alignleft {}
.alignright, img.alignright {}
.aligncenter, img.aligncenter {}
.alignnone, img.alignnone {}

.wp-caption {}
.wp-caption img {}
.wp-caption p.wp-caption-text {}

.wp-smiley {}

blockquote.left {}
blockquote.right {}

.gallery dl {}
.gallery dt {}
.gallery dd {}
.gallery dl a {}
.gallery dl img {}
.gallery-caption {}

.size-full {}
.size-large {}
.size-medium {}
.size-thumbnail {}

Estilos por defecto de los widgets de WordPress

Otro elemento muy popular, y nunca suficientemente valorados, son los widgets. Normalmente se adaptan de maravilla al CSS de tu tema pero si no fuera así no está de más saber que clases CSS les afectan y poder cambiarlas. Las habituales son estas:

.widget {}

#searchform {}
.widget_search {}
.screen-reader-text {}

.widget_meta {}
.widget_meta ul {}
.widget_meta ul li {}
.widget_meta ul li a {}

.widget_links {}
.widget_links ul {}
.widget_links ul li {}
.widget_links ul li a {}

.widget_archive {}
.widget_archive ul {}
.widget_archive ul li {}
.widget_archive ul li a {}
.widget_archive select {}
.widget_archive option {}

.widget_pages {}
.widget_pages ul {}
.widget_pages ul li {}
.widget_pages ul li a {}

.widget_links {}
.widget_links li:after {}
.widget_links li:before {}
.widget_tag_cloud {}
.widget_tag_cloud a {}
.widget_tag_cloud a:after {}
.widget_tag_cloud a:before {}

.widget_calendar {}
#calendar_wrap {}
#calendar_wrap th {}
#calendar_wrap td {}
#wp-calendar tr td {}
#wp-calendar caption {}
#wp-calendar a {}
#wp-calendar #today {}
#wp-calendar #prev {}
#wp-calendar #next {}
#wp-calendar #next a {}
#wp-calendar #prev a {}

.widget_categories {}
.widget_categories ul {}
.widget_categories ul li {}
.widget_categories ul ul.children {}
.widget_categories a {}
.widget_categories select{}
.widget_categories select#cat {}
.widget_categories select.postform {}
.widget_categories option {}
.widget_categories .level-0 {}
.widget_categories .level-1 {}
.widget_categories .level-2 {}
.widget_categories .level-3 {}

.recentcomments {}
#recentcomments {}
#recentcomments li {}
#recentcomments li a {}
.widget_recent_comments {}

.widget_recent_entries {}
.widget_recent_entries ul {}
.widget_recent_entries ul li {}
.widget_recent_entries ul li a {}

.textwidget {}
.widget_text {}
.textwidget p {}

Al aplicar estilos a los widges es probable que siempre necesites las mismas clases. Es por ello que es buena idea combinar clases en tu hoja de estilos usando comas. Por ejemplo, puedes combinar .widget_pages ul y .widget_archive ul haciendo algo así:

.widget_pages ul, .widget_archive ul {}

Estilos por defecto del formulario de comentarios

Una de las partes normalmente más feas en cualquier tema WordPress es el formulario de comentarios. Si quieres algo realmente chulo mejor que lo modifiques. Estas son las clases que encontrarás habitualmente en WordPress:

.commentlist .reply {}
.commentlist .reply a {}

.commentlist .alt {}
.commentlist .odd {}
.commentlist .even {}
.commentlist .thread-alt {}
.commentlist .thread-odd {}
.commentlist .thread-even {}
.commentlist li ul.children .alt {}
.commentlist li ul.children .odd {}
.commentlist li ul.children .even {}

.commentlist .vcard {}
.commentlist .vcard cite.fn {}
.commentlist .vcard span.says {}
.commentlist .vcard img.photo {}
.commentlist .vcard img.avatar {}
.commentlist .vcard cite.fn a.url {}

.commentlist .comment-meta {}
.commentlist .comment-meta a {}
.commentlist .commentmetadata {}
.commentlist .commentmetadata a {}

.commentlist .parent {}
.commentlist .comment {}
.commentlist .children {}
.commentlist .pingback {}
.commentlist .bypostauthor {}
.commentlist .comment-author {}
.commentlist .comment-author-admin {}

.commentlist {}
.commentlist li {}
.commentlist li p {}
.commentlist li ul {}
.commentlist li ul.children li {}
.commentlist li ul.children li.alt {}
.commentlist li ul.children li.byuser {}
.commentlist li ul.children li.comment {}
.commentlist li ul.children li.depth-{id} {}
.commentlist li ul.children li.bypostauthor {}
.commentlist li ul.children li.comment-author-admin {}

#cancel-comment-reply {}
#cancel-comment-reply a {}

Bueno, creo que esta lista es genial para empezar a perderle el miedo a programar, CSS en este caso. ¡Que lo pases bien!, y acuérdate de hacer las pruebas siempre en un WordPress destinado a tal efecto, no enredes en tu tema activo.

Este maravilloso resumen lo publicaron en WP beginner

Bueno, pues ya está aquí la versión final del plugin de creación de foros automáticos para WordPress: bbPress 2.0. Si aún no has probado como incorporar un foro en un par de clics en tu web este es el momento.

Instalarlo es tan fácil como cualquier otro plugin: lo instalas, lo activas, creas unos cuantos foros y empiezas a usarlo. Lo único que es posible que tengas que retocar sea tu tema activo, sobre todo CSS, para que se adapte al mismo, pero igual hasta tienes suerte en este aspecto porque se adapta bastante bien a muchos temas actuales.

Otra cosa es importar desde un foro bbPress previo, algo que en mis pruebas aún da algunos fallos, sobre todo si ya tenías mucha actividad, pero lo sigo intentando y ya te avisaré cuando termine los experimentos. Por supuesto, si tienes experiencia en este aspecto coméntalo.

Ea, nada más, a probarlo se ha dicho, olvídate de configuraciones imposibles, de administración engorrosa e instalaciones tediosas como en otros sistemas de foros, ¡esto es WordPresss!

Contenido exclusivo para suscriptores al Feed

¡Gracias por seguirnos a diario!. Premiamos tu fidelidad ofreciéndote habitualmente contenidos exclusivos. Hoy puedes descargar:

Guía Domina tu Blog

Si recuerdas a Nekko, que ya ha publicado varias entradas en Ayuda WordPress, sabrás que es alguien a quien seguir, que le gusta compartir conocimientos.

Pues bien, ahora está elaborando un taller de creación de temas WordPress en su blog, del que va por la tercera sesión. Y como es de vital importancia la participación para la elaboración de los siguientes temarios os animo a aprender con lo ya publicado y participar para que al final se cree un estupendo tutorial.

El temario es el siguiente:

Clase 1: Introducción: Instalar WordPress en un servidor local
XAMPP
Generar una base de datos desde PhpMyAdmin
Contenido de pruebas para la plataforma

Clase 2: Cómo encarar el diseño a partir de un archivo PSD
Presentamos nuestra plantilla.
Introducción a las partes de un theme.

Clase 3: ¡Comenzamos a maquetar!
Comenzamos a maquetar el index.php
Funciones básicas de header.php
El archivo de estilos CSS

Clase 4: El bucle. ¿Qué es? ¿Cómo y dónde se usa?

Clase 5: Jerarquía de templates.

Clase 6: Header.php. Funciones, composición, barra de navegación.

Clase 7: Sidebar.php. Composición, elaborar una sección de Widgets.

Clase 8: Footer.php. Funciones, composición y widgets.

Clase 9: Single.php y Page.php.

Clase 10: Page template con una segunda sidebar.

Clase 11: archive.php y plantillas por categoría, fecha, autor, taxonomía, etiqueta.

Clase 12: Páginas personalizadas: Consultas personalizadas.

Clase 13: Página de búsquedas: search.php e integración con Google CSE

Clase 14: Insertar anuncios

Clase 15: Páginas de error personalizadas

Clase 16: Implementar un slider para el inicio: Nivo-slider sin plugins.

Clase 17: Paginación y breadcrumbs.

Clase 18: Comentarios.

Clase 19: Plantilla para una sección de portafolio.

¡Genial, no te lo pierdas!

Actualizado 17-9-2011

El viernes que viene inauguraremos en Blogpocket la sección “La semana en imágenes” que será un resumen gráfico de los más significativo que hemos publicado en los últimos 7 días.

Hoy, dedico esta entrada a explicar cómo lo he implementado.

Para poder mostrar un listado de imágenes (una por cada post), evidentemente lo primero que hay que tener en cuenta es que cada entrada debe llevar asociada una. Para ello, utilizaremos las imágenes en miniatura (thumbnails) que, desde la versión 2.9, es capaz de gestionar WordPress.

Si tienes una instalación “multisite” no te debes preocupar porque tienes la función incluida en el editor de posts (un widget en la columna lateral con el que puedes añadir una “Featured image” o “imagen destacada”). Sin embargo, en una instalación normal tienes que añadir la siguiente instrucción en el archivo functions.php para activarla:

add_theme_support( ‘post-thumbnails’ );

Una vez que tenemos definida una imagen en miniatura (mediante el widget “featured image” del editor de posts) solo hay que saber extraerla con el correspondiente código PHP. En el blog Aurea encontrarás una buena explicación acerca de cómo programarlo: Thumbnail en WordPress; Mostrar 5 últimos posts con thumbnails.

Yo he utilizado el plugin Category Thumbnail List para no tener que gastar ninguna neurona. Para mostrar la tabla con las imágenes solo hay que añadir el shortcode siguiente, en cualquier lugar del post:

[categorythumbnaillist September, 10 2011]

Siendo “September, 10 2011″ la fecha a partir de la cual queremos mostrar posts. El plugin originalmente lleva el número ID correspondiente a la categoría de los posts que se quieren mostrar, en lugar de esa fecha. Ese identificativo se obtiene en la página de categorías poniendo el cursor encima de la categoría concreta que se va a utilizar. Esto quiere decir, además, que cuando edites una entrada, cuyo thumbnail va a salir en la galería, tienes que asignarle la categoría con ID “n”. Acuérdate también de poner el nombre del post como título de la imagen, ya que el plugin utiliza el nombre de la imagen para mostrar como descripción cuando se sitúa el cursor encima de ella.

Para configurar el tamaño de las imágenes en miniatura, el plugin añade una página de opciones en la columna de “Settings” del escritorio (yo he escogido 170×170), pero hay que asegurarse de elegir el tamaño miniatura al definir la “featured image“.

WordPress posee una opción de “Media” (galería de elementos multimedia) con la que, una vez definida la “featured image” para cada post, siempre puedes modificar sus características a posteriori (nombre, tamaño, etc.).

El plugin Category Thumbnail List tiene una hoja de estilos CSS con la que puedes adornar la lista totalmente a tu gusto.

Por último, el plugin muestra, debajo de cada imagen, el título del post. Si te parece mejor que la imagen aparezca sola, hay que quitar la siguiente instrucción:

$output .= ‘<a href=”‘ .$link . ‘” title=”‘ .$title . ‘”>’ .$title . ‘</a><br/>’;

Y para mostrar las imágenes que tengan la categoría “n”, hay que cambiar la instrucción:

$myposts = get_posts(‘numberposts=-1&&category=’.$listCatId[1].’&&orderby=’.$categoryThumbnailList_OrderType.’&&order=’.$categoryThumbnailList_Order);

por:

$myposts = get_posts(‘numberposts=-1&&category=n&&orderby=’.$categoryThumbnailList_OrderType.’&&order=’.$categoryThumbnailList_Order);

Si se quieren visualizar solo 9 imágenes, por ejemplo, hay que hacer que el bucle solo se ejecute 9 veces. Para ello, se utiliza la variable $i.

Nótese que para que las imágenes se muestren según el parámetro de fecha del shortcode hay que comparar la fecha del post con la fecha en la que se muestran las imágenes. La del parámetro del shortcode se calcula con la instrucción:

$fecha_lim = $listCatId[1];

Y solo se muestran imágenes si se cumple la condición

($fecha <= $fecha_lim) and ($i<10)

Es decir, cuando la fecha del post es menor que la que lleva el shortcode y todavía no se han visualizado 9 imágenes. La fecha del post es $fecha y se obtiene extrayéndola del post con la sentencia.

$fecha = get_the_date();

Si actualizas alguna vez este plugin, acuérdate de volver a realizar estas dos modificaciones y los posibles cambios en el CSS.

A continuación, puedes descargar el plugin modificado: download.

Un modo de acelerar WordPress es comprimir, mediante gzip, todo el contenido que tu sitio sirve a los navegadores de los usuarios que lo visitan.

Esto reducirá los tiempos de carga de tu web ya que la mayoría del HTML se comprime de maravilla.

Para conseguirlo solo tienes que añadir lo siguiente al fichero .htaccess:

¡A correr!

Hoy vamos a ver algo que quizás sea una aberración si lo lee un diseñador, o el milagro esperado para muchos usuarios que quieren tener la libertad de diseñar sus sitios y no tienen tiempo o ganas para aprender a programar. En cualquier caso es una opción a tener en cuenta para ambos (recuerdo a los diseñadores que a ellos también les gusta la facilidad que ofrece CODA a la hora de programar CSS).

Estoy hablando de WP Paintbrush, que dicho sea de paso me parece un nombre más que adecuado. Quien recuerde el programa básico de dibujo Paintbrush que ha venido instalado desde las primeras versiones de Windows sabrá de qué estoy hablando, de una aplicación básica, que permite dar los primeros pasos, incluso conseguir resultados notables, pero sin ofrecer productos profesionales.

Pues bien, esto es bastante aproximado a lo que nos ofrece WP Paintbrush …

En principio se instala como un tema, pero una vez activado la cosa ya muestra todo su poder. En realidad es todo un framework que, partiendo de un diseño básico (ampliable), nos permite configurar un tema WordPress a nuestro gusto.

Para ello dispone de un editor de plantilla y otro de colores. Mediante arrastrar y soltar y clics puedes configurar un tema totalmente a tu gusto, cambiando colores, añadiendo o quitando barras laterales, modificando anchos y altos, prácticamente de todo.

Además, puedes ir viendo en directo los cambios antes de guardarlos, en tu sitio en directo. Luego, cuando hayas terminado, solo tienes que hacer clic en el botón de publicar y ya tendrás tu nuevo tema diseñado por ti listo para utilizar.

Pero vamos, que todo lo que yo te diga es poco comparado con lo fácil que es usarlo. Lo mejor es que lo pruebes y luego nos cuentes tus impresiones.

¿Pegas?, pues la principal es que los temas generados de momento solo se pueden usar como temas hijos de WP Paintbrush, pero ya se anuncia un futuro plugin que permitirá exportar estos temas hijos a temas normales, para su difusión y uso donde quieras.

Otra limitación es que no puedes modificar temas que no se hayan creado expresamente con WP Paintbrush, así que olvídate de hacer una versión vampirizada de tu tema favorito, tendrás que partir de las plantillas base que nos ofrece WP Paintbrush.

Por lo demás me parece una aplicación muy interesante, y sobre todo algo en lo que fijarse de cara a una implementación futura en otros temas o incluso en el núcleo de WordPress porque ¿a que te gustaría disponer de algo así en cualquier tema para poder modificar su estructura base y adaptarla a tus necesidades?, seguro que sería algo que, de incluirse como "plugin core", tendría muchos apasionados, yo el primero.

Ah, casi se me olvida. Si quieres incluso puedes probarlo online en esta dirección.

Sitio oficial: WP Paintbrush

Aunque hay algunos plugins, y temas, que sirven para ofrecer una versión móvil de tu sitio WordPress a usuarios de dispositivos móviles como iPhone igual tiene sentido usar una variable nativa que ya existe en WordPress para detectar este tipo de cacharritos y así prescindir de ayudas externas ¿sabías que existía esta función?, pues existe.

Así que, si te animas, es bastante fácil, solo tienes que hacer dos pasos: crear la función y añadir un poco de CSS para que se vea distinto (es lo menos ¿no?).

Vamos a ver como sería … 

1. Crear la función

Asegúrate, eso si, de que pegas la función antes del cierre de la etiqueta . Por defecto, por ejemplo, el tema TwentyEleven usa la función body_class(); en la cabecera del fichero header.php para añadir clases de manera dinámica a la etiqueta < body >, pero cada tema es distinto.

Por ejemplo, si estás viendo una página en WordPress, es un ejemplo de una clase para el cuerpo de una página o entrada sencilla, lo que te permite cambiar el estilo de ciertos elementos de tu diseño de manera dinámica usando CSS. Si tu tema no usa la etiqueta body_class(); inclúyela de este modo:

WordPress dispone de variables globales que pueden usarse para detectar navegadores, como la que aquí estamos tratando, la variable $is_iphone. Esta variable está incluida en el fichero vars.php de la instalación de WordPress, en estas líneas:

Vamos a usar esta variable junto con la clase 'body'. Para hacerlo primero escribimos esta función:

Ya tenemos hecha la función. Lo primero que hace es darle un nombre, en este caso 'detectar_iphone', para poder reconocerla entre el resto de funciones. Luego se le añade la variable 'global', nuestra ya querida $is_iphone, esto se hace así porque la variable está definida fuera de nuestra función. A continuación le decimos a WordPress que si se produce esa condición (que hay un iPhone navegando por nuestro sitio) añadamos 'iphone' a nuestra clase 'body'. Una vez lo tenemos ya podemos pegar este código de arriba antes de < / head > en nuestro tema activo, normalmente en el archivo header.php, como he comentado antes.

2. Un poco de CSS

Como ya hems creado la función ya solo nos queda crear un CSS específico para esa clase 'iphone' a la que llamamos. En la misma podemos añadir muchos elementos de estilo, como por ejemplo una etiqueta h1 distinta, algo así:

Por ejemplo, donde tengamos la clase h1 de nuestra hoja de estilos (habitualmente en el fichero style.css de nuestro tema activo) le vamos añadiendo la clase 'iphone' que adapte el diseño al dispositivo:

Y así sucesivamente, hasta que ofrezcas una versión para iPhone totalmente a tu gusto.

¿Que no te animas?, pues puedes recurrir a plugins como mobble que añade más variables o WpTouch que lo hace todo el solito.

Contenido exclusivo para suscriptores al Feed

¡Gracias por seguirnos a diario!. Premiamos tu fidelidad ofreciéndote habitualmente contenidos exclusivos. Hoy puedes descargar:

Guía para Administrar WordPress