Instal·lant jQuery Drop Down Mega Menu al tema Twenty Twelve

Instal·lant jQuery Drop Down Mega Menu al tema Twenty Twelve

Bon dia!

Avui m’he proposat instal·lar una extensió, que proporciona uns menús molt interessants i que alguns els trobareu més que necessari. No dic que no comporti feina, però el resultat pot tenir molt bona vista. Os deixo l‘exemple des de la seva pàgina web sobre jQuery Drop Down Mega Menu
Aquest menú és en forma de Giny, per tant tindrem que inserint codi per poder-lo substituir per el nostre pobre menú de sèrie de Twenty Twelve.

També podeu veure el seu magnífic tutorial de com fer-ho i personalitzar amb les imatges, tal i com surt a la seva web amb els cotxes.

No obstant, i com que m’agrada fer les coses per mi mateix, i amb les meves instruccions, que les descric a continuació:

Primer pas

Anem a Extensions > Afegeix i busquem “jQuery Mega Menu”. L’instal·lem i no cal que fem res més.

Segon pas

Tenim que afegir una nova zona per Ginys per posar allà el nostre menú.
Anem a Aparença > Editor i seleccionem l’arxiu “Funcions del tema (functions.php)”
Aquest tema concretament, te una secció especial separada per afegir zones de Ginys, per això cercarem la següent frase

function twentytwelve_widgets_init() {

	register_sidebar( array(

		'name' => __( 'Main Sidebar', 'twentytwelve' ),

		'id' => 'sidebar-1',

		'description' => __( 'Appears on posts and pages except the optional Front Page template, which has its own widgets', 'twentytwelve' ),

		'before_widget' => '<aside id="%1$s" class="widget %2$s">',

		'after_widget' => '</aside>',

		'before_title' => '<h3 class="widget-title">',

		'after_title' => '</h3>',

	) );

	register_sidebar( array(

		'name' => __( 'First Front Page Widget Area', 'twentytwelve' ),

		'id' => 'sidebar-2',

		'description' => __( 'Appears when using the optional Front Page template with a page set as Static Front Page', 'twentytwelve' ),

		'before_widget' => '<aside id="%1$s" class="widget %2$s">',

		'after_widget' => '</aside>',

		'before_title' => '<h3 class="widget-title">',

		'after_title' => '</h3>',

	) );

	register_sidebar( array(

		'name' => __( 'Second Front Page Widget Area', 'twentytwelve' ),

		'id' => 'sidebar-3',

		'description' => __( 'Appears when using the optional Front Page template with a page set as Static Front Page', 'twentytwelve' ),

		'before_widget' => '<aside id="%1$s" class="widget %2$s">',

		'after_widget' => '</aside>',

		'before_title' => '<h3 class="widget-title">',

		'after_title' => '</h3>',

	) );

}

Allà veurem un total de 3 zones, la Principal, La primera de pàgina i la segona. Just abans del tancament de “}” tenim que inserir la nostre zona nova, quedant de la següent forma.

	register_sidebar( array(

		'name' => __( 'Second Front Page Widget Area', 'twentytwelve' ),

		'id' => 'sidebar-3',

		'description' => __( 'Appears when using the optional Front Page template with a page set as Static Front Page', 'twentytwelve' ),

		'before_widget' => '<aside id="%1$s" class="widget %2$s">',

		'after_widget' => '</aside>',

		'before_title' => '<h3 class="widget-title">',

		'after_title' => '</h3>',

	) );

/**
 * Pali 2013-05-02
 * Afegint menu jQuery Drop Down Mega Menu
 */ 

	register_sidebar(array(

        'name' => 'Menu jQuery Drop Down Mega Menu',

		'id' => 'sidebar-4',

		'description' => 'Zona per posar el nostre menu xupiwai',

        'before_widget' => '<div id="menu-jquery-drop-down-mega-menu-widget">',

        'after_widget' => '</div>',

        'before_title' => '',

        'after_title' => '',

));

}

Com podeu veure, sempre m’agrada posar anotacions dins del codi, per saber quan i per que vaig inserir aquesta modificació, a part de fer el turorial 🙂
Així que ja podrem anar a la zona de Ginys i veure això

capturat-1

 

Acte seguit només ens queda, visualitzar aquesta zona de Ginys a la capçalera del nostre tema.

Tercer pas

Dons ara ens dirigim a Aparença > Editor i anem a modificar l’arxiu “Capçalera (header.php)”

Un cop dins busquem el menú del tema

		<nav id="site-navigation" class="main-navigation" role="navigation">

			<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>

			<a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentytwelve' ); ?>"><?php _e( 'Skip to content', 'twentytwelve' ); ?></a>

			<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>

		</nav><!-- #site-navigation -->

I el substituïm per el nostre, o en altre cas, el comentem de forma que deixi de funcionar.
A mi m’agrada deixar els dos funcionant mentre configuro les coses, de forma que pugui anar provant sense perdre la funcionalitat del segon. L’únic que pot passar es que tingui dos barres de menú seguides.

Ara afegim el codi de la zona de Ginys

<!-- Pali 2013-05-02 Afegint menu jQuery Drop Down Mega Menu -->

<?php /* Widgetized sidebar */

    if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('menu-jquery-drop-down-mega-menu') ) : ?>

