{"id":514,"date":"2010-03-17T15:31:54","date_gmt":"2010-03-17T14:31:54","guid":{"rendered":"http:\/\/blog.walii.es\/2010\/03\/17\/wordpress-css-y-widgets\/"},"modified":"2010-10-09T20:42:42","modified_gmt":"2010-10-09T18:42:42","slug":"wordpress-css-y-widgets","status":"publish","type":"post","link":"https:\/\/blog.walii.es\/?p=514","title":{"rendered":"WORDPRESS CSS y widgets"},"content":{"rendered":"

Hoy me voy a concentrar en el dise\u00f1o de las paginas creadas con wordpress\u2026 siempre he tenido el problema que estos theme no tienen flexibilidad a la hora de poner widget (ventanas\/cajas) donde queramos, por ejemplo debajo de men\u00fa o sobre el pie\u2026 o pensando de otra forma, quiz\u00e1s quiero dividir en 3 widget diferentes y situarlos sobre el pie de nuestra p\u00e1gina, o quiz\u00e1s poner 3 ventanas adicionales debajo del encabezado de forma de publicidad o cualquier otro tipo de widget.<\/p>\n

Una de las primeras cosas que debemos hacer es modificar la plantilla CSS (Cascading Style Sheets<\/strong>)<\/a> la cual indica lo que queremos hacer con nuestras ventanas \u00abaun no creadas\u00bb, ya que depende el theme, tendremos una, dos y hasta 3 columnas\u2026 en este caso agregaremos algunas m\u00e1s, para tener m\u00e1s flexibilidad.<\/p>\n

En nuestro ejemplo, las laterales (derecha e izquierda) ya estaban creadas por el theme por defecto, solo tuvimos que agregar las indicadas como TOPWIDGET, FOOTERcenterWIDGET, FOOTERleftWIDGET y FOOTERrigthWIDGET.<\/p>\n

\n

\"\" <\/span><\/p>\n


\n<\/span><\/p>\n

Nuestra modificaci\u00f3n del STYLE.CSS dentro del theme ser\u00e1:<\/p>\n

[sourcecode language=\u00bbcss\u00bb]
\n .unico_item {<\/p>\n

clear:both;<\/p>\n

\/* Alineacion del contexto *\/<\/p>\n

float: left;<\/p>\n

\/* ancho de todo el widget en este caso uno solo ocupando el 100% de la pagina *\/<\/p>\n

width: 100%;<\/p>\n

\/* m\u00e1rgenes de nuestro widget en este caso comenzando desde el margen izquierdo *\/<\/p>\n

margin: 0px 0px 0px 0px;<\/p>\n

padding: 0px;<\/p>\n

}<\/p>\n

.varios_items {<\/p>\n

\/* Alineacion del contexto *\/<\/p>\n

text-align: left;<\/p>\n

\/* ancho de cada widget pensado para poner 3 widgets *\/<\/p>\n

width: 33.3%;<\/p>\n

\/* espacio entre widgets *\/<\/p>\n

padding-right: 0px;<\/p>\n

\/* indicamos que queremos ocupar todo el espacio y organizado en una sola linea *\/<\/p>\n

display: inline-block;<\/p>\n

float: left;<\/p>\n

height: 100%;<\/p>\n

}
\n[\/sourcecode]<\/p>\n

*Aqu\u00ed no deberemos ver problemas ni nada raro en el wordpress, podemos refrescar el buscador, pero no tenemos que ver ninguna modificaci\u00f3n, si vemos alguna, es que cometimos alg\u00fan error en la modificaci\u00f3n del CSS, deberemos verificar que los nombres usados no se superponen con ning\u00fan otro.
\n<\/em><\/p>\n

Lo que hacemos ac\u00e1 es indicarle las proporciones de nuestros destinos sobre las paginas que necesitemos.<\/p>\n

Por ejemplo:<\/p>\n

unico_item<\/span> — representa a el tama\u00f1o total de la pagina, para presentar un \u00fanico widget que ocupe toda la l\u00ednea de lapagina.<\/p>\n

Varios_items<\/span> — generado para tener la opci\u00f3n de 2 o m\u00e1s widgets en l\u00ednea ocupando toda la pagina, distribuido con tama\u00f1os porcentuales.<\/p>\n

2 widget 50%, 3 widget 33%, 4 widgets 25%
\n<\/strong><\/p>\n

Ahora vamos a crear los diferentes widget que queremos, en este caso voy a crear 4 adicionales, porque mi theme ya tiene dos para los lados, llamados sidebar1 y sidebar2.<\/p>\n

Crearemos por ejemplo top_widget y footer_left_widget, footer_center_widget, footer_rigth_widget, tratemos de crear nombres originales y a la vez entendibles, para que no se superpongan con otro widget de wordpress.<\/p>\n

En el archivo functions.php a continuaci\u00f3n de la configuraci\u00f3n que hace referencia a los disebars originales, en mi caso esto.<\/p>\n

[sourcecode language=\u00bbc\u00bb]
\n if (function_exists(‘register_sidebars’)) {<\/p>\n

register_sidebars(2, array(<\/p>\n

‘before_widget’ => ‘<div id="%1$s" class="widget %2$s">’.'<!— BEGIN Widget —>’,<\/p>\n

‘before_title’ => ‘<!— BEGIN WidgetTitle —>’,<\/p>\n

‘after_title’ => ‘<!— END WidgetTitle —>’,<\/p>\n

‘after_widget’ => ‘<!— END Widget —>’.'<\/div>’<\/p>\n

));<\/p>\n

}<\/p>\n

Agregaremos esto a continuaci\u00f3n.<\/p>\n

if ( function_exists(‘register_sidebar’) )<\/p>\n

register_sidebar(array(‘name’=>’top_widget’,<\/p>\n

‘before_widget’ => ‘<!— BEGIN Widget —>’,<\/p>\n

‘before_title’ => ‘<!— BEGIN WidgetTitle —>’,<\/p>\n

‘after_title’ => ‘<!— END WidgetTitle —>’,<\/p>\n

‘after_widget’ => ‘<!— END Widget —>’<\/p>\n

));<\/p>\n

if ( function_exists(‘register_sidebar’) )<\/p>\n

register_sidebar(array(‘name’=>’footer_rigth_widget’,<\/p>\n

‘before_widget’ => ‘<!— BEGIN Widget —>’,<\/p>\n

‘before_title’ => ‘<!— BEGIN WidgetTitle —>’,<\/p>\n

‘after_title’ => ‘<!— END WidgetTitle —>’,<\/p>\n

‘after_widget’ => ‘<!— END Widget —>’<\/p>\n

));<\/p>\n

if ( function_exists(‘register_sidebar’) )<\/p>\n

register_sidebar(array(‘name’=>’footer_left_widget’,<\/p>\n

‘before_widget’ => ‘<!— BEGIN Widget —>’,<\/p>\n

‘before_title’ => ‘<!— BEGIN WidgetTitle —>’,<\/p>\n

‘after_title’ => ‘<!— END WidgetTitle —>’,<\/p>\n

‘after_widget’ => ‘<!— END Widget —>’<\/p>\n

));<\/p>\n

if ( function_exists(‘register_sidebar’) )<\/p>\n

register_sidebar(array(‘name’=>’footer__center_widget’,<\/p>\n

‘before_widget’ => ‘<!— BEGIN Widget —>’,<\/p>\n

‘before_title’ => ‘<!— BEGIN WidgetTitle —>’,<\/p>\n

‘after_title’ => ‘<!— END WidgetTitle —>’,<\/p>\n

‘after_widget’ => ‘<!— END Widget —>’<\/p>\n

));<\/p>\n

[\/sourcecode]<\/p>\n

*Esto generar\u00e1 que en nuestro wordpress ya podamos ver los nuevos widgets, podremos configurarlos y agregarle plugins, pero no lo veremos por ning\u00fan lado, porque aun no le hemos dado destino a estos.
\n<\/em><\/p>\n

Veremos lo siguiente en el panel de administraci\u00f3n de WORDPRESS.<\/p>\n

\"\"<\/p>\n

Ahora, buscaremos destinos para nuestro widget, si por ejemplo queremos que se vean en nuestra p\u00e1gina inicial, deberemos modificar el archivo, index.php, si por otro lado queremos que se vea en las p\u00e1ginas de los post, deberemos modificar el archivo page.php.<\/p>\n

En este caso por ejemplo quiero que el widget \u00fanico_widget que ocupa el 100% de la l\u00ednea, me gustar\u00eda verlo debajo de mi men\u00fa de la pagina de inicio, para poder ponerle publicidades, ads, banners, etx.<\/p>\n

Esto lo hacemos editando el archivo index.php, y pegando las siguientes l\u00edneas debajo de la configuraci\u00f3n de header.<\/p>\n

En mi caso debajo de esto:<\/p>\n

<?php get_header(); ?>
\n<\/strong><\/span><\/p>\n

Pondremos esto:<\/p>\n

<div class=\u00bbunico_item<\/span>\u00bb >
\n<\/strong><\/span><\/p>\n

<?php if (!art_sidebar(top_widget<\/span>)): ?><?php endif ?>
\n<\/strong><\/span><\/p>\n

<\/div>
\n<\/strong><\/span><\/p>\n

Aclarando:<\/p>\n

unico_item es <\/span>el detalle de CLASS, que indica dimensiones del widget y posici\u00f3n en la l\u00ednea de p\u00e1gina.<\/span>
\n<\/span><\/p>\n

top_widget <\/span>relaciona los widget aplicados en la config de wordpress con los que aparezcan aqu\u00ed.
\n<\/span><\/p>\n

Y otra cosa que quiero en la posibilidad de poner 3 widget en l\u00ednea en el fondo de mi p\u00e1gina, encima de la firma del pie de p\u00e1gina.
\n<\/span><\/p>\n

Esto lo hacemos de la siguiente forma, en el mismo archivo index.php, buscaremos la configuraci\u00f3n que hace referencia al pie\u2026
\n<\/span><\/p>\n

En mi caso:
\n<\/span><\/p>\n

<?php get_footer(); ?>
\n<\/strong><\/span><\/p><\/blockquote>\n

Y colocaremos antes de este (sin borrar nada), lo siguiente:
\n<\/span><\/p>\n

[sourcecode language=\u00bbc\u00bb]
\n <div class="varios_items" ><!– Give it some style –><\/p>\n

<?php if (!art_sidebar(footer_left_widget)): ?><?php endif ?><\/p>\n

<\/div><\/p>\n

<div class="varios_items" ><!– Give it some style –><\/p>\n

<?php if (!art_sidebar(footer_center_widget)): ?><?php endif ?><\/p>\n

<\/div><\/p>\n

<div class="varios_items" ><!– Give it some style –><\/p>\n

<?php if (!art_sidebar(footer_rigth_widget)): ?><?php endif ?><\/p>\n

<\/div><\/p>\n

[\/sourcecode]<\/p>\n

Lo mismo que en el anterior caso:
\n<\/span><\/p>\n

varios_items <\/span>indica el tama\u00f1o y posici\u00f3n de los widget en cuesti\u00f3n, aunque aplicado a varios lo que genera es que se coloquen en l\u00ednea. Solo se puede usar es una sola l\u00ednea por pagina.
\n<\/span><\/p>\n

footer_****_widget <\/span>identifica y relaciona los widget configurados y rellenados dentro de la configuraci\u00f3n de wordpress.<\/span>
\n<\/span><\/p>\n

*nota: si no ponemos nada dentro de nuestros widget, no veremos nada, ya que estos no poseen ning\u00fan atributo antes de su configuraci\u00f3n, como es el caso de los widget por defecto de wordpress los cuales ya traen una configuraci\u00f3n por defecto condicionada a un IF por si configuramos cualquier cosa dentro de la config
\n<\/span><\/p>\n

Entonces cuando configuremos cosillas dentro de los widget pasaremos de esto:
\n<\/span><\/p>\n

\"\"
\n<\/span><\/p>\n

A algo como esto.
\n<\/span><\/p>\n

\"\"
\n<\/span><\/p>\n

Cualquier consulta, pueden hacerla en la propia web. O a mi directamente por correo.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"

Hoy me voy a concentrar en el dise\u00f1o de las paginas creadas con wordpress\u2026 siempre he tenido el problema que estos theme no tienen flexibilidad a la hora de poner widget (ventanas\/cajas) donde queramos, por ejemplo debajo de men\u00fa o sobre el pie\u2026 o pensando de otra forma, quiz\u00e1s quiero dividir en 3 widget diferentes …
Seguir leyendo WORDPRESS CSS y widgets<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[68,139],"tags":[],"_links":{"self":[{"href":"https:\/\/blog.walii.es\/index.php?rest_route=\/wp\/v2\/posts\/514"}],"collection":[{"href":"https:\/\/blog.walii.es\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.walii.es\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.walii.es\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.walii.es\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=514"}],"version-history":[{"count":3,"href":"https:\/\/blog.walii.es\/index.php?rest_route=\/wp\/v2\/posts\/514\/revisions"}],"predecessor-version":[{"id":515,"href":"https:\/\/blog.walii.es\/index.php?rest_route=\/wp\/v2\/posts\/514\/revisions\/515"}],"wp:attachment":[{"href":"https:\/\/blog.walii.es\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=514"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.walii.es\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=514"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.walii.es\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=514"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}