Livin’ la vida loca

Cred că cei mai mulți deja știți că m-am mutat la Londra și am început un nou job. Peste 2 luni fac un an de când am început această ”aventură”. Pe scurt, Londra e foarte mare și sunt foarte multe de văzut, dar cel mai interesant e că poți să ”guști” dintr-o diversitate de culturi. Nu garantez că o să vă placă toate însă experiența contează!

Dar pe lângă asta am început și un proiect nou: WPDev.me , care o să devină un marketplace pentru module de WordPress și unelte pentru dezvoltatori. Practic este “fratele mai mic” al lui wpdev.ro, pe care momentan,  l-am redirecționat către noua adresă.

Chiar săptămâna trecută am lansat WP-Copy , un script foarte ușor de utilizat care te ajută să muți un sait WordPress pe un alt domeniu print FTP. Scriptul are grijă să înlocuiască URL-urile din baza de date și să încarce un index.php pentru a evita accesul ne-autorizat la fișierul de backup. De asemenea puteți încerca versiunea gratuită direct din directorul de module WordPress: http://wordpress.org/plugins/wp-copy-free/ .

Până data viitoare, țineți aproape :P.

 

WP Image Preloader

Great news: version 1.2 of the plugin has been released! Now you can preload more images with a single piece of shortcode.

WP Image Preloader is a plugin for WordPress, made to help you speed up your blog. It pre-loads images using the Javascript technique.

How to preload your images? You can do this in two ways:

  1. Add the relative or absolute url of each imag into the default stack. This way, the image(s) will be preloaded on every page of the blog. Use this if you have hover images for menus.
  2. By adding the shortcode [preload=image_url] for one image or [preload=image_url1, image_url2, image_url3] for more images, into your posts. Note you have to activate the shortcode from the plugin configuration page first. This way the image will be preloaded only when viewing that specific post or page. You can also use relative or absolute urls.

Screenshots:

Documentation:

WP Image Preloader uses a jQuery script to preload images. The basic functionality of the script uses the same document.createElement('img') traditional DOM method. You can find the code in /js/jquery.imagepreloader.js file.

As per server-side, the plugin  uses a global array (stack) $WPIMGP_Queue = array(), to store absolute urls to the images.  The functions used to add urls to the global stack are:  wpimgpreloader_build_default_stack() and wpimgpreloader_parse_stack_from_content($content="") .  So the default stack is added to the array during wp_head action, while images preloaded using shortcodes will be filtered during the_content.

All the urls, are parsed using wpimgpreloader_parse_url($url) function, which also decides whether it should add the blog url at the beginning or not.

After parsing the all of the urls, what remains to do is to output the javascript code for image preloading. This action takes pace during the wp_footer by the wpimgpreloader_preload_js() function. If you take a look at it you’ll notice it first calls another function, wpimgpreloader_js_string_from_array($array, $derrive=false, $value=false) which returns a Javascript – formatted version of the input array.

How to use this plugin with your theme?

Course you can install the plugin and use it as it is, out-of-the-box. But, if you’d prefer you can also “embed” it’s functionality in your theme, and avoit having users to install it.  To do this, you need to add two more files  to your theme: wp-image-preloader-portable.php and jquery.imagepreloader.js, provided with the plugin. Then:
– enqueue the Javascript file (jquery.imagepreloader.js) to load in the header of your theme.
– include the PHP file (wp-image-preloader-portable.php) in your functions.php.
– call wpimgpreloader_enqueue($images) to add urls to your images into the stack. You can use as param a string (single url) or an array of urls, absolute or relative to the blog url.
– in the footer of your theme call wpimgpreloader_preload_js(TRUE) to print the image preloader Javascript.

Notes:

This plugin only generates the Javascript code to preload images. How fast the images are loaded is entirely the job of the web server serving the image(s).  Use it for images you may need later in the page (like hover) , not for images loaded anyway with the <img>  tag.
As the plugin name says it is for pre-loading images not for optimizing image(s) load.

Download:

You can always download the latest version from wordpress plugin’s page.

Questions?

If you need help,  have a question or suggestions, please add a comment to this article. Comments are held for moderation, but don’t worry I’ll try to get you an answer asap.

Cum afli calea relativă către directorul temei de wordpress

