Loop y Codex WordPress

Loop ordenado

Hoy he tenido que modificar el orden en el que muestra los datos un Loop. Es bastante sencillo cuando entiendes su funcionamiento. Recopilo los recursos que he utilizado y las dos forma de estructurar el código para obtener el mismo efecto.

[box] En WordPress el Loop es toda una institución , posee un serie de objetos en la API para abstraerte de las consultas SQL.[/box]

Lo más correcto es utilizar WP_Query

El código esta generado mediante arrays , este contiene todos los parámetros de la búsqueda que queremos realizar. Desde el Codex podéis ver todos los parámetros implementados , estos son solo los tipos posibles de parámetros que posee esta fantástica API

[box]

[/box]

 

Siempre puedes usar la técnica antigua , generar una cadena  con la consulta  SQL

Para este caso se concatenan los parámetros separados por “&”

 

La mezcla en este caso no es una mejora.

Puedes tener que modificar un Loop realizado con arrays , puedes obtener la consulta final y concatenar parámetros. Esto es una GUARRADA ,  si funciona pero crear un array para la búsqueda y poder entender el código después no tienen precio.

En mi caso trabajo , siempre que puedo , con temas hijos , así que regenero la plantilla casi por completo. Coges el código antiguo y lo modificas siguiendo las reglas de estilos de WordPress.

Recursos:

He buscado un poco por internet para realizar esta tarea  y he encontrado una persona con más experiencia que yo  , explicando perfectamente los tipos de código que nos podemos encontrar en los Loop.

Post: Editando el “loop” de WordPress

Plantilla HTML5 y CSS Responsive

html5_css3_jquery

Responsive con HTML5 , CSS y algo de JQuery

Me he visto involucrado en la realización de un plantilla con diseño Responsive. Toda una aventura la verdad.

Todo se basa en esta frase:

La diversión de los navegadores , cada uno hace lo que le da la gana , que bonitas son las sorpresas ¿y como se verá esto en IE9? ¿IE6? …. como un niño el día de reyes , sorpresas y sorpresa

Ahora vamos con la estructura elegida

JQuery + JQuery UI

Esto lo digo ahora , porque cuando empece no pensé en ello y al final , revisas el trabajo realizado  y como lo has llevado acabo, te queda una conclusión “Existe un orden que he de usar para la próxima vez”. No se si lo haré  porque no se si repetiré este trabajo , pero bueno aquí lo dejo apuntado como guía para el siguiente que lo necesite

Las fases para la realización se pueden dividir en

Para realizar el enmaquetado de las capas he utilizado BlueGriffon , un editor web OpenSource muy bueno , bastante ligero y multiplataforma.

Recursos CSS

  • http://www.w3.org/TR/CSS21/box.html
  • http://manelgarcia.com/recursos-web/tutorial/listas-horizontales-con-css/

Formularios

  • http://www.mcanam.com/generadores/html/formularios.php
  • http://www.miguelmanchego.com/2009/formato-formulario-css-hoja-estilo/
  • http://www.echoecho.com/htmlforms11.htm

Detalles en los que no había pensado

http:// www.html5test.com

Modificar el CSS del Uploader Media WordPress +3.5

Uploader Media WordPress

    	.media-menu,.attachments-browser,.media-frame-menu,#wp_editimgbtn,.media-router .active:after {
            display:none;
        }
		.media-modal{
			width:600px;
			max-height:400px;
			margin:auto;
		}
		.media-frame-title h1{
			font-family:"gill sans";
		}
		.media-frame-title,.media-frame-router,.media-frame-toolbar{
			left:0px;
			text-align:center;
		}
		.media-frame-content,.uploader-inline-content{
			margin-top:40px;
			position:static;
			text-align:center;
		}
		.media-toolbar,.media-toolbar-primary{
			position:static;
			width:128px;
			padding:0px;
			margin:auto;
			float:none;
			text-align:center;
		}
		media-button-insert{
			display:block;
		}
		.media-router{
			float:none;
			width:100px;
			margin:auto;
		}
		.media-router a{
			border-right:0px;
		}

