DeWebIdea » WordPress » Desarrollar un tema de WordPress desde cero (IV)

Desarrollar un tema de WordPress desde cero (IV)

Diseño de un tema para wordpress

Continuamos con la serie de post sobre cómo preparar una plantilla para wordpress. En este post trataremos sobre:

  • Añadir campos personalizados, en este caso los enlaces a redes sociales en el sidebar del wordpress
  • Activar la imagen destacada y mostrarla en el blog, tanto en el listado de artículos como en el artículo.
  • Activación y creación de un menú utilizando el archivo functions.php

Añadir campos personalizados

Algunas veces nos interesa añadir campos con configuración personalizada, que se puedan cambiar cómodamente desde el panel de administración. Por ejemplo, los enlaces a las redes sociales visible en nuestro sidebar.

plantilla-bootsrap-blog-28

Enlaces a las redes sociales en el sidebar de nuestra plantilla

En primer lugar, vamos a añadir una sección nueva en el menú de la izquierda del panel de administración del wordpress, llamada ajustes personalizados, en function.php:

// Ajustes personalizados
function ajustes_personalizados_add_menu() {
  add_menu_page( 'Ajustes Personalizados', 'Ajustes Personalizados', 'manage_options', 'ajustes-personalizados', 'ajustes_personalizados_page', null, 99);
}
add_action( 'admin_menu', 'ajustes_personalizados_add_menu' );

Creamos una página básica con un formulario y un botón de envío. Añadimos el nuevo código a continuación del anterior.

// Creamos la pagina para ajustes
function ajustes_personalizados_page() { ?>
 <div class="wrap">
   <h1>Ajustes Personalizados</h1>
   <form method="post" action="options.php">
   <?php
    settings_fields('section');
    do_settings_sections('theme-options');
    submit_button();
   ?>
   </form>
 </div>
<?php }

El resultado sería:

plantilla-bootsrap-blog-29

Nueva página de ajustes a los enlaces de redes sociales, accesible desde el menú de gestión

Ahora vamos a crear un campo de entrada para Twitter:

// Twitter
function campo_twitter() { ?>
<input type="text" name="twitter" id="twitter" value="<?php echo get_option('twitter'); ?>" />
<?php }

Configuramos la página para mostrar, aceptar y guardar los campos de opción.

function ajustes_campo_page_setup() {
 add_settings_section('section', 'Redes Sociales', null, 'theme-options');
 add_settings_field('twitter', 'Twitter URL', 'campo_twitter', 'theme-options', 'section');
  
 register_setting('section', 'twitter');
}
add_action( 'admin_init', 'ajustes_campo_page_setup' );
plantilla-bootsrap-blog-30

Nuestra nueva página de ajustes con la opción de añadir y modificar el enlace a twitter

Vamos a realizar otro ejemplo para faccebook, añadimos la función campo_facebook(), y la función ajustes_campo_page_setup() la modificamos para añadir la llamada a la función del campo de Facebook y el registro del nuevo campo.

// Twitter
function campo_twitter() { ?>
 <input type="text" name="twitter" id="twitter" value="<?php echo get_option('twitter'); ?>" />
<?php }

function campo_facebook() { ?>
 <input type="text" name="facebook" id="facebook" value="<?php echo get_option('facebook'); ?>" />
<?php }
  
function ajustes_campo_page_setup() {
 add_settings_section('section', 'Redes Sociales', null, 'theme-options');
 add_settings_field('twitter', 'Twitter URL', 'campo_twitter', 'theme-options', 'section');
 add_settings_field('facebook', 'Facebook URL', 'campo_facebook', 'theme-options', 'section');
  
 register_setting('section', 'twitter');
 register_setting('section', 'facebook');
}
add_action( 'admin_init', 'ajustes_campo_page_setup' );
plantilla-bootsrap-blog-31

Ajustes personalizados para Twitter y facebook en nuestra plantilla para wordpress

Una vez que en el panel de administración se puede guardar, nos faltaría mostrarlo en el sidebar, buscamos el archivo sidebar.php y modificamos el código:

<div class="sidebar-module">
 <h4>Elsewhere</h4>
 <ol class="list-unstyled">
  <li><a href="#">GitHub</a></li>
  <li><a href="#">Twitter</a></li>
  <li><a href="#">Facebook</a></li>
 </ol>
</div>

por:

<div class="sidebar-module">
 <h4>Redes Sociales</h4>
 <ol class="list-unstyled">
  <li><a href="<?php echo get_option('twitter'); ?>">Twitter</a></li>
  <li><a href="<?php echo get_option('facebook'); ?>">facebook</a></li>
 </ol>
</div>

Ya están disponibles los enlaces desde la administración del blog:

plantilla-bootsrap-blog-32

