WP_NAV_MENU noul cod de meniu in wordpress 3.0

Poate una din cele mai asteptate functii din wordpress, posibilitatea de a crea meniuri cu absolut orice link/pagina/categorie/tag dorim, direct din adminstrare, fara nici o linie de cod in plus, posibilitatea de a lasa clientul/userul sa modifice link-urile, fara a cunoaste prea mult html.

Localizare: In primul rand trebuie sa adaugati urmatorul cod in funtions.php din tema voastra, daca nu aveti functons.php, creati-l manual, adaugand urmatorul cod intre taguri php.

Codul de mai jos adauga o locatie.

add_action('init', 'meniul_nou');

function meniul_nou() {
	register_nav_menu( 'primul-meniu', __( 'Meniu' ) );
}

Codul de mai jos adauga mai multe locatii.

add_action('init', 'meniuri_noi');

function meniuri_noi() {
         register_nav_menus(
		array(
			'primul-meniu' => __( 'Meniul Principal' ),
			'al-doilea-meniu' => __( 'Meniul secundar' )
 			//adaugati cate randuri vreti pentru cate meniuri vreti.
		)
         );
}

Localizare: La Appereance/Menus in boxul “Theme Locations” gasiti noua locatie creata, in cazul in care nu apare nimic, sau totul este sters, trebuie sa creati un meniu din panoul alaturat, doar adaugati un nume si dati un click pe create menu.

Modificarea in tema, unde aveti wp_list_pages, sau vechiul meniu.

De obicei, meniul plasat in fisierul header.php, se poate inlocui cu urmatorul cod, care va afisa primul meniu creat, daca userul nu are creat nici un meniu, acesta va arata paginile create, la fel ca vechiul wp_list_pages

<?php wp_nav_menu(); ?>

Dar daca avem mai multe meniuri, sau vrem un control mai bun, putem specifica parametri adaugati, cand am creat locatiile.

<?php wp_nav_menu( array( 'theme_location' => 'primul-meniu' ) ); ?>

Urmatorii parametri sunt permisi:

* theme_location: Meniul de adaugat care este asociat cu locatia specificata.
* menu: Specifica meniul dupa ID, slug, sau nume.
* container: Elementul care inconjoara lista. Cel default este div, se poate specifica orice se doreste.
* container_class:Clasa css a elementului care inconjoara lista.
* menu_class: Clasa css a liste neordonate (ul). Default este menu.
* fallback_cb: O functie ce poate fi specificata in caz ca nu exista nici un meniu. Default este wp_list_pages().
* before: Text inaintea link-ului dar in interiorul lui.
* after: Text dupa link-ului dar in interiorul lui.
* link_before: Text inaintea link-ului.
* link_after: Text dupa link.
* depth: Nivelul meniului care sa fie aratat, folositor pentru drop down. Default este 0, adica toate.
* walker ermite o clasa PHP walker sa fie specificata (nam idee ce inseamna).
* echo: Sa arate codul php sau sa listeze meniul. Default este true, sa listeze meniul.

Un exemplu ar fi:

<?php wp_nav_menu( array(
    'theme_location' => 'primul-meniu',
    'container' => 'nav', //asta este pentru html5, default este div.
    'container_class' => 'navigation',
    'menu_class' => 'menu-1',
    'depth' => '1' //fara virgula dupa ultima valoare.
) );
?>

Under the hood tips.

In poza alaturata aveti pagina Menus cu setarile default, dar pe langa acele panouri, si setarile link-ului se mai ascund cateva, care nu sunt activate default pentru a nu zapacii utilizatorul prea mult.

In partea de sus – dreapta, aveti un buton Screen Options, un clik pe el va dezvalui inca cateva optiuni, printre care posts, post tags si cateva optiuni avansate ale link-urilor, nui asa ca-i tare .

Nu va pot spune cat de mult am asteptam acest meniu si functii superbe, pentru mine si pentru multi dezvoltatori de situri cu ajutorul wordpress este …….. pur orgasm , numai priviti la playtech.ro cate meniuri si submeniuri sunt, mereu m-am temut sa nu vrea un link care nu face parte din categorii in meniu, numai gandul ma inspaimanta.

Sper sa va ajute specificatiile mai pe romaneste, a si sa nu uit de credite, nimeni altul decat Justin Tadlock.

*UPDATE*Si binenteles ca am uitat esentialul, cum sa faci codul compatibil cu versiuni mai vechi de wordpress.

