Crea tu tema WordPress (casi) desde cero con Components 

Diseño

Automattic acaba de lanzar un sitio en el que crear un tema WordPress con los componentes básicos, casi desde cero, basado en Underscores y una serie de plantillas dependiendo del tipo de tema que quieras crear.Este nuevo experimento, que seguro que te será muy útil para crear temas con lo fundamental, para luego ya ir añadiendo tú estilos y funcionalidades, se llama Components, y está basado en una filosofía muy sencilla, y un uso más fácil aún.Tienes 6 plantillas base desde las que crear tu tema:Base: Underscore a peloBlog moderno: Diseño a una columna, con imagen destacada grande y barra lateral desplegable.Blog clásico: Dos columnas, con su barra lateral, como siempre.Revista: Plantilla de portada en cuadrícula con imágenes destacadas y extractos y otra tipo blog a dos columnas.Portfolio: Con plantilla y tipo de entrada personalizada portfolio, y otra plantilla blog a una columna, con grandes imágenes destacadas.Negocio: Incluye una plantilla de portada con cabecera personalizable, zona de testimonios y otra para contenido personalizado.

Origen: Crea tu tema WordPress (casi) desde cero con Components | Ayuda WordPress

Anuncios

Todo lo que tienes que saber sobre .htaccess y algunos trucos extra | Ayuda WordPress

Diseño, Instalación

1. ¿Qué es el archivo .htaccess?El software de servidor Apache, sobre el que funciona la mayoría de la Web, ofrece configuración de directorios a través de los archivos de Acceso a Hipertexto, Hypertext Access en inglés, más conocidos como archivos .htaccess para que te hagas una idea de donde viene el nombrecito del archivo.Estos archivos .htaccess permiten ajustes personalizados y específicos para cada sitio de directivas de configuración del sistema, definidas en el archivo de configuración principal de Apache (httpd.conf).Estas directivas personalizadas pueden operar dentro de un archivo denominado .htaccess. Para ello el usuario debe conceder al fichero .htaccess los permisos de archivo adecuados de acceso y/o edición. Ya puestos, a este respecto toma nota que jamás debes dar permisos de escritura para todos al archivo .htaccess, lo más habitual y seguro es conceder permisos 644, que permite acceso universal de lectura y permiso de escritura solo al usuario del sistema.También debes saber que las reglas – o directivas – de .htaccess afectan al directorio superior y todos los subdirectorios donde esté situado. Así que para que se apliquen sus configuraciones a toda una web debes colocar el archivo .htaccess en la carpeta raíz de sitio.Además, también puedes crear archivos .htaccess en un directorio o subdirectorio concreto para que sus reglas se apliquen solo al mismo.

2. Notas importantes para novatos con .htaccess

Al ser un archivo de configuración, .htaccess es realmente potente, y en consecuencia peligroso si no se usa bien. Hasta el más ligero error de sintaxis, como un espacio de sobra, puede provocar un funcionamiento desastroso en el servidor. Así que es importante que hagas siempre copia de cualquier archivo y carpeta relevante de tu web, incluidos los ficheros.htaccess originales, antes de meterte a enredar con archivos de Acceso a Hipertexto.

También es importante comprobar que todo funciona bien en tu web después de hacer cualquier cambio en el fichero .htaccess, por pequeño o irrelevante que te parezca. Si encuentras algún error deshaz los cambios o recupera la copia guardada antes de hacerlos para así devolver tu web a su funcionamiento normal.

3. Ojo con el rendimiento

Las directivas de .htaccess ofrecen configuraciones de directorio sin necesidad de acceder al archivo principal de configuración de Apache (httpd.conf). Sin embargo, por cuestiones de rendimiento y seguridad, siempre que sea posible, se debe utilizar siempre el archivo principal de configuración para las directivas del servidor.

Por ejemplo, cuando un servidor está configurado para procesar directivas de .htaccess, Apache debe buscar en cada directorio del dominio y cargar todos y cada uno de los archivos .htaccess en cada petición de documentos. Esto provoca un incremento en el tiempo de procesamiento de la página y, en consecuencia, perjudica el rendimiento.

Para sitios con poco tráfico este tipo de fallos de rendimiento pueden ser inapreciables, pero se puede convertir en un serio problema en webs de alto tráfico.