Fuente:
Customize Media Manager http://wordpress.org/support/topic/customize-media-manager?replies=5

Modificar campos de Uploader Media WordPress +3.5

Uploader Media WordPress

En este punto venimos del anterior post en el que modificábamos el comportamiento del Uploader Media WordPress median el único hook que se mantiene funcionado de versiones anteriores.

En este post entraremos en harina , nada de limpieza y poseí como dicta el eslogan de WordPress. Tenemos que hacer modificaciones en el Uploader Media WordPress y no tenemos una interfaz de uso estándar (hooks y filtros). Utilizando Backbone.js y JQuery es posible realizar algunas modificaciones y otras no porque no tenemos los nombres de los objetos DOM de dicha pantalla , pero los buscaremos.

Ahora vamos con la parte complicada , se han olvidado dar capacidades de modificación al “Uploader Media WordPress”. La opción encontrada se basa en localizar los elementos dentro del DOM y aplicarles la propiedad de ocultos , de paso asignaremos valores por defecto. Los valores que asignamos realmente estamos simulando el uso del ratón , un poco cutre a mi parecer y más para este CMS pero es lo que hay , por ahora.

Con esto localizamos el elemento

this.$el.find('select.link-to')

Valiendonos de objetos le aplicamos el valor nulo con

.val('none');

Dejando como resultado

this.$el.find('select.link-to').val('none');

Aunque decía antes que casi simulábamos el uso del ratón aquí radica la pequeña diferencia. Estamos utilizando los Backbones.js para el acceso a los objetos del DOM así que siguiendo sus directrices debemos actualizar los valores del modelo de datos. Para eso siemplemnte aplicamos valores a los objetos que deseamos , atributo “link” con valor “none”

this.model.set('link', 'none');

Esta me ha costado algo más de entender
Localizamos el objeto , ascendemos a su padre y a este le aplicamos el oculto. Esto es así para ocular la etiqueta el input que estan contenido en una capa.

this.$el.find('select.link-to').parent('label').hide();

Seguimos desgranando el código con esto tan curioso. Podemos ocultar opciones del elemento HTML select

this.$el.find('select.size option[value=full]').hide();

Lo ultimo y no menos importante , guardar los cambios realizados

