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

Sidebar dinámico en Cherry

sidebar dinámica en Cherry

[flickr]http://www.flickr.com/photos/12949201@N08/9348328122/[/flickr]

Estoy trabajando con el Framwork de Cherry y me he encontrado un sidebar estático , un poco malo. No es normal que te dejen editarlo con toda la felicidad del mundo en el backer de WP y luego resulta que no se ve ni un widget que no hayas metido a código en sidebar.php.

Localizar el fichero

Tener en cuenta que aunque uses un tema que use el Framwork debes de mirar quien genera el sidebar , el tema hijo o el de Cherry. Para verificarlo tenemos que revisar el código del functions.php del tema hijo y buscas la función de registro de sidebar .

 
register_sidebar(array(

Si no lo tenemos ahí  el siguiente fichero a revisar es el del framework  , para encontrarlo es muy divertido ya que utiliza un include del fichero sidebar-init.php

 
include_once (CHILD_DIR . '/includes/sidebar-init.php');

Con esto hemos de revisar el fichero sidebar-init.php en la carpeta includes del FW Cherry

Aquí vemos que en los comentarios indican que es estática , así que hemos de hacer un nuevo script , en este fichero , para tener en el mismo lugar la nueva.

Mi script

Esto es todo el código que me ha hecho falta  , se ha guardado en el fichero sidebar.php de la carpeta del Framework Cherry 2.0

 

 

Notas

[box type=”info”] Nota: He utilizado el campo id utilizado en el registro del sidebar en el fichero functions. [/box]

Con esto y un bizcocho hemos mejorado un Framework, ahora administrarlo va a ser un atarea más simple. No en vano hemos perdido la actualización del Framework Cherry de forma automática tendremos que manejar este fichero modificado para utilizar en la siguiente actualización

Fuentes:

WordPress: Un sidebar diferente en cada-pagina

Timeline de Twitter en un post

Widget oficial de Twitter

Probando el generador de widgets de Twitter me he encontrado con esto. Muy bien y que es esto , lo que tenemos aquí es un script generado automáticamente desde tu perfil. Con el mostramos el nuestro TimeLine de Twitter en cualquier parte de nuestro website o dicho de otra manero editemos el tema e incrustemos lo.
widget_twitter
Yo en este caso he utilizado un post para mostrarlo. Teniedo siempre en cuenta de pegarlo en el editor de texto




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

Personalizar el wordpress dashboard II

Seguimos con las personalizaciones del wordpress dashboard. En este caso generaremos un plugin con diferentes hacks  que modificarán el aspecto , intentamos mejorar la adaptación de la herramienta a nuestros propósitos.

Estas son las modificaciones que presentaremos para nuestro wordpress dashboard

  • Modificar el pie izquierdo
  • Modificar el pie derecho
  • Aplicar un CSS
//Modificar el pie izquierdo

add_filter('admin_footer_text', 'left_admin_footer_text_output'); //left side
function left_admin_footer_text_output($text) {
    $text = 'Luis Puente';
    return $text;
}

//Modificar el pie derecho
add_filter('update_footer', 'right_admin_footer_text_output', 11); //right side
function right_admin_footer_text_output($text) {
    $text = 'MiWardrobe.com';
    return $text;
}

 //Incluir mi propio CSS
function my_admin_head() {
        echo '				';
}
add_action('admin_head', 'my_admin_head');

Se debe señalar que el nuevo fichero CSS debe de estar en la carpeta del plugin

Personalizar el wordpress dashboard I

Hoy toca eliminar todo los elementos del wordpress dashboard . Queremos que sea simple y sencillo para los futuros usuarios . El planteamiento es sencillo , si no hay opciones para distraerse mejor que mejor. Como entorno de pruebas voy a utilizar un espacio MultiSite de WordPress.  Permitiré al rol Administrador poder ver el escritorio completo  , para ello utilizaré la función  “is_super_admin()”

Estas modificaciones se realizan el plugin de funciones o en functions.php

Vamos a mejorar la funcionalidad del wordpress dashboard

El escritorio se divide en tres apartados:

  • Mensaje de HOLA , le tengo un poco de manía
  • Menús de administración
  • Opciones de pantalla
  • Pestaña de ayuda
  • Widgets de escritorio
  • CSS diferente para el escritorio

Las acciones requeridas para personalizar estos puntos pasan por utilizar el fichero functions.php y diferentes filtro y acciones , incluso utilizaremos algún truquillo de CSS para ocultar elementos.
Empezando por el principio

   //Eliminar el mensaje de Bienvenida de WP
   add_action( 'load-index.php', 'aw_hide_welcome_panel_for_multisite' );
   function aw_hide_welcome_panel_for_multisite() {
           if ( ! is_multisite() ) // si quieres usar este código en un WordPress sencillo borra esta línea
                   return;
           if ( 2 === (int) get_user_meta( get_current_user_id(), 'show_welcome_panel', TRUE ) )
                   update_user_meta( get_current_user_id(), 'show_welcome_panel', 0 );
   }
  //Ocultar menús de administracion
  if ( !is_super_admin() ) {
          add_action( 'admin_init', 'quitar_menus' );
  }
  function quitar_menus() {
  remove_menu_page('edit.php'); //Entradas
  remove_menu_page('edit.php?post_type=acf'); //Advance custom field
  remove_menu_page('options-general.php'); //Ajustes
  remove_menu_page('tools.php'); //Herramientas
  remove_menu_page('themes.php'); //Apariencia
  remove_menu_page('edit.php?post_type=page'); //Paginas
  remove_menu_page('edit-comments.php'); //Comentarios
  }
  //Ocultar la pestania de "Opciones de pantalla" en el escritorio
  if ( !is_super_admin() ) {
          add_filter('screen_options_show_screen', 'eliminar_opciones_pantalla');
  }
  function eliminar_opciones_pantalla(){
  return false;
  }
//Ocultar la pestania de ayuda en el escritorio
  if ( !is_super_admin() ) {
          add_action('admin_head', 'hide_help');
  }
  function hide_help() {
      echo '

';
//Ocultar widgets del escritorio
  if ( !is_super_admin() ) {
          add_action('wp_dashboard_setup', 'quitar_widgets_escritorio' );
  }
  function quitar_widgets_escritorio() {
          global $wp_meta_boxes;
unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_quick_press']);
unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_incoming_links']);
unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_right_now']);
unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_plugins']);
unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_recent_drafts']);
unset($wp_meta_boxes['dashboard']['normal']['core']['dashboard_recent_comments']);
unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_primary']);
unset($wp_meta_boxes['dashboard']['side']['core']['dashboard_secondary']);
}

Con esto y un bizcocho tenemos un poco más personalizado nuestro wordpress dashboard

Fuente :
Quitar widgets por defecto en el escritorio
Quitar la pestana de ayuda en la administracion de wordpress
como eliminar la pestaña opciones-de pantalla en wordpress