A aquesta classe parlarem de 2 plugins molt interessants. Un que ja havíem comentat, el Contact Form 7, per fer formularis i el Advance WQSF, que ens servirà per fer filtres de cerca.
Contact Form 7
Com que aquest puglin ja el comeixem només destacar una parell de coses. Ens permet fer mots tipus de camps predefinits, text, email telèfon, data… cada un amb les seves característiques i peculiaritats. També ens permet fer camps obligatoris.
Ens permet definir com es veurà el formulari i com es veurà el mail que rebrem amb la informació del mateix formulari, utilitzant shortcodes i codi HTML.
Hi ha extensions que es podem descarregar per millorar la funcionalitat, com per exemple, el plugin Really Simple CAPTCHA que com el seu nom indica ens implementa un Captcha al formulari. L’instal·lem per fer lo servir a l’exemple.
Creem un nou formulari que es digui contacte. Al apartat formulari posem:
[php]
<div class="textinfo">Nom (obligatori)</div> [text* your-name]
<div class="textinfo">Cognoms(obligatori)</div>[text* Cognoms]
<div class="textinfo">Telèfon</div>[tel telefon]
<div class="textinfo">Email (obligatori)</div>[email* your-email]
<div class="textinfo">Data Naixament</div>[date data-naixament]
<div class="textinfo">Data Nif</div>[text Nif]
<div class="textinfo">Domicili habitual:</div>[text domicili]
<div class="textinfo">Codi postal:</div>[text codipostal]
<div class="textinfo">Pais:</div>[text pais]
<div class="textinfo">Allotjament:</div>[select menu-717 include_blank "Casa amb vistes al mar" "Apartament amb terrassa"]
<div class="textinfo">Nº de persones a allotjar-se:</div>[number numeropers]
<div class="textinfo">El vostre missatge</div>[textarea your-message]
<p>Captcha – Escrigui aquests caràcters (obligatori)</p>
[captchac captcha-40 size:m]
[captchar captcha-40]
<p>[submit "Enviar"]</p>
[/php]
Com podeu veure hi ha camps de molts tipus, text, data, email, telèfon… hi ha desplegables com els allotjaments i números. També hi ha codi html en mig dels shortcodes per donar forma al formulari.
L’apartat cos del missatge ens serveix per determinar com serà el format del mail que rebrem. Posarem el següent codi:
[php]
De: [your-name] [Cognoms]<[your-email]>
Telèfon: [telefon]
Data Naixament:[data-naixament]
Nif:[Nif]
Domicili:[domicili]
CP:[codipostal]
Pais:[pais]
Número Persones:[numeropers]
Allotjament: [menu-717]
Assumpte:Demanda Info – [your-name] [Cognoms]
Message Body:
[your-message]
—
Aquest correu electrònic s’ha enviat des d’un formulari de contacte.
[/php]
A l’apartat correu, posarem el mail a on voldrem rebre els correus que vinguin del formulari. Si és necessari podem fer servir un segon correu.
A l’apartat missatges tenim els texts que utilitza el programa en les respostes automàtiques que es poden editar.
Posarem el següent codi css:
[css]
/*contacte*/
.wpcf7 input[type=text], .wpcf7 textarea, .wpcf7-email, .wpcf7-tel, .wpcf7-date, .wpcf7-select, .wpcf7-number {
border: 1px solid #A0A0A0;
border-radius:5px;
background:#E0E0E0;
}
.textinfo {
width: 150px;
float: left;
}
[/css]
A la nostre fulla d’estils substituint el de la setmana passada.
El resultat serà aquest:
També es pot inserir jquery si ens interessa, per exemple, per mostrar o no camps depenent de la resposta en altres camps. Podeu trobar més informació sobre el tema aquí
Advance WQSF
El plugin Advance WP Query Search Filter com diu el seu nom ens permet realitzar un filtre per cerques avançades. Aquestes cerques es podem fer sobre categories, etiquetes, categories personalitzades, camps personalitzats… Es pot delimitar si volem busca a les pàgines, als posts, a les entrades personalitzades…
Farem un exemple utlitzant les entrades personalitzades de Immoble que vem fer a la classe anterior.
Creem un nou filtre i a l’apartat Post Type marcarem immoble per que aquest filtre només afecti a aquesta entrada personalitzada.
A l’apartat Taxonomy marcare la opció AND per que els filtres es sumin. Si marquéssim OR el filtre donaria un resultat si un o un altre filtre fos correcte.
Creem 2 filtres per les etiquetes personalitzades, una per tipus i l’altre per poblacions, seguint aquesta imatge:
Ara crearem un filtre sobre el camp personalitzat barbacoa. Aquest serà un camp boleà:
Per poder veure els resultats haurem de crear l’arxiu search.php. Per fer-ho copiem el contigut de archive.php i el posem a dins.
Si volem que el filtre es mostri també a la pàgina de resultats haurem de modificar l’arxiu sidebar.php i afegir is_search()
[php]
if (is_home()) {
if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘Sidebar’) ) : endif;
} elseif (is_archive() || is_single() || is_search()) {
if ( !function_exists(‘dynamic_sidebar’) || !dynamic_sidebar(‘Sidebar Archive’) ) : endif;
}
[/php]
Després creem un giny de text amb el shortcode del fintre a dins.
Podem modificar l’aspecte amb css :
[css]
/*Filtre avançat*/
input[type=text],input.text, input.title, textarea, select { background-color:#fff; border:1px solid #bbb; padding: 2px; color: #4e4e4e; }
input[type=text]:focus, input.text:focus, input.title:focus, textarea:focus, select:focus { border-color:#2D3940; color: #3e3e3e; }
input[type=text], input.text, input.title, textarea, select { margin:0.1em 0; }
textarea { padding: 4px; }
[/css]
Arxius de la classe per descarregar:
[download id=”1235″]
Recent Comments