<?php  if (function_exists('wp_nav_menu' )) { ?> // Daca wp_nav_menu exista il afiseaza, valabil numai in wordpress 3.0
	<?php wp_nav_menu(); ?>
<?php  } else {  ?> // Daca nu, afiseaza vechiul meniu...
<ul>
          <li class="page_item <?php if (is_home()) echo'current_page_item' ?>"><a href="<?php echo get_option('home'); ?>/" title="Acasa">Acasa</a></li>
          <?php wp_list_pages('depth=1&title_li='); ?>
 </ul>
<?php  }  ?>

<?php if ( is_user_logged_in() ) { ?>//verifica daca utilizatorul este inregistrat, daca este afiseaza codul de mai jos.
//Codul vostru sau modulul
<?php }  ?>//da nu este nu afiseaza nimic

Puteti face si link-uri directe pentru utilizatorii inregistrati, sau link pentru login daca nu sunt logati, ceva de genul:

<?php if ( is_user_logged_in() ) { ?>//verifica daca utilizatorul este inregistrat, daca este afiseaza ce este completat mai jos.
<a href="http://situltau.ro/wp-admin/post-new.php">Adauga un articol nou.</a>
<a href="http://situltau.ro/wp-admin/edit-comments.php">Moredeaza commentariile.</a>
<a href="http://situltau.ro/wp-admin/widgets.php">Adauga sau modifica un widget.</a>
//Si codul poate continua, ati prins idea.
<?php } else { ?>//Daca nu este inregistrat, afiseaza ce este mai jos.
<a href="http://situltau.ro/wp-login.php">Autentificare</a>
<?php }  ?>

O functie foarte folositoare pentru dezvoltare si managment al wordpress-ului, sper ca va ajuta cu ceva.

Dupa cum se poate observa, toate link-urile (aproape toate) sunt cu animatie la mouse-ul peste, se schimba culoarea gradat, meniu de navigare se lasa cativa pixeli in jos, in sidebar am facut cu taburi la categorii, arhiva si link-uri utile, link-urile se misca 20 de pixeli spre dreapta cand mergeti cu mouse-ul peste, la fel si in footer, unde am decis sa las structura de la vechea tema, doar am modificat aranjarea.

Tagurile nu le-am mai lasat jos, le gasiti in sidebar. Am pus si Top commentatori, asa ca cei mai vorbareti de aici vor avea link dofolow, toate link-urile din comentarii vor avea si ele dofolow.

Am sa incep in a posta din ce in ce mai multe articole, insa schimb un pic nisha, am sa postez foarte mult despre wordpress, coding, noutatii, si personale(dar mai rar), sper sa va placa noua tema, eu unul sunt foarte incantat, mai am de modificat la ea, dar o voi face pe parcurs.

Am pus foarte mult CSS3, de aceea nu se va devea calumea in multe browsere, la IE6 am renuntat, asa ca acolo este dezastru, dar daca il folositi va meritati soarta , in celelalte browsere ca IE7,8 am sa rezolv din probleme zilele ce urmeaza.

Pacat totusi că scrie așa rar (eu vorbesc ) ) .

Dacă folosiți wordpress 2.9, pentru a activa Post thumbnail, în tema voastră, căutați functions.php, adăugați codul următor înainte de tagul de închidere php “>” :

if ( function_exists( 'add_theme_support' ) )
add_theme_support( 'post-thumbnails' );

Pentru a obține prima imagine (cod necesar pentru a treia metodă) din articol și a o afișa este necesar următorul cod tot in funcțions.php din temă:

function prima_imagine() {
  global $post, $posts;
  $bloginfo = get_bloginfo('template_url');
  $prima_img = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
  $prima_img = $matches [1] [0];

  if(empty($prima_img)){ //Adaugă o imagine default pentru articole care nu au nici un fel de imagine.
    $prima_img = $bloginfo.'/images/default-image.jpg'; //calea către imagine, folderul images din tema
  }
  return $prima_img;
}

În cazul în care aveți un alt nume la custom field, redenumiți ‘thumb’ peste tot din codul urmatorul cu numele custom filed-ului care îl aveți. De ținut minte că TimThumb nu merge decât cu imagini găzduite la voi pe server, imagini locale, nu merge cu imagini găzduite pe alte situri sau hosturi de imagini.

Codul cu TimThumb:

<?php $thumb = get_post_meta($post->ID, 'thumb', true); ?> <!--// Încărcăm custom field-ul, trebuie încarcat primul pentru verificarea ulterioară -->

