Crear un tema y funcionalidades avanzadas

Introducción

Muchos temas de pago avanzados utilizan una estructura más compleja que los temas gratuitos. A menudo, la carpeta del tema tiene carpetas adicionales y los temas ofrecen muchas más posibilidades. Los temas avanzados tienen en una de sus carpetas uno o más archivos PHP que contienen funciones o clases, pero también archivos JavaScript u otras librerías. Algunos temas incluso están completamente construidos en Ajax. Otros integran directamente complementos muy grandes como WooCommerce, BuddyPress, etc. WordPress es tan flexible que ofrece todas las posibilidades.

La carpeta a menudo se denomina include o inc, pero cada desarrollador puede darle el nombre que desee, o incluso crear uno o más archivos directamente en la raíz del tema, siendo la gestión de archivos y carpetas muy flexible. Para una mejor organización, sigue siendo preferible clasificar los archivos de su tema en carpetas.

Si ha utilizado temas avanzados anteriormente, es posible que haya comprobado que hay una o varias páginas de administración, gracias a las cuales puede configurar el tema. A veces, incluso las extensiones son una parte integral del tema.

En este capítulo, verá cómo crear una página de opciones con una pestaña en el menú de administración para su tema y cómo personalizarla, cómo añadir métodos PHP a su tema usando...

Crear el tema

Para crear un tema avanzado, primero debe seleccionar un tema. En este ejemplo, está comenzando desde un tema existente. Tome uno cuyo diseño principal, es decir, el diseño general del sitio (header, footer, sidebar, content, etc.), sea parecido al tema final. Si algunas funciones ya están integradas, le ahorrará tiempo. Pero tenga cuidado de no elegir un tema que sea demasiado complejo, cuya arquitectura no comprenda.

Además, existen los llamados temas "blank", "starter" o "vacíos" en español, que son temas vacíos que permiten comenzar desde el principio. Puede encontrarlos fácilmente haciendo una búsqueda en Internet de "tema en blanco de WordPress", y si desea temas responsivos, haga la siguiente búsqueda: "tema en blanco de WordPress responsivo".

Los temas "bones" o "html5 blank" son temas en blanco HTML5 gratuitos y responsivos, a partir de los cuales puede crear fácilmente sus propios temas. Aquí están las direcciones donde puede obtenerlos:

Del mismo modo, si está utilizando Bootstrap por ejemplo, puede buscar un tema en blanco que integre Bootstrap:

Pero los temas que ofrece WordPress también son minimalistas, en HTML5 y responsivos...

Personalizar el tema de base

Añadir un logotipo con la función add_theme_support()

WordPress ofrece agregar un logotipo desde la versión 4.5 (consulte el capítulo Personalizar el sitio con el archivo functions.php, sección Personalizar de un tema con add_theme_support()).

Actualmente está usando el tema Twenty Twenty para crear su propio tema, por lo que esta opción ya está implementada en el sitio, pero algunos temas no la usan.

Encontrará esta función en el archivo functions.php del tema Twenty Twenty, líneas 66 y 76:

     // Custom logo. 
     $logo_width  = 120; 
     $logo_height = 90; 
 
     add_theme_support( 
          'custom-logo', 
          array( 
               'height'      => $logo_height, 
               'width'       => $logo_width, 
               'flex-height' => true, 
               'flex-width'  => true, 
          ) 
     ); 

Para aquellos que usan un tema en el que esta opción no está implementada, simplemente agregue estas...

Añadir una pestaña Opciones del tema

En el directorio del tema, dentro de la carpeta inc, cree un archivo y asígnele el nombre control.php.

<?php 
add_theme_page($page_title,$menu_title,$capability,$menu_slug, 
$function); 
?> 

<?php ...

Configurar la página de opciones

Para configurar la página de opciones, agregue código HTML en el método displayOptions(). En este método es donde se insertan los elementos de la página.

Utilice HTML de otras páginas de administración para obtener una apariencia uniforme. Observe la estructura HTML usando la consola de inspección de código y agregue la misma estructura HTML (div, class e id), luego cambie el título de la página.

Para agregar el código HTML, cierre y vuelva a abrir las etiquetas PHP. Esto evita hacer numerosas visualizaciones con la función echo.