<?php endif; ?>

Un cop tenim això ja podem anar a Aparença > Ginys i afegir la primera prova.

capturat-2I l’efecte sobre la pàgina de portada del meu web

capturat-3Un cop tenim això, ja veiem que funcionen els dos menús, un es veu d’una forma i l’altre d’un altre xD. Podem inhabilitar el d’origen simplement anant a Aparença > Menús i al desplegable de “Menú Principal” i creant un menú sense cap opció..

Modificant 4 opcions del Giny, podem veure com queda semblant al de sota, però amb un acabat millor, ara be caldria configurar els marges ja que queda enganxat a la capçalera, tot és posar-s’hi.

capturat-4

Ara és qüestió de personalitzar aquest menú a l’infinit fins el punt que ens agradi. Fins arribar a l’exemple dels cotxes, falta, però això ja us ho deixo a vosaltres. No descarto per això ampliar aquest tutorial explicant com ho he aconseguit, si ho aconsegueixo, ajajaj

Bona tarda

 

 

La nova llei de Galetes – Com implementar-la i on cercar informació

Bon dia!

Avui, després d’una noticia a el Periódico, me proposat implementar aquesta part al web corporatiu de Planning General d’Espectacles S.L. Cercant informació per internet, he vist varis webs molt útils que faciliten molt la feina a l’hora de cercar informació i de posar-te en antecedents davant una llei que poc o res es sap a nivell usuari, i molt menys a nivell empresarial, donat que si dediques temps a aquestes polítiques que ni la pròpia web de la AGPD (Agència Espanyola de Protecció de Dades) compleix al 100%, prou malament està el treball com per tindre que dedicar hores i temps a implementar tot això. Tot això be donat per el transfons de la LOPD (Llei Orgànica de Protecció de Dades) i la LSSI (Llei de Serveis de la Societat de la Informació).

Gràcies a el blog de Pablo Burgueno,al blog Ayuda WordPress i a una guia d’ús de Adigital pots recopilar la majoria de la informació necessària per poder aplicar aquest decret.

Com a comentari, en la web empresarial de Pablo Burgueno, Abanlex, l’extensió que utilitzen i que recomana en Pablo a la seva web, no està disponible actualment, ja que la web de descarregues de l’empresa està en construcció i no podem accedir al seu codi.

Les multes no son poca broma, així que per poc que pugeu intenteu dedicar un parell d’hores a implementar aquesta llei, o si més no, busqueu algú que estigui al dia i ho pugui implementar.

Concretament jo he utilitzat la extensió Cookie Law Info i de moment no he tingut problemes.

Better WP Security

Better WP Security

Avui os parlaré d’una extensió Must Have!

Després de rebre un correu del meu hosting, CDmon, amb recomanacions sobre la seguretat de WordPress,

capturat-4

 

Vaig decidir posar-ho en pràctica. Després d’indagar una mica per internet sobre aquesta extensió em trobo que és la més valorada arreu per afegir nivells de protecció dins del nostre WordPress, per tant, decideixo instal·lar-la amb efecte immediat.

La instal·lació és fàcil, ens baixem la extensió, i un cop activada, ens demana fer una copia de seguretat de la nostre Base de Dades. Acte seguit, ens demana permís per modificar el nucli de WordPress, el qual acceptarem de bon grat per que ens protegeixi.

capturat-2

 

Un cop aquí ja estem a dins del panell de control. La primera pestanya ens ofereix la possibilitat de protegir el nostre blog amb les modificacions recomanades o configurar-ho nosaltres al nostre gust i coneixements.

capturat-1Un cop fet això ens apareix una llista amb les coses pendents que tenim que fer per protegir el nostre blog encara més dels atacs informàtics.

capturat-3

 

Askimet

Askimet

Bon dia,

Avui parlaré d’aquesta extensió que ve per defecte instal·lada amb WordPress i de com funciona la seva activació.

Askimet és un servei, gratuït per ús personal, tot i que de pagament en funció del volum, de control d’SPAM. Tots els comentaris que es realitzin en el teu blog, s’envien a Askimet per que els analitzi, i ell retorna si és una comentari fraudulent o lícit.

Com el podem activar?
Molt fàcil, només necessitem un compte a wordpress.com. Anem per passos:

Primer anem a la secció Extensions

sshot-1

 

 

La activem i ens surt el següent requadre a les notificacions. sshot-2

Ens dirigim al seu web per començar el procés

capturat-1Seleccionem Personal

capturat-2

 

Ens demana que iniciem sessió amb WordPress.com

capturat-3

 

Per defecte, està posat per crear un nou usuari a WordPress.com, si ja el tenim cliquem sobre
I already have a WordPress.com account!

capturat-4

 

Un cop iniciada la sessió, podem escollir el pla, per defecte la donació anual es de 36$, cadascú que valorí el nivell de facilitat que li proporciona, posarem una donació menor, tot i que la cara es posi trista.

capturat-5Un cop realitzat, ja ens donarà la API Key, que posarem a la pàgina de l’extensió del nostre WordPress per estar protegits

capturat-6Un cop fet, ja estarem protegits per Askimet de SPAM. Aprofito per deixar-vos el missatge de benvinguda un cop inserida la clau:

La vostra clau ha sigut verificada. Que bloqueu de gust!

Salutacions!