Así que, como regla de oro, solo debes usar archivos .htaccess cuando no tengas acceso al archivo de configuración principal del servidor, o sea, al archivo httpd.conf.

vía Todo lo que tienes que saber sobre .htaccess y algunos trucos extra | Ayuda WordPress.

Compartir PDF con miniatura

Diseño

Una de las carencias tontas que siempre le he visto a WordPress, y que más piden los nuevos usuarios, es que al compartir un documento en PDF se inserte una miniatura del mismo en vez de un texto enlazado, que queda como muy triste y soso.

Y mira por donde hace nada ha salido un plugin que hace exactamente eso, y de la manera más sencilla posible.

Una vez instalas PDF Image Generator, cada vez que subas un PDF desde el cargador multimedia desde el botón Añadir objeto del editor de WordPress se genera automáticamente una captura del PDF en formato jpg, que al insertarlo en tu publicación lleva el enlace al documento y puedes editarla como cualquier otra imagen (tamaño, etc).

Sus características te enamorarán:

El plugin no requiere configuración alguna ni modifica ningún fichero de la instalación de WordPress, simplemente lo activas y se integra en el cargador de adjuntos, sustituyendo el comportamiento por defecto de inserción de enlaces a documentos PDF por su sistema de inserción de imágenes autogeneradas con enlace al documento.

Crea archivos JPG de los ficheros PDF usando imagick.

El archivo JPG se registra como miniatura del fichero PDF.

Genera tres tamaños de imagen: miniatura, medio y grande.

En los archivos de plantilla el ID del JPG es exportable utilizando las funciones get_post_thumbnail_id($id_de_tu_pdf) o get_post_meta($id_de_tu_pdf, ‘_id_de_la_miniatura’, true).

Muestra la imagen JPG generada como icono de los documentos en vez del png de documentos (document.png) en las páginas de administración de entradas, páginas y adjuntos.

Al insertar un archivo PDF en el editor reemplaza el texto del enlace con el JPG generado.

Si borras un PDF se borran también todos los JPGs generados que se subieron a la carpeta de archivos subidos, con lo que haces limpia completa.

vía Compartir PDF con miniatura | Ayuda WordPress.

15 Stunning Parallax WordPress Themes to Inspire You

Diseño

Online marketing is a rapidly evolving industry where a new trend springs up every couple of months. One recent trend in design is the use of parallax scrolling on websites and landing pages, where elements of the page are animated as you scroll.Parallax scrolling creates an illusion of depth and motion on a site, thereby, creating stunning effects to impress visitors on your page.Check out a few of our favorite stunning parallax WordPress themes and grab some inspiration for website designing:AMAZEAmaze is stunningly unique and interactive parallax builder theme with unlimited foreground parallax layers. It is built on a fully responsive layout using Bootstrap framework version 2.3. This theme uses a user-friendly interface.

Online marketing is a rapidly evolving industry where a new trend springs up every couple of months. One recent trend in design is the use of parallax scrolling on websites and landing pages, where elements of the page are animated as you scroll.

Parallax scrolling creates an illusion of depth and motion on a site, thereby, creating stunning effects to impress visitors on your page.

Check out a few of our favorite stunning parallax WordPress themes and grab some inspiration for website designing:

AMAZE

Amaze is stunningly unique and interactive parallax builder theme with unlimited foreground parallax layers. It is built on a fully responsive layout using Bootstrap framework version 2.3. This theme uses a user-friendly interface.

Pheno

Pheno is the premium responsive one page parallax WordPress theme for those who are looking for something really very creative. This theme is fully responsive and looks absolutely stunning on any device. Pheno has a smooth parallax scrolling effect and several animation rollover effects to keep your visitors engaged. The theme is also incredibly fast.

Flatty 7

tty 7is an amazing Parallax WordPress theme with a flat style one page template. This responsive template offers several features such as full screen slider, Google Fonts integration, progress bar while your website loads and a filterable & expandable portfolio.

Parallax

Parallax is a stunning single page theme with a beautiful design and a whole lot of features such as touch responsiveness drag and drop elements, sliders and boxes and expandable portfolios. This theme is highly customizable. With this theme you can showcase multiple images per portfolio item. The theme comes with an elegant scrolling effect.

907

907 is the best-selling parallax WordPress theme with lots of options. It even offers features such as parallax feature on the main page along with a default parallax section displayed across the pages. It allows you to change these default settings and select a different one for each page or each post.