<?php 
class MB { 
          static function init(){ 
          add_theme_page("The mobility options", 'Opciones del tema', 
          'edit_themes', 'control.php', array('MB','displayOptions')); 
          } 
          static function displayOptions(){ 
?> 
              <div class="wrap"> 
                <h2>Opciones del tema</h2> 
                <!--configuración--> 
         ...

Añadir una hoja de estilo CSS y un script JavaScript

En la carpeta inc, cree una carpeta js. Dentro deberá haber un archivo JavaScript y una carpeta css que contenga un archivo CSS. Nómbrelos como desee, por ejemplo: control.js y control.css.

Cree un nuevo método en la clase y llame a las funciones wp_register_style() para registrar el estilo, y luego wp_enqueue_style() para mostrar el estilo. Haga lo mismo con los scripts, gracias a las funciones wp_register_script() y wp_enqueue_script().

Este es el contenido del método addAdminHeader():

static function addAdminHeader(){ 
   wp_register_style('Mb_css', 
                   get_template_directory_uri().'/inc/css/control.css', 
                   array() 
                   ); 
   wp_enqueue_style('Mb_css'); 
 
   wp_register_script('Mb_js', 
                   get_template_directory_uri().'/inc/js/control.js', 
         ...

Añadir un banner

Para agregar una imagen al tema, comience creando el código HTML en el método displayOptions().

static function get_upload_field($id) { 
   $field = '<input id="'.$id.'" type="file" name="attachment_'.$id.'" /> 
             <span class="submit"><input name="Mb_upload" type="submit" 
             value="Enviar" class="button panel-upload-save" /> 
             </span>'; 
return $field; 
} 

static function displayOptions(){ 
?> 
         <div class="wrap"> 
             <h2>Opciones del tema</h2> 
             <form action="#" method="post" enctype="multipart/form-data"> 
             <h3>Banner</h3> 
             <h4>Descargue un banner de 728x90 píxeles:</h4> 
                   <div id='imgupload'> 
                         <?php echo MB::get_upload_field('image'); ?> 
                   </div> 
             </form> 
         </div> 
<?php 
}...

Crear un botón que restablece las opciones predeterminadas

Para restablecer los argumentos por defecto, cree un botón input que tenga el valor Reiniciar. Agréguelo en la parte superior del formulario HTML <form> en el método displayOptions().

static function displayOptions(){ 
 $aOptions = MB::initOptions(); 
 ?> 
 <div class="wrap"> 
 <h2>Opciones del tema</h2> 
 <form action="#" method="post" enctype="multipart/form-data"> 
 <input type="submit" class="button" name="Mb_reset" 
value="Reiniciar" /> 
 <br /> 
 <h3>Banner</h3> 
 <h4>Vista previa:</h4> 
 <div id="vistapreviaimagen"> 
 <img src="<?php echo($aOptions['image']); ?>" /> 
 </div> 
 <h4>Descargue un banner de 728x90 píxeles:</h4> 
 <div id='imgupload'> 
 <?php echo MB::get_upload_field('image'); ?> 
 </div> 
 
 </form> 
 </div> 
 <?php 
} 

Agregue al método init() un método que se ejecute cuando hagamos clic en el botón Reiniciar. Llame al método initOptions(). Contendrá...

Elegir un color con Iris (color picker)

En esta parte, recuperará un color de una paleta de colores de tipo color picker con Iris. El usuario podrá elegir el color del pie de página y de la línea que separa el encabezado del contenido, para personalizar su sitio.

static function addAdminHeader(){ 
 wp_register_style('Mb_css', get_template_directory_uri(). 
'/my-inc/css/my-inc.css', array()); 
 wp_enqueue_style('Mb_css'); 
 
 wp_register_script('Mb_js', get_template_directory_uri(). 
'/my-inc/js/my-inc.js', array()); 
 wp_enqueue_script('Mb_js'); 
 
 wp_enqueue_style('iris'); 
 wp_enqueue_script('iris'); 
} 

$aOptions['color'] = '#d1174c'; 

<h3>Color del pie de página...

Añadir textos en la página de inicio

En esta parte, agregará a la página de opciones la posibilidad de escribir un texto de bienvenida con un editor WYSIWYG, un título y una imagen. Para agregar un editor WYSIWYG use la plataforma TinyMCE, que permite al usuario formatear el texto de bienvenida.

$aOptions['hometitle'] ="mobility"; 
 
$aOptions['homedesc'] ="<p>Et quoniam mirari posse quosdam  
peregrinos existimo haec lecturos forsitan, si contigerit,  
quamobrem cum oratio ad ea monstranda deflexerit quae Romae  
gererentur, nihil praeter seditiones narratur et tabernas et  
vilitates harum similis alias, summatim causas perstringam nusquam 
a veritate sponte propria digressurus.</p> 
<br /> 
<p>Sed fruatur sane hoc solacio atque hanc insignem ignominiam,  
quoniam uni praeter se inusta sit, putet esse leviorem, dum modo,  
cuius exemplo se consolatur, eius exitum expectet, praesertim cum  
in Albucio nec Pisonis libidines nec audacia Gabini fuerit ac  
tamen hac una plaga conciderit, ignominia senatus.</p>"; 
 
$aOptions['home-image'] =  
get_template_directory_uri().'/images/themobility/welcome.jpg'; 

<div class="bloque2"> 
 <h3>Añadir una presentación:</h3> 
 <div id="homeleft"> 
 
    <h4>título:</h4> 
    <input type="text" style="width:80%" name="hometitle" 
    id="hometitle" value="<?php echo($aOptions['home-title']); ?>"/> 
 
    <h4>texto:</h4> 
    <div class="txtmce"> 
        <?php //Código para tinymce ?> 
   ...

Añadir una sidebar en el footer para la página de inicio

Agregue una sidebar o barra lateral para mostrar tres columnas con widgets debajo del texto de bienvenida.

Para hacer esto, cree una sidebar en el archivo functions.php, con la función register_sidebar() de WordPress (vea el capítulo Personalizar el sitio con el archivo functions.php, sección Crear barras laterales y zonas para ellas).

Luego, agregue la función al cuerpo de WordPress usando un hook de acción, con la acción widget_init. La acción tiene lugar durante la inicialización de los widgets. En el caso del tema Twenty Twenty, esta función ya existe con el nombre twentytwenty_sidebar_registration(), así que solo agréguele su sidebar.

// Footer mobility. 
    register_sidebar( array( 
        'name'          => 'sidebar inicio, 
        'id'            => 'sidebar-home', 
        'description'   => 'sidebar 3 columnas para el pie de página del inicio', 
        'before_widget' => '<li id="%1$s" class="widget %2$s">', 
        'after_widget'  => '</li>', 
        'before_title'  => '<h3 class="widget-title">', 
        'after_title'   => '</h3>', 
    ) ); 

Ahora agregue el código que hace que la sidebar aparezca en el archivo page-inicio.php (front-page.php o index.php), ya que la sidebar solo se muestra para la página de inicio.

<?php 
if( is_active_sidebar('sidebar-home')){ 
   echo '<ul id="sidebar-home">'; 
   dynamic_sidebar('sidebar-home'); 
   echo '</ul>'; 
} 
?> 

En este punto, al activar el tema el usuario web no ve la sidebar, porque...

En resumen

Ha creado un archivo control.php, que consta de una clase con métodos. Los detalles se pueden encontrar en los comentarios dentro de cada método:

<?php 
if(!class_exists("MB")) { 
 class MB { 
 static function init(){ 
 // leído cada vez que se carga la página gracias a un hook de acción 
 // fuera de la clase 
 // obtiene las variables $_POST y $_FILE 
 // muestra el botón en la administración 
 } 
 static function initOptions($reset=false){ 
 // función que devuelve la tabla de opciones 
 // actualiza la tabla con los valores originales 
 // o con los valores modificados 
 } 
 static function displayOptions(){ 
 // muestra en la página de administración código HTML 
 } 
 static function addStyleColor(){ 
 // agrega un estilo CSS en línea a la función wp_head() de WordPress 
 // gracias a un hook de acción. 
 } 
 static function addAdminHeader(){ 
 // agrega los scripts JavaScript y los estilos CSS al encabezado de 
 // la administración gracias a un hook de acción fuera de la clase 
 } 
 static function get_upload_field($id) { 
 //...