<?php if ((function_exists('has_post_thumbnail')) && (has_post_thumbnail())  ) { ?>
 <!--// Verifică dacă există funcția has_post_thumbnail, și dacă are atașat un thumbnail, valabil pentru WordPress 2.9 + -->

	<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
	<?php the_post_thumbnail('thumbnail'); ?><!--// Dacă are imagine, o afișează -->
	</a>

<?php } elseif ($thumb != '') { ?> <!--// Dacă nu are imagine, caută dacă este încărcat custom field-ul thumb -->

	<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
	<img src="<?php bloginfo('template_url'); ?>/timthumb.php?src=<?php echo($thumb); ?>&amp;h=150&amp;w=150&amp;zc=1&amp;q=80" alt="<?php the_title_attribute(); ?>" />
	</a><!--// Dacă există custom field thumb îl afișează -->

<?php } else { ?> <!--// și dacă nu este nici una de mai sus, caută prima imagine din articol, si o afișează -->

	<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
	<img src="<?php bloginfo('template_url'); ?>/timthumb.php?src=<?php echo prima_imagine() ?>&amp;h=150&amp;w=150&amp;zc=1&amp;q=80" alt="<?php the_title_attribute(); ?>" />
	</a><!--// afișează prima imagine din articol, dacă nu are una, afișează o imagine default. -->

<?php } ?>

Codul fără TimThumb:

<?php $thumb = get_post_meta($post->ID, 'thumb', true); ?> <!--// Încărcăm custom field-ul, trebuie încarcat primul pentru verificarea ulterioară -->

<?php if ((function_exists('has_post_thumbnail')) && (has_post_thumbnail())  ) { ?>
 <!--// Verifică dacă există funcția has_post_thumbnail, și dacă are atașat un thumbnail, valabil pentru WordPress 2.9 + -->

	<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
	<?php the_post_thumbnail('thumbnail'); ?><!--// Dacă are imagine, o afișează -->
	</a>

<?php } elseif ($thumb != '') { ?> <!--// Dacă nu are imagine, caută dacă este încărcat custom field-ul thumb -->

	<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
	<img src="<?php echo($thumb); ?>" alt="<?php the_title_attribute(); ?>" />
	</a><!--// Dacă există custom field thumb îl afișează -->

<?php } else { ?> <!--// și dacă nu este nici una de mai sus, caută prima imagine din articol, si o afișează -->

	<a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>">
	<img src="<?php echo prima_imagine() ?>" alt="<?php the_title_attribute(); ?>" />
	</a><!--// afișează prima imagine din articol, dacă nu are una, afișează o imagine default. -->

<?php } ?>

Codul este compatibil cu versiunile mai vechi de wordpress, pentru cei care folosesc custom fields, și iată cum puteți rămâne cu tema pe care o aveți acum pe versiuni de wordpress mai vechi, si in cazul unui update, puteți folosi noua metodă de thumbnails din wordpress 2.9 fară să fiți nevoiți a modifica vechiile articole.
Baftă …

Am captcha pus, akismet niciodată nu mi-a dat astfel de probleme, cum scapă totuși rămâne un mister, am să fac totuși update la wordpress 2.9.1, poate scap de ele, deși nu asta este cauza.

Pentru imagini de pe prima pagină, am folosit Timthumb dar cu încărcarea pozei automat din articol, fara custom fields, așa l-am scutit de o grijă, binențeles că la articolele vechi, dacă are imagini cu link de pe alte situri, nu vor apărea, dar asta este o problemă la Timthumb.

Pentru rețelele sociale din lateral, reclama, despre el, si partenerii (dar a folosit altceva la parteneri) am facut cu admin panel, sa chinuit un pic ieri, dar vad ca a reușit sa o facă funțională, succes la blogging .

Am să mai testez poate când se va lansa 2.9.2 sau 2.9.3, odată ce mai repară și din bug-uri, nu de alta dar nu am chef sa fac de 15 ori update-urile, sunt multe de modificat și mai ales avem modificari și în core, câteva include-uri.

Îmi este destul de greu să mai scriu câte ceva pe aici, nu am mai facut-o de multă vreme, prea multe probleme de rezolvat și mult de lucru personal+job, să nu mai zic de chef, parcă trece și moda blog-urilor.

Am pregatit o mică listă de site-uri pentru webdesign și design pentru wordpress, site-uri cu tutoriale și resurse de design teme wordpress plus codarea lor, sunt 12 site-uri pe care le urmăresc de o perioadă și care mi-au fost de enorm ajutor în crearea temelor de până acum.