Creative

Creative is an aesthetically pleasing and inspirational theme that is ideal either for setting up a web presence or to refresh an existing one. Custom widgets are available to display your Twitter Feed. Custom social icons are also integrated with the theme.

Newave

Newave is another superb parallax WordPress theme that is perfect for any corporate or an advertising agency site. This theme offers advanced styling and customization features; this allows you to create endless possibilities for your website by changing navigation styles, backgrounds for each sections, images and patterns.

Attractor

Attractor is a beautiful, clean and fully responsive one-page WordPress theme. It is one of the best parallax WordPress themes which comes with tons of options and features to help you create a great website. The theme is also packed with powerful plugins for free.This theme gives a unique and professional look to websites.

Montreal

Featured on CSS Awards, Montreal is a unique and modern WordPress theme perfect for freelancers or creative agencies. This theme offers features such as 6 different filterable portfolios, self-hosted video, diverse shortcodes, flex slider, a great blog layout and a project planner. This is an interactive theme with stunning typography and abundant white space.

Make

Make is a truly gorgeous WordPress theme that is fully responsive and retina ready. It can be used to build anything: a simple portfolio or photography site, an ecommerce business site, a minimalist blog, or even a professional magazine. It is built with Bootstrap and well-coded so is it is very easy to edit and modify on-site elements. You can modify layout, styling, colors directly from within the background.

Vertex

Vertex is a sleek, minimal theme from Elegant Themes. It is built for service providers who want to showcase their stunning products. This theme has automated updates, unlimited color variations, localizations support, cool testimonial section, fancy content slider and much more. This is the right theme if you are looking for outstanding quality and support in a limited budget.

Port

Port is a sleek and stylish WordPress theme developed by Theme trust. It offers various parallax sections on the homepage. This theme includes a lot of other features including a custom logo option, a fancy slide-out navigation menu, easy to use page templates, custom shortcodes and widgets.

Status

Status is a modern WordPress theme with modular and fully responsive layout. It offers unlimited layout sections to easily build your homepage. This theme is ideal for business or portfolio websites looking to make an impact. It includes lots of advanced features and functions and is based on solid backend framework.

Stardust

Stardust is an ultimate multipurpose portfolio theme with super-clean design and great parallax effect. It comes with an easy-to-use powerful admin interface, fully customizable headers and an impressive array of shortcodes that do counters, progress bars, galleries, grids and more. This theme is fully prepared for translation to any language.

Baylie

Baylie is an elegant WordPress theme from ThemeTrust. The great thing about this theme is it is a multipurpose agency theme with a full screen parallax slideshow. This theme is tailored for artists and illustrators as it makesa huge impact with big and beautiful images. It is a well-crafted organization theme perfect for any design portfolio.

vía 15 Stunning Parallax WordPress Themes to Inspire You — WordPress — Spundge.

7 colecciones de fotografías libres de derechos y con alta calidad

Diseño

Hoy, con ayuda de un listado en el blog de Buffer, revisamos casi una decena de colecciones con fotografías de alta calidad publicadas por novatos y profesionales que desinteresadamente comparten en la web parte de su trabajo dejándolo a disposición de cualquiera para que le sea sacado provecho aún en proyectos comerciales. En cada ítem destacamos un ejemplo del material presente y, aunque no haga falta en la mayoría de casos por su naturaleza libre, publicamos la debida referencia al autor.GratisographyEl artista Ryan McGuire comparte semanalmente imágenes de alta resolución libres para uso personal o comercial aún sin mencionar a su autor la versión más permisiva de la licencia Creative Commons. Un clic basta para descargarlas, nada de registros adicionales.Imagen: Captura, página principal de Gratisography.com

vía 7 colecciones de fotografías libres de derechos y con alta calidad.

En WordPress 4.0: “Publicar esto” vendrá supervitaminado

Diseño

Publicar ésto

