Crear un theme para wordpress paso a paso sidebar footer

Aquí estamos de nuevo con otra entrega del tutorial sobre la creación de un Theme para WordPress paso a paso desde cero, en el día de hoy completaremos del todo la pagina de inicio de nuestra web, lo que haremos será agregar un sidebar a la derecha y un footer justo al final de la pagina, para ello crearemos nuevos archivos, incluiremos código nuevo en algunos de los ya creados y descargaremos una librería javascript que ya explicaremos más adelante cual será su función.

Pues bien, empecemos con nuestro trabajo, lo primero que haremos será agregar unas cuantas funciones nuevas a nuestro archivo functions.php, para ello con nuestro ID de programación favorito abrimos dicho archivo y copiamos y pegamos el siguiente código al final del que ya tenemos.




<?php
//Ejecutar PHP en widgets de texto
function ejecutar_php($html){
    if(
strpos($html,"<"."?php")!==false){
        
ob_start();
            eval(
"?".">".$html);
            
$html=ob_get_contents();
        
ob_end_clean();
    }
    return 
$html;
}
add_filter('widget_text','ejecutar_php',100);

//creando el registro para un sidebar con widgets
if (function_exists('register_sidebar')) {
    
register_sidebar(array(
        
'name' => 'Sidebar general',
        
'id' => 'Sidebar general',
        
'before_widget' => '<li id="%1$s" class="widget %2$s">',
        
'after_widget' => '</li>',
        
'before_title' => '<h2 class="widgettitle">',
        
'after_title' => '</h2>',
    ));
}

//creando el registro para un footer con widgets
if (function_exists('register_sidebar')) {
    
register_sidebar(array(
        
'name' => 'Sidebar footer',
        
'id' => 'Sidebar footer',
        
'before_widget' => '<li id="%1$s" class="widget %2$s">',
        
'after_widget' => '</li>',
        
'before_title' => '<h2 class="widgettitle">',
        
'after_title' => '</h2>',
    ));
}

//mostrar los artículos más comentados
function entradas_mas_comentadas($no_posts 20$before '<li>'$after '</li>'$show_pass_post false$duration='') {
    global 
$wpdb;
    
$request "SELECT ID, post_title, COUNT($wpdb->comments.comment_post_ID) AS 'comment_count' FROM $wpdb->posts$wpdb->comments";
    
$request .= " WHERE comment_approved = '1' AND $wpdb->posts.ID=$wpdb->comments.comment_post_ID AND post_status = 'publish'";
    if(!
$show_pass_post$request .= " AND post_password =''";
    if(
$duration !="") {
        
$request .= " AND DATE_SUB(CURDATE(),INTERVAL ".$duration." DAY) < post_date ";
    }
    
$request .= " GROUP BY $wpdb->comments.comment_post_ID ORDER BY comment_count DESC LIMIT $no_posts";
    
$posts $wpdb->get_results($request);
    
$output '';
    if (
$posts) {
        foreach (
$posts as $post) {
            
$post_title stripslashes($post->post_title);
            
$comment_count $post->comment_count;
            
$permalink get_permalink($post->ID);
            
$output .= $before '<a href="'.$permalink.'"><span class="removed_link" title="' $permalink '">' $post_title '</span></a> (' $comment_count.')' $after;
        }
    } else {
        
$output .= $before "No hay nada" $after;
    }
    echo 
$output;
}
?>

La primera función que estamos creando es para poder poner código PHP en los widgets de texto, de está manera podremos añadir todo nuestro código avanzado en un simple widget de texto y funcionará sin problema, con la segunda función declaramos un sidebar general que luego llamaremos desde el archivo que tendremos que crear para el sidebar, luego creamos otro espacio de widgets para el footer, necesario para incluir uno de los códigos de instagram, a diferencia del Theme original que estamos clonando nosotros mostraremos en el sidebar los artículos más comentados, para ellos creamos la última función, está función la modificaremos en otra entrega del tutorial para que esté más completa.

Ahora pasamos a crear el archivo nuevo que necesitamos, lo que hacemos es con nuestro ID de programación favorito crear un nuevo archivo PHP, a este le damos el nombre de sidebar.php y lo guardamos en la raíz de nuestro Theme, ahora dentro de el copiaremos y pegaremos el siguiente código.




<?php
<?php
    
echo '<aside id="aside">';
        if ( !
function_exists('dynamic_sidebar')
        || !
dynamic_sidebar('Sidebar general') ) :
        endif;
    echo 
'</aside>';
?>

Como podemos ver estamos creando un Aside con el ID aside, dentro de el creamos un condicional que pregunta si existe un sidebar dinámico, de existir cargará el sidebar general que hemos creado anteriormente en el archivo functions.php, y con esto ya tenemos nuestro sidebar.php listo para funcionar.

Es el momento de añadir nuestro sidebar a la pagina de inicio de nuestro Theme, para ello abrimos el archivo index.php, localizamos el cierre del loop que ya vimos el otro día, y justo encima del cierre del loop copiamos y pegamos el siguiente código.




<?php
get_sidebar
();
?>

Esta es la llamada nativa de WordPress al sidebar, de esta manera nuestro sidebar se mostrará en la pagina de inicio de nuestro Theme, ahora mismo no contiene nada por lo que no veréis nada, pero ahora empezaremos a añadir código, no os preocupéis.

Ahora pasamos a nuestro footer, es el momento de añadir código, de manera que abrimos nuestro archivo footer.php con nuestro ID de programación favorito y copiamos y pegamos el siguiente código.




<?php
    
echo '<footer id="footer">';
        if ( !
function_exists('dynamic_sidebar')
            || !
dynamic_sidebar('Sidebar footer') ) :
        endif;
        echo 
'<div class="foosocial">';
            
$twitter of_get_option('twitter_fs','');
            
$facebook of_get_option('facebook_fs','');
            
$instagram of_get_option('instagram_fs','');
            
$pinterest of_get_option('pinterest_fs','');
            echo 
'<ul>';
                if (
$facebook){
                    echo 
'<li><a href="'.$facebook.'" target="_blank" rel="noopener noreferrer"><i class="icon-facebook"></i>facebook</a></li>';
                }
                if (
$twitter){
                    echo 
'<li><a href="'.$twitter.'" target="_blank" rel="noopener noreferrer"><i class="icon-twitter"></i>twitter</a></li>';
                }
                if (
$instagram){
                    echo 
'<li><a href="'.$instagram.'" target="_blank" rel="noopener noreferrer"><i class="icon-instagram"></i>instagram</a></li>';
                }
                if (
$pinterest){
                    echo 
'<li><a href="'.$pinterest.'" target="_blank" rel="noopener noreferrer"><i class="icon-pinterest-circled"></i>pinterest</a></li>';
                }
            echo 
'</ul>';
       echo 
'</div>';
        echo 
'<div class="foocopy">';
            echo 
'<div class="container">';
                echo 
'Copyright &reg; 2019-<script type="text/javascript">document.write(new Date().getFullYear());</script> Florence - Todos los derechos reservados.';
                echo 
'<script src="'.get_bloginfo("stylesheet_directory").'/js/up.js"></script>';
                echo 
'<a id="up" title="Volver arriba" onclick="MGJS.goTop();" >Subir<i class="icon-up-fat"></i></a>';
            echo 
'</div>';
        echo 
'</div>';
    echo 
'</footer>';
echo 
'</body>';
echo 
'</html>';
?>

Lo primero que hacemos, al igual que hicimos en el sidebar, es llamar al bloque de widgets creado anteriormente en el functions.php, esta vez llamamos al Sidebar footer, luego creamos un DIV con la clase foosocial donde añadiremos como ya hemos hecho otras veces los diferentes iconos sociales, recordar que gracias a los condicionales solo se mostrarán los iconos sociales que existan en el panel de control, por últimos creamos otro DIV con la clase foocopy para cerrar el footer, en el agregamos la linea del Copy Right, con un sencillo script conseguimos que nos muestre como fecha inicial la que le indiquemos y como fecha final la del año en curso, para finalizar hacemos la llamada a una librería javascript que os dejaremos ahora para descargar y creamos el botón de subir arriba, gracias a esta librería el movimiento de subir arriba será mucho más vistoso, para guardar la librería javascript crearemos en la raíz de nuestro Theme una nueva carpeta llamada JS, dentro de ella copiaremos el archivo que os dejamos a continuación, el resto ya lo hace la llamada que acabamos de crear.

Ahora vamos a darle forma a nuestro sidebar, para ello lo llenaremos con algunos widgets, lo primero que tenemos que hacer es ir a la ruta “apariencia/florence” y rellenar los datos del autor, esto es importante ya que el primer bloque que mostraremos en el sidebar será el del autor, una vez hecho esto iremos a la ruta “apariencia/widgets”, aquí veremos que ya tenemos dos bloques de widgets, uno llamado general y otro llamado footer, empezaremos por el general, añadiremos un widgets de texto, como título le pondremos “sobre mi”, ahora en la caja elegiremos el modo html y pegaremos el siguiente código.




<?php
$imgder 
of_get_option('imgder_fs','');
$descripcion of_get_option('descripcion_fs','');
if (
$imgder){
    echo 
'<div class="sidimgder"><img src="',$imgder.'" /></div>';
}
if (
$descripcion){
    echo 
'<div class="siddescrp">'.$descripcion.'</div>';
}
?>

Creamos las dos variables llamando a los campos del panel de control designados para el sidebar, tanto la imagen como el texto, creamos dos condicionales para ver si existen, de existir creamos un DIV para cada uno con su clase correspondiente e imprimimos la variable anteriormente creada.

Ahora creamos otro widget de texto y le daremos el nombre de “suscribir o follow”, elegiremos en la caja de texto el modo html y copiaremos y pegaremos el siguiente código.




<?php
$twitter 
of_get_option('twitter_fs','');
$facebook of_get_option('facebook_fs','');
$instagram of_get_option('instagram_fs','');
$pinterest of_get_option('pinterest_fs','');
echo 
'<ul class="izindex">';
     if (
$facebook){
       echo 
'<li><a href="'.$facebook.'" target="_blank" rel="noopener noreferrer"><i class="icon-facebook"></i></a></li>';
     }
      if (
$twitter){
       echo 
'<li><a href="'.$twitter.'" target="_blank" rel="noopener noreferrer"><i class="icon-twitter"></i></a></li>';
      }
      if (
$instagram){
        echo 
'<li><a href="'.$instagram.'" target="_blank" rel="noopener noreferrer"><i class="icon-instagram"></i></a></li>';
      }
      if (
$pinterest){
        echo 
'<li><a href="'.$pinterest.'" target="_blank" rel="noopener noreferrer"><i class="icon-pinterest-circled"></i></a></li>';
      }
echo 
'</ul>';
?>

Como vemos estamos haciendo lo mismo que hicimos en el index.php, crear las variables para llamar a los campos de redes sociales de nuestro panel de control, creamos los condicionales para saber si existen, de existir los imprimimos, de no existir no se mostrará nada.

Volvemos a crear un widget de texto, esta vez como título le ponemos “más comentadas”, en este widget haremos uso de la función que creamos en el functions.php para mostrar los artículos más comentados, ahora en la caja de texto elegimos el modo html y copiamos y pegamos el siguiente código.




<?php
entradas_mas_comentadas
();
?>

Simplemente hacemos la llamada a la función que se había creado con anterioridad, ahora veréis en el sidebar que en ese espacio pondrá “no hay nada”, eso está bien de momento por qué no tenemos ningún comentario en el WordPress, cuando hagamos el single en la siguiente entrega creamos algunos comentarios para que salgan en este espacio y modificaremos la función.

Ahora viene el bloque para mostrar el feed de Instagram, intentamos crear nuestra propia función, pero debido a los cambios en la API de Instagram que ya no permiten crear ningún Token para realizar llamadas nos hemos visto obligados a utilizar un Plugin, para ello hemos optado por el Plugin Instagram By Misha, aunque no viene con el CSS integrado cumple su función y no ha sido complicado adaptar el CSS a nuestras necesidades, os lo dejamos para su descarga a continuación.

Una vez instalado y activado el Plugin Instagram By Misha iremos de nuevo a la ruta “apariencia/widgets”, ahora veremos un nuevo widget llamado “Instagram”, lo creamos a continuación del último que teníamos y lo configuramos de la siguiente manera.

Ahora vamos con el bloque de Facebook, este bloque lo creamos desde la siguiente dirección oficial developers facebook, desde este sitio podemos crear cualquier bloque para una pagina de Facebook, de momento para perfiles de usuario no nos sirve esta opción, para que nos aparezca igual que en el Theme original Florence lo configuraremos igual que en la siguiente imagen.

El primer código que nos da en la parte de arriba lo debemos copiar en nuestro archivo header.php, justo después de la etiqueta de apertura del body, el segundo código que nos da lo copiaremos en un nuevo widget de texto al que le daremos un título de “facebook”.

Por último crearemos un widget de nube de etiquetas para que nos salga al final de todo el sidebar igual que en el Theme original, de esta manera ya tendríamos nuestro sidebar finalizado, ahora mismo lo veréis muy feo, eso es normal, todavía no le hemos dado estilos a nada, esperar un poco y acabamos.

Ahora vamos con el sidebar de nuestro footer, para ello en el “sidebar footer” creamos un widget de Instagram y lo configuramos como en la siguiente imagen, lógicamente vosotros debéis poner vuestro usuario de Instagram, si queréis utilizar el mio sin problema, como queráis, ahora sí ya hemos terminado con todo el código.

Es el momento de poner cada cosa en su lugar y hacer que todo cuadre, vamos a pasar a darle estilos a los últimos cambios que hemos realizado, para ello con nuestro ID de programación favorito abrimos el archivo style.css, al final de todas lineas de código que ya tenemos copiaremos y pegaremos las siguiente.




<style>
#aside{
    width:25%;
    float:right;
}
#aside h2 {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: "Oswald",sans-serif;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-top:20px;
    margin-bottom: 20px;
    color: #161616;
    font-weight:normal;
}
#aside h2:before,
#aside h2:after {
    content: '';
    border-top: 1px solid #d8d8d8;
    margin: 0 20px 0 0;
    flex: 1 0 20px;
}
#aside h2:after {
    margin: 0 0 0 20px;
}
#aside .izindex{
    float:none;
    text-align:center;
}
#aside .izindex a{
    background-color:#EF9D87;
    color:#fff;
}
#aside .izindex a:hover{
    opacity:0.5;
}
@media (max-width: 800px){
    #aside{
        display:none;
    }
}
.sidimgder img{
    width: 100%;
    height:auto;
}
.siddescrp{
    font-family: "Crimson Text",serif;
    color: #161616;
    font-size: 16px;
    line-height: 24px;
    text-align:justify ;
    margin:20px 0 20px 0;
}
.misha-insta img{
    width:32%;
    height:auto;
    float:left;
    margin-right:1%;
    margin-bottom:1%;
}
.widget .tagcloud a {
    font-size: 10px !important;
    letter-spacing: 1px;
    text-transform: uppercase;
    background: #EF9D87;
    color: #fff;
    padding: 6px 8px 7px;
    margin-right: 5px;
    margin-bottom: 8px;
    display: inline-block;
    border-radius: 2px;
    -o-transition: .3s;
    -ms-transition: .3s;
    -moz-transition: .3s;
    -webkit-transition: .3s;
}
.widget .tagcloud a:hover{
    opacity:0.5;
}
#footer .misha-insta{
    width:100%;
    display:block;
    overflow:hidden;
}
#footer .misha-insta img{
    margin:0 0 0 0;
    width:10%;
    height:auto;
}
.foosocial{
    background-color:#EF9D87;
    text-align: center;
    padding:30px 0 30px 0;
}
.foosocial li{
    display:inline;
    margin-right:20px;
}
.foosocial li i{
    font-size:14px;
    margin-right:10px;
    color:#EF9D87;
    background-color: #fff;
    border-radius: 50%;
}
.foosocial li a{
    font-family: 'Open Sans', sans-serif;
    font-size:11px;
    color:#fff;
    text-transform: uppercase;
}
.foosocial li a:hover{
    opacity:0.5;
}
.foocopy{
    font-family: 'Open Sans', sans-serif;
    font-size:11px;
    padding:20px 0 20px 0;
    background-color:#fff;
}
.foocopy #up{
    float:right;
    color:#716D6E;
    cursor:pointer;
}
</style>

Empezamos dando forma a nuestro sidebar, primero le damos un ancho del veinticinco por cien y lo flotamos a la derecha, le damos estilos al h2 de nuestro sidebar, todos los títulos que ponemos en los widgets son h2, pasamos a darle estilos a los iconos sociales centrándolos en el medio y dando un color y un efecto hover a los enlaces de los iconos, por último le decimos mediante una query que si la pantalla es de ochocientos píxeles o menos el sidebar debe desaparecer.

Pasamos al bloque de la imagen y el texto del autor, a la imagen le damos un ancho del cien por cien para que ocupe todo el sidebar, al texto le damos una fuente, un color y un tamaño de texto, y por último lo justificamos a lo ancho del sidebar para que quede bien.

Ahora le damos estilos al Plugin Instagram By Misha, le damos a la cada imagen un ancho del treinta y dos por ciento, las flotamos a la izquierda y le damos un margen a la derecha y abajo del uno por ciento, así conseguimos que el widget de Instagram se visualice de forma perfecta en nuestro sidebar.

Como podéis ver lo siguiente en nuestra hoja de estilos es darle forma a los enlaces del widget de la nube de etiquetas, este paso no lo comentamos por que es bastante evidente y sencillo de comprender ya que solo le damos estilos al enlace así como un efecto hover.

