Consejos para iniciarse en WordPress

Ya hace más de un año y medio que instalé mi primer WordPress, y sólo fue el primero de tantos. Les cambiaba el theme, los personalizaba, les instalaba plugins, pero no ha sido hasta hace poco que me he adentrado más a fondo en el interesante mundo del WordPress. Un proyecto en Grapa me obligó a investigar en todas las posibilidades que ofrecia el sistema para poder cumplir con las necesidades del site: Listar páginas como secciones y subsecciones, listar posts del blog en estas páginas, cambiar la estructura de la web para que el propio blog no sea la página de entrada, llamar a otras bases de datos, listar una categoría de blog como si fuese una sección aparte, etc.

Quiero dejar brevemente algunos consejos que puede le sirvan a más de uno:

  1. Conocer los template tags de wordpress: En estas funciones se esconde gran parte de la flexibilidad y el potencial del motor. Sería una locura empollárselos para conocerlos todos a la primera, pero tener una idea de todas las posibilidades es muy recomendable.
  2. Conocer plugins: Tan o más importante como lo primero es esto segundo. Los plugins dan posibilidades incontables a un WordPress. Puede ser algo arriesgado ya que muchas instalaciones de plugin pueden ser incompatibles entre ellas, o pueden no funcionar como se espera, pero son la clave del potencial de WordPress.
  3. Conocer algunos truquillos: Por ejemplo, si cambias la configuración del sistema para que la home sea una página normal, no puedes nombrar este archivo home.php, ya que provoca una irregularidad en el sistema y deja de funcionar correctamente. Todos estos truquillos te los da la experiencia, y están explicados dentro de los codex de wordpress.

Éstos son sólo algunos puntos que a mí me han ayudado para personalizar este wordpress. Probablemente haya algunos otros consejos que sirvan para iniciarse. ¿Alguien tiene alguno más?

Conexión a más de una BD en WordPress

Recientemente me he encontrado con un inconveniente adaptando un WordPress. En un página necesitaba conectar con una Base de Datos diferente de la de wordpress, es decir, hacer dos conexiones simultáneas a Bases de Datos diferentes. Para conectarme a la BD Lo hice de la forma clásica utilizando las funciones mysql_connect(), mysql_select_db(), mysql_close() y ningún problema, hasta que quise llamar a la función wp_list_pages() en el footer, que me daba error. Tras varias pruebas me di cuenta que esto se debía a que al conectar con una segunda Base de Datos, la conexión con la BD de WordPress se cerraba. Buscando en internet, encontré cómo resolverlo en Separate DB connection for WordPress plugins.

La solución es muy sencilla. Se trata de establecer el cuarto parámetro $new_link a true en la función mysql_connect(). De este modo se establece un nuevo enlace con la BD y mantiene el de WordPress.

$connection = mysql_connect('localhost', 'mysql_user', 'mysql_password', true);

Posteriormente, cuando se quiera ejecutar una consulta utilizando este enlace se tiene que especificar:

$result = mysql_query('SELECT * FROM table', $connection);

Y siempre es recomendable cerrar la conexión:

mysql_close($connection);

Menú desplegable en WordPress

Actualmente estoy adaptando un WordPress para un cliente de Grapa, y teníamos la necesidad de mostrar el menú de páginas en la parte superior y que tuviese un mouseover que mostrase las subsecciones de cada página — posteriormente me he enterado que esto se llama suckerfish o dropdown y que se “estandarizó” con este post —. Sabía que se podía hacer porque ya había visto varios blogs que lo hacían, pero hacerlo fue relativamente más fácil de lo que pensaba porque encontré un plugin que lo hace automáticamente y el cual quiero recomendar.

El plugin se llama Suckerfish WordPress Dropdown Menu. Es muy interesante porque permite editar hasta 6 tipus de submenús diferentes: llamando a categorías, páginas, etc. El mismo plugin utiliza las funciones de wordpress como wp_list_pages() o wp_list_categories() para hacer las llamadas a la BD.

Luego además es personalizable con un CSS que se modifica desde la misma administración de WordPress. De hecho, lo más entretenido del plugin es personalizarlo para que se adapte al diseño que tu quieres, pero quitando eso es muy fácil. Y otra cosa realmente importante es que se ve bien en Internet Explorer 6.

Continue reading

Redescubriendo Twitter

