Tecnología

Inicio

Cómo crear un multi-columna Widgetized pie de página para Wordpress

Cómo crear un multi-columna Widgetized pie de página para Wordpress


Mientras que WordPress diseñado Widgets - pequeños programas que se pueden arrastrar y colocar en su sitio desde la parte de atrás - para su uso en las barras laterales de blogs, algunos temas también utilizar los widgets en sus pies de página. Estos temas suelen colocar tres o cuatro secciones "widgetized" en el pie de página, que puede contener los widgets tales como "Mensajes populares" y "Comentarios recientes". Hay que editar el código HTML del pie de página, el PHP en el archivo "functions.php" y el CSS (Cascading Style Sheet) de código del archivo "style.css" en su tema para crear la misma funcionalidad en sus propios temas .

Instrucciones

1 Vaya a "Apariencia" de la barra lateral de su panel de WordPress. Este es el back-end que inicie sesión en el directorio "wp-admin" de su sitio web. Haga clic en el enlace "Editor" que se muestra en el submenú "Apariencia".

2 Busque el archivo "footer.php" que aparece en "Plantillas" en la pantalla "edición de temas" y haga clic en su enlace. Crear tres DIVs en el pie de página y dar a cada uno un nombre único de identificación:

<Div id = "pie">

<Div id = "left">

</ Div>

<Div id = "center">

</ Div>

<Div id = "right">

</ Div>

</ Div>

3 Añadir este código dentro de cada uno de los tres DIVs pie de página:

<? Php if (function_exists ( 'dynamic_sidebar') || dynamic_sidebar ( 'barra lateral')!!):?>

<? Php endif; ?>

Cambiar el nombre de "barra lateral" en la función de cada uno de los tres DIVs "dynamic_sidebar ()", por lo que cada uno único. Nombres como los de "izquierda pie de página" funcionan bien. Haga clic en el botón azul "Actualizar archivo" para guardar su trabajo.

4 Ir al archivo "functions.php" en la pantalla "edición de temas". Agregue este código por encima de la etiqueta de cierre PHP delimitador ">?":

si (function_exists ( 'register_sidebar'))

register_sidebar (array (

'name' => 'Left Footer',

'Before_widget' => '& lt; div id = "% 1 $ s" class = "widget de% 2 $ s"> ",

'After_widget' => '& lt; / div>',

'Before_title' => '& lt; h3>',

'After_title' => '& lt; / h3>',

));

Cambiar el "nombre" para que coincida con el nombre de su primera área de widget pie de página. Añadir el código dos veces más, por lo que cada área de widget tiene el código correspondiente. Cada vez que se añade el código, cambie el "nombre" para que coincida con una de sus áreas de widgets de pie de página. Guarda el archivo.

5 Cargando el archivo "style.css" en la pantalla "Editar Temas" y añadir este código a la parte inferior:

div pie de página {float: left; anchura: 33%; }

Este código se alinea cada sección widgetized horizontalmente en el pie de página. Añadir cualquier otro estilo según sea necesario.

Consejos y advertencias

  • La comprensión de la CSS "modelo de caja" es muy útil para este tipo de diseño de pie de página. Si no conoce el modelo, se debe estudiar y aprender acerca de los efectos de los márgenes y el relleno en particular.
  • Una copia de seguridad antes de editar el tema y volver a subir el tema a través de FTP si no puede volver a entrar a WordPress debido a un error de PHP.