¡Acceso ilimitado 24/7 a todos nuestros libros y vídeos! Descubra la Biblioteca Online ENI. Pulse aquí
¡Acceso ilimitado 24/7 a todos nuestros libros y vídeos! Descubra la Biblioteca Online ENI. Pulse aquí
  1. Libros
  2. WordPress
  3. Crear un tema clásico y funcionalidades
Extrait - WordPress Desarrolle temas avanzados con PHP (teoría, ejercicios prácticos y recursos) (3ª edición)
Extractos del libro
WordPress Desarrolle temas avanzados con PHP (teoría, ejercicios prácticos y recursos) (3ª edición) Volver a la página de compra del libro

Crear un tema clásico y funcionalidades

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.

Los temas que ofrece WordPress son minimalistas, en HTML5 y responsivos y permiten dominarlos de manera sencilla. También son fácilmente modificables. WordPress ofrece temas actualizados, integrando más o menos funcionalidades básicas según el caso.

Aquí encontrará todos los temas de WordPress: https://es.wordpress.org/themes/author/wordpressdotorg

Para seguir este capítulo, tomará como base el tema clásico de WordPress: Twenty Twenty-One. Pero, por supuesto, puede tomar el tema clásico que desee, como por ejemplo un tema en blanco u otro. Lo que vamos a ver funciona con cualquier tema clásico.

Para empezar, duplique el tema: copie y pegue el tema Twenty Twenty-One en la carpeta wp-content/themes. Renómbrelo dándole el nombre que desee; en este ejemplo llámelo "themobility".

Vaya a la carpeta themobility y abra el archivo style.css. En este ejemplo, cambie el encabezado del archivo de esta manera...

Personalizar el tema de base

1. Limpiar el tema y preparar la base

Para aligerar el código, elimine del archivo functions.php las funciones que no le sirven o en los archivos llamados por el archivo functions.php. En nuestro ejemplo, no vamos a modificar este archivo por el momento y ver los problemas que podemos encontrar a medida que avanzamos.

En esta etapa, puede saber qué hacen la mayoría de las funciones del archivo functions.php (así como las funciones presentes en los archivos llamados por este mismo archivo), presentes en las carpetas inc, assets, classes, templates o template-parts. Hemos visto estas funciones en los capítulos anteriores.

Puede limpiar el tema por completo, pero tenga cuidado; antes de eliminar una función averigüe su utilidad, ya sea buscando en Internet o directamente en el códex. Si aún no se siente cómodo con las funciones de WordPress, es mejor dejar algo de código, en lugar de eliminar un código que sería importante; esto vale para cualquier tema. Por eso es importante analizar adecuadamente un tema antes de emprender su programación.

Cree una carpeta llamada "imágenes" en la raíz del tema y, dentro de esta carpeta, cree una carpeta llamada "themobility", en la que se ubicarán todas las imágenes utilizadas para diseñar el tema. Se pueden llamar mediante el archivo CSS con el estilo background o integrarse en las páginas del sitio web con la etiqueta HTML <img>. Coloque en el interior de la carpeta las imágenes utilizadas para el diseño del sitio.

Podrá descargar las imágenes en cuestión desde la pestaña Material para descargar.

Realice algunos cambios en el archivo CSS para que el tema sea más personal. Inserte imágenes de fondo y estructure...

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 un tema con add_theme_support()).

Actualmente está usando el tema Twenty Twenty-One 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-One, líneas 103 y 115:

// Custom logo. 
     $logo_width = 300; 
    $logo_height = 100; 
 
    add_theme_support( 
        'custom-logo', 
        array( 
            'height'                  => $logo_height, 
            'width'                   => $logo_width, 
            'flex-width'              =>...

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.

1. La función add_theme_pages()

Para crear una subpestaña en la pestaña Apariencia, use la función add_theme_page():

<?php 
add_theme_page($page_title,$menu_title,$capability,$menu_slug, 
$function); 
?> 
  • $page_title: nombre de la página que se va a incluir en la etiqueta <title>.

  • $menu_title: nombre que aparecerá en el menú.

  • $capability: permisos ofrecidos al usuario según su rol. Ver la lista completa en: https://wordpress.org/support/article/roles-and-capabilities

  • $menu_slug: nombre del enlace de la URL.

    Ejemplo: /wp-admin/themes.php?page=$menu_slug.

  • $function: nombre de la función que muestra el contenido de la pestaña.

2. Crear la pestaña

Para crear una pestaña, debe editar el archivo control.php y crear un objeto PHP allí. Para hacer esto, cree una clase llamada MB.

Dentro de la clase, cree un método de inicialización, llámelo init().

Dentro del método init(), use la función add_theme_page(), para crear la pestaña cuando la página se inicialice.

Luego, cree un segundo método displayOptions() para mostrar el contenido de la página.

Lo que da:

<?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...

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().

Consulte el capítulo Personalizar el sitio con el archivo functions.php, sección Añadir hojas de estilo y scripts, para obtener más detalles sobre las funciones que utilizan scripts y estilos.

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().

1. Crear un método con un campo input de tipo file

Cree un método get_upload_field(), que contenga un campo input de tipo file. Para evitar reescribir el mismo código cada vez, use este método cada vez que necesite cargar una imagen con un campo input de tipo file.

Para reconocer el campo y recuperar su valor cada vez que se valida el formulario, pase al método un argumento $id, un identificador único:

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; 
} 

2. Crear el código HTML

Agregue el código HTML al método displayOptions() y llame al método get_upload_field(), para mostrar el campo input file.

El código para el método displayOptions() se ve así:

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...

Crear un botón que restablece las opciones predeterminadas

Para restablecer los argumentos por defecto, cree un botón input que tenga el valor Reinicializar. 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="Reinicializar" /> 
 <br /> 
 <h3>Banner</h3> 
 <h4>Vista previa:</h4> 
 <div id="vistapreviaimagen"> 
 <img src="<?php echo($aOptions['image']); ?>" /> 
 </div> 
 <h4> Cargue una imagen 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 Reinicializar. 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.

1. Añadir el script JavaScript y el CSS Iris, paleta de WordPress

Para hacer esto, utilizará un script Iris JavaScript y su CSS, que ya forman parte del núcleo de WordPress (consulte el capítulo Personalizar el sitio con el archivo functions.php, sección Añadir hojas de estilo y scripts).

Para poder usarlo, llame al script y al CSS en el método addAdminHeader(), después de los CSS y otros scripts:

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'); 
} 

2. Añadir el color por defecto

Agregue en el método initOptions() el color por defecto que se usará para personalizar el sitio web, en la tabla $aOptions. No olvide elegir una nueva clave única para la tabla:

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

3. Añadir el formulario

Añada en el método displayOptions() el código HTML para la administración. Es un formulario que tiene un input...

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.

1. Añadir el código a los métodos de la clase

Agregue en el método initOptions() el texto por defecto(en el ejemplo, "texto falso"), el título predeterminado y la imagen predeterminada. Inserte la imagen por defecto en la carpeta images - themobility. No olvide elegir nuevas claves únicas para la tabla. $aOptions:

$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'; 

Agregue en el método displayOptions() el código HTML para la administración, compuesto por diferentes etiquetas input:

<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...

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-One, esta función ya existe con el nombre twentytwenty_one_widgets_init(), así que solo tiene que añadir 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, 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 no contiene ningún widget por defecto. Así que agregue widgets y no olvide...

Modificación del pie de página

Para modificar el pie de página, abra el archivo footer.php. Va a retirar el logotipo para que en su lugar aparezca el título del sitio. Encontrará código que ya hemos visto y que puede entender:

<div class="site-name"> 
                <?php if ( has_custom_logo() ) : ?> 
                    <div class="site-logo"><?php the_custom_logo(); ?></div> 
                <?php else : ?> 
                    <?php if ( get_bloginfo( 'name' ) && 
get_theme_mod( 'display_title_and_tagline', true ) ) : ?> 
                        <?php if ( is_front_page() && ! is_paged() ) : ?> 
                            <?php bloginfo( 'name' ); ?> 
                        <?php...

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) { 
 //...

Conclusión

Crear un tema avanzado puede resultar muy beneficioso para los usuarios que no estén familiarizados con PHP. Puede agregar todo tipo de opciones y guardarlas en la base de datos o modificar las opciones existentes.

Puede agregar enlaces a redes sociales, una presentación de diapositivas, cambiar la frase del footer, crear tres columnas como opciones en lugar de crearlas con una barra lateral, etc.

También puede agregar funciones al archivo functions.php para mejorar el tema, agregar plantillas de página, modificar bucles de WordPress o archivos para formatos de artículos, etc.

Depende de usted imaginar su propio tema.