Hace meses que Caro me enseñó una herramienta de redes sociales que se estaba volviendo muy popular: Twitter. Bàsicamente Twitter es un interface donde el usuario registrado tiene una página donde puede postear mensajes cortos (140 caracteres), uno detrás de otro. Algo así como un microblog. Y gratuito. Además, tiene una herramienta que permite seguir a gente, es decir, tener una página donde vas viendo lo que postea la gente que quieres seguir, porque te interesa lo que tengan que decir. Luego también salieron posibilidades como escribir desde el móvil, o gmail, etc.

Continue reading

Copiar y pegar desde word con TinyMCE

Desde que empecé a utilitzar los conocidos “HTMLarea”, “textarea enriquecido” o editor WYSIWYG han surgido problemas cuando el cliente hacía copy paste de los textos desde word debido a que mantenía el formato. El código de estilos acababa desmontando la página del site, con la correspondiente llamada del cliente: “Oye, que de repente la página se ve mal…”.

Hace ya tiempo que empecé a implementar TinyMCE, para mí el mejor editor WYSIWYG, y he descubierto que dispone de un plugin realmente bueno y que soluciona los problemas que antes comentaba: SimplePaste.

El plugin es realmente simple. Cuando haces crtl+v sobre el editor borra todo el formato del texto que has pegado. Y ya está. Yo lo he empezado a utilizar y es ideal.

Instalarlo es muy sencillo:

  1. Descargar el archivo zip i descomprimirlo.
  2. Colocar la carpeta simplepaste dentro de la carpeta plugins de la instalación de TinyMCE.
  3. Modificar la configuración del TinyMCE en la página web para que cargue el plugin:

plugins: simplepaste

paste_auto_cleanup_on_paste : true,
paste_create_linebreaks : false,
paste_use_dialog : false,
paste_remove_styles: true,
paste_convert_middot_lists : false,
paste_unindented_list_class : ‘unindentedList’,
paste_strip_class_attributes: ‘all’,
paste_convert_headers_to_strong: false,
paste_as_plain_text: true

El que quiera saber más puede visitar el hilo de discusión sobre SimplePaste en el foro de TinyMCE.

Multibox para mootools 1.2

La necesidad de los nuevos proyectos me ha obligado a adaptar el Multibox de phatfusion para la versión de mootools 1.2, ya que no podía esperar a la versión oficial. Como seguro que más de uno tendrá la misma necesidad aquí dejo un enlace para descargarlo.

Descargar


Detalles del zip:

Incluye los archivos multibox.js y overlay.js.

Instalación:

Simplemente substituir los archivos multibox.js y overlay.js de tu web por los incluidos en el zip.

Actualizaciones:

8/10/2008 – Borrado el código que causaba un mensaje alert

5/09/2008 – Corregido el error que sucedía al querer realizar una carga de html por AJAX

Aviso:

No he conseguido que las opciones onOpen y onClose funcionen. Como que no las he utilizado nunca por ahora no le he dedicado más tiempo.

Graus de qualitat en els formularis web

Els formularis web són la eina clau en la interacció entre servidor i client, la forma que té el sistema per a que l’usuari pugui passar informació al site. Gairebé tot es fa amb formularis, registrar-se a una web, escriure un post a un foro, un tema a un blog… tot i que des del surgiment del web 2.0 en alguns casos han sigut substituits per formularis AJAX, però aquí no parlaré ara d’AJAX, si no dels formularis de tota la vida.

Com tot, els formularis també tenen diferents graus de qualitat, i depenent de la que vulguis implementar tindrà un temps d’el·laboració o un altre. Molta gent es pensa que un formulari és quelcom fàcil de fer, i sí, ho és, però molt entretingut i quant millors els vulguis fer encara més.

Continue reading

Indexació de webs multiidioma amb PHP i Apache

La indexació de pàgines als buscadors és quelcom que s’ha tornat gairebé imprescindible a l’hora de publicar una pàgina web. I aquesta importància recau d’igual manera en sites multiidioma on totes les pàgines en tots els idiomes han d’estar indexades.

Jo conec dos sistemes per fer pàgines web multiidioma. El primer seria el clàssic de ficar la web en un idioma, per exemple català, dins http://www.javierseixas.com/blog/wp-admin/post.php?action=edit&post=23la carpeta ‘ca’. Per traduïr-la a un altre idioma, per exemple el castellà, es duplica la carpeta, se li assigna el nom ‘es’ i es tradueixen tots els arxius html que la componen. Aquest sistema no el recomano ja que obliga a que quan s’hagi de fer una modificació fer-la en tants arxius com pàgines hi hagin, lo qual duplica el treball i el temps. De totes maneres no queda més remei que fer-ho així en servidors que no suportin algun tipus de llenguatge.