Otra de las novedades de WordPress 4.0 es la revisión completa de la herramienta denominada “Publicar esto“, una de esas pequeñas maravillas de WordPress que, cuando la descubres, ya no puedes vivir sin ella.Desde la misma pantalla habitual “Herramientas -> Herramientas disponibles“ del escritorio de WordPress, a partir de WordPress 4.0, tras añadir el bookmarlet accederemos a una versión más moderna y eficaz de esta utilidad, que no abre una pequeña ventana del editor de WordPress sino una ventana especializada, en un lateral de la web que estemos visitando.En esa ventana, además de crearse automáticamente el título y parte del contenido con un enlace al sitio original, se ofrece la imagen principal disponible del artículo a re-bloguear pero con un enlace para elegir otras imágenes con las que ilustrar nuestra futura entrada.Cuando hayas tomado estas pequeñas decisiones puedes desde esta misma ventana publicar directamente la entrada en tu sitio o simplemente guardarla como borrador para editarla más ampliamente en otro momento.Las capturas hablan por sí mismas, y si quieres probarlo lo tienes en el sitio de pruebas de versiones de desarrollo de WordPress …Publicar estoElegir imágenesEntrada guardada

vía WordPress 4.0 – “Publicar esto” supervitaminado | Ayuda WordPress.

¿Qué es un diseño responsivo y en qué afecta a tu web? –

Diseño

Un diseño responsivo es aquel que hace que la web se adapte al dispositivo con el que se está leyendo y tu puedas leer cualquier texto sin tener que hacer zoom.

O sea que si entras a una web y tienes que pellizcar con el dedo para leer algo, eso no es diseño responsivo.

Si entras a una web y lo puedes leer todo perfectamente y además cuando giras el dispositivo se vuelve a adaptar a la pantalla, si es responsivo.

Lo puedes comprobar si has entrado a mi web desde el móvil o tablet.Venga, gira la pantalla.

Ésto es así porque Genesis tiene diseño responsivo.

Si tu web no lo fuera, o bien cambias de plantilla o usas algún plugin como el WPtouch para hacerla.

Pero también tiene sus desventajas y te lo explico en la primera de las características.Así que vamos a ver que ventajas tiene usar un diseño así.

Mismo aspecto

¿No te ha pasado que has entrado en la misma web desde un ordenador y un móvil y era diferente?

Pues eso mismo pasa con el plugin que te he comentado. Por supuesto es mejor que no tener nada. Pero desde mi punto de vista es marear al lector y más si no se ha configurado bien para incluirle aunque sea el logo de la web.La web debe ser de igual aspecto, se vea con el dispositivo que sea. Accesibilidad visual Ésto es lo primordial. Que tu puedas entrar a una web desde un teléfono, un tablet o un ordenador y puedas leerlo todo fácilmente. Nada de estar haciendo zoom por aquí y por allí. Debes de entrar a la web y poder leerlo todo a primeras. Y por supuesto, poder acceder a los menús y poder navegar por ellos.UsabilidadDe nada sirve tener una web que se vea bien, si no puedo navegar por ella. Me pongo a buscar algo y no se donde está el menú para ir a alguna página. Tampoco estoy de acuerdo en eliminar parte del contenido de la web.

¿Para qué pongo una barra lateral con contenido si desde el móvil no se puede leer?Pues eso, opino que para que un diseño sea responsivo, tiene que mostrar todo lo que yo pongo en la web.Recuerda que la tendencia es navegar más con otros aparatos y menos con los ordenadores.Diseño adaptado a dispositivosÉsto es más o menos lo que he dicho ahora mismo.Hay muchos aparatos con los que podemos navegar por Internet.Móviles, tablets, ordenadores, smart tvs, reproductores multimedia, etc.Y cada uno se cargará a una resolución, ya dependiendo de la pantalla que tenga o a la que esté conectado.Así que la web se tiene que adaptar a cualquiera de ellos.Ahorro de datosYo tengo webs que el 60% o más de las visitas vienen de dispositivos móviles.Si tienes un diseño responsivo, éste será o debe ser más ligero que el que se carga en un ordenador.Ésto a final de mes es un ahorro en datos para el lector en su tarifa plana de Internet, como a ti en tu hosting.De nada sirve cargar y cargar datos si después no se va a ver nada de lo que se carga.Velocidad de cargaÉsto por supuesto es una consecuencia de lo anterior.Si tu web no es responsiva va a cargar muchos más datos con lo que al final se va a volver lenta.En cambio, si se adapta a los dispositivos, ésta va a cargar los datos necesarios y lo hará mucho más rápido.

vía ¿Qué es un diseño responsivo y en qué afecta a tu web? – Ragose.