Am câteva teme nelansate, dar până nu sunt 100% sigur că sunt ok nici nu am să o fac, în plus, am încercat să aduc ceva unic la ele, nu prea am ce însă, mai tot este facut deja, ce rost mai are să ‘reinventez roata’, le voi lansa în curând cu o pagină de opțiuni.

WPShout.com

WPShout i-am descoperit de puțin timp, dar deja am folosit din trucurile lor, au mai multe tutoriale de wordpress, cât și articole cu resurse(inspirații).

www.wpshout.com

Noupe.com

Site-ul acesta îl am în bookmarks de peste un an, însă nu i-am dat importanța care trebuia, aici găsiți o cantitate foarte mare de resurse si tutoriale mai de toate felurile, pot spune că de la ei am găsit mai multe hack-uri de css pe când eram la început.

www.noupe.com

Web Designer Wall.com

Cu un design excelent WebDesignerWall are și cele mai explicative tutoriale pentru wordpress, css și Illustrator, resursele sunt excelente ca și majoritatea articolelor, vă recomand acest site dacă vreți să învățați câte ceva despre webdesign ce sigur veți reține.

www.webdesignerwall.com

Six Revisions.com

Câteva tutoriale bune pentru crearea layout-urilor plus codarea lor pentru wordpress, mai conține si articole de resurse, stiri pentru web developers.

www.sixrevisions.com

Net.Tutsplus.com

Cred că majoritatea știți siturile tuts, rețeaua lor se întinde de la photoshop la after effects, illustrator, flash, și mai noul photo.tuts, sunt cunoscuți pentru tutorialele explicative atât text cât și video, un ‘Must Have’ pentru bookmark-urile voastre.

www.net.tutsplus.com

Rețeaua Envato

Web Design Ledger.com

Mai multe tutoriale, freebies, inspirații, unele le găsiți și prin alte parți dar aici sunt explicate un pic altfel, neapărat să vizitați categoria de tutoriale, sunt câteva superbe, multe retro, astea sunt la modă acum.

www.webdesignledger.com

Blog Themeforest.net

Dacă vreți să creați teme wordpress, trebuie neapărat să vizitați categoria wordpress de pe blogul Themeforest.net, tutoriale video despre codare cât și tutoriale php plus multe altele, a ‘Must Have’ , și acest site face parte din reteaua Envato menționată mai sus.

In The Woods

Smashing Magazine.com

Cel mai cunoscut site despre webdesign, freebies, inspirații, tutoriale și trucuri wordpress și/sau css/php/html/Photoshop/Fotografie, showcase design-uri, recunosc că sunt abonat la RSS lor, primesc în google reader fiecare articol adăugat de ei.

www.Smashing Magazine.com

Cats Who Code.com

Un alt side despre codare/webdesign wordpress și nu numai, chiar îmi place numele domeniului, din câte am citit pe acolo au și un român care mai scrie articole, articole excelente chiar, îl am în bookmarks de maxim o săptămână, o să îmi fac timp pentru o vizită prelungită la ei.

www.Catswhocode.com

Social Cms Buzz.com

Aici sunt o gramadă de teme wordpress, anunțuri despre lansări de diferite situri, foarte bune pentru inspirații, pagina se încarcă cam greu la ei, asteptați un pic (max 5 sec), pe lângă wordpress mai gasiți și pentru alte CMS-uri.

www.Socialcmsbuzz.com

Wphacks.com

Totul despre și pentru WordPress, recunosc că accesez site-ul de fiecare dată când am nevoie de un cod, am o problemă, sau am nevoie de un hack, sau pur și simplu pentru a mai memora câte ceva, pe lângă codex.wordpress.org cred ca este cel mai valoros site de resurse codare/teme/plugin-uri wordpress.

www.WPhacks.com

CSS-Tricks.com

Și cel la care sunt abonat la RSS/Twitter, am cont la el pentru a ușura comentarile, și am urmarit TOATE video-urile, nu este nimeni altul ca Chris Coyer și cu al lui CSS tricks, tutoriale pentru codarea temelor wordpress, trucuri css, si multe altele, personal de la el am învațat enorm de mult, Thanks Chris.

www.CSS-tricks.com

Astea sunt doar cele mai bune care mi se par mie, din lista lungă de site-uri pe care o am, un bookmark de câteva sute, probabil mai sunt multe altele, dar eu zic că este arhisuficient, cel putin pentru mine.