Ahora le toca al Plugin Instagram By Misha del footer, esta vez le damos un ancho del cien por cien para que ocupe toda la pantalla, a las imágenes le damos un ancho del diez por ciento y un margen de cero, con ese ancho quedan perfectamente cuadradas ya que mostramos diez imágenes y el espacio es el correcto para ellas.

Le damos estilos a los iconos sociales del footer, esto no lo comentamos por que también es evidente ya que lo hemos hecho ya en el header y en el index dos veces.

Y por último le damos forma a la linea del copy right y al botón de subir arriba, y con esto será todo en el tutorial de hoy para la creación de un Theme para WordPress paso a paso, mañana iremos a por la parte del single o artículo.

Recordar que si tenéis alguna duda o queréis mejorar el tutorial de alguna manera podéis dejar un comentario o poneros en contacto conmigo por Twitter en @ricardfs, y por supuesto podéis ver los cambios realizados hasta ahora en creación de un Theme para WordPress paso a paso

17 mayo, 2020 por ricard

ricard
Soy Ricard FS, me dedico a la programación desde el año 2000, me dediqué en pleno a WordPress desde el año 2015, ahora creo Plugins y Theme para WordPress desde código cero, y me gusta la divulgación de código, por ello la creación de este blog.

Deja tu comentario

  1. Julia dice:

    Buenas Ricard FS, ¿sabes cuantos días más o menos tardarás en completar todo el tutorial?, gracias.

    1. ricard dice:

      En principio consta de doce partes Julia, es posible que se añada algunas más, no estoy seguro de ello, doce partes, si hacemos una al día, siempre que nos sea posible claro, pues cuenta que faltarán unos diez días más o menos.

  2. elena dice:

    Buenas, he descargado el plugin para instagram pero me pide un número de licencia y en los archivos del plugin no lo encuentro, ¿funciona igual o no?

    1. ricard dice:

      Buenas Elena, la licencia es para recibir las actualizaciones del plugin durante un año, puedes poner “alnaseos@gmail.com”, con eso estará listo para recibirlas.

      Un saludo

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

:wink: :-| :-x :twisted: :) 8-O :( :roll: :-P :oops: :-o :mrgreen: :lol: :idea: :-D :evil: :cry: 8) :arrow: :-? :?: :!: