Com afegir Ginys (Widgets o Plugins)

en qualsevol lloc del WordPress

Últimament és prou habitual trobar-se amb blogs en els quals hi ha ginys (widgets) en el peu de pàgina, són pràctics doncs podem afegir un àrea en la qual incloure blocs d'informació, igual que en la barra lateral. Podeu veure el resultat en aquesta Web:  maTerra.

En aquest tutorial anem a crear 3 àrees de giny en el peu de pàgina que podran editar-se des del panell d'administració.

Pas 1, Crear es contenidors on hi seran els nous sidebars del peu:

Obre l'arxiu “footer.php”  del theme actiu i afegeix el següent codi abans del codi <div id=”footer”>:

<div id="ginys-peu">
<div class="widget"><div class="peu-esquerra">
ginys-peu Esquerra
</div></div>
<div class="widget"><div class="peu-mitja">
ginys-peu Mitjà
</div></div>
<div class="widget"><div class="peu-dreta">
ginys-peu Dreta
</div></div>
</div>

Ara, si observes el blog podràs veure els contenidors (div) creats.

Pas 2, Registrar els Sidebars:

En aquest moment encara no està llest per als ginys, en aquest pas anem a veure com fer que admeta ginys perquè pugues afegir-los des de la secció “Dissenye -> Ginys” del teu panell d'administració. Per a fer-ho usarem el fitxer “functions.php” del teme actiu. Obri aquest arxiu en el teu editor de codi.
Afegeix a l'arxiu functions.php del teu theme el següent:

if ( function_exists('register_sidebar') )
register_sidebar(array(
'name' => 'Ginys Peu',
'id'   => 'ginys-peu',
'description'   => 'Aquests són els widgets afegits al Peu: peu esquerra, peu mitjà, peu dreta',
'class'         => '',
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget'  => '</li>',
'before_title'  => '<h2 class="widgettitle">',
'after_title'   => '</h2>',
));
register_sidebar(array('name'=>'peu esquerra'));
register_sidebar(array('name'=>'peu mitjà'));
register_sidebar(array('name'=>'peu dreta'));

El que hem fet en realitat és registrar 3 barres laterals anomenades peu esquerra, peu mitjà i peu dreta que correspondran als nous sidebar: esquerre, central i dret.

Pas 3,  Afegir els Sidears al seu lloc:

A continuació cal que els sidebars o llocs per als ginys siguen llegits pel theme del WorPress. footer sigui “giny ready”. Per a això també afegirem, en comptes dels comentats en el punt 1, el següent:

Substituïm ginys-peu esquerra per …

<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar('peu-esquerra') ) : ?>
<?php endif; ?>

Substituïm ginys-peu mitjà per …

<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar('peu-mitjà') ) : ?>
<?php endif; ?>

Substituïm ginys-peu dreta per …

<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar('peu-dreta') ) : ?>
<?php endif; ?>

Quedant així:

<div id="ginys-peu">
<div class="widget"><div class="peu-esquerra">
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar('peu-esquerra') ) : ?>
<?php endif; ?>
</div></div>
<div class="widget"><div class="peu-mitja">
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar('peu-mitjà') ) : ?>
<?php endif; ?>
</div></div>
<div class="widget"><div class="peu-dreta">
<?php if ( !function_exists('dynamic_sidebar')
|| !dynamic_sidebar('peu-dreta') ) : ?>
<?php endif; ?>
</div></div>
</div>

Pas 4, Afegir els Widgets

Per afegir els ginys has d'anar al panell d'administració, a l'apartat "Disseny -> Widgets". Veuràs un nou menú on veuràs les 3 opcions noves.

Pas 5, El CSS

El primer que hem de fer és crear el CSS de l'àrea creada. Obri l'arxiu “style.css” del theme per crear el teu estil personalitzat, de totes formes aquí els deixe el estil que el roig aplicat en aquest cas:

/*-------------------------------
Sidebar peu Ginys Peu
-------------------------------*/
#ginys-peu {
clear: both;
height: 305px;
width: 1038px;
margin-top: auto;
margin-right: auto;
margin-bottom: 125px;
margin-left: auto;
padding-top: 12px;
padding-right: 0px;
padding-bottom: 14px;
padding-left: 14px;
background: url(images/bg-box.png) repeat !important;
border-radius: 8px 8px 8px 8px;
list-style-type: none;
}

#ginys-peu .widget {
float: left;
width: 333px;
margin-right: 12px;
text-align: center;
background: url(/images/bg-box.png) repeat !important;
border-radius: 10px 10px 10px 10px;
}

#ginys-peu .peu-esquerra {
margin-top: 44px;
}

#ginys-peu .peu-mitja {
margin-top: 28px;
}

#ginys-peu .peu-dreta {
}

#ginys-peu h2 {
color: #fff;
font-size: 16px;
}

Segurament al menys si creeu el sidebar al footer tindreu que utilitzar aquestes dues regles inevitablement:

"clear: both;"; i per que es mostre un alcostat de l'altre el "float: left;".

Salutacions

el roig.