this.updateLinkTo();
var _AttachmentDisplay = wp.media.view.Settings.AttachmentDisplay;
	wp.media.view.Settings.AttachmentDisplay = _AttachmentDisplay.extend({
		render: function() {
			_AttachmentDisplay.prototype.render.apply(this, arguments);
			this.$el.find('select.link-to').val('none');
			this.model.set('link', 'none');
			this.$el.find('select.link-to').parent('label').hide();
			this.$el.find('select.size option[value=full]').hide();
			this.model.set('size', 'large');
			this.updateLinkTo();

El antes y el después en imagenes

 

pre_v2post_v2

Modificar pestañas de Uploader Media WordPress +3.5

Uploader Media WordPress

En el paso a 3.5 se modifico el Uploader Media WordPress , esto incluyó principalmente el “drag and drop” y el uso de un popup integrado muy bonito. Por el camino se ha perdido la capacidad de varios hooks para modificar la antigua ventana.

El como modificar estas ventanas se divide en dos partes , las pestañas y los atributos. La modificación también se puede atacar desde varios frentes , JavaScript (JQuery , Backbone) y hooks.

Nota:No me gusta eliminar elementos ni trabajar con la interfaz de JS si no esta totalmente claro que ha de ejecutarse en cliente , prefiero enviar siempre el código HTML perfectamente maquetado.

Espero que pronto tengamos unos hooks para trabajar con el Uploader Media WordPress. El primer paso esta dado y para pestañas ya tenemos algo.

El JavaScript lo encontraras en internet de formas muy parecidas , ya que es un “workaround”/parche fácil de implementar. Para este caso utilizaremos el fichero de funciones del tema y así evitaremos tener que modificar diferente PHP y poder estropear el maquetado. en la siguiente entrega veremos como trabajar con JS y el Uploader Media WordPress

Eliminar las pestañas

  • Inserta de URL
  • Crear Galería

Para este paso utilizaremos un hook de WordPress y un array de campos que deshabilitaremos dos opciones.

hook: media_view_strings

//Elimina las opciones de insertar imágenes desde URL y crear galería

		function remove_media_tab($strings) {

			unset(
				$strings["insertFromUrlTitle"],
				$strings['createGalleryTitle']
			);
			return $strings;
		}
		add_filter('media_view_strings','remove_media_tab');

Buscando las cadenas di con este increible post sobre modificación de pestañas en el Uploader Media WordPress , siempre pensado en versiones 3.5+. Siguiendo el filtro por los ficheros del core he localizado estas opciones modificables

$strings['selected'],  //Removes Upload Files & Media Library links in Insert Media tab
$strings['insertMediaTitle'],  //Insert Media
$strings['uploadFilesTitle'],  //Upload Files
$strings['mediaLibraryTitle'],  //Media Library
$strings['createGalleryTitle'],  //Create Gallery
$strings['setFeaturedImageTitle'],  //Set Featured Image
$strings['insertFromUrlTitle']  //Insert from URL

Es función la situaremos en el fichero functions.php de nuestro tema activo. Utilizaremos el mismo filtro

Fuentes:

WP 3.5 and Hiding Media Tabs

Habilitar the_excerpt() en Twenty Eleven

Estoy investigado el tema Twenty Eleven y me he dado cuenta de lo amplio que es. Llevo un par de mejoras y esta ultima me ha costado un poco  , no he hecho caso a Feliz Zapata y no tengo la jerarquía de páginas de wordpress a mano.

Mi intención es habilita en el home del tema el modo resumen para las entradas. Eso de poner la etiquete  a mano cuando editas un post es trabajo que se puede automatizar. La idea es sencilla , cambia la funcion the_content() por the_excerpt(). Y el problema me llegó al abrir el loop principal de index.php , no se parece en nada a los que había visto.

 

El original:



 

En este caso tenemos el get_template_part que no dirige al fichero content.php. En este fichero buscamos la sección


//…..

Ahora comentamos la función

 

Y generamos otra linea sustituyendo simplemente the_content por the_excerpt

 

Para ajustar la cantidad de texto a mostrar con nuestro diseño podemos limitar el numero de palabras a mostrar. Para ello nos valemos de un filtro en functions.php

function custom_excerpt_length( $length ) {
	return 20;
}
add_filter( 'excerpt_length', 'custom_excerpt_length', 999 );

Utilizamos el filtro ‘excerpt_length’

Nota: Para cambiar el mensaje de “Continue reading” debemos hacerlo en los ficheros de traducción a código a FUEGO , por eso de tener algo de estilo y no chapucear el código

 

Fuentes:

Propia experiencia

Function Reference/the excerpt

Linkdin WordPress en español

 

TinyMCE y WordPress

Es el edito WYSIWYG por defecto de WordPress. Este softare es un JS integrado en el CMS , así que si queremos modificar algo en lo más limpio será preguntar a la API de WordPress a ver que nos cuenta.

WordPress y TinyMCE

Buscamos un Hook para lanzar nuestra modificación , será en la inicialización del “Editor”

La referencia encontrada es  ‘tiny_mce_before_init’ y utilizaremos un filtro

add_filter('tiny_mce_before_init', 'fb_change_mce_buttons');

Ahora necesitamos buscar la forma en la que se pasan los parámetros al TinyMCE. en la Web del proyecto tenemos  un Wiki donde podemos encontrar todas las variables de invocación.

Llegado a este punto tenemos el cuando  y el que debemos de trasmitir al editor para personalizar. Nos falta el como y ahí es donde entra WordPress , nos proporciona acceso libre a todas las configuraciones utilizando diferentes arrays extraídos de  la documentación de  TinyMCE

$initArray['theme_advanced_blockformats'] = 'p,address,pre,code,h3,h4,h5,h6';
$initArray['theme_advanced_disable'] = 'forecolor';

Con esto debemos crear una función invocada desde el filtro indicado y con las variables que deseamos configurar en el el editor. Yo he optado por eliminar todos los botones

$initArray['theme_advanced_disable'] = '"bold,italic,underline,strikethrough,justifyleft,justifycenter,justifyright,justifyfull,bullist,numlist,outdent,indent,cut,copy,paste,undo,redo,link,unlink,image,cleanup,help,code,hr,removeformat,formatselect,fontselect,fontsizeselect,styleselect,sub,sup,forecolor,backcolor,forecolorpicker,backcolorpicker,charmap,visualaid,anchor,newdocument,blockquote,separato"';

La función quedaría de esta forma

function disable_tinymce_buttons( $initArray ) {
		$initArray['theme_advanced_disable'] = '"bold,italic,underline,strikethrough,justifyleft,justifycenter,justifyright,justifyfull,bullist,numlist,outdent,indent,cut,copy,paste,undo,redo,link,unlink,image,cleanup,help,code,hr,removeformat,formatselect,fontselect,fontsizeselect,styleselect,sub,sup,forecolor,backcolor,forecolorpicker,backcolorpicker,charmap,visualaid,anchor,newdocument,blockquote,separato"';
		return $initArray;
		}

			add_filter('tiny_mce_before_init', 'disable_tinymce_buttons');

fuentes: Personalizar TinyMCE en WordPress
Parametros de configuraciónde TinyMCE
Deshabilitar botones en TinyMCE
Listado de botones de TinyMCE

WordCamp 2012 Sevilla

El primer día , esta vez si he dormido en Sevilla y el cuerpo lo ha agradecido. Empezamos bien con mi gravatar en la identificación.

30 cosas que no sabías que se podían hacer con un WordPress recién instalado

Rafael Poveda

Una presentación eficiente , sobria y  fácil de seguir a primer ahora de la mañana. Muy interesante porque en esas 30 he de reconocer que muchas no las conocía.

 

 

 

Un tema para cada necesidad

José Esteban Mucientes Manso

La verdad mas grande existente. En Wodpress la funcionalidad de la web tiene como pilar el diseño y el tema proporciona esas dos características. Elegir bien este punto es importante respecto a una modificación o actualización y  aquí no importa tu “casta” si eres desarrollador quieres un buen código y si eres cliente final el soporte está la seguridad.

WordPress y la personalización en el ecommerce

Ricardo Prieto Antúnez

David Borrallo Rodríguez

Verónica Valenzuela Jiménez

 

 

Como dicen lo fácil y sencillo es mil veces mejor , esto “chicos” lo han explicado desde su propia experiencia con un proyecto basado en una idea. Ha presentado el proyecto y un poco la realización. Son un ejemplo a tener en cuenta y aprender mucho de ellos.

Ya éramos responsables

Enrique Rodríguez Vallejo

Una presentación sencilla y principalmente romper una lanza a favor de los desarrolladores que piensan en un buen trabajo por encima de todo. El portafolios personal es muy importante  pero mirar hacia atrás y ver la calidad de los resultado reconforta.

 

Tu WordPress 100% legal

José Antonio Maroto Fernández

Un contenido muy complicado para nuestro entorno  pero altamente educativo y por desgracia un tema muy importante.

 

AlbertoContador.org – WordPress multisitio, multiidioma y red social. Todo un reto.

Mercedes Romero

Ahora el contenido ha sido mucho más liviano , y la presentación de caso de exito basado en  todas las tecnologías nativas  disponibles en wordpress. Un claro caso de éxito y que a simple vista no se ven , ni se perciben  “la tripas” y el trabajo que ha llevado.

Crear un plugin con el modelo Freemium en WordPress

Benjamin Caubère

La experiencia personal es un valor y aquí se demuestra. Su vida como desarrollador de un plugin para wordpress. Ningún comentario porque ha sido un exposición limpia y clara , con gran cantidad de contenido y marcando los hitos en los qu eel tomo una decisión en vez de otra

 

Microformatos

Fran Torres

Vaya velocidad y simplismo , así es fácil entender los concepto cercanos a la semántica web

 

 

WP Mayor, The Story and the works

  Jean Galea

Interesante y sobre todo alentador. Un exposición fácil y clara de como evolucionó   técnicamente  durante su proyecto persona WP Mayor.

 

 

ElClubExpress.com un club cultural con WordPress

Gonzalo Andino

Dejando la parte técnica un poco a parte , se presenta una idea de gestión de contenidos culturales. Proporcionar accesos a esos pequeños concierto y anuncios de nuevas promesas

 

Cómo vivir en la nube: WP como pieza fundamental del negocio (ingresos al cuadrado)

Franck Scipion

Realmente ha promocionado su negocio de una forma sutil efectiva  y sobre todo estableciendo la cercanía con el cliente potencial. Las pautas proporcionadas son de una genialidad simplista , si detalles que te ayudan a pensar en que otro mundo laborar es posible.

Software libre como modelo de cambio productivo

Luis Rull

Un golpe duro al buen “rollo” de las conferencias , ha dejado claro que no tenemos mucho de comunidad y estamos reticentes a colaborar con nuestro trabajo , no en cambio generar negocio entre nosotros. “El dinero siempre por delante”

Clínica SEO

Fernando Muñoz

Nos ha dado una paliza, hemos realizado muchos trabajos en wordpress y no tenemos en cuenta los detalles básico que si conocemos de las página estáticas HTML.

 

Las posibilidades de BuddyPress

José Conti

Siguiendo la historia de WordPress , un gestos de blogs y luego mucho más , BuddyPres empezó como un plugin para crear redes con WP y ahora adolece de ese estigma y se propone evolucionar. Siguiendo la máxima del código es poesía las evoluciones están encapsuladas en plugins. En el afán de hacer las cosas bien están realizando un trabajo y lo están consiguiendo.

 

Custom Post Types , Fields y Metabox

Esta ha sido mi linea docuemental sobre las persoanlizaciones de los post que permite WordPress

Enlaces de interés

Post de contenido interesante , con esto lo entendí yo , así que espero que os ayude.

[box]

WordPress 3.0: Exprimiendo los Custom Post Types

http://www.anieto2k.com/2010/06/19/wordpress-3-0-exprimiendo-los-custom-post-types/

WordPress: Order custom post type by custom fields in the admin area

http://www.eggplantstudios.ca/wordpress-order-custom-post-type-by-custom-field-in-the-admin-area

Create A Simple Metabox For Custom Post Types

http://new2wp.com/noob/create-metabox-custom-post-types/[/box]

 

Plugins

[box] Custom Post Type UI

Custom Content Type Manager

More Fields

More Types[/box]

 

Experiencia personal

Yo utilizo  Custom Post Type UI y More Field por cuestiones del “caos”.  El que recomienda en Custom Post Type UI y por ahí empecé ,. mas tarde cuando necesité crear campos personalizados estos mismo recomiendan  More Field. Supongo que más adelante probare el como de More Fiel y More Type ya que son del mismo equipo.

 

 

Prestashop mi primeros pasos

Esa “cosas” que comentaba en el anterior post  , esas que deberíamos de saber cuando te enfrentas a una instalación si módulos

Lo primero es encontrarte con una pagina en la que solo aparece el logotipo.  Esto es básico el primero módulo a activar es

  • blockuserinfo (ingles)
  • Bloque de información personal (español)

Ahora creamos una categoría y damos de alta un productos para familiarizarnos con el proceso.

Siguientes módulos a instalar:

  • Carrito v1.2 por PrestaShop
  • Bloque de categorías v2.0 por PrestaShop
  • Bloque de marcas v1.0 por PrestaShop
  • Bloque Mi cuenta v1.2 por PrestaShop
  • Bloque de información personal v0.1 por PrestaShop
  • Productos Destacados en la Página de inicio v0.9 por PrestaShop
  • Categoría de productos v1.3 por PrestaShop
  • Ventana de información producto v1.0 por PrestaShop

Con esto tenemos el esbozo de una tienda on line

 

Fuente: Front side of store showing only the logo