El segon sistema que conec és mitjantçant includes que contenen les textos fixes, com titol de seccions, nom de botons, etc. Hi ha un include per cada idioma, i mitjançant una sessió carregarà un include o un altre. S’haurà de declarar una sessió per defecte, per quan l’usuari entri per primer cop l’assigni i carregui l’idioma per defecte. Si l’usuari canvia l’idioma canviarà el valor de la sessió.

Fins aquí tot bé, però què passa quan un robot entra al nostre site? El robot trobarà l’enllaç per canviar d’idioma, però no sabrà interpretar el canvi de sessió, per lo qual, el robot només detectarà i indexarà el nostre site en l’idioma per defecte. I com es soluciona aquest problema?

La clau està en col·locar a l’enllaç on es canvia l’idioma una adreça falsa. Per exemple:

<a href="http://www.javierseixas.com/ca">Català</a>
<a href="http://www.javierseixas.com/es">Castellà</a>

Fet això, el PHP haurà de saber en quin idioma s’està navegant. Això es pot saber per la funció $_SERVER['REQUEST_URI'] que retorna la part de l’adreça després del domini. Tot seguit, el PHP haurà de decidir quin include incloure segons hagi dit el REQUEST_URI, per exemple, ca per català , es pel castellà, en per l’anglés. En aquest punt recomano seguir les sigles que utilitza la wikipedia.

I el darrer punt clau el juga Apache. S’ha d’activar el ModRewrite i escriure les regles per l’idioma concret:

RewriteRule ^ca/(.+) /?sec=$1
RewriteRule ^es/(.+) /?sec=$1
RewriteRule ^en/(.+) /?sec=$1

Campanya per eliminar IE 6

Vaig descobrir aquesta pàgina fa algun temps, i em va fer molta gràcia:

end6.org

Aquesta pàgina és la base d’una campanya que intenta conciencia i informar als usuaris que deixin d’utilitzar l’IE 6 i comencin a utilitzar altres millors, com poden ser Mozilla Firefox, o fins i tot, el propi Internet Explorer 7.

Si, em preguntessiu a mí, jo us recomenaria descarregar Firefox.

També m’ha sorprés que aquesta iniciativa sortís d’un estudi que parla català: hudinvarela.com.

Carregar swfobject per AJAX amb mootools

Construïnt la web de Grapa hem vaig trobar amb un problema: carregar un flash dins d’una capa modificada per AJAX.

Per què ve el problema? Per un costat tenim que el swfobject s’executa quan la pàgina es carrega. Per l’altre costat sabem que l’AJAX carrega un contingut que importa des de una altra pàgina. Quan importa aquest “codi” el que fa és imprimir-lo allà on li dius. Amb mootools es faria així:

var showContents = this.showContents.bind(this);

var ajaxOptions = {
method: 'get',
update: $('section_cont'),
onComplete: showContents
};

this.ajaxRequest = new Ajax(this.url, ajaxOptions).request();

L’AJAX executa un Javascript però no torna a executar la pàgina de nou, per lo qual cridar al swfobject com es fa tradicionalment no funciona.

Com arrivar a la solució? Doncs cal saber una mica com funciona el swfobject. Bàsicament el que fa és crear un objecte i posteriorment imprimir-lo a la capa que li dius. Si això no deixa de ser Javascript, no podriem fer que crees aquest objecte quan ha de carregar l’AJAX?

Doncs efectivament, es pot! Seria alguna cosa així:

showContents: function() {
var interactive_flash = new FlashObject("/swf/reproductor.swf", "header", "548", "425", "8", "#ffffff", true);

interactive_flash.addParam("wmode", "opace");
interactive_flash.addParam("scale", "noscale");
interactive_flash.addVariable("file", this.video);
interactive_flash.write("embed_cont");
}

Si us fixeu, la crida AJAX del primer codi té una linia dins la variable “ajaxOptions” que diu onComplete: showContents. Això vol dir que quan hagi carregat l’AJAX cridarà la funció showContents, la qual crearà el swfobject.

I ja ho tenim. No és pas tan difícil!