Dacă v-ați jucat mai mult prin wordpress, și eventual ați avut de făcut pagini separate de wordpress (e.g. inbox-uri sau forumuri) în care să folosiți headerul, footerul sau/și sidebar-ul din tema de wordpress , cu siguranță că ați observat că, deși ați inclus fișierul wp-load.php,  funcția  get_template_part() nu mai funcționează. Rolul funcției este de a include în template anumite fișiere pe baza unor filtre. Și, findcă se bazează pe funcția php include, nu va funcționa corect decât într-un fișier localizat în directorul temei.

Dacă vrei să incluzi loop.php și pe noua pagină – trebuie găsită o soluție mai eficace.
Wordpress îți oferă o constantă, care indică exact calea absolută, pe server, către directorul temei. De exemplu pentru tema redline aceasta va fi ceva de genul ”/var/www/myblog.info/wp-content/themes/redline”. Arată bine, însă, pentru a ne putea include un fișier de acolo, cu include sau include_once, preferabilă ar fi o cale relativă către acest director. Asta se poate obține foarte ușor cu doar două linii de cod:

 

 

Prima dată includem wp-load.php, și după cum puteți observa fișierul  meu extern ce urmează să folosească tema de wordpress se află chiar în directorul rădăcină al wordpress. Definim variabila $template_path pentru a reține calea relativă de la directorul rădacină al WordPress la directorului temei curente. Apoi selectăm post-urile din categoria cu id-ul variabilei $categoryId (transmisă prin GET), pentru a fi afișate.
Mai jos utilizăm noua variabilă pentru a include fișiere specifice temei:

 

Dacă fișierul nu se află în directorul rădăcină al WordPress, mai avem de făcut un lucru, pentru a simplifica lucrurile, putem să definim o constantă care va reține valoarea returnată de script-ul de mai sus, din $template_path, (e.g. WP_TEMPLATE_PATH). Vom lăsa script-ul rezultat în fișierul rădăcină al WordPress și îl includem în fișierul nostru. Apoi rămân de adăugat ”../”, în fața WP_TEMPLATE_PATH,  în funcție de adâncimea direcrotului cu script-ul nostru.

Customizarea meniului în temele WordPress folosind un walker

WordPress este o platformă de blogging foarte răspândită. Dacă nu ați știut, este destul de ușor să portezi teme pentru el, iar în cazul în care aveți un blog pe wordpress, cu siguranță v-ați gândit la posibillitatea asta.
Pe sit-ul wordpress  veți găsi o serie de articole destul de explicite pentru cei care vor să facă o temă de wordpress: wordpress theme development sau designing themes for public release .

WordPress 3.0, a adus o serie de funcţii specifice construirii  şi afişării meniurilor dinamice. Astfel, avem în partea de administrare meniul  Appearance → Menus, de unde se pot construi meniuri, iar în fişierele temei putem apela funcţia wp_nav_menu cu parametrii specifici.

Deşi rezultatul funcţiei wp_nav_menu, poate fi customizat în fel şi chip, uneori pentru a obţine anumite efecte şi a menţine structura dinamică meniului este mai bine să apelăm la un walker.

$walker este penultimul parametru al funcției wp_nav menu, și ne permite să specificăm un obiect ce al unei clase care extinde clasa Walker.

Practic, dacă vrem să avem control absolut asupra afișării meniului, cel mai bine ar fi să folosim o funcție specifică, în loc de wp_nav_menu. Folosind un walker, putem extrage un vector (array) cu următoarea structură: array(“text”=>”link”) . Acesta îl putem mai apoi transmite ca parametru funcției noastre care va construi și eventual, afișa meniul.

Clasa de mai jos, este un exemplu de un astfel de walker. Acesta suprascrie o singură metodă a clasei Walker_Nav_Menu, și mai are în plus un membru public, ArrayItems , al cărui scop este de a reține un  vector de elemente de forma array( itemId => array( titlu => url ) ) :

Acum, pentru a putea folosi acest walker în tema de wordpress, clasa trebuie pusă fie într-un fișier php (d.e. theme_menu_walker.php), și inclus în fișierul unde urmează sa fie utilizat cu include sau mai bine pusă în functions.php, fișier care este inclus automat de wordpress odată cu fișierele temei.
După ce a fost inclus, noul walker, poate fi folosit astfel:

În acest fel, formatarea item-ilor rămâne alegerea voastră, fără a mai depinde de parametrii funcției wp_nav_menu.

Dacă vreți să descărcați cele doua fișiere din tutorial click aici.