Vista del sidebar con los campos personalizados de las redes sociales

 

La imagen destacada en wordpress

En wordPress es posible asignar una imagen destacada, es muy sencillo integrar esta funcionalidad en nuestro blog. Añadir en functions.php el código:

// Soportar imagen destacada
add_theme_support( 'post-thumbnails' );

En la administración del wordPress ya debe aparecer el apartado de imagen destacada en entradas o páginas:

plantilla-bootsrap-blog-33

Imagen destacada, después de añadir el nuevo código en functions.php

Mostrar la imagen destacada en el post

Una vez añadida una imagen destacada, para mostrarla en el post, buscad el archivo content-single.php y colocad el código sobre el titulo del post

<?php
if ( has_post_thumbnail() ) {
 the_post_thumbnail('medium');
} ?>

Las funciones utilizadas son: has_post_thumbnail(), nos permite saber si ese post tiene una imagen destacada asignada, y the_post_thumbnail(), nos coloca la imagen destacada, nos permite decidir el tamaño de la imagen:

  • thumbanail
  • medium
  • medium_large
  • large
  • full

Si queremos mostrar la imagen de cada post en la página principal, buscad el archivo content.php y colocamos el código:

<?php
if ( has_post_thumbnail() ) {?>
 <div class="row">
 <div class="col-md-4">
 <?php    the_post_thumbnail('thumbnail'); ?>
 </div>
 <div class="col-md-6">
 <?php the_excerpt(); ?>
 </div>
 </div><?php
} else {
 the_excerpt();
}
?>

Si nos fijamos bien, primero hacemos una comprobación por si no hay imagen destacada, colocamos solamente el contenido y en el caso de que sí posea imagen destacada, creamos dos columnas una de 4 con la imagen y otra de 6 con el contenido.

plantilla-bootsrap-blog-34

Adaptación de la plantilla para ver la imagen destacada en el listado de artículos

Crear menús en wordpress.

Ahora esta desactivado:

plantilla-bootsrap-blog-35

Menú Apariencia de wordpress sin la opción de menús

En el archivo function.php añadir:

/**
* Crear nuestros menús gestionables desde el
* administrador de WordPress.
*/

function bootstrap_menus() {
 register_nav_menus(
  array(
   'navegation' => __( 'Menú superior' )
  )
 );
}
add_action( 'init', 'bootstrap_menus' );

Si nos colocamos sobre apariencia:

plantilla-bootsrap-blog-36

Menú Apariencia de wordpress con la opción de menús

Ya esta activado el apartado de menú y es posible crear un menú desde el panel de gestión:

plantilla-bootsrap-blog-37

Creación de un menú desde el panel de gestión del wordpress

Nos falta colocarlo en el frontal. En el archivo header.php, buscamos el código:

<nav class="nav blog-nav">
 <?php wp_list_pages( '&title_li='); ?>
</nav>

Y lo modificamos por:

<?php wp_nav_menu( array( 'theme_location' => 'navegation' ) ); ?>

Nos queda:

plantilla-bootsrap-blog-38

Vista del nuevo menú, el próximo paso es hacer que se parezca al de nuestra plantilla

Nuestro menú aparece, pero no con los estilos que nos interesan. ¿Cómo integramos los estilos? La solución es utilizar la clase “Walker” a la que llamaremos desde la función wp_nav_menu.
Primero descargamos la clase wp-bootstrap-navwalker desde https://github.com/twittem/wp-bootstrap-navwalker y lo colocamos en la carpeta de nuestro tema.

plantilla-bootsrap-blog-39

Colocamos la clase “Walker” en nuestro tema

En el archivo functions.php agregar:

// Registramos la clase Custom Navigation Walker
 require_once('clases/wp_bootstrap_navwalker.php');

Nos falta en el archivo header.php buscamos:

<?php wp_nav_menu( array( 'theme_location' => 'navegation' ) ); ?>

Y lo modificamos por:

wp_nav_menu( array(
 'menu' => 'navegation',
 'theme_location' => 'navegation',
 'depth' => 2,
 'container' => 'div',
 'container_class' => 'collapse navbar-collapse',
 'container_id' => 'bs-example-navbar-collapse-1',
 'menu_class' => 'nav navbar-nav',
 'fallback_cb' => 'wp_bootstrap_navwalker::fallback',
 'walker' => new wp_bootstrap_navwalker())
 );

Si comprobamos el resultado:

plantilla-bootsrap-blog-40

Ya nos quedan menos ajustes para personalizar nuestro menú despues de añadir la clase “Walker”

Sé el primero en comentar en «Desarrollar un tema de WordPress desde cero (IV)»

Deja un comentario

Tu dirección de correo electrónico no será